chore: remove unused components and add tests (#139)

* chore: remove unused components and add tests

* fix: linting issues

apps/sample-next-app/src/app/pages/homepage.tsx

@@ -1,5 +1,5 @@
 import {
-    ConnectWalletButtonWithModal,
+    ConnectButtonWithModal,
     DAppKitProvider,
 } from '@vechain/dapp-kit-react';
 import type { WalletConnectOptions } from '@vechain/dapp-kit';
@@ -27,7 +27,7 @@ function HomePage() {
             usePersistence
             walletConnectOptions={walletConnectOptions}
         >
-            <ConnectWalletButtonWithModal />;
+            <ConnectButtonWithModal />
         </DAppKitProvider>
     );
 }

apps/sample-react-app/src/App.tsx

@@ -1,7 +1,7 @@
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
 import './App.css';
-import { VechainDappConnectKit } from '@vechain/dapp-kit-react';
+import { ConnectButtonWithModal } from '@vechain/dapp-kit-react';
 
 function App() {
     return (
@@ -20,7 +20,7 @@ function App() {
             </div>
             <h1>Vite + React</h1>
             <div className="card">
-                <VechainDappConnectKit />
+                <ConnectButtonWithModal />
             </div>
             <p className="read-the-docs">
                 Click on the Vite and React logos to learn more

packages/dapp-kit-react/.eslintrc.cjs

@@ -1,3 +1,6 @@
 const Config = require('@vechain/repo-config');
 
-module.exports = Config.EslintReact;
+module.exports = {
+    ...Config.EslintReact,
+    ignorePatterns: [...Config.EslintReact.ignorePatterns, '*.test.ts', 'test/**']
+};

packages/dapp-kit-react/src/Components/VechainDappConnectKit/VechainDappConnectKit.tsx → packages/dapp-kit-react/src/Components/ConnectButtonWithModal/ConnectButtonWithModal.tsx

@@ -3,7 +3,7 @@ import GlobalFonts from '../../../assets/fonts/fonts';
 import { ThemeProvider } from '../../provider/ThemeProvider';
 import { VechainDappConnectKitWithTheme } from './Wrapped/VechainDappConnectKitWrapped';
 
-export const VechainDappConnectKit: React.FC = (): React.ReactElement => {
+export const ConnectButtonWithModal: React.FC = (): React.ReactElement => {
     return (
         <ThemeProvider>
             <GlobalFonts />

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

@@ -0,0 +1 @@
+export * from './ConnectButtonWithModal';

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

@@ -1,4 +1 @@
-export * from './ConnectWalletButtonWithModal';
-export * from './ConnectWalletModal';
-export * from './SelectWalletModal';
-export * from './VechainDappConnectKit';
+export * from './ConnectButtonWithModal';

packages/dapp-kit-react/src/DAppKitProvider.tsx

@@ -9,13 +9,12 @@ import React, {
 import type { WalletSource } from '@vechain/dapp-kit';
 import { DAppKitUI } from '@vechain/dapp-kit-ui';
 import { subscribeKey } from 'valtio/utils';
-import type { DAppKitProviderOptions } from './types';
-import { DAppKitContext } from './types';
+import type { DAppKitProviderOptions, DAppKitContext } from './types';
 
 /**
  * Context
  */
-const DAppKitContext = createContext<DAppKitContext | undefined>(undefined);
+const Context = createContext<DAppKitContext | undefined>(undefined);
 
 export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
     children,
@@ -87,15 +86,11 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
         };
     }, [connex, account, source, closeModal, openModal]);
 
-    return (
-        <DAppKitContext.Provider value={context}>
-            {children}
-        </DAppKitContext.Provider>
-    );
+    return <Context.Provider value={context}>{children}</Context.Provider>;
 };
 
 export const useConnex = (): DAppKitContext['connex'] => {
-    const context = useContext(DAppKitContext);
+    const context = useContext(Context);
 
     if (!context) {
         throw new Error('"useConnex" must be used within a ConnexProvider');
@@ -105,7 +100,7 @@ export const useConnex = (): DAppKitContext['connex'] => {
 };
 
 export const useWallet = (): DAppKitContext['wallet'] => {
-    const context = useContext(DAppKitContext);
+    const context = useContext(Context);
 
     if (!context) {
         throw new Error('"useWallet" must be used within a ConnexProvider');
@@ -115,7 +110,7 @@ export const useWallet = (): DAppKitContext['wallet'] => {
 };
 
 export const useWalletModal = (): DAppKitContext['modal'] => {
-    const context = useContext(DAppKitContext);
+    const context = useContext(Context);
 
     if (!context) {
         throw new Error(

packages/dapp-kit-react/test/helpers/mocked-signer.ts

@@ -0,0 +1,44 @@
+/// <reference types="@vechain/connex" />
+import { blake2b256, Certificate, HDNode, secp256k1 } from 'thor-devkit';
+
+const mnemonicWords =
+    'denial kitchen pet squirrel other broom bar gas better priority spoil cross';
+
+const hdNode = HDNode.fromMnemonic(mnemonicWords.split(' '));
+
+const firstAccount = hdNode.derive(0);
+
+const privateKey: Buffer = firstAccount.privateKey!;
+const address = firstAccount.address;
+
+const mockedConnexSigner: Connex.Signer = {
+    signTx() {
+        return Promise.resolve({ txid: '0x1234', signer: address });
+    },
+
+    signCert(msg) {
+        const certificate: Certificate = {
+            domain: ' localhost:3000',
+            timestamp: 12341234,
+            signer: address,
+            payload: msg.payload,
+            purpose: msg.purpose,
+        };
+
+        const signature = secp256k1.sign(
+            blake2b256(Certificate.encode(certificate)),
+            privateKey,
+        );
+
+        return Promise.resolve({
+            annex: {
+                domain: certificate.domain,
+                timestamp: certificate.timestamp,
+                signer: certificate.signer,
+            },
+            signature: `0x${signature.toString('hex')}`,
+        });
+    },
+};
+
+export { mockedConnexSigner, hdNode, mnemonicWords, privateKey, address };

packages/dapp-kit-react/test/helpers/react-test-helpers.tsx

@@ -1,20 +1,11 @@
-import {
-    ConnectWalletModal,
-    DAppKitProvider,
-    SelectWalletModal,
-    VechainDappConnectKit,
-    ConnectWalletButtonWithModal,
-} from '../../src';
+import { ConnectButtonWithModal, DAppKitProvider } from '../../src';
 import { ThemeProvider } from '../../src/provider/ThemeProvider';
 
 export const wrapper = ({ children }: { children?: React.ReactNode }) => (
     <DAppKitProvider nodeUrl="https://testnet.vechain.org">
         <ThemeProvider>
             {children}
-            <VechainDappConnectKit />
-            <ConnectWalletButtonWithModal />
-            <SelectWalletModal isOpen={false} />
-            <ConnectWalletModal isOpen={false} />
+            <ConnectButtonWithModal />
         </ThemeProvider>
     </DAppKitProvider>
 );

packages/dapp-kit-react/test/useWallet.test.tsx

@@ -1,8 +1,34 @@
-import { describe, it } from 'vitest';
+import { describe, it, vi } from 'vitest';
 import { renderHook, waitFor } from '@testing-library/react';
+import { mockedConnexSigner } from '@vechain/dapp-kit/test/helpers/mocked-signer';
+import { Connex } from '@vechain/connex';
 import { useWallet } from '../src';
 import { wrapper } from './helpers/react-test-helpers';
 
+vi.mock('@vechain/connex');
+
+vi.mocked(Connex.Vendor).mockImplementation((): Connex.Vendor => {
+    return {
+        // @ts-ignore
+        sign: (type, msg) => {
+            if (type === 'tx') {
+                return {
+                    request: () => {
+                        // @ts-ignore
+                        return mockedConnexSigner.signTx(msg, {});
+                    },
+                };
+            }
+            return {
+                request: () => {
+                    // @ts-ignore
+                    return mockedConnexSigner.signCert(msg, {});
+                },
+            };
+        },
+    };
+});
+
 describe('useWallet', () => {
     it('should be able to set the source', async () => {
         const { result } = renderHook(() => useWallet(), { wrapper });
@@ -15,4 +41,29 @@ describe('useWallet', () => {
             expect(result.current.source).toBe('sync2');
         });
     });
+
+    it('should be able to connect & disconnect', async () => {
+        const { result } = renderHook(() => useWallet(), { wrapper });
+
+        expect(result.current).toBeDefined();
+
+        result.current.setSource('sync2');
+        result.current.connect().catch(() => {
+            // ignore
+        });
+
+        await waitFor(() => {
+            expect(result.current.source).toBe('sync2');
+            expect(result.current.account).toBe(
+                '0xf077b491b355e64048ce21e3a6fc4751eeea77fa',
+            );
+        });
+
+        result.current.disconnect();
+
+        await waitFor(() => {
+            expect(result.current.source).toBe(null);
+            expect(result.current.account).toBeNull();
+        });
+    });
 });