Toggle hide and show balance

0xsend · Oct 24, 2024 · deb6e2d · deb6e2d
1 parent 3d94d51
commit deb6e2d
Showing 1 changed file with 121 additions and 71 deletions.
diff --git a/packages/app/features/home/TokenBalanceCard.tsx b/packages/app/features/home/TokenBalanceCard.tsx
@@ -2,21 +2,19 @@ import {
   Label,
   Paragraph,
   Spinner,
-  Tooltip,
-  TooltipGroup,
   XStack,
   YStack,
   Stack,
   BigHeading,
   styled,
+  Button,
+  AnimatePresence,
 } from '@my/ui'
+import { EyeOff, Eye } from '@tamagui/lucide-icons'
 import formatAmount from 'app/utils/formatAmount'
 import { useSendAccountBalances } from 'app/utils/useSendAccountBalances'
-
-const USDollar = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-})
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { useEffect, useState } from 'react'
 
 const GreenSquare = styled(Stack, {
   name: 'Surface',
@@ -26,86 +24,138 @@ const GreenSquare = styled(Stack, {
   bc: '$background',
 })
 
+const HiddenSquare = styled(Stack, {
+  name: 'Surface',
+  w: 11,
+  h: 11,
+  bc: '$color10',
+})
+
 export const TokenBalanceCard = () => {
-  const { totalBalance } = useSendAccountBalances()
+  // @todo add an enabled flag for when hidden
+  const { totalBalance, isLoading } = useSendAccountBalances()
 
   const formattedBalance = formatAmount(totalBalance, 9, 0)
 
+  const { isPriceHidden, toggleIsPriceHidden } = useIsPriceHidden()
+
   return (
     <XStack w={'100%'} zIndex={4}>
-      <YStack jc={'center'} gap={'$4'}>
-        <TooltipGroup delay={{ open: 0, close: 1500 }}>
-          <Tooltip placement="bottom">
-            <Tooltip.Trigger>
-              <XStack ai="center" gap="$2.5">
-                <GreenSquare />
-                <Label
-                  fontSize={'$4'}
-                  zIndex={1}
-                  fontWeight={'500'}
-                  textTransform={'uppercase'}
-                  lineHeight={0}
-                  col={'$color10'}
-                >
-                  Total Balance
-                </Label>
-              </XStack>
-              <XStack style={{ color: 'white' }} gap={'$2.5'} mt={'$3'}>
-                {totalBalance === undefined ? (
-                  <Spinner size={'large'} />
-                ) : (
+      <YStack jc={'center'} gap={'$4'} w={'100%'}>
+        <XStack ai={'center'} gap="$2.5" width={'100%'}>
+          <XStack ai={'center'} gap="$2.5">
+            <AnimatePresence exitBeforeEnter>
+              {isPriceHidden ? <HiddenSquare /> : <GreenSquare />}
+            </AnimatePresence>
+            <Label
+              fontSize={'$4'}
+              zIndex={1}
+              fontWeight={'500'}
+              textTransform={'uppercase'}
+              lineHeight={0}
+              col={'$color10'}
+            >
+              Total Balance
+            </Label>
+          </XStack>
+          <Button
+            onPress={toggleIsPriceHidden}
+            p={'$2'}
+            size={'$3'}
+            circular={true}
+            chromeless
+            iconAfter={
+              isPriceHidden ? (
+                <EyeOff color={'$color9'} size={'$2'} />
+              ) : (
+                <Eye color={'$color11'} size={'$2'} />
+              )
+            }
+          />
+        </XStack>
+        <XStack style={{ color: 'white' }} gap={'$2.5'} mt={'$3'}>
+          {(() => {
+            switch (true) {
+              case isPriceHidden:
+                return (
                   <BigHeading
                     $platform-web={{ width: 'fit-content' }}
-                    $sm={{
-                      fontSize: (() => {
-                        switch (true) {
-                          case formattedBalance.length > 8:
-                            return '$11'
-                          case formattedBalance.length > 5:
-                            return '$12'
-                          default:
-                            return 96
-                        }
-                      })(),
-                    }}
                     fontSize={96}
                     lineHeight={'$15'}
                     fontWeight={'500'}
                     color={'$color12'}
                     zIndex={1}
                   >
-                    {formattedBalance}
+                    {'//////'}
                   </BigHeading>
-                )}
-                <Paragraph fontSize={'$6'} fontWeight={'500'} zIndex={1}>
-                  {'USD'}
-                </Paragraph>
-              </XStack>
-            </Tooltip.Trigger>
-            <Tooltip.Content
-              enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-              exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-              scale={1}
-              x={0}
-              y={0}
-              opacity={1}
-              animation={[
-                'quick',
-                {
-                  opacity: {
-                    overshootClamping: true,
-                  },
-                },
-              ]}
-            >
-              <Tooltip.Arrow />
-              <Paragraph fontSize={'$6'} fontWeight={'500'} themeInverse>
-                {totalBalance === undefined ? null : USDollar.format(Number(totalBalance))}
-              </Paragraph>
-            </Tooltip.Content>
-          </Tooltip>
-        </TooltipGroup>
+                )
+              case isLoading:
+                return <Spinner size={'large'} />
+              default:
+                return (
+                  <>
+                    <BigHeading
+                      $platform-web={{ width: 'fit-content' }}
+                      $sm={{
+                        fontSize: (() => {
+                          switch (true) {
+                            case formattedBalance.length > 8:
+                              return '$11'
+                            case formattedBalance.length > 5:
+                              return '$12'
+                            default:
+                              return 96
+                          }
+                        })(),
+                      }}
+                      fontSize={96}
+                      lineHeight={'$15'}
+                      fontWeight={'500'}
+                      color={'$color12'}
+                      zIndex={1}
+                    >
+                      {formattedBalance}
+                    </BigHeading>
+                    <Paragraph fontSize={'$6'} fontWeight={'500'} zIndex={1}>
+                      {'USD'}
+                    </Paragraph>
+                  </>
+                )
+            }
+          })()}
+        </XStack>
       </YStack>
     </XStack>
   )
 }
+
+const useIsPriceHidden = () => {
+  const [isPriceHidden, setIsPriceHidden] = useState<boolean>(false)
+
+  useEffect(() => {
+    const getIsPriceHidden = async () => {
+      try {
+        const savedIsPriceHidden = await AsyncStorage.getItem('isPriceHidden')
+        if (savedIsPriceHidden !== null) {
+          setIsPriceHidden(JSON.parse(savedIsPriceHidden))
+        }
+      } catch (error) {
+        console.error('Error reading isPriceHidden from AsyncStorage:', error)
+      }
+    }
+
+    getIsPriceHidden()
+  }, [])
+
+  const toggleIsPriceHidden = async () => {
+    try {
+      const newValue = !isPriceHidden
+      await AsyncStorage.setItem('isPriceHidden', JSON.stringify(newValue))
+      setIsPriceHidden(newValue)
+    } catch (error) {
+      console.error('Error saving isPriceHidden to AsyncStorage:', error)
+    }
+  }
+
+  return { isPriceHidden, toggleIsPriceHidden }
+}