fix: claim flow

src/pages/Fox/components/FoxWifHat.tsx

@@ -1,6 +1,7 @@
 import { Box, Container, Heading, Image, useColorModeValue } from '@chakra-ui/react'
+import type { AccountId } from '@shapeshiftoss/caip'
 import { foxAssetId, fromAccountId, fromAssetId } from '@shapeshiftoss/caip'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import FoxWifHatIcon from 'assets/foxwifhat-logo.png'
 import { Text } from 'components/Text'
@@ -9,32 +10,46 @@ import { selectAccountIdsByChainId } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
 import { useGetFoxWifHatClaims } from '../hooks/useGetFoxWifHatClaims'
+import { FoxWifHatClaimModal } from './FoxWifHatClaimModal'
 import { FoxWifHatClaimRow } from './FoxWifHatClaimRow'
 
 // @TODO: replace with proper foxwifhat asset id
-const foxWifHatAssetId = foxAssetId
+export const foxWifHatAssetId = foxAssetId
 
 export const FoxWifHat = () => {
   const translate = useTranslate()
   const isFoxWifHatEnabled = useFeatureFlag('FoxPageFoxWifHatSection')
   const containerBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50')
   const accountIdsByChainId = useAppSelector(selectAccountIdsByChainId)
+  const [isClaimModalOpened, setIsClaimModalOpened] = useState(false)
+  const [claimAccountId, setClaimAccountId] = useState<AccountId | undefined>()
 
   const getFoxWifHatClaimsQuery = useGetFoxWifHatClaims()
 
-  const handleClaim = useCallback(() => {
-    // eslint-disable-next-line no-console
-    console.log('Claim')
-  }, [])
+  const handleClaimModalClose = useCallback(() => {
+    setClaimAccountId(undefined)
+    setIsClaimModalOpened(false)
+  }, [setClaimAccountId, setIsClaimModalOpened])
+
+  const handleClaimModalOpen = useCallback(
+    (accountId: AccountId) => {
+      setClaimAccountId(accountId)
+      setIsClaimModalOpened(true)
+    },
+    [setClaimAccountId, setIsClaimModalOpened],
+  )
 
   const claimRows = useMemo(() => {
     const accountIds = accountIdsByChainId[fromAssetId(foxWifHatAssetId).chainId]
-    const accountAddresses = accountIds?.map(accountId => fromAccountId(accountId).account)
 
     if (getFoxWifHatClaimsQuery.isLoading || !getFoxWifHatClaimsQuery.data) return null
 
-    return Object.entries(getFoxWifHatClaimsQuery.data.claims).map(([accountId, claim]) => {
-      if (!accountAddresses?.includes(accountId.toLowerCase())) return null
+    return Object.entries(getFoxWifHatClaimsQuery.data.claims).map(([address, claim]) => {
+      const accountId = accountIds?.find(
+        accountId => fromAccountId(accountId).account === address.toLowerCase(),
+      )
+
+      if (!accountId) return null
 
       return (
         <FoxWifHatClaimRow
@@ -43,12 +58,13 @@ export const FoxWifHat = () => {
           amountCryptoBaseUnit={claim.amount}
           assetId={foxWifHatAssetId}
           discountPercentDecimal={0.72}
-          onClaim={handleClaim}
+          // eslint-disable-next-line react-memo/require-usememo
+          onClaim={() => handleClaimModalOpen(accountId)}
         />
       )
     })
   }, [
-    handleClaim,
+    handleClaimModalOpen,
     accountIdsByChainId,
     getFoxWifHatClaimsQuery.data,
     getFoxWifHatClaimsQuery.isLoading,
@@ -74,6 +90,12 @@ export const FoxWifHat = () => {
           <Text color='text.subtle' translation='foxPage.foxWifHat.discount' fontSize='sm' />
         </Container>
       </Box>
+
+      <FoxWifHatClaimModal
+        isOpen={isClaimModalOpened}
+        onClose={handleClaimModalClose}
+        accountId={claimAccountId}
+      />
     </>
   )
 }

src/pages/Fox/components/FoxWifHatClaim/FoxWifHatClaim.tsx

@@ -0,0 +1,95 @@
+import { AnimatePresence } from 'framer-motion'
+import { lazy, Suspense, useCallback, useState } from 'react'
+import { MemoryRouter, Route, Switch, useLocation } from 'react-router'
+import { makeSuspenseful } from 'utils/makeSuspenseful'
+
+import type { FoxWifHatClaimRouteProps } from './types'
+import { FoxWifHatClaimRoutePaths } from './types'
+
+const suspenseFallback = <div>Loading...</div>
+
+const defaultBoxSpinnerStyle = {
+  height: '500px',
+}
+
+const FoxWifHatClaimConfirm = makeSuspenseful(
+  lazy(() =>
+    import('./FoxWifHatClaimConfirm').then(({ FoxWifHatClaimConfirm }) => ({
+      default: FoxWifHatClaimConfirm,
+    })),
+  ),
+  defaultBoxSpinnerStyle,
+)
+
+const FoxWifHatClaimStatus = makeSuspenseful(
+  lazy(() =>
+    import('./FoxWifHatClaimStatus').then(({ FoxWifHatClaimStatus }) => ({
+      default: FoxWifHatClaimStatus,
+    })),
+  ),
+  defaultBoxSpinnerStyle,
+)
+
+const FoxWifHatClaimEntries = [FoxWifHatClaimRoutePaths.Confirm, FoxWifHatClaimRoutePaths.Status]
+
+export const FoxWifHatClaim: React.FC<FoxWifHatClaimRouteProps> = ({ accountId }) => {
+  return (
+    <MemoryRouter initialEntries={FoxWifHatClaimEntries} initialIndex={0}>
+      <FoxWifHatClaimRoutes accountId={accountId} />
+    </MemoryRouter>
+  )
+}
+
+export const FoxWifHatClaimRoutes: React.FC<FoxWifHatClaimRouteProps> = ({ accountId }) => {
+  const location = useLocation()
+
+  const [claimTxid, setClaimTxid] = useState<string | undefined>()
+
+  // @TODO: implement tx confirmed
+  const handleTxConfirmed = useCallback(async () => {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    console.log('tx confirmed')
+  }, [])
+
+  const renderClaimConfirm = useCallback(() => {
+    return (
+      <FoxWifHatClaimConfirm
+        accountId={accountId}
+        setClaimTxid={setClaimTxid}
+        claimTxid={claimTxid}
+      />
+    )
+  }, [claimTxid, accountId])
+
+  const renderClaimStatus = useCallback(() => {
+    if (!claimTxid) return null
+
+    return (
+      <FoxWifHatClaimStatus
+        accountId={accountId}
+        txId={claimTxid}
+        setClaimTxid={setClaimTxid}
+        onTxConfirmed={handleTxConfirmed}
+      />
+    )
+  }, [claimTxid, handleTxConfirmed, accountId])
+
+  return (
+    <AnimatePresence mode='wait' initial={false}>
+      <Switch location={location}>
+        <Suspense fallback={suspenseFallback}>
+          <Route
+            key={FoxWifHatClaimRoutePaths.Confirm}
+            path={FoxWifHatClaimRoutePaths.Confirm}
+            render={renderClaimConfirm}
+          />
+          <Route
+            key={FoxWifHatClaimRoutePaths.Status}
+            path={FoxWifHatClaimRoutePaths.Status}
+            render={renderClaimStatus}
+          />
+        </Suspense>
+      </Switch>
+    </AnimatePresence>
+  )
+}