veworld cleanup and create new components

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

@@ -1,7 +1,7 @@
 import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react';
 import React, { useMemo } from 'react';
 import type { WalletSource } from '@vechainfoundation/dapp-kit';
-import { WalletSources } from '../Constants';
+import { WalletSources } from '@vechainfoundation/dapp-kit-ui';
 import { AddressButton } from './AddressButton';
 
 interface AccountDetailBodyProps {

apps/sample-vue-app/src/connex/ConnexProvider.vue

@@ -22,7 +22,7 @@ const initWallets = (hasWcOptions: boolean) => {
     }
 
     if (window.vechain) {
-        wallets.push('veworld-extension');
+        wallets.push('veworld');
     }
 
     if (hasWcOptions) {

package.json

@@ -10,7 +10,7 @@
         "build:deps": "turbo build --no-daemon --filter='@vechainfoundation/*'",
         "clean": "rm -rf .turbo .parcel-cache build && npx turbo@latest run clean",
         "cucumber": "yarn && cucumber-js",
-        "dev": "turbo run dev",
+        "dev": "turbo run dev --filter='@vechainfoundation/*'",
         "format": "prettier --write \"**/*.{ts,tsx,md,json,js,jsx}\"",
         "install:all": "yarn && yarn run build:deps",
         "lint": "turbo run lint",

packages/dapp-kit-react/README.md

@@ -75,8 +75,8 @@ export const App = (): JSX.Element => {
 import { useWallet, useConnex } from '@vechainfoundation/dapp-kit-react';
 import type { WalletSource } from '@vechainfoundation/dapp-kit';
 
-// type WalletSource = 'wallet-connect' | 'veworld-extension' | 'sync2' | 'sync';
-const mySource: WalletSource = 'veworld-extension';
+// type WalletSource = 'wallet-connect' | 'veworld' | 'sync2' | 'sync';
+const mySource: WalletSource = 'veworld';
 
 const { connect, setSource } = useWallet();
 

packages/dapp-kit-react/src/Components/ConnectWalletModal/ConnectWalletModal.tsx

@@ -1,16 +1,45 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { createComponent } from '@lit/react';
+import type { SourceInfo } from '@vechainfoundation/dapp-kit-ui';
 import { ConnectModal } from '@vechainfoundation/dapp-kit-ui';
+import type { ConnectResponse } from '@vechainfoundation/dapp-kit/src';
+import { useWallet } from '../../ConnexProvider';
 
-export const createButtonWithModal = () =>
+const createButtonWithModal = () =>
     createComponent({
         tagName: 'vwk-connect-modal',
         elementClass: ConnectModal,
         react: React,
     });
 
-export const ConnectWalletModal: React.FC = () => {
+interface ConnectWalletProps {
+    onConnectError?: (err: unknown) => void;
+    onConnected?: (res: ConnectResponse) => void;
+}
+
+/**
+ * ConnectWalletModal
+ *
+ * This component allows the user to select a wallet and then connect. The account address should be available after the connection is successful.
+ */
+
+export const ConnectWalletModal: React.FC<ConnectWalletProps> = ({
+    onConnectError,
+    onConnected,
+}) => {
     const Modal = useMemo(() => createButtonWithModal(), []);
 
-    return <Modal />;
+    const { setSource, connect } = useWallet();
+
+    const onSourceClick = useCallback(
+        (source?: SourceInfo) => {
+            if (source) {
+                setSource(source.id);
+                connect().then(onConnected).catch(onConnectError);
+            }
+        },
+        [onConnectError, onConnected, connect, setSource],
+    );
+
+    return <Modal onSourceClick={onSourceClick} />;
 };

packages/dapp-kit-react/src/Components/SelectWalletModal/SelectWalletModal.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback, useMemo } from 'react';
+import { createComponent } from '@lit/react';
+import type { SourceInfo } from '@vechainfoundation/dapp-kit-ui';
+import { ConnectModal } from '@vechainfoundation/dapp-kit-ui';
+import type { WalletSource } from '@vechainfoundation/dapp-kit/src';
+import { useWallet } from '../../ConnexProvider';
+
+const createButtonWithModal = () =>
+    createComponent({
+        tagName: 'vwk-connect-modal',
+        elementClass: ConnectModal,
+        react: React,
+    });
+
+interface SelectWalletProps {
+    onSelected?: (source: WalletSource) => void;
+}
+
+/**
+ * SelectWalletModal
+ *
+ * This component is used to select the wallet source. It will not attempt to connect to the wallet
+ */
+export const SelectWalletModal: React.FC<SelectWalletProps> = ({
+    onSelected,
+}) => {
+    const Modal = useMemo(() => createButtonWithModal(), []);
+
+    const { setSource } = useWallet();
+
+    const onSourceClick = useCallback(
+        (source?: SourceInfo) => {
+            if (source) {
+                setSource(source.id);
+                onSelected?.(source.id);
+            }
+        },
+        [onSelected, setSource],
+    );
+
+    return <Modal onSourceClick={onSourceClick} />;
+};

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

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

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

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

packages/dapp-kit-ui/src/components/vwk-connect-modal/index.ts

@@ -116,26 +116,12 @@ export class ConnectModal extends LitElement {
     private get availableSources(): SourceInfo[] {
         const availableSources = DAppKit.connex.wallet.getAvailableSources();
 
-        return WalletSources.filter((src) => {
-            return availableSources.includes(src.id);
-        });
+        return availableSources.map((source) => WalletSources[source]);
     }
 
     @property({ type: Function })
     onClose: () => void = () => nothing;
 
-    private onBack = (): void => {
-        this.walletConnectQRcode = undefined;
-    };
-
-    private handleClose = (): void => {
-        // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal
-        setTimeout(() => {
-            this.onBack();
-        }, 500);
-        this.onClose();
-    };
-
     override render(): TemplateResult {
         return html`
         <vwk-fonts></vwk-fonts>
@@ -190,6 +176,18 @@ export class ConnectModal extends LitElement {
         </vwk-base-modal>
     `;
     }
+
+    private onBack = (): void => {
+        this.walletConnectQRcode = undefined;
+    };
+
+    private handleClose = (): void => {
+        // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal
+        setTimeout(() => {
+            this.onBack();
+        }, 500);
+        this.onClose();
+    };
 }
 
 declare global {

packages/dapp-kit-ui/src/constants/sources.ts

@@ -1,37 +1,31 @@
+import type { WalletSource } from '@vechainfoundation/dapp-kit';
 import { Sync2Logo, SyncLogo, VeWorldLogo, WalletConnectLogo } from '../assets';
 
-enum WalletSource {
-    WalletConnect = 'wallet-connect',
-    VeWorldExtension = 'veworld-extension',
-    Sync2 = 'sync2',
-    Sync = 'sync',
-}
-
 export interface SourceInfo {
     id: WalletSource;
     name: string;
     logo: string;
 }
 
-export const WalletSources: SourceInfo[] = [
-    {
-        id: WalletSource.WalletConnect,
+export const WalletSources: Record<WalletSource, SourceInfo> = {
+    'wallet-connect': {
+        id: 'wallet-connect',
         name: 'Wallet Connect',
         logo: WalletConnectLogo,
     },
-    {
-        id: WalletSource.VeWorldExtension,
-        name: 'VeWorld Extension',
+    veworld: {
+        id: 'veworld',
+        name: 'VeWorld',
         logo: VeWorldLogo,
     },
-    {
-        id: WalletSource.Sync,
+    sync: {
+        id: 'sync',
         name: 'Sync',
         logo: SyncLogo,
     },
-    {
-        id: WalletSource.Sync2,
+    sync2: {
+        id: 'sync2',
         name: 'Sync 2',
         logo: Sync2Logo,
     },
-];
+};

packages/dapp-kit/README.md

@@ -57,10 +57,10 @@ const { thor, vendor, wallet } = new MultiWalletConnex({
 ```typescript
 import type { WalletSource } from '@vechainfoundation/dapp-kit';
 
-// type WalletSource = 'wallet-connect' | 'veworld-extension' | 'sync2' | 'sync';
-const mySource: WalletSource = 'veworld-extension';
+// type WalletSource = 'wallet-connect' | 'veworld' | 'sync2' | 'sync';
+const mySource: WalletSource = 'veworld';
 
-wallet.setSource('veworld-extension');
+wallet.setSource('veworld');
 ```
 
 -   Connect to the wallet. This will return the user's address

packages/dapp-kit/src/create-wallet.ts

@@ -35,7 +35,7 @@ export const createWallet = ({
 
             return new CertificateBasedWallet(convertVendorToSigner(vendor));
         }
-        case 'veworld-extension': {
+        case 'veworld': {
             if (!window.vechain) {
                 throw new Error('VeWorld Extension is not installed');
             }

packages/dapp-kit/src/types.d.ts

@@ -10,7 +10,7 @@ declare global {
     }
 }
 
-type WalletSource = 'wallet-connect' | 'veworld-extension' | 'sync2' | 'sync';
+type WalletSource = 'wallet-connect' | 'veworld' | 'sync2' | 'sync';
 
 interface WalletConfig {
     requiresCertificate: boolean;

packages/dapp-kit/src/wallet-manager.ts

@@ -84,7 +84,7 @@ class WalletManager {
             throw new Error('WalletConnect options are not provided');
         }
 
-        if (src === 'veworld-extension' && !window.vechain) {
+        if (src === 'veworld' && !window.vechain) {
             throw new Error('VeWorld Extension is not installed');
         }
 
@@ -102,7 +102,7 @@ class WalletManager {
         const wallets: WalletSource[] = ['sync2'];
 
         if (window.vechain) {
-            wallets.push('veworld-extension');
+            wallets.push('veworld');
         }
 
         if (window.connex) {

packages/dapp-kit/src/wallet.ts

@@ -12,7 +12,7 @@ const WalletMapping: Record<WalletSource, WalletConfig> = {
     'wallet-connect': {
         requiresCertificate: false,
     },
-    'veworld-extension': DEFAULT_CONFIG,
+    veworld: DEFAULT_CONFIG,
     sync2: DEFAULT_CONFIG,
     sync: DEFAULT_CONFIG,
 };

packages/dapp-kit/test/create-wallet.test.ts

@@ -42,12 +42,12 @@ describe('createWallet', () => {
         });
     });
 
-    describe('veworld-extension', () => {
+    describe('veworld', () => {
         it('is not installed', () => {
             window.vechain = undefined;
 
             expect(() => {
-                createWallet(createOptions('veworld-extension'));
+                createWallet(createOptions('veworld'));
             }).toThrowError('VeWorld Extension is not installed');
         });
 
@@ -56,7 +56,7 @@ describe('createWallet', () => {
                 newConnexSigner: () => ({} as Connex.Signer),
             };
 
-            const wallet = createWallet(createOptions('veworld-extension'));
+            const wallet = createWallet(createOptions('veworld'));
 
             expect(wallet).toBeDefined();
         });

packages/dapp-kit/test/wallet-manager.test.ts

@@ -45,7 +45,7 @@ describe('WalletManager', () => {
     describe('signTx', () => {
         it('should sign the tx', async () => {
             const walletManager = newWalletManager();
-            walletManager.setSource('veworld-extension');
+            walletManager.setSource('veworld');
             const res = await walletManager.signTx([], {});
 
             expect(res.txid).toBeDefined();
@@ -55,7 +55,7 @@ describe('WalletManager', () => {
     describe('signCert', () => {
         it('should sign the cert', async () => {
             const walletManager = newWalletManager();
-            walletManager.setSource('veworld-extension');
+            walletManager.setSource('veworld');
             const res = await walletManager.signCert(
                 {
                     payload: { content: 'Hello world', type: 'text' },
@@ -80,7 +80,7 @@ describe('WalletManager', () => {
         it('from remote', async () => {
             const walletManager = newWalletManager();
 
-            walletManager.setSource('veworld-extension');
+            walletManager.setSource('veworld');
 
             await walletManager.disconnect(true);
 

packages/dapp-kit/test/wallet-tests/sync.test.ts

@@ -73,7 +73,7 @@ describe('sync', () => {
             );
         });
 
-        it('get available sources - should not include veworld-extension', () => {
+        it('get available sources - should not include veworld', () => {
             const connex = createUnitTestConnex();
 
             const sources = connex.wallet.getAvailableSources();