Change account fixes (#2238)

* Fix navigations * Fix type Co-authored-by: Leandro <[email protected]>
gnosis · Jan 21, 2022 · 77a9d57 · 77a9d57
1 parent d0cfce8
commit 77a9d57
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/src/custom/pages/Claim/CanUserClaimMessage.tsx b/src/custom/pages/Claim/CanUserClaimMessage.tsx
@@ -3,17 +3,16 @@ import { ButtonSecondary } from 'components/Button'
 import { ExternalLink } from 'theme'
 import { IntroDescription } from './styled'
 import { ClaimCommonTypes } from './types'
-import { useClaimDispatchers, useClaimState, useClaimTimeInfo } from 'state/claim/hooks'
+import { useClaimState, useClaimTimeInfo } from 'state/claim/hooks'
 import { ClaimStatus } from 'state/claim/actions'
 import { formatDateWithTimezone } from 'utils/time'
 
-type ClaimIntroductionProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
+type ClaimIntroductionProps = Pick<ClaimCommonTypes, 'hasClaims' | 'handleChangeAccount'> & {
   isAirdropOnly: boolean
 }
 
-export default function CanUserClaimMessage({ hasClaims, isAirdropOnly }: ClaimIntroductionProps) {
+export default function CanUserClaimMessage({ hasClaims, isAirdropOnly, handleChangeAccount }: ClaimIntroductionProps) {
   const { activeClaimAccount, claimStatus } = useClaimState()
-  const { setActiveClaimAccount } = useClaimDispatchers()
 
   const { airdropDeadline } = useClaimTimeInfo()
 
@@ -40,7 +39,7 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly }: ClaimI
       <IntroDescription center>
         <Trans>
           Unfortunately this account is not eligible for any vCOW claims. <br />
-          <ButtonSecondary onClick={() => setActiveClaimAccount('')} padding="0">
+          <ButtonSecondary onClick={handleChangeAccount} padding="0">
             Try another account
           </ButtonSecondary>{' '}
           or <ExternalLink href="https://cow.fi/">read more about vCOW</ExternalLink>

diff --git a/src/custom/pages/Claim/ClaimNav.tsx b/src/custom/pages/Claim/ClaimNav.tsx
@@ -14,19 +14,21 @@ export default function ClaimNav({ account, handleChangeAccount }: ClaimNavProps
   const { setActiveClaimAccount } = useClaimDispatchers()
 
   const isAttempting = useMemo(() => claimStatus === ClaimStatus.ATTEMPTING, [claimStatus])
-
-  if (!activeClaimAccount) return null
+  const hasActiveAccount = activeClaimAccount !== ''
 
   return (
     <TopNav>
       <ClaimAccount>
         <div>
-          <Identicon account={activeClaimAccount} size={46} />
-          <p>{activeClaimAccountENS ? activeClaimAccountENS : shortenAddress(activeClaimAccount)}</p>
+          {hasActiveAccount && (
+            <>
+              <Identicon account={activeClaimAccount} size={46} />
+              <p>{activeClaimAccountENS ? activeClaimAccountENS : shortenAddress(activeClaimAccount)}</p>
+            </>
+          )}
         </div>
-
         <ClaimAccountButtons>
-          {!!account && account !== activeClaimAccount && (
+          {!!account && (account !== activeClaimAccount || activeClaimAccount === '') && (
             <ButtonSecondary disabled={isAttempting} onClick={() => setActiveClaimAccount(account)}>
               Switch to connected account
             </ButtonSecondary>
@@ -36,7 +38,7 @@ export default function ClaimNav({ account, handleChangeAccount }: ClaimNavProps
            * last investment step
            * attempted claim in progress
            */}
-          {(investFlowStep < 2 || !isAttempting) && (
+          {hasActiveAccount && (investFlowStep < 2 || !isAttempting) && (
             <ButtonSecondary disabled={isAttempting} onClick={handleChangeAccount}>
               Change account
             </ButtonSecondary>

diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx
@@ -208,7 +208,11 @@ export default function Claim() {
       {/* Get address/ENS (user not connected yet or opted for checking 'another' account) */}
       <ClaimAddress account={account} toggleWalletModal={toggleWalletModal} />
       {/* Is Airdrop only (simple) - does user have claims? Show messages dependent on claim state */}
-      <CanUserClaimMessage hasClaims={hasClaims} isAirdropOnly={isAirdropOnly} />
+      <CanUserClaimMessage
+        hasClaims={hasClaims}
+        isAirdropOnly={isAirdropOnly}
+        handleChangeAccount={handleChangeAccount}
+      />
 
       {/* Try claiming or inform succesfull claim */}
       <ClaimingStatus />