refactor: removed WC package, and refactor events

.github/workflows/publish-wallet-kit.yaml

@@ -17,7 +17,7 @@ jobs:
       packages: write
     strategy:
       matrix:
-        package: [ wallet-kit,react-wallet-kit,wallet-connect,vanilla-wallet-kit ]
+        package: [ wallet-kit,react-wallet-kit,vanilla-wallet-kit ]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

apps/sample-react-app/package.json

@@ -42,7 +42,6 @@
         "@vechain/web3-providers-connex": "^1.1.2",
         "@vechainfoundation/react-wallet-kit": "*",
         "@vechainfoundation/vanilla-wallet-kit": "*",
-        "@vechainfoundation/wallet-connect": "*",
         "@vechainfoundation/wallet-kit": "*",
         "buffer": "^6.0.3",
         "crypto-browserify": "^3.12.0",

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

@@ -1,7 +1,7 @@
 import type { JSX } from 'react';
 import React from 'react';
 import type { Options } from '@vechain/connex';
-import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect';
+import type { WalletConnectOptions } from '@vechainfoundation/wallet-kit';
 import { ConnexProvider } from '@vechainfoundation/react-wallet-kit';
 import { ChakraProvider } from '@chakra-ui/react';
 import { NavBar, StyledContainer } from './Components/layout';

