vechain · darrenvechain · Nov 6, 2023 · Nov 6, 2023
diff --git a/apps/sample-vanilla-app/index.js b/apps/sample-vanilla-app/index.js
@@ -1,7 +1,26 @@
-import '@vechain/vanilla-wallet-kit';
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-undef */
+import {
+    VechainWalletKit,
+    VechainWalletKitModal,
+} from '@vechain/vanilla-wallet-kit';
 
-// eslint-disable-next-line no-undef
-addEventListener('vwk-source-card-clicked', (e) => {
-    // eslint-disable-next-line no-console
-    console.log('vwk-source-card-clicked', e.detail);
-});
+const walletConnectOptions = {
+    projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+    metadata: {
+        name: 'Sample VeChain dApp',
+        description: 'A sample VeChain dApp',
+        url: window.location.origin,
+        icons: [`${window.location.origin}/images/logo/my-dapp.png`],
+    },
+};
+
+const vechainWalletKitOptions = {
+    node: 'https://testnet.vechain.org/',
+    network: 'test',
+    walletConnectOptions,
+};
+
+const walletKit = new VechainWalletKit(vechainWalletKitOptions);
+const vechainWalletKit = new VechainWalletKitModal(walletKit);
+vechainWalletKit.initModalListeners();
diff --git a/packages/vanilla-wallet-kit/index.html b/packages/vanilla-wallet-kit/index.html
@@ -8,7 +8,7 @@
     </head>
     <body>
         <vwk-connect-button-with-modal
-            mode="DARK"
+            mode="LIGHT"
         ></vwk-connect-button-with-modal>
     </body>
 </html>
diff --git a/packages/vanilla-wallet-kit/package.json b/packages/vanilla-wallet-kit/package.json
@@ -24,7 +24,11 @@
     },
     "dependencies": {
         "@vechain/wallet-kit": "*",
-        "lit": "^3.0.0"
+        "@wagmi/core": "^1.4.5",
+        "@web3modal/ethereum": "^2.7.1",
+        "@web3modal/html": "^2.7.1",
+        "lit": "^3.0.0",
+        "viem": "^1.18.4"
     },
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^5.25.0",

diff --git a/packages/vanilla-wallet-kit/src/client.ts b/packages/vanilla-wallet-kit/src/client.ts
@@ -0,0 +1,67 @@
+import type { WalletSource } from '@vechain/wallet-kit';
+import { MultiWalletConnex } from '@vechain/wallet-kit';
+import type { SourceInfo } from './constants';
+
+export interface VechainWalletKitOptions {
+    connex?: MultiWalletConnex;
+    nodeUrl: string;
+    network: string; // TODO: add a type for this
+    walletConnectOptions: {
+        projectId: string;
+        metadata: {
+            name: string;
+            description: string;
+            url: string;
+            icons: string[];
+        };
+    };
+    onDisconnected: () => void;
+}
+
+export class VechainWalletKit {
+    connex: MultiWalletConnex;
+    account: string | null = null;
+
+    constructor(options: VechainWalletKitOptions) {
+        if (options.connex) {
+            this.connex = options.connex;
+        } else {
+            this.connex = new MultiWalletConnex({
+                nodeUrl: options.nodeUrl,
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                genesis: options.network as any,
+                walletConnectOptions: options.walletConnectOptions,
+                onDisconnected: options.onDisconnected,
+            });
+        }
+    }
+
+    setSource = (wallet: WalletSource): void => {
+        this.connex.wallet.setSource(wallet);
+    };
+}
+
+export class VechainWalletKitModal {
+    public walletKit: VechainWalletKit;
+    constructor(walletKit: VechainWalletKit) {
+        this.walletKit = walletKit;
+    }
+
+    initModalListeners(): void {
+        addEventListener('vwk-source-card-clicked', (event) => {
+            const source = (event as CustomEvent).detail as SourceInfo;
+            // eslint-disable-next-line no-console
+            console.log('vwk-source-card-clicked', source);
+            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);
+                });
+        });
+    }
+}
diff --git a/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/vwk-base-modal.ts b/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/vwk-base-modal.ts
@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit';
 import type { TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Theme, ThemeMode } from '@vechain/wallet-kit';
-import { Colors } from '../../../wallet-kit';
+import { Colors } from '../../../constants';
 
 @customElement('vwk-base-modal')
 class Modal extends LitElement {

diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-button/vwk-connect-button.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-button/vwk-connect-button.ts
@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit';
 import type { TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ThemeMode, Theme } from '@vechain/wallet-kit';
-import { Colors } from '../../wallet-kit';
+import { Colors } from '../../constants';
 
 @customElement('vwk-connect-button')
 class ConnectButton extends LitElement {

diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-connect-modal.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-connect-modal.ts
@@ -3,8 +3,8 @@ import type { TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ThemeMode, Theme } from '@vechain/wallet-kit';
 import { DarkCloseSvg, LightCloseSvg } from '../../assets';
-import { WalletSources } from '../../wallet-kit';
-import type { SourceInfo } from '../../wallet-kit';
+import { WalletSources } from '../../constants';
+import type { SourceInfo } from '../../constants';
 
 @customElement('vwk-connect-modal')
 class ConnectModal extends LitElement {

diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-source-card.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-source-card.ts
@@ -2,8 +2,8 @@ import { LitElement, html, css } from 'lit';
 import type { TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ThemeMode, Theme } from '@vechain/wallet-kit';
-import { Colors } from '../../wallet-kit';
-import type { SourceInfo } from '../../wallet-kit';
+import { Colors } from '../../constants';
+import type { SourceInfo } from '../../constants';
 
 @customElement('vwk-source-card')
 class SourceCard extends LitElement {

diff --git a/.../src/wallet-kit/constants/enums/colors.ts → ...-wallet-kit/src/constants/enums/colors.ts b/.../src/wallet-kit/constants/enums/colors.ts → ...-wallet-kit/src/constants/enums/colors.ts
diff --git a/...t/src/wallet-kit/constants/enums/index.ts → ...a-wallet-kit/src/constants/enums/index.ts b/...t/src/wallet-kit/constants/enums/index.ts → ...a-wallet-kit/src/constants/enums/index.ts
diff --git a/...src/wallet-kit/constants/enums/sources.ts → ...wallet-kit/src/constants/enums/sources.ts b/...src/wallet-kit/constants/enums/sources.ts → ...wallet-kit/src/constants/enums/sources.ts
@@ -3,7 +3,7 @@ import {
     SyncLogo,
     VeWorldLogo,
     WalletConnectLogo,
-} from '../../../assets';
+} from '../../assets';
 
 enum WalletSource {
     WalletConnect = 'wallet-connect',
@@ -13,7 +13,7 @@ enum WalletSource {
 }
 
 export interface SourceInfo {
-    id: string;
+    id: WalletSource;
     name: string;
     logo: string;
 }

diff --git a/...let-kit/src/wallet-kit/constants/index.ts → ...vanilla-wallet-kit/src/constants/index.ts b/...let-kit/src/wallet-kit/constants/index.ts → ...vanilla-wallet-kit/src/constants/index.ts
diff --git a/packages/vanilla-wallet-kit/src/index.ts b/packages/vanilla-wallet-kit/src/index.ts
@@ -1 +1,2 @@
 export * from './components';
+export * from './client';
diff --git a/packages/vanilla-wallet-kit/src/wallet-kit/index.ts b/packages/vanilla-wallet-kit/src/wallet-kit/index.ts