-
Notifications
You must be signed in to change notification settings - Fork 52
feat(minipay): redirect to Account page and hide Governance tab until staked #480
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 1 commit
b7e0634
e1d8318
ba7b915
ea1f253
c6b57f4
00caac7
8b48726
496abbb
436424e
63eaf37
920befe
3ee8a13
333b3ff
165e3c4
b100d05
c466ad9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| 'use client'; | ||
| import { useMemo } from 'react'; | ||
| import { useRouter } from 'next/navigation'; | ||
| import { useEffect, useMemo } from 'react'; | ||
| import { Fade } from 'src/components/animation/Fade'; | ||
| import { SkeletonBlock } from 'src/components/animation/Skeleton'; | ||
| import { SolidButton } from 'src/components/buttons/SolidButton'; | ||
|
|
@@ -17,6 +18,15 @@ import { useIsMiniPay } from 'src/utils/useIsMiniPay'; | |
| import { useStakingMode } from 'src/utils/useStakingMode'; | ||
|
|
||
| export default function Page() { | ||
| const isMiniPay = useIsMiniPay(); | ||
| const router = useRouter(); | ||
|
|
||
| useEffect(() => { | ||
| if (isMiniPay) { | ||
| router.replace('/account'); | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The home redirect drops the current query string, so a session opened at Useful? React with 👍 / 👎. |
||
| } | ||
| }, [isMiniPay, router]); | ||
|
|
||
| const { groups, totalVotes } = useValidatorGroups(); | ||
|
|
||
| return ( | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,7 @@ import { useCallback } from 'react'; | |
| import { ChevronIcon } from 'src/components/icons/Chevron'; | ||
| import { CeloGlyph } from 'src/components/logos/Celo'; | ||
| import { DropdownMenu } from 'src/components/menus/Dropdown'; | ||
| import { useStCELOBalance } from 'src/features/account/hooks'; | ||
| import Bridge from 'src/images/icons/bridge.svg'; | ||
| import Dashboard from 'src/images/icons/dashboard.svg'; | ||
| import Delegate from 'src/images/icons/delegate.svg'; | ||
|
|
@@ -18,7 +19,7 @@ import { useAccount } from 'wagmi'; | |
|
|
||
| const LINKS = (isWalletConnected?: boolean) => [ | ||
| { label: 'Staking', to: '/', icon: Staking }, | ||
| { label: 'Governance', to: '/governance', icon: Governance }, | ||
| { label: 'Governance', to: '/governance', icon: Governance, hideInMiniPayUntilStaked: true }, | ||
| { label: 'Delegate', to: '/delegate', icon: Delegate, hideInMiniPay: true }, | ||
| { label: 'Bridge', to: '/bridge', icon: Bridge, hideInMiniPay: true }, | ||
| { label: 'Names', to: 'https://names.celo.org', icon: ENS, hideInMiniPay: true }, | ||
|
|
@@ -30,6 +31,8 @@ export function NavBar({ collapsed }: { collapsed?: boolean }) { | |
| const { address } = useAccount(); | ||
| const trackEvent = useTrackEvent(); | ||
| const isMiniPay = useIsMiniPay(); | ||
| const { stCELOBalances } = useStCELOBalance(address); | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The new Useful? React with 👍 / 👎. |
||
| const hasStaked = stCELOBalances.total > 0n; | ||
|
|
||
| const handleNavClick = useCallback( | ||
| (item: string) => { | ||
|
|
@@ -43,6 +46,7 @@ export function NavBar({ collapsed }: { collapsed?: boolean }) { | |
| <ul className="flex list-none items-center justify-center space-x-6 overflow-hidden"> | ||
| {LINKS(!!address) | ||
| .filter((l) => !(isMiniPay && l.hideInMiniPay)) | ||
| .filter((l) => !(isMiniPay && l.hideInMiniPayUntilStaked && !hasStaked)) | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The new MiniPay Governance filter depends on Useful? React with 👍 / 👎. |
||
| .map((l) => { | ||
| const isSelected = l.to === pathname || (l.to !== '/' && pathname?.startsWith(l.to)); | ||
|
|
||
|
|
@@ -77,6 +81,8 @@ export function MobileNavDropdown({ className }: { className?: string }) { | |
| const { address } = useAccount(); | ||
| const trackEvent = useTrackEvent(); | ||
| const isMiniPay = useIsMiniPay(); | ||
| const { stCELOBalances } = useStCELOBalance(address); | ||
| const hasStaked = stCELOBalances.total > 0n; | ||
|
|
||
| const handleNavClick = useCallback( | ||
| (item: string) => { | ||
|
|
@@ -97,6 +103,7 @@ export function MobileNavDropdown({ className }: { className?: string }) { | |
| menuClasses="space-y-8 py-6 px-8" | ||
| menuItems={LINKS(!!address) | ||
| .filter((l) => !(isMiniPay && l.hideInMiniPay)) | ||
| .filter((l) => !(isMiniPay && l.hideInMiniPayUntilStaked && !hasStaked)) | ||
| .map((l) => { | ||
| return ( | ||
| <Link | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This redirect is unconditional for MiniPay, so it also runs when no wallet address is connected (or before wagmi finishes hydrating). In that state,
/accountimmediately redirects back to/viausePageInvariant(!!address, '/')insrc/app/account/page.tsx, creating a/↔/accountnavigation loop for MiniPay users and leaving no stable landing page. Redirecting only after account readiness (or whenaddressis present) avoids that loop.Useful? React with 👍 / 👎.