feat: foxwifhat fox benefits section dumb ui (#8605)

.env.base

@@ -52,6 +52,7 @@ REACT_APP_FEATURE_THOR_FREE_FEES=true
 REACT_APP_FEATURE_LIMIT_ORDERS=true
 REACT_APP_FEATURE_NEW_TRADE_FLOW=true
 REACT_APP_FEATURE_NEW_WALLET_FLOW=false
+REACT_APP_FEATURE_FOX_PAGE_FOX_WIF_HAT_SECTION=false
 
 # absolute URL prefix
 REACT_APP_ABSOLUTE_URL_PREFIX=https://app.shapeshift.com

.env.dev

@@ -2,6 +2,7 @@
 # meaning we don't want to enable the selection for said chain in prod just yet 
 # Or alternatively, if we know that a given chain is very unstable and we may want to disable it in swapper altogether.
 REACT_APP_FEATURE_SWAPPER_SOLANA=true
+REACT_APP_FEATURE_FOX_PAGE_FOX_WIF_HAT_SECTION=true
 
 # Swapper feature flags
 

.env.develop

@@ -2,6 +2,7 @@
 # meaning we don't want to enable the selection for said chain in prod just yet 
 # Or alternatively, if we know that a given chain is very unstable and we may want to disable it in swapper altogether.
 REACT_APP_FEATURE_SWAPPER_SOLANA=true
+REACT_APP_FEATURE_FOX_PAGE_FOX_WIF_HAT_SECTION=true
 
 # Swapper feature flags
 

src/assets/translations/en/main.json

@@ -2785,6 +2785,14 @@
       "totalStakingValue": "Total Staking Value",
       "nextEpoch": "Next Epoch"
     },
