Merge branch 'main' into 69-feat-implement-the-address-badge-as-a-van…

…illa-component

.eslintignore

@@ -0,0 +1,6 @@
+node_modules/*
+dist/*
+web-dev-server.config.js
+tsup.config.ts
+**/test/**
+vite.config.ts

.github/workflows/lint-build-test.yaml

@@ -31,5 +31,8 @@ jobs:
       - name: Lint
         run: yarn run lint
 
+      - name: Test
+        run: yarn run test
+
       - name: Build
         run: yarn run build

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>
     );
 };

package.json

@@ -17,7 +17,7 @@
         "prepare": "husky install",
         "purge": "npx turbo@latest run purge && rm -rf node_modules",
         "reinstall": "yarn clean && yarn purge && yarn && yarn run build:deps",
-        "test": "turbo run test"
+        "test": "turbo run test --filter='@vechainfoundation/*'"
     },
     "husky": {
         "hooks": {

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';

packages/dapp-kit-ui/.eslintignore

@@ -2,3 +2,5 @@ node_modules/*
 dist/*
 web-dev-server.config.js
 tsup.config.ts
+test
+vite.config.ts

packages/dapp-kit-ui/.gitignore

@@ -1,11 +1,10 @@
 /node_modules/
 /lib/
-/test/
 custom-elements.json
 # top level source
 my-element.js
 my-element.js.map
 my-element.d.ts
 my-element.d.ts.map
 # only generated for size check
-my-element.bundled.js
+my-element.bundled.js

packages/dapp-kit-ui/package.json

@@ -21,6 +21,7 @@
         "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
         "lint": "tsc --noEmit &&  eslint src --ext .js,.jsx,.ts,.tsx",
         "purge": "yarn clean && rm -rf node_modules",
+        "test": "vitest run --coverage",
         "watch": "tsup --watch"
     },
     "dependencies": {
@@ -38,10 +39,14 @@
         "@typescript-eslint/eslint-plugin": "^5.25.0",
         "@typescript-eslint/parser": "^5.25.0",
         "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
+        "@vitest/coverage-v8": "^0.34.6",
         "eslint": "^8.15.0",
         "parcel": "^2.10.2",
         "prettier": "^2.6.2",
         "tsup": "^7.2.0",
-        "typescript": "~5.2.0"
+        "typechain": "^8.3.2",
+        "typescript": "~5.2.0",
+        "vite": "^4.5.0",
+        "vitest": "^0.34.6"
     }
 }

packages/dapp-kit-ui/src/components/index.ts

@@ -7,6 +7,7 @@ import './vwk-connected-address-modal';
 import './vwk-connected-address-badge-with-modal';
 import './vwk-source-card';
 import './vwk-fonts';
+import './vwk-wallet-connect-qrcode';
 
 export * from './base';
 export * from './vwk-connect-modal';

packages/dapp-kit-ui/src/index.ts

@@ -1,3 +1,5 @@
+import './components';
+
 export * from './client';
 export * from './assets';
 export * from './components';

packages/dapp-kit-ui/test/connect-buton-with-modal.test.ts

@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import {
+    ConnectButton,
+    ConnectButtonWithModal,
+    ConnectModal,
+    DAppKit,
+    SourceInfo,
+} from '../src';
+import { elementQueries } from './helpers/elemnt-queries';
+import { WalletSource } from '@vechainfoundation/dapp-kit/src';
+
+describe('connect-button-with-modal', () => {
+    beforeEach(() => {
+        DAppKit.configure({ nodeUrl: 'https://mainnet.vechain.org/' });
+    });
+
+    it('Should callback with source when user clicks a wallet', async () => {
+        const element: ConnectButtonWithModal = window.document.createElement(
+            'vwk-connect-button-with-modal',
+        );
+
+        let selectedSource: WalletSource | undefined;
+
+        element.onSourceClick = (source?: SourceInfo) => {
+            selectedSource = source?.id;
+        };
+
+        window.document.body.appendChild(element);
+
+        const connectButton =
+            (await elementQueries.getConnectButton()) as ConnectButton;
+        const connectModal =
+            (await elementQueries.getConnectModal()) as ConnectModal;
+
+        expect(connectModal).toBeDefined();
+        expect(connectButton).toBeDefined();
+
+        expect(connectModal.open).toBe(false);
+
+        connectButton.shadowRoot?.querySelector('button')?.click();
+
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        expect(connectModal.open).toBe(true);
+
+        const sourceCards = await elementQueries.getAllSourceCards();
+
+        expect(sourceCards.length).toBeGreaterThan(0);
+
+        sourceCards[0]?.shadowRoot?.querySelector('div')?.click();
+
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        expect(selectedSource).toBeDefined();
+    });
+});