feat: add new variant

vechain · Jan 21, 2025 · 80c96e1 · 80c96e1
1 parent 0acc4d8
commit 80c96e1
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 17 deletions.
diff --git a/examples/sample-next-vechain-app/src/app/pages/Home.tsx b/examples/sample-next-vechain-app/src/app/pages/Home.tsx
@@ -150,8 +150,8 @@ export default function Home(): ReactElement {
         >
             <VStack spacing={10} mt={10} pb={10} alignItems="flex-start">
                 <WalletButton
-                    mobileVariant="iconDomainAndAddress"
-                    desktopVariant="iconDomainAndAddress"
+                    mobileVariant="iconDomainAndAssets"
+                    desktopVariant="iconDomainAndAssets"
                 />
                 {smartAccount.address && (
                     <Box>

diff --git a/packages/vechain-kit/src/components/WalletButton/AssetIcons.tsx b/packages/vechain-kit/src/components/WalletButton/AssetIcons.tsx
@@ -0,0 +1,98 @@
+import { HStack, Image, Box, Text } from '@chakra-ui/react';
+import { useBalances } from '@/hooks';
+import { TOKEN_LOGOS } from '@/utils';
+import { useVeChainKitConfig } from '@/providers';
+
+type AssetIconsProps = {
+    address?: string;
+    maxIcons?: number;
+    iconSize?: number;
+    ml?: number;
+};
+
+export const AssetIcons = ({
+    address,
+    maxIcons = 3,
+    iconSize = 20,
+    ml = 0,
+}: AssetIconsProps) => {
+    const { balances } = useBalances({ address: address ?? '' });
+    const { darkMode } = useVeChainKitConfig();
+    const marginLeft = iconSize / 2;
+
+    // Create array of tokens with balances
+    const tokens = [
+        { symbol: 'VET', balance: balances.vet },
+        { symbol: 'VTHO', balance: balances.vtho },
+        { symbol: 'B3TR', balance: balances.b3tr },
+        { symbol: 'VOT3', balance: balances.vot3 },
+        { symbol: 'veDelegate', balance: balances.veDelegate },
+    ].filter((token) => token.balance > 0);
+
+    const tokensToShow = tokens.slice(0, maxIcons);
+    const remainingTokens = tokens.length - maxIcons;
+
+    if (!address) return null;
+    if (tokens.length === 0) return null;
+
+    return (
+        <HStack spacing={0} ml={ml}>
+            {tokensToShow.map((token, index) => (
+                <Box
+                    key={token.symbol}
+                    ml={index > 0 ? `-${marginLeft}px` : '0'}
+                    zIndex={index}
+                    borderRadius="full"
+                    backgroundColor={darkMode ? 'gray.100' : 'gray.700'}
+                >
+                    <Image
+                        src={TOKEN_LOGOS[token.symbol]}
+                        alt={`${token.symbol} logo`}
+                        width={`${iconSize}px`}
+                        height={`${iconSize}px`}
+                        borderRadius="full"
+                        fallback={
+                            <Box
+                                boxSize={`${iconSize}px`}
+                                borderRadius="full"
+                                bg={darkMode ? 'gray.200' : 'gray.700'}
+                                display="flex"
+                                alignItems="center"
+                                justifyContent="center"
+                            >
+                                <Text
+                                    fontSize={`${iconSize * 0.4}px`}
+                                    fontWeight="bold"
+                                    color={darkMode ? 'white' : 'black'}
+                                >
+                                    {token.symbol.slice(0, 3)}
+                                </Text>
+                            </Box>
+                        }
+                    />
+                </Box>
+            ))}
+            {remainingTokens > 0 && (
+                <Box
+                    ml={`-${marginLeft}px`}
+                    zIndex={tokensToShow.length}
+                    width={`${iconSize}px`}
+                    height={`${iconSize}px`}
+                    borderRadius="full"
+                    bg={darkMode ? 'gray.100' : 'gray.700'}
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                >
+                    <Text
+                        fontSize={`${iconSize * 0.4}px`}
+                        fontWeight="bold"
+                        color={darkMode ? 'black' : 'white'}
+                    >
+                        +{remainingTokens}
+                    </Text>
+                </Box>
+            )}
+        </HStack>
+    );
+};
diff --git a/packages/vechain-kit/src/components/WalletButton/WalletDisplay.tsx b/packages/vechain-kit/src/components/WalletButton/WalletDisplay.tsx
@@ -1,9 +1,11 @@
-import { Spinner, Text, VStack } from '@chakra-ui/react';
+import { Spinner, Text, VStack, HStack } from '@chakra-ui/react';
 import { useWallet } from '@/hooks';
 import { humanAddress } from '@/utils';
+import { AssetIcons } from './AssetIcons';
+import { WalletDisplayVariant } from './types';
 
 type WalletDisplayProps = {
-    variant: 'icon' | 'iconAndDomain' | 'iconDomainAndAddress';
+    variant: WalletDisplayVariant;
 };
 
 export const WalletDisplay = ({ variant }: WalletDisplayProps) => {
@@ -25,26 +27,39 @@ export const WalletDisplay = ({ variant }: WalletDisplayProps) => {
         );
     }
 
+    if (variant === 'iconDomainAndAssets') {
+        return (
+            <HStack spacing={2}>
+                <VStack spacing={0} alignItems="flex-start">
+                    {account.domain && (
+                        <Text fontSize="sm" fontWeight="bold">
+                            {account.domain}
+                        </Text>
+                    )}
+                    <Text
+                        fontSize={account.domain ? 'xs' : 'sm'}
+                        opacity={account.domain ? 0.5 : 1}
+                    >
+                        {humanAddress(account.address ?? '', 4, 4)}
+                    </Text>
+                </VStack>
+                <AssetIcons ml={2} address={account.address} maxIcons={3} />
+            </HStack>
+        );
+    }
+
     return (
-        <VStack
-            justifyContent="flex-start"
-            spacing={0}
-            alignItems="flex-start"
-            textAlign="left"
-        >
+        <VStack spacing={0} alignItems="flex-start">
             {account.domain && (
-                <Text fontSize="sm" w="100%" fontWeight={'bold'}>
+                <Text fontSize="sm" fontWeight="bold">
                     {account.domain}
                 </Text>
             )}
             <Text
-                mt={account.domain ? '1px' : 0}
                 fontSize={account.domain ? 'xs' : 'sm'}
-                fontWeight={account.domain ? '400' : 'bold'}
-                w="100%"
                 opacity={account.domain ? 0.5 : 1}
             >
-                {humanAddress(account.address ?? '', 2, 4)}
+                {humanAddress(account.address ?? '', 4, 4)}
             </Text>
         </VStack>
     );

diff --git a/packages/vechain-kit/src/components/WalletButton/types.ts b/packages/vechain-kit/src/components/WalletButton/types.ts
@@ -1,4 +1,10 @@
+export type WalletDisplayVariant =
+    | 'icon'
+    | 'iconAndDomain'
+    | 'iconDomainAndAddress'
+    | 'iconDomainAndAssets';
+
 export type WalletButtonProps = {
-    mobileVariant?: 'icon' | 'iconAndDomain' | 'iconDomainAndAddress';
-    desktopVariant?: 'icon' | 'iconAndDomain' | 'iconDomainAndAddress';
+    mobileVariant?: WalletDisplayVariant;
+    desktopVariant?: WalletDisplayVariant;
 };