apps/sample-vanilla-app/index.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable no-undef */
-import { configureThorModal } from '@vechainfoundation/vanilla-wallet-kit';
+import { DAppKit } from '@vechainfoundation/vanilla-wallet-kit';
 
 const walletConnectOptions = {
     projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
@@ -18,4 +18,7 @@ const vechainWalletKitOptions = {
     walletConnectOptions,
 };
 
-configureThorModal(vechainWalletKitOptions);
+const connex = DAppKit.configure(vechainWalletKitOptions);
+
+// eslint-disable-next-line no-console
+console.log(`Connex configured`, connex.thor.genesis.id);

apps/sample-vanilla-app/package.json

@@ -8,7 +8,7 @@
     "scripts": {
         "build": "parcel build index.html --public-url /vechain-dapp-kit/vanilla",
         "clean": "rm -rf dist",
-        "dev": "parcel index.html --open  --port 3001",
+        "dev": "parcel index.html --open --no-cache --port 3001",
         "purge": "yarn clean && rm -rf node_modules",
         "test": "echo \"Error: no test specified\" && exit 1"
     },

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

@@ -2,7 +2,7 @@
 import { defineComponent, provide, reactive, readonly, toRefs } from 'vue';
 import {
     ConnectResponse,
-    MultiWalletConnex,
+    WalletConnectOptions,
     WalletSource,
 } from '@vechainfoundation/wallet-kit';
 import type Connex from '@vechain/connex';
@@ -12,8 +12,7 @@ import {
     WalletStateSymbol,
 } from '@/connex/keys';
 import { WalletActions, WalletState } from '@/connex/types';
-import { WalletConnectOptions } from '@vechainfoundation/wallet-connect';
-import { configureThorModal } from '@vechainfoundation/vanilla-wallet-kit';
+import { DAppKit } from '@vechainfoundation/vanilla-wallet-kit';
 
 const initWallets = (hasWcOptions: boolean) => {
     const wallets: WalletSource[] = ['sync2'];
@@ -51,7 +50,7 @@ export default defineComponent({
             account: null,
         });
 
-        const connex = new MultiWalletConnex({
+        const connex = DAppKit.configure({
             nodeUrl: 'https://mainnet.vechain.org/',
             walletConnectOptions,
         });
@@ -68,8 +67,6 @@ export default defineComponent({
         connex.wallet.onDisconnected(onDisconnected);
         connex.wallet.onSourceChanged(onSourceChanged);
 
-        configureThorModal(connex);
-
         const setAccount = (addr: string) => {
             walletState.account = addr;
         };

packages/react-wallet-kit/README.md

@@ -37,7 +37,7 @@ const nodeOptions: Omit<Options, 'signer'> = {
 -   Optional: Configure wallet connect options
 
 ```typescript
-import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect';
+import type { WalletConnectOptions } from '@vechainfoundation/wallet-kit';
 
 const walletConnectOptions: WalletConnectOptions = {
     projectId: '<PROJECT_ID>', // Create your project here: https://cloud.walletconnect.com/sign-up

packages/react-wallet-kit/package.json

@@ -20,7 +20,6 @@
         "@vechain/connex-framework": "2.1.0",
         "@vechain/picasso": "^2.1.1",
         "@vechainfoundation/vanilla-wallet-kit": "*",
-        "@vechainfoundation/wallet-connect": "*",
         "@vechainfoundation/wallet-kit": "*",
         "react-icons": "^4.11.0",
         "styled-components": "^6.1.0",

packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx

@@ -9,12 +9,12 @@
     onClose?: () => void;
 }
 
 export const ConnectButtonWithModal = ({
     onClose,
 }: ConnectButtonWithModalProps) => {
     const { theme } = useContext(ThemeContext);
 
-    const handleSourceClick = (e: SourceInfo) => {
+    const handleSourceClick = (e: SourceInfo): void => {
         _connect(e.id);
     };
 

packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx

@@ -1,9 +1,8 @@
 import type { HTMLChakraProps } from '@chakra-ui/react';
 import React from 'react';
-
 import GlobalFonts from '../../assets/fonts/fonts';
-import { ThemeSelector } from './Components/ThemeSelector';
 import { ThemeProvider } from '../provider/ThemeProvider';
+import { ThemeSelector } from './Components/ThemeSelector';
 import { ConnectButtonWithModal } from './Components/ConnectButtonWithModal';
 
 interface ConnectWalletButtonProps {

packages/react-wallet-kit/src/types.ts

@@ -1,8 +1,8 @@
 import type { Options } from '@vechain/connex';
 import type React from 'react';
-import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect';
 import type {
     ConnectResponse,
+    WalletConnectOptions,
     WalletSource,
 } from '@vechainfoundation/wallet-kit';
 

packages/vanilla-wallet-kit/README.md

@@ -27,7 +27,7 @@ yarn add @vechainfoundation/vanilla-wallet-kit
 -   In your root `index.ts`
 
 ```typescript
-import type { WalletConnectOptions } from '@vechainfoundation/wallet-connect';
+import type { WalletConnectOptions } from '@vechainfoundation/wallet-kit';
 import type { Options } from '@vechain/connex';
 import { configureThorModal } from '@vechainfoundation/vanilla-wallet-kit';
 

packages/vanilla-wallet-kit/index.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable no-undef */
-import { configureThorModal } from './dist';
+import { DAppKit } from './dist';
 
 const walletConnectOptions = {
     projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
@@ -18,4 +18,4 @@ const vechainWalletKitOptions = {
     walletConnectOptions,
 };
 
-configureThorModal(vechainWalletKitOptions);
+DAppKit.configure(vechainWalletKitOptions);

packages/vanilla-wallet-kit/package.json

@@ -17,14 +17,13 @@
     "scripts": {
         "build": "tsup",
         "clean": "rm -rf dist .turbo",
-        "dev": "parcel index.html",
+        "dev": "parcel --no-cache index.html",
         "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
         "lint": "eslint 'src/**/*.ts'",
         "purge": "yarn clean && rm -rf node_modules",
         "watch": "tsup --watch"
     },
     "dependencies": {
-        "@vechainfoundation/wallet-connect": "*",
         "@vechainfoundation/wallet-kit": "*",
         "@wagmi/core": "^1.4.5",
         "@web3modal/ethereum": "^2.7.1",

packages/vanilla-wallet-kit/src/client.ts

@@ -1,94 +1,33 @@
-import type { WalletSource } from '@vechainfoundation/wallet-kit';
+import type { ConnexOptions } from '@vechainfoundation/wallet-kit';
 import { MultiWalletConnex } from '@vechainfoundation/wallet-kit';
-import type { ConnexOptions } from '@vechainfoundation/wallet-kit/src';
-import type { WCModal } from '@vechainfoundation/wallet-connect';
-import type { OpenOptions } from '@vechainfoundation/wallet-connect/src/types';
-import './components';
-import type { SourceInfo } from './constants';
+import { CustomWalletConnectModal } from './modal';
 
-export type VechainWalletKitOptions = MultiWalletConnex | ConnexOptions;
+let connex: MultiWalletConnex | null = null;
 
-class CustomWalletConnectModal implements WCModal {
-    openModal(options: OpenOptions): Promise<void> {
-        const { uri } = options;
-        dispatchEvent(new CustomEvent('vwk-open-wc-modal', { detail: uri }));
-        return Promise.resolve();
-    }
-    closeModal(): void {
-        // NOT USED because it is controlled from inside the component
-        // dispatchEvent(new CustomEvent('vwk-close-wc-modal'));
-    }
-    subscribeModal() {
-        // NOT USED because it is controlled from inside the component
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        return (): void => {};
-    }
-}
-
-class VechainWalletKit {
-    connex: MultiWalletConnex;
-    account: string | null = null;
-
-    constructor(options: VechainWalletKitOptions) {
-        if ('thor' in options) {
-            this.connex = options;
-        } else {
-            this.connex = new MultiWalletConnex(
-                this.addCustomWalletConnectModalIfNotPresent(options),
-            );
+const DAppKit = {
+    configure(options: ConnexOptions): MultiWalletConnex {
+        if (!options.customWcModal) {
+            options.customWcModal = CustomWalletConnectModal.getInstance();
         }
-    }
-
-    addCustomWalletConnectModalIfNotPresent(
-        options: ConnexOptions,
-    ): ConnexOptions {
-        return {
-            ...options,
-            customWcModal:
-                options.customWcModal || new CustomWalletConnectModal(),
-        };
-    }
 
-    setSource = (wallet: WalletSource): void => {
-        this.connex.wallet.setSource(wallet);
-    };
-}
+        connex = new MultiWalletConnex(options);
 
-class VechainWalletKitModal {
-    public walletKit: VechainWalletKit;
+        return connex;
+    },
 
-    constructor(walletKit: VechainWalletKit) {
-        this.walletKit = walletKit;
-    }
+    get connex(): MultiWalletConnex {
+        if (!connex) {
+            // eslint-disable-next-line no-console
+            console.error('🚨🚨🚨 DAppKit not configured 🚨🚨🚨');
+            throw new Error('DAppKit not configured');
+        }
 
-    initModalListeners(): void {
-        addEventListener('vwk-source-card-clicked', (event) => {
-            const source = (event as CustomEvent).detail as SourceInfo;
-            this.walletKit.setSource(source.id);
-            this.walletKit.connex.wallet
-                .connect()
-                .then(({ account }) => {
-                    this.walletKit.account = account;
-                })
-                .catch((error) => {
-                    // eslint-disable-next-line no-console
-                    console.error(error);
-                });
-        });
-        const disconnect = (): void => {
-            this.walletKit.connex.wallet.disconnect().catch((error) => {
-                // eslint-disable-next-line no-console
-                console.error(error);
-            });
-        };
-        addEventListener('vwk-close-wc-modal', disconnect);
-    }
-}
+        return connex;
+    },
 
-export const configureThorModal = (
-    walletKitOptions: VechainWalletKitOptions,
-): void => {
-    const vechainWalletKit = new VechainWalletKit(walletKitOptions);
-    const vechainWalletKitModal = new VechainWalletKitModal(vechainWalletKit);
-    vechainWalletKitModal.initModalListeners();
+    get modal(): CustomWalletConnectModal {
+        return CustomWalletConnectModal.getInstance();
+    },
 };
+
+export { DAppKit };

packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts

@@ -2,7 +2,8 @@ import type { TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Theme, ThemeMode } from '@vechainfoundation/wallet-kit';
-import { SourceInfo } from '../../constants';
+import type { SourceInfo } from '../../constants';
+import { DAppKit } from '../../client';
 
 @customElement('vwk-connect-button-with-modal')
 export class ConnectButtonWithModal extends LitElement {
@@ -43,7 +44,9 @@ export class ConnectButtonWithModal extends LitElement {
     }
 
     private handleOpen = (): void => {
-        this.open = true;
+        DAppKit.connex.wallet.disconnect().finally(() => {
+            this.open = true;
+        });
     };
 
     private handleClose = (): void => {