feat(minipay): redirect to Account page and hide Governance tab until staked

src/app/account/page.tsx

@@ -44,6 +44,7 @@ import UnlockIcon from 'src/images/icons/unlock.svg';
 import WithdrawIcon from 'src/images/icons/withdraw.svg';
 import { shortenAddress } from 'src/utils/addresses';
 import { usePageInvariant } from 'src/utils/navigation';
+import { useIsMiniPay } from 'src/utils/useIsMiniPay';
 import { StakingMode, useStakingMode } from 'src/utils/useStakingMode';
 import useTabs from 'src/utils/useTabs';
 import { Address } from 'viem';
@@ -52,7 +53,8 @@ import { useAccount } from 'wagmi';
 export default function Page() {
   const account = useAccount();
   const address = account?.address;
-  usePageInvariant(!!address, '/');
+  const isMiniPay = useIsMiniPay();
+  usePageInvariant(!!address || isMiniPay, '/');
 
   const { signingFor, isVoteSigner } = useVoteSignerToAccount(address);
   const { balance: walletBalance } = useBalance(signingFor);
@@ -104,6 +106,7 @@ export default function Page() {
           <LockButtons className="hidden md:flex" mode={mode} />
         )}
       </div>
+      {isMiniPay && totalLocked === 0n && <StakeCeloCta />}
       {mode === 'CELO' ? (
         <AccountStats
           walletBalance={walletBalance}
@@ -405,6 +408,32 @@ function TableTabs({
   );
 }
 
+function StakeCeloCta() {
+  const showTxModal = useTransactionModal();
+
+  return (
+    <div className="space-y-3 border border-taupe-300 bg-white px-3 py-4 md:px-5 md:py-5">
+      <h3 className="font-serif text-xl sm:text-2xl">Stake your CELO</h3>
+      <p className="text-sm sm:text-base">
+        Earn ~2% annually in exchange for agreeing to a three-day lockup. Staked CELO also gives you
+        access to participate in Celo Governance decisions so you can help shape the future of Celo,
+        the network powering MiniPay.
+      </p>
+      <SolidButton
+        onClick={() =>
+          showTxModal(TransactionFlowType.StakeStCELO, { action: StakeActionType.Stake })
+        }
+        className="bg-purple-300 text-white"
+      >
+        <div className="flex items-center space-x-1.5">
+          <Image src={StakingIcon} width={12} height={12} alt="" />
+          <span>Stake</span>
+        </div>
+      </SolidButton>
+    </div>
+  );
+}
+
 function AccountPageSkeleton() {
   return (
     <>

src/app/page.tsx

@@ -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,21 @@ 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');
+    }
+  }, [isMiniPay, router]);
+
+  if (isMiniPay) return null;
+
+  return <StakingPage />;
+}
+
+function StakingPage() {
   const { groups, totalVotes } = useValidatorGroups();
 
   return (

src/components/nav/NavBar.tsx

@@ -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 { useLockedBalance } 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 { lockedBalance } = useLockedBalance(address);
+  const hasStaked = lockedBalance > 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))
           .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 { lockedBalance } = useLockedBalance(address);
+  const hasStaked = lockedBalance > 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

src/features/locking/useLockedStatus.ts

@@ -1,7 +1,7 @@
 import { lockedGoldABI } from '@celo/abis';
 import { useQuery } from '@tanstack/react-query';
 import { useToastError } from 'src/components/notifications/useToastError';
-import { GCTime, StaleTime } from 'src/config/consts';
+import { BALANCE_REFRESH_INTERVAL, GCTime, StaleTime } from 'src/config/consts';
 import { Addresses } from 'src/config/contracts';
 import { useAccountDetails } from 'src/features/account/hooks';
 import { LockedStatus, PendingWithdrawal } from 'src/features/locking/types';
@@ -24,6 +24,7 @@ export function useLockedStatus(address?: Address) {
     },
     gcTime: GCTime.Short,
     staleTime: StaleTime.Short,
+    refetchInterval: BALANCE_REFRESH_INTERVAL,
   });
 
   useToastError(error, 'Error fetching locked balances and withdrawals');

src/features/transactions/TransactionFlow.tsx

@@ -66,6 +66,10 @@ export function TransactionFlow<FormDefaults extends {}>({
     votingPower.isLoading
   ) {
     Component = <SpinnerWithLabel className="py-20">Loading account data...</SpinnerWithLabel>;
+  } else if (confirmationDetails) {
+    Component = (
+      <TransactionConfirmation confirmation={confirmationDetails} closeModal={closeModal} />
+    );
   } else if (!isRegistered && !isVoteSigner && !requiresStCelo && mode === 'CELO') {
     Component = <AccountRegisterForm refetchAccountDetails={refetchAccountDetails} />;
   } else if (
@@ -74,10 +78,11 @@ export function TransactionFlow<FormDefaults extends {}>({
     !isVoteSigner &&
     !willVoteAndHasVotingPower
   ) {
-    Component = <LockForm showTip={true} />;
+    header = 'Lock CELO';
+    Component = <LockForm showTip={true} onConfirmed={onConfirmed} />;
   } else if (requiresStCelo && stCELOBalances.total <= 0n) {
     Component = <StakeStCeloForm showTip={true} />;
-  } else if (!confirmationDetails) {
+  } else {
     const action = (defaultFormValues as any).action as string;
     if (action) {
       if (action === DelegateActionType.Transfer) {
@@ -92,10 +97,6 @@ export function TransactionFlow<FormDefaults extends {}>({
     }
 
     Component = <FormComponent defaultFormValues={defaultFormValues} onConfirmed={onConfirmed} />;
-  } else {
-    Component = (
-      <TransactionConfirmation confirmation={confirmationDetails} closeModal={closeModal} />
-    );
   }
 
   return (