79 refactor wrap the button with modal (#80)

* feat: wrap the connect button with modal

* feat: connect button with modal in react app

* fix: fragment removed

apps/sample-react-app/src/Components/SwitchWalletButton.tsx

@@ -1,11 +1,7 @@
 import type { HTMLChakraProps } from '@chakra-ui/react';
 import { Button, Icon, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
-import {
-    ConnectWalletModal,
-    useWallet,
-    useWalletModal,
-} from '@vechainfoundation/dapp-kit-react';
+import { useWallet, useWalletModal } from '@vechainfoundation/dapp-kit-react';
 import { WalletIcon } from '@heroicons/react/24/solid';
 import { AccountDetailModal } from './AccountDetailModal';
 import { AddressButton } from './AddressButton';
@@ -42,16 +38,12 @@ export const SwitchWalletButton: React.FC<SwitchWalletButtonProps> = ({
         );
 
     return (
-        <>
-            <ConnectWalletModal />
-
-            <Button
-                {...buttonProps}
-                leftIcon={<Icon as={WalletIcon} />}
-                onClick={open}
-            >
-                Connect Wallet
-            </Button>
-        </>
+        <Button
+            {...buttonProps}
+            leftIcon={<Icon as={WalletIcon} />}
+            onClick={open}
+        >
+            Connect Wallet
+        </Button>
     );
 };

apps/sample-react-app/src/Components/layout/NavBar.tsx

@@ -17,9 +17,11 @@ import {
 import type { JSX } from 'react';
 import React from 'react';
 import { Bars3Icon } from '@heroicons/react/24/solid';
-import { useWallet } from '@vechainfoundation/dapp-kit-react';
+import {
+    ConnectWalletButtonWithModal,
+    useWallet,
+} from '@vechainfoundation/dapp-kit-react';
 import { AccountDetailBody } from '../AccountDetailBody';
-import { SwitchWalletButton } from '../SwitchWalletButton';
 
 export const NavBar = (): JSX.Element => {
     const bg = useColorModeValue('gray.50', 'gray.900');
@@ -96,7 +98,7 @@ const MobileNavBarDrawer = ({
                                     source={source}
                                 />
                             ) : (
-                                <SwitchWalletButton />
+                                <ConnectWalletButtonWithModal />
                             )}
                         </VStack>
                     </VStack>
@@ -109,7 +111,7 @@ const MobileNavBarDrawer = ({
 const NavBarWalletConnect = (): JSX.Element => {
     return (
         <HStack spacing={4}>
-            <SwitchWalletButton />
+            <ConnectWalletButtonWithModal />
         </HStack>
     );
 };

packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx

@@ -1,66 +1,33 @@
-import { useCallback, useContext, useState } from 'react';
+import { useCallback, useContext } from 'react';
 import type { WalletSource } from '@vechainfoundation/dapp-kit';
 import type { SourceInfo } from '@vechainfoundation/dapp-kit-ui';
 import { ThemeContext } from '../../../provider/ThemeProvider';
 import { useWallet } from '../../../ConnexProvider';
 import { ConnectModalWithButtonWrapped } from './Wrapped/ConnectModalWithButtonWrapped';
 
-interface ConnectButtonWithModalProps {
-    onClose?: () => void;
-}
-
-export const ConnectButtonWithModal = ({
-    onClose,
-}: ConnectButtonWithModalProps) => {
+export const ConnectButtonWithModal = () => {
     const { theme } = useContext(ThemeContext);
 
-    const handleSourceClick = (e: SourceInfo | undefined): void => {
-        if (!e) return;
-
-        _connect(e.id);
-    };
-
-    const { setAccount, connect, setSource } = useWallet();
-
-    const [connectionLoading, setConnectionLoading] = useState(false);
-    const [connectionError, setConnectionError] = useState('');
+    const { setSource, connect, setAccount } = useWallet();
 
     const connectHandler = useCallback(
         async (source: WalletSource) => {
-            try {
-                setSource(source);
-                setConnectionError('');
-                setConnectionLoading(true);
+            setSource(source);
 
-                const { account } = await connect();
-                setAccount(account);
+            const { account } = await connect();
 
-                onClose?.();
-            } catch (e) {
-                if (e instanceof Error) {
-                    setConnectionError(e.message);
-                } else {
-                    setConnectionError('Failed to connect to wallet');
-                }
-            } finally {
-                setConnectionLoading(false);
-            }
+            setAccount(account);
         },
-        [
-            connect,
-            onClose,
-            setAccount,
-            setConnectionError,
-            setConnectionLoading,
-            setSource,
-        ],
+        [connect, setAccount, setSource],
     );
 
     const _connect = useCallback(
-        (source: WalletSource) => {
-            connectHandler(source).catch(() => {
-                // do nothing
-            });
+        (source?: SourceInfo) => {
+            if (source) {
+                connectHandler(source.id).catch(() => {
+                    // do nothing
+                });
+            }
         },
         [connectHandler],
     );
@@ -69,10 +36,8 @@ export const ConnectButtonWithModal = ({
         <>
             <ConnectModalWithButtonWrapped
                 mode={theme.mode}
-                onSourceClick={handleSourceClick}
+                onSourceClick={_connect}
             />
-            {connectionError}
-            {connectionLoading}
         </>
     );
 };

packages/dapp-kit-react/src/Components/ConnectWalletButtonWithModal/ConnectWalletButton.tsx

@@ -15,8 +15,8 @@ export const ConnectWalletButtonWithModal: React.FC<
     return (
         <ThemeProvider>
             <GlobalFonts />
-            <ConnectButtonWithModal />
             <ThemeSelector />
+            <ConnectButtonWithModal />
         </ThemeProvider>
     );
 };

packages/dapp-kit-react/src/Components/index.ts

@@ -1,2 +1 @@
-export * from './ConnectWalletModal';
 export * from './ConnectWalletButtonWithModal';