[WIP] feat: wire up foxwifhat interface with contract and claim

src/pages/Fox/components/FoxWifHat.tsx

@@ -1,25 +1,74 @@
 import { Box, Container, Heading, Image, useColorModeValue } from '@chakra-ui/react'
-import { foxAssetId } from '@shapeshiftoss/caip'
-import { useCallback } from 'react'
+import type { AccountId } from '@shapeshiftoss/caip'
+import { foxAssetId, fromAccountId, fromAssetId } from '@shapeshiftoss/caip'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import FoxWifHatIcon from 'assets/foxwifhat-logo.png'
 import { Text } from 'components/Text'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
+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 handleClaim = useCallback(() => {
-    // eslint-disable-next-line no-console
-    console.log('Claim')
-  }, [])
+  const getFoxWifHatClaimsQuery = useGetFoxWifHatClaims()
+
+  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]
+
+    if (getFoxWifHatClaimsQuery.isLoading || !getFoxWifHatClaimsQuery.data) 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
+          key={accountId}
+          accountId={accountId}
+          amountCryptoBaseUnit={claim.amount}
+          assetId={foxWifHatAssetId}
+          discountPercentDecimal={0.72}
+          // eslint-disable-next-line react-memo/require-usememo
+          onClaim={() => handleClaimModalOpen(accountId)}
+        />
+      )
+    })
+  }, [
+    handleClaimModalOpen,
+    accountIdsByChainId,
+    getFoxWifHatClaimsQuery.data,
+    getFoxWifHatClaimsQuery.isLoading,
+  ])
 
   if (!isFoxWifHatEnabled) return null
 
@@ -35,27 +84,18 @@ export const FoxWifHat = () => {
           <Text color='text.subtle' translation='foxPage.foxWifHat.description' />
 
           <Box bg={containerBackground} borderRadius='lg' mt={8} mb={4}>
-            <FoxWifHatClaimRow
-              accountId='0xD41Ba840554701F5f6BefaEbaa927f4474078DBA'
-              amountCryptoBaseUnit='800000000000000000000000'
-              assetId={foxWifHatAssetId}
-              discountPercentDecimal={0.72}
-              isClaimed={true}
-              onClaim={handleClaim}
-            />
-            <FoxWifHatClaimRow
-              accountId='0xD41Ba840554701F5f6BefaEbaa927f4474078DBA'
-              amountCryptoBaseUnit='800000000000000000000000'
-              assetId={foxWifHatAssetId}
-              discountPercentDecimal={0.72}
-              isClaimed={false}
-              onClaim={handleClaim}
-            />
+            {claimRows}
           </Box>
 
           <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>
+  )
+}