+    "foxWifHat": {
+      "title": "FOX Wif Hat",
+      "description": "It's just FOX wif a hat, don't overthink it. Enjoy a limited time on-chain discount program. As your discount decays learn about FOX on the rest of the page and swap into FOX any time to preserve your fee discount. Whichever holding is higher saves you money on the ShapeShift platform.",
+      "discount": "*The discount decreases linearly over time, expiring on XX/XX/2025. Take advantage of your XX% discount before it decreases further!",
+      "claim": "Claim",
+      "claimed": "Claimed",
+      "discountText": "*%{percent}% off trade fees"
+    },
     "governance": {
       "title": "Governance",
       "description": {

src/config.ts

@@ -185,6 +185,7 @@ const validators = {
   REACT_APP_JUPITER_API_URL: url({ default: JUPITER_API_URL }),
   REACT_APP_FEATURE_NEW_TRADE_FLOW: bool({ default: false }),
   REACT_APP_FEATURE_NEW_WALLET_FLOW: bool({ default: false }),
+  REACT_APP_FEATURE_FOX_PAGE_FOX_WIF_HAT_SECTION: bool({ default: false }),
 }
 
 function reporter<T>({ errors }: envalid.ReporterOptions<T>) {

src/pages/Fox/components/FoxHeader.tsx

@@ -12,6 +12,7 @@ import { selectPortfolioAccountIdsByAssetIdFilter } from 'state/slices/selectors
 import { useAppSelector } from 'state/store'
 
 import { useFoxPageContext } from '../hooks/useFoxPageContext'
+import { FoxWifHat } from './FoxWifHat'
 
 const containerPadding = { base: 6, '2xl': 8 }
 const containerPaddingTop = { base: 0, md: 8 }
@@ -62,6 +63,7 @@ export const FoxHeader = () => {
         </PageHeader>
       </Display.Mobile>
       <Stack mb={4}>
+        <FoxWifHat />
         <Container maxWidth='container.4xl' px={containerPadding} pt={containerPaddingTop} pb={4}>
           <Display.Desktop>
             <Stack>

src/pages/Fox/components/FoxWifHat.tsx

@@ -0,0 +1,61 @@
+import { Box, Container, Heading, Image, useColorModeValue } from '@chakra-ui/react'
+import { foxAssetId } from '@shapeshiftoss/caip'
+import { useCallback } 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 { FoxWifHatClaimRow } from './FoxWifHatClaimRow'
+
+// @TODO: replace with proper foxwifhat asset id
+const foxWifHatAssetId = foxAssetId
+
+export const FoxWifHat = () => {
+  const translate = useTranslate()
+  const isFoxWifHatEnabled = useFeatureFlag('FoxPageFoxWifHatSection')
+  const containerBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50')
+
+  const handleClaim = useCallback(() => {
+    // eslint-disable-next-line no-console
+    console.log('Claim')
+  }, [])
+
+  if (!isFoxWifHatEnabled) return null
+
+  return (
+    <>
+      <Box py={10} bg={containerBackground}>
+        <Container maxW='container.4xl' px={8}>
+          <Heading as='h2' fontSize='2xl' display='flex' alignItems='center' mb={4}>
+            <Image src={FoxWifHatIcon} height='32px' width='auto' me={2} />
+            {translate('foxPage.foxWifHat.title')}
+          </Heading>
+
+          <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}
+            />
+          </Box>
+
+          <Text color='text.subtle' translation='foxPage.foxWifHat.discount' fontSize='sm' />
+        </Container>
+      </Box>
+    </>
+  )
+}

src/pages/Fox/components/FoxWifHatClaimRow.tsx

@@ -0,0 +1,122 @@
+import type { StackDirection } from '@chakra-ui/react'
+import { Button, Flex, HStack, Stack, Text, useColorModeValue } from '@chakra-ui/react'
+import type { AssetId } from '@shapeshiftoss/caip'
+import { fromAssetId } from '@shapeshiftoss/caip'
+import { useMemo } from 'react'
+import { useTranslate } from 'react-polyglot'
+import { Amount } from 'components/Amount/Amount'
+import { WalletIcon } from 'components/Icons/WalletIcon'
+import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter'
+import { fromBaseUnit } from 'lib/math'
+import { middleEllipsis } from 'lib/utils'
+import {
+  selectAccountIdsByChainId,
+  selectAccountNumberByAccountId,
+  selectAssetById,
+} from 'state/slices/selectors'
+import { useAppSelector } from 'state/store'
+
+type FoxWifHatClaimRowProps = {
+  accountId: string
+  amountCryptoBaseUnit: string
+  assetId: AssetId
+  discountPercentDecimal: number
+  isClaimed?: boolean
+  onClaim?: () => void
+}
+
+const actionsPaddingLeft = { base: 10, md: 0 }
+const columnWidth = { base: '100%', md: '50%' }
+const columnDirection: StackDirection = { base: 'column', md: 'row' }
+const columnAlignItems = { md: 'center' }
+const columnJustifyContent = { md: 'space-between' }
+const columnSpacing = { base: 4, md: 12, lg: 24, xl: 48 }
+
+export const FoxWifHatClaimRow = ({
+  accountId,
+  amountCryptoBaseUnit,
+  assetId,
+  discountPercentDecimal,
+  isClaimed,
+  onClaim,
+}: FoxWifHatClaimRowProps) => {
+  const textColor = useColorModeValue('gray.500', 'gray.400')
+  const translate = useTranslate()
+  const foxWifHatAsset = useAppSelector(state => selectAssetById(state, assetId))
+  const accountNumber = useAppSelector(state =>
+    selectAccountNumberByAccountId(state, { accountId }),
+  )
+  const accountIdsByChainId = useAppSelector(selectAccountIdsByChainId)
+  const {
+    number: { toPercent },
+  } = useLocaleFormatter()
+
+  const numberAccounts = useMemo(() => {
+    return accountIdsByChainId[fromAssetId(assetId).chainId]?.length ?? 0
+  }, [accountIdsByChainId, assetId])
+
+  const amountCryptoHuman = useMemo(() => {
+    if (!foxWifHatAsset) return
+
+    return fromBaseUnit(amountCryptoBaseUnit, foxWifHatAsset.precision)
+  }, [amountCryptoBaseUnit, foxWifHatAsset])
+
+  return (
+    <Stack
+      width='full'
+      px={6}
+      py={4}
+      spacing={columnSpacing}
+      direction={columnDirection}
+      alignItems={columnAlignItems}
+      justifyContent={columnJustifyContent}
+    >
+      <Flex width={columnWidth} alignItems='center' justifyContent='space-between'>
+        <HStack spacing={4}>
+          <WalletIcon color={textColor} boxSize={6} />
+          <Flex direction='column' alignItems='flex-start'>
+            <Text fontWeight='bold' fontSize='sm'>
+              {middleEllipsis(accountId)}
+            </Text>
+            {numberAccounts > 1 ? (
+              <Text color={textColor} fontSize='xs'>
+                {translate('accounts.accountNumber', { accountNumber })}
+              </Text>
+            ) : null}
+          </Flex>
+        </HStack>
+
+        <Amount.Crypto
+          value={amountCryptoHuman}
+          symbol={foxWifHatAsset?.symbol ?? ''}
+          fontWeight='bold'
+          maximumFractionDigits={2}
+        />
+      </Flex>
+
+      <Flex
+        width={columnWidth}
+        alignItems='center'
+        justifyContent='space-between'
+        pl={actionsPaddingLeft}
+      >
+        <Text color='green.500' fontSize='sm' fontWeight='bold'>
+          {translate('foxPage.foxWifHat.discountText', {
+            percent: toPercent(discountPercentDecimal),
+          })}
+        </Text>
+
+        <Button
+          colorScheme={isClaimed ? 'green' : 'gray'}
+          size='sm'
+          onClick={onClaim}
+          isDisabled={isClaimed}
+        >
+          {isClaimed
+            ? translate('foxPage.foxWifHat.claimed')
+            : translate('foxPage.foxWifHat.claim')}
+        </Button>
+      </Flex>
+    </Stack>
+  )
+}

src/state/slices/preferencesSlice/preferencesSlice.ts

@@ -76,6 +76,7 @@ export type FeatureFlags = {
   JupiterSwap: boolean
   NewTradeFlow: boolean
   NewWalletFlow: boolean
+  FoxPageFoxWifHatSection: boolean
 }
 
 export type Flag = keyof FeatureFlags
@@ -175,6 +176,7 @@ const initialState: Preferences = {
     JupiterSwap: getConfig().REACT_APP_FEATURE_JUPITER_SWAP,
     NewTradeFlow: getConfig().REACT_APP_FEATURE_NEW_TRADE_FLOW,
     NewWalletFlow: getConfig().REACT_APP_FEATURE_NEW_WALLET_FLOW,
+    FoxPageFoxWifHatSection: getConfig().REACT_APP_FEATURE_FOX_PAGE_FOX_WIF_HAT_SECTION,
   },
   selectedLocale: simpleLocale(),
   balanceThreshold: '0',

src/test/mocks/store.ts

@@ -142,6 +142,7 @@ export const mockStore: ReduxState = {
       JupiterSwap: false,
       NewTradeFlow: false,
       NewWalletFlow: false,
+      FoxPageFoxWifHatSection: false,
     },
     selectedLocale: 'en',
     balanceThreshold: '0',