feat: style wallet button with props

vechain · Jan 21, 2025 · f55377b · f55377b
1 parent 6e92f40
commit f55377b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/packages/vechain-kit/src/components/WalletButton/ConnectedWallet.tsx b/packages/vechain-kit/src/components/WalletButton/ConnectedWallet.tsx
@@ -1,8 +1,8 @@
 import { Button, HStack, Image, useMediaQuery } from '@chakra-ui/react';
 import { useWallet } from '@/hooks';
 import { WalletDisplay } from './WalletDisplay';
-import { WalletButtonProps } from './types';
 import { notFoundImage } from '@/utils';
+import { WalletButtonProps } from './WalletButton';
 
 type ConnectedWalletProps = WalletButtonProps & {
     onOpen: () => void;
@@ -12,12 +12,13 @@ export const ConnectedWallet = ({
     mobileVariant = 'iconAndDomain',
     desktopVariant = 'iconAndDomain',
     onOpen,
+    buttonStyle,
 }: ConnectedWalletProps) => {
     const { account } = useWallet();
     const [isDesktop] = useMediaQuery('(min-width: 768px)');
 
     return (
-        <Button onClick={onOpen} p={'0px 13px'} minH={'45px'}>
+        <Button {...buttonStyle} onClick={onOpen} p={'0px 13px'} minH={'45px'}>
             <HStack>
                 <Image
                     src={account?.image ?? notFoundImage}

diff --git a/packages/vechain-kit/src/components/WalletButton/WalletButton.tsx b/packages/vechain-kit/src/components/WalletButton/WalletButton.tsx
@@ -1,17 +1,24 @@
-import { Button, useDisclosure } from '@chakra-ui/react';
+import { Button, ButtonProps, useDisclosure } from '@chakra-ui/react';
 import { useWallet } from '@/hooks';
 import { useWallet as useDappKitWallet } from '@vechain/dapp-kit-react';
 import { usePrivy } from '@privy-io/react-auth';
 import { useEffect } from 'react';
 import { ConnectModal, AccountModal } from '@/components';
 import { ConnectedWallet } from './ConnectedWallet';
-import { WalletButtonProps } from './types';
+import { WalletDisplayVariant } from './types';
 import { useTranslation } from 'react-i18next';
 import { useVeChainKitConfig, VechainKitThemeProvider } from '@/providers';
 
+export type WalletButtonProps = {
+    mobileVariant?: WalletDisplayVariant;
+    desktopVariant?: WalletDisplayVariant;
+    buttonStyle?: ButtonProps;
+};
+
 export const WalletButton = ({
     mobileVariant = 'iconAndDomain',
     desktopVariant = 'iconDomainAndAddress',
+    buttonStyle,
 }: WalletButtonProps) => {
     const { t } = useTranslation();
     const { darkMode } = useVeChainKitConfig();
@@ -55,9 +62,12 @@ export const WalletButton = ({
                     mobileVariant={mobileVariant}
                     desktopVariant={desktopVariant}
                     onOpen={accountModal.onOpen}
+                    buttonStyle={buttonStyle}
                 />
             ) : (
-                <Button onClick={handleConnect}>{t('Login')}</Button>
+                <Button onClick={handleConnect} {...buttonStyle}>
+                    {t('Login')}
+                </Button>
             )}
 
             <ConnectModal

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