Claim change account (#2173)

* make condition easier to read

* on account change set user to initial investment state

* prevent change account in last investment step

* change accnt when not claiming connected acct

* hide claim on attempting claim

* fix change account bug

* resetClaimUi action

* different string name

* remove TODO comment

src/custom/pages/Claim/ClaimNav.tsx

@@ -10,7 +10,7 @@ import Identicon from 'components/Identicon'
 type ClaimNavProps = Pick<ClaimCommonTypes, 'account' | 'handleChangeAccount'>
 
 export default function ClaimNav({ account, handleChangeAccount }: ClaimNavProps) {
-  const { activeClaimAccount, activeClaimAccountENS, claimStatus } = useClaimState()
+  const { activeClaimAccount, activeClaimAccountENS, claimStatus, investFlowStep } = useClaimState()
   const { setActiveClaimAccount } = useClaimDispatchers()
 
   const isAttempting = useMemo(() => claimStatus === ClaimStatus.ATTEMPTING, [claimStatus])
@@ -28,13 +28,19 @@ export default function ClaimNav({ account, handleChangeAccount }: ClaimNavProps
         <ClaimAccountButtons>
           {!!account && account !== activeClaimAccount && (
             <ButtonSecondary disabled={isAttempting} onClick={() => setActiveClaimAccount(account)}>
-              Your claims
+              Switch to connected account
             </ButtonSecondary>
           )}
 
-          <ButtonSecondary disabled={isAttempting} onClick={handleChangeAccount}>
-            Change account
-          </ButtonSecondary>
+          {/* Hide account changing action on:
+           * last investment step
+           * attempted claim in progress
+           */}
+          {(investFlowStep < 2 || !isAttempting) && (
+            <ButtonSecondary disabled={isAttempting} onClick={handleChangeAccount}>
+              Change account
+            </ButtonSecondary>
+          )}
         </ClaimAccountButtons>
       </ClaimAccount>
     </TopNav>

src/custom/pages/Claim/ClaimsTable.tsx

@@ -121,12 +121,12 @@ export default function ClaimsTable({
   const { selectedAll, selected, activeClaimAccount, claimStatus, isInvestFlowActive } = useClaimState()
   const pendingClaimsSet = useAllClaimingTransactionIndices()
 
-  const hideTable =
-    isAirdropOnly || !hasClaims || !activeClaimAccount || claimStatus !== ClaimStatus.DEFAULT || isInvestFlowActive
-
   const { deployment: start, investmentDeadline, airdropDeadline } = useClaimTimeInfo()
 
-  if (hideTable) return null
+  const showTable =
+    !isAirdropOnly && hasClaims && activeClaimAccount && claimStatus === ClaimStatus.DEFAULT && !isInvestFlowActive
+
+  if (!showTable) return null
 
   return (
     <ClaimBreakdown>

src/custom/pages/Claim/index.tsx

@@ -69,6 +69,8 @@ export default function Claim() {
     // claim row selection
     setSelected,
     setSelectedAll,
+    // reset claim ui
+    resetClaimUi,
   } = useClaimDispatchers()
 
   const { address: resolvedAddress, name: resolvedENS } = useENS(inputAddress)
@@ -122,6 +124,7 @@ export default function Claim() {
     setInputAddress('')
   }
 
+  // TODO: useCallback
   // handle submit claim
   const handleSubmitClaim = () => {
     // just to be sure
@@ -167,38 +170,19 @@ export default function Claim() {
       setIsInvestFlowActive(true)
     }
   }
-  console.log(
-    `Claim/index::`,
-    `[unclaimedAmount ${unclaimedAmount?.toFixed(2)}]`,
-    `[hasClaims ${hasClaims}]`,
-    `[activeClaimAccount ${activeClaimAccount}]`,
-    `[isAirdropOnly ${isAirdropOnly}]`
-  )
 
-  // on account change
+  // on account/activeAccount/non-connected account (if claiming for someone else) change
   useEffect(() => {
-    if (!isSearchUsed && account) {
-      setActiveClaimAccount(account)
-    }
-
+    // disconnected wallet?
     if (!account) {
       setActiveClaimAccount('')
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [account])
-
-  // if wallet is disconnected
-  useEffect(() => {
-    if (!account && !isSearchUsed) {
-      setActiveClaimAccount('')
+    } else if (!isSearchUsed) {
+      setActiveClaimAccount(account)
     }
 
-    if (!account) {
-      setIsInvestFlowActive(false)
-      setInvestFlowStep(0)
-    }
-    // setActiveClaimAccount and other dispatch fns are only here for TS. They are safe references.
-  }, [account, isSearchUsed, setActiveClaimAccount, setInvestFlowStep, setIsInvestFlowActive])
+    // properly reset the user to the claims table and initial investment flow
+    resetClaimUi()
+  }, [account, activeClaimAccount, resolvedAddress, isSearchUsed, setActiveClaimAccount, resetClaimUi])
 
   // Transaction confirmation modal
   const { TransactionConfirmationModal, openModal, closeModal } = useTransactionConfirmationModal(

src/custom/state/claim/actions.ts

@@ -55,3 +55,5 @@ export const updateInvestAmount = createAction<{
 // claim row selection
 export const setSelected = createAction<number[]>('claim/setSelected')
 export const setSelectedAll = createAction<boolean>('claim/setSelectedAll')
+// Claim UI reset sugar
+export const resetClaimUi = createAction('claims/resetClaimUi')

src/custom/state/claim/hooks/index.ts

@@ -52,6 +52,7 @@ import {
   setSelected,
   setSelectedAll,
   ClaimStatus,
+  resetClaimUi,
 } from '../actions'
 import { EnhancedUserClaimData } from 'pages/Claim/types'
 import { supportedChainId } from 'utils/supportedChainId'
@@ -774,6 +775,8 @@ export function useClaimDispatchers() {
       // claim row selection
       setSelected: (payload: number[]) => dispatch(setSelected(payload)),
       setSelectedAll: (payload: boolean) => dispatch(setSelectedAll(payload)),
+      // reset claim ui
+      resetClaimUi: () => dispatch(resetClaimUi()),
     }),
     [dispatch]
   )

src/custom/state/claim/reducer.ts

@@ -12,6 +12,7 @@ import {
   setIsSearchUsed,
   setSelected,
   setSelectedAll,
+  resetClaimUi,
   ClaimStatus,
 } from './actions'
 
@@ -104,8 +105,21 @@ export default createReducer(initialState, (builder) =>
     })
     .addCase(setSelected, (state, { payload }) => {
       state.selected = payload
+
+      // toggle selected all if all indiv selected
+      if (state.selected.length === payload.length) {
+        state.selectedAll = true
+      } else {
+        state.selectedAll = false
+      }
     })
     .addCase(setSelectedAll, (state, { payload }) => {
       state.selectedAll = payload
     })
+    .addCase(resetClaimUi, (state) => {
+      state.selected = initialState.selected
+      state.selectedAll = initialState.selectedAll
+      state.investFlowStep = initialState.investFlowStep
+      state.isInvestFlowActive = initialState.isInvestFlowActive
+    })
 )