feat(home): Improve home screen card components

youngkidwarrior · youngkidwarrior · commit 20479a594971 · 2025-06-19T17:21:16.000-07:00
- Update FriendsCard with better styling and layout
- Enhance InvestmentsBalanceCard with improved visual hierarchy
- Refine RewardsCard component styling
- Update SavingsBalanceCard with better spacing and typography
- Improve StablesBalanceList component layout
- Clean up home screen component structure and spacing
diff --git a/packages/app/features/home/FriendsCard.tsx b/packages/app/features/home/FriendsCard.tsx
@@ -17,12 +17,15 @@ import { HomeBodyCard } from './screen'
 
 export const FriendsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'children'>) => {
   const linkProps = useLink({ href })
+  const limit = 3
+  const { data, isLoading } = useFriends(limit)
+  const friendsCount = data?.friends.length ?? 0
 
   return (
     <HomeBodyCard {...linkProps} {...props}>
       <Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
         <Paragraph fontSize={'$5'} fontWeight="400">
-          Friends
+          {isLoading ? '' : friendsCount <= 0 ? 'Invite Friends' : 'Friends'}
         </Paragraph>
         <XStack flex={1} />
         <ChevronRight
@@ -32,8 +35,27 @@ export const FriendsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'chi
         />
       </Card.Header>
       <Card.Footer padded pt={0} fd="column">
-        <FriendsPreview />
-        <Paragraph color={'$color10'}>Network with Future Cash</Paragraph>
+        {isLoading ? (
+          <Spinner size="small" />
+        ) : (
+          <XStack ai="center" jc="space-between">
+            {data?.friends && <OverlappingFriendAvatars friends={data.friends} />}
+            <ThemeableStack
+              circular
+              ai="center"
+              jc="center"
+              bc="$color0"
+              w={'$3.5'}
+              h="$3.5"
+              mih={0}
+              miw={0}
+            >
+              <Paragraph fontSize={'$4'} fontWeight="500">
+                {`${data?.count ?? 0}`}
+              </Paragraph>
+            </ThemeableStack>
+          </XStack>
+        )}
       </Card.Footer>
     </HomeBodyCard>
   )
@@ -44,39 +66,6 @@ type Friend = {
   avatar_url?: string
 }
 
-function FriendsPreview({ limit = 3 }: { limit?: number }) {
-  const { data, isLoading } = useFriends(limit)
-  if (isLoading) return <Spinner size="small" />
-
-  const friendsArray = data?.friends || []
-  const filledFriends: Friend[] = [...friendsArray, ...Array(3 - friendsArray.length).fill({})]
-
-  return (
-    <XStack
-      ai="center"
-      jc="space-between"
-      /* hack to match the height of the rewards $ card */
-      h={50}
-    >
-      <OverlappingFriendAvatars friends={filledFriends} />
-      <ThemeableStack
-        circular
-        ai="center"
-        jc="center"
-        bc="$color0"
-        w={'$3.5'}
-        h="$3.5"
-        mih={0}
-        miw={0}
-      >
-        <Paragraph fontSize={'$4'} fontWeight="500">
-          {`${data?.count ?? 0}`}
-        </Paragraph>
-      </ThemeableStack>
-    </XStack>
-  )
-}
-
 function OverlappingFriendAvatars({ friends, ...props }: { friends: Friend[] } & XStackProps) {
   return (
     <XStack ai="center" {...props}>
diff --git a/packages/app/features/home/InvestmentsBalanceCard.tsx b/packages/app/features/home/InvestmentsBalanceCard.tsx
@@ -55,7 +55,7 @@ export const InvestmentsBalanceCard = (props: CardProps) => {
 
   return (
     <HomeBodyCard onPress={toggleSubScreen} {...props}>
-      <Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
+      <Card.Header padded pb="$4" jc="space-between" fd="row">
         <Paragraph fontSize={'$5'} fontWeight="400">
           Invest
         </Paragraph>
@@ -74,9 +74,9 @@ export const InvestmentsBalanceCard = (props: CardProps) => {
           />
         )}
       </Card.Header>
-      <Card.Footer padded pt={0} jc="space-between" ai="center">
-        <YStack jc="space-between">
-          <Paragraph color={'$color12'} fontWeight={500} size={'$10'}>
+      <Card.Footer padded size="$4" pt={0} jc="space-between" ai="center">
+        <YStack jc="space-between" gap="$4">
+          <Paragraph color={'$color12'} fontWeight={600} size={'$9'}>
             {(() => {
               switch (true) {
                 case isPriceHidden:
@@ -102,26 +102,44 @@ function InvestmentsPreview() {
 
   if (isLoading) return <Spinner size="small" />
 
-  const existingSymbols = new Set(investmentCoins.map((coin) => coin.symbol))
-  const coins = [
-    ...investmentCoins,
-    ...investmentCoinsList
-      .filter((coin) => !existingSymbols.has(coin.symbol))
-      .map((coin) => ({ ...coin, balance: 0n })),
-  ]
+  // Get SEND token
+  const sendCoin = investmentCoinsList.find((coin) => coin.symbol === 'SEND')
+  if (!sendCoin) return null
 
-  const sortedByBalance = [...coins].sort((a, b) =>
+  // Filter coins that have a balance > 0 (excluding SEND to handle separately)
+  const ownedCoins = investmentCoins.filter(
+    (coin) => coin.balance && coin.balance > 0n && coin.symbol !== 'SEND'
+  )
+
+  // Get SEND token with its actual balance or 0
+  const sendCoinWithBalance = investmentCoins.find((coin) => coin.symbol === 'SEND') || {
+    ...sendCoin,
+    balance: 0n,
+  }
+
+  // Sort owned coins by balance (highest first)
+  const sortedOwnedCoins = ownedCoins.sort((a, b) =>
     (b?.balance ?? 0n) > (a?.balance ?? 0n) ? 1 : -1
   )
 
+  // Always start with SEND token, then add other owned tokens
+  const allCoinsToShow = [sendCoinWithBalance, ...sortedOwnedCoins]
+
+  // Show up to 3 tokens total (SEND + 2 others max)
+  const maxDisplay = 3
+  const coinsToShow = allCoinsToShow.slice(0, maxDisplay)
+  const remainingCount = allCoinsToShow.length - maxDisplay
+
   return (
-    <XStack ai="center">
-      <OverlappingCoinIcons coins={sortedByBalance} />
-      <ThemeableStack circular ai="center" jc="center" bc="$color0" w={'$3.5'} h="$3.5">
-        <Paragraph fontSize={'$4'} fontWeight="500">
-          {`+${investmentCoinsList.length - 3}`}
-        </Paragraph>
-      </ThemeableStack>
+    <XStack ai="center" mr={remainingCount > 0 ? '$0' : '$3.5'}>
+      <OverlappingCoinIcons coins={coinsToShow} length={coinsToShow.length} />
+      {remainingCount > 0 ? (
+        <ThemeableStack circular ai="center" jc="center" bc="$color0" w={'$3.5'} h="$3.5">
+          <Paragraph fontSize={'$4'} fontWeight="500">
+            +{remainingCount}
+          </Paragraph>
+        </ThemeableStack>
+      ) : null}
     </XStack>
   )
 }
@@ -133,8 +151,15 @@ function OverlappingCoinIcons({
 }: { coins: CoinWithBalance[]; length?: number } & XStackProps) {
   return (
     <XStack ai="center" {...props}>
-      {coins.slice(0, length).map(({ symbol }) => (
-        <ThemeableStack key={symbol} circular mr={'$-3.5'} bc="transparent" ai="center" jc="center">
+      {coins.slice(0, length).map(({ symbol }, index) => (
+        <ThemeableStack
+          key={symbol}
+          circular
+          mr={index === coins.slice(0, length).length - 1 ? '$0' : '$-3.5'}
+          bc="transparent"
+          ai="center"
+          jc="center"
+        >
           <IconCoin size={'$3'} symbol={symbol} />
         </ThemeableStack>
       ))}
diff --git a/packages/app/features/home/RewardsCard.tsx b/packages/app/features/home/RewardsCard.tsx
@@ -45,7 +45,7 @@ export const RewardsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'chi
         />
       </Card.Header>
       <Card.Footer padded pt={0} fd="column">
-        <Paragraph color={'$color12'} fontWeight={500} size={'$10'}>
+        <Paragraph color={'$color12'} fontWeight={600} size={'$9'}>
           {(() => {
             switch (true) {
               case isPriceHidden:
@@ -57,7 +57,6 @@ export const RewardsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'chi
             }
           })()}
         </Paragraph>
-        <Paragraph color={'$color10'}>Complete Tasks for $SEND Back</Paragraph>
       </Card.Footer>
     </HomeBodyCard>
   )
diff --git a/packages/app/features/home/SavingsBalanceCard.tsx b/packages/app/features/home/SavingsBalanceCard.tsx
@@ -3,38 +3,40 @@ import formatAmount from 'app/utils/formatAmount'
 
 import { ChevronRight } from '@tamagui/lucide-icons'
 import { useMemo } from 'react'
-import { useSendEarnBalances, useVaultConvertSharesToAssets } from '../earn/hooks'
+import { useSendEarnAPY } from '../earn/hooks'
+import { useSendEarnCoin } from '../earn/providers/SendEarnProvider'
 import { useIsPriceHidden } from './utils/useIsPriceHidden'
 import { formatUnits } from 'viem'
 import { type LinkProps, useLink } from 'solito/link'
 import { HomeBodyCard } from './screen'
+import { usdcCoin } from 'app/data/coins'
 
 export const SavingsBalanceCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'children'>) => {
   const linkProps = useLink({ href })
   const { isPriceHidden } = useIsPriceHidden()
-  const { data: balances, isLoading } = useSendEarnBalances()
-  // Extract vaults and shares from balances for conversion
-  const vaults =
-    balances
-      ?.filter((balance) => balance.shares > 0n && balance.log_addr !== null)
-      .map((balance) => balance.log_addr) || []
 
-  const shares =
-    balances
-      ?.filter((balance) => balance.shares > 0n && balance.log_addr !== null)
-      .map((balance) => balance.shares) || []
+  // Use the SendEarnProvider pattern
+  const { coinBalances, getTotalAssets } = useSendEarnCoin(usdcCoin)
+  const { totalCurrentValue, vaults } = getTotalAssets()
 
-  // Use the hook to get current asset values based on onchain rate
-  const currentAssets = useVaultConvertSharesToAssets({ vaults, shares })
+  const hasExistingDeposit = totalCurrentValue > 0n
 
-  const totalAssets = useMemo(
-    () => formatUSDCValue(currentAssets.data?.reduce((sum, assets) => sum + assets, 0n) ?? 0n),
-    [currentAssets.data]
-  )
+  // Only fetch APY if user has existing deposits
+  const { data: apyData, isLoading: isApyLoading } = useSendEarnAPY({
+    vault: hasExistingDeposit && vaults?.[0] ? vaults[0] : undefined,
+  })
+
+  const totalAssets = useMemo(() => {
+    if (!hasExistingDeposit) return formatUSDCValue(0n)
+    return formatUSDCValue(totalCurrentValue)
+  }, [hasExistingDeposit, totalCurrentValue])
+
+  // Single loader for both values
+  const isLoading = coinBalances.isLoading || (hasExistingDeposit && isApyLoading)
 
   return (
     <HomeBodyCard {...linkProps} {...props}>
-      <Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
+      <Card.Header padded pb="$4" jc="space-between" fd="row">
         <Paragraph fontSize={'$5'} fontWeight="400">
           Save
         </Paragraph>
@@ -45,20 +47,21 @@ export const SavingsBalanceCard = ({ href, ...props }: Omit<CardProps & LinkProp
           $theme-light={{ color: '$darkGrayTextField' }}
         />
       </Card.Header>
-      <Card.Footer padded pt={0} fd="column">
-        <Paragraph color={'$color12'} fontWeight={500} size={'$10'}>
-          {(() => {
-            switch (true) {
-              case isPriceHidden:
-                return '///////'
-              case isLoading || !balances:
-                return <Spinner size={'large'} color={'$color12'} />
-              default:
-                return `$${totalAssets}`
-            }
-          })()}
-        </Paragraph>
-        <Paragraph color={'$color10'}>Up to 12% Interest</Paragraph>
+      <Card.Footer padded size="$4" pt={0} fd="column" gap="$4">
+        {isLoading ? (
+          <Spinner size={'large'} color={'$color12'} />
+        ) : (
+          <>
+            <Paragraph color={'$color12'} fontWeight={600} size={'$9'}>
+              {isPriceHidden ? '///////' : `$${totalAssets}`}
+            </Paragraph>
+            <Paragraph color={'$color10'}>
+              {hasExistingDeposit
+                ? `Earning ${apyData?.baseApy.toFixed(2)}%`
+                : 'Up to 12% Interest'}
+            </Paragraph>
+          </>
+        )}
       </Card.Footer>
     </HomeBodyCard>
   )
diff --git a/packages/app/features/home/StablesBalanceList.tsx b/packages/app/features/home/StablesBalanceList.tsx
@@ -10,6 +10,7 @@ import { useHoverStyles } from 'app/utils/useHoverStyles'
 import { convertBalanceToFiat } from 'app/utils/convertBalanceToUSD'
 import { useTokenPrices } from 'app/utils/useTokenPrices'
 import { useIsPriceHidden } from 'app/features/home/utils/useIsPriceHidden'
+import { ChevronRight } from '@tamagui/lucide-icons'
 
 export const StablesBalanceList = () => {
   const { stableCoins, isLoading } = useCoins()
@@ -42,13 +43,6 @@ const TokenBalanceItem = ({
 }: {
   coin: CoinWithBalance
 } & Omit<LinkProps, 'children'>) => {
-  const { data: tokenPrices, isLoading: isLoadingTokenPrices } = useTokenPrices()
-  const balanceInUSD = convertBalanceToFiat(
-    coin,
-    coin.symbol === 'USDC' ? 1 : tokenPrices?.[coin.token]
-  )
-  const { isPriceHidden } = useIsPriceHidden()
-
   return (
     <Link display="flex" {...props}>
       <XStack f={1} gap={'$3.5'} ai={'center'}>
@@ -58,37 +52,35 @@ const TokenBalanceItem = ({
             <Paragraph fontSize={'$6'} fontWeight={'500'} color={'$color12'}>
               {coin.shortLabel || coin.label}
             </Paragraph>
-            <TokenBalance coin={coin} />
           </XStack>
-          <XStack jc={'space-between'} ai={'center'}>
+          <XStack jc={'space-between'} ai={'center'} miw={0}>
             <Paragraph
               fontSize={'$5'}
               color={'$lightGrayTextField'}
               $theme-light={{ color: '$darkGrayTextField' }}
             >
-              {(() => {
-                switch (true) {
-                  case isLoadingTokenPrices || balanceInUSD === undefined:
-                    return '$0.00'
-                  case isPriceHidden:
-                    return '///////'
-                  default:
-                    return `$${formatAmount(balanceInUSD, 12, 2)}`
-                }
-              })()}
+              Base
             </Paragraph>
           </XStack>
         </YStack>
+        <XStack ai={'center'} gap="$2">
+          <TokenBalance coin={coin} />
+          <ChevronRight size={'$1'} color={'$color12'} />
+        </XStack>
       </XStack>
     </Link>
   )
 }
 
 const TokenBalance = ({
-  coin: { decimals, balance, formatDecimals },
+  coin,
 }: {
   coin: CoinWithBalance
 }) => {
+  const { balance, symbol } = coin
+  const { data: tokenPrices, isLoading: isLoadingTokenPrices } = useTokenPrices()
+  const balanceInUSD = convertBalanceToFiat(coin, symbol === 'USDC' ? 1 : tokenPrices?.[coin.token])
+
   const { isPriceHidden } = useIsPriceHidden()
 
   if (balance === undefined) return <></>
@@ -99,9 +91,16 @@ const TokenBalance = ({
       col="$color12"
       $gtSm={{ fontSize: '$8', fontWeight: '600' }}
     >
-      {isPriceHidden
-        ? '//////'
-        : formatAmount((Number(balance) / 10 ** decimals).toString(), 10, formatDecimals ?? 5)}
+      {(() => {
+        switch (true) {
+          case isLoadingTokenPrices || balanceInUSD === undefined:
+            return '$0.00'
+          case isPriceHidden:
+            return '///////'
+          default:
+            return `$${formatAmount(balanceInUSD, 12, 2)}`
+        }
+      })()}
     </Paragraph>
   )
 }
diff --git a/packages/app/features/home/screen.tsx b/packages/app/features/home/screen.tsx
