feat: create a custom modal to handle wallet connect (#67)

* feat: create a custom modal to handle wallet connect * fix: types * chore: remove hardhat --------- Co-authored-by: Darren Kelly <[email protected]>
vechain · Nov 10, 2023 · b457675 · b457675
1 parent eb64a9f
commit b457675
Show file tree

Hide file tree

Showing 24 changed files with 556 additions and 341 deletions.
diff --git a/apps/sample-react-app/contracts/Counter.sol b/apps/sample-react-app/contracts/Counter.sol
diff --git a/apps/sample-react-app/hardhat.config.ts b/apps/sample-react-app/hardhat.config.ts
diff --git a/apps/sample-react-app/package.json b/apps/sample-react-app/package.json
@@ -5,12 +5,10 @@
     "homepage": ".",
     "main": "src/index.js",
     "scripts": {
-        "build": "yarn compile && react-app-rewired build",
-        "clean": "rm -rf build .turbo cache artifacts src/hardhat",
-        "compile": "yarn hardhat compile",
+        "build": "react-app-rewired build",
+        "clean": "rm -rf build .turbo cache",
         "dev": "react-app-rewired start",
         "eject": "react-app-rewired eject",
-        "postinstall": "yarn compile",
         "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
         "purge": "yarn clean && rm -rf node_modules",
         "start": "HTTPS=true react-app-rewired start",
@@ -40,8 +38,6 @@
         "@emotion/styled": "^11.11.0",
         "@heroicons/react": "^2.0.18",
         "@vechain/connex": "2.1.0",
-        "@vechain/hardhat-vechain": "^0.1.4",
-        "@vechain/hardhat-web3": "^0.1.4",
         "@vechain/picasso": "^2.1.1",
         "@vechain/web3-providers-connex": "^1.1.2",
         "@vechainfoundation/react-wallet-kit": "*",
@@ -65,16 +61,10 @@
         "web-vitals": "^2.1.2"
     },
     "devDependencies": {
-        "@nomicfoundation/hardhat-chai-matchers": "^2.0.0",
-        "@nomicfoundation/hardhat-ethers": "^3.0.0",
-        "@nomicfoundation/hardhat-network-helpers": "^1.0.0",
-        "@nomicfoundation/hardhat-toolbox": "^3.0.0",
-        "@nomicfoundation/hardhat-verify": "^1.0.0",
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
         "@typechain/ethers-v6": "^0.4.0",
-        "@typechain/hardhat": "^8.0.0",
         "@types/chai": "^4.2.0",
         "@types/jest": "^27.0.3",
         "@types/mocha": ">=9.1.0",

diff --git a/apps/sample-react-app/src/Components/AddressButton.tsx b/apps/sample-react-app/src/Components/AddressButton.tsx
@@ -23,7 +23,6 @@ export const AddressButton: React.FC<AddressButtonProps> = ({
 
     const onClickHandler = useCallback(
         (e: React.MouseEvent<HTMLButtonElement>): void => {
-            // console.log(onClick)
             if (onClick) onClick(e);
             if (showCopyIcon) onCopy();
         },

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
         "lint": "turbo run lint",
         "prepare": "husky install",
         "purge": "npx turbo@latest run purge && rm -rf node_modules",
-        "reinstall": "yarn clean && yarn && yarn run build:deps",
+        "reinstall": "yarn clean && yarn purge && yarn && yarn run build:deps",
         "test": "turbo run test"
     },
     "husky": {

diff --git a/packages/vanilla-wallet-kit/index.html b/packages/vanilla-wallet-kit/index.html
@@ -2,13 +2,13 @@
 
 <html lang="en">
     <head>
-        <title>Connect</title>
+        <title>Sample Vanilla App</title>
         <meta charset="utf-8" />
-        <script type="module" src="./dist/index.js"></script>
+        <script crossorigin type="module" src="./index.js"></script>
     </head>
     <body>
         <vwk-connect-button-with-modal
-            mode="LIGHT"
+            mode="DARK"
         ></vwk-connect-button-with-modal>
     </body>
 </html>
diff --git a/packages/vanilla-wallet-kit/index.js b/packages/vanilla-wallet-kit/index.js
@@ -0,0 +1,21 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-undef */
+import { configureThorModal } from './dist';
+
+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,
+};
+
+configureThorModal(vechainWalletKitOptions);
diff --git a/packages/vanilla-wallet-kit/package.json b/packages/vanilla-wallet-kit/package.json
@@ -17,21 +17,24 @@
     "scripts": {
         "build": "tsup",
         "clean": "rm -rf dist .turbo",
-        "dev": "parcel index.html --open --port 1234",
+        "dev": "parcel 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",
         "@web3modal/html": "^2.7.1",
         "lit": "^3.0.0",
+        "qrcode": "1.5.3",
         "viem": "^1.18.4"
     },
     "devDependencies": {
+        "@types/qrcode": "^1.5.5",
         "@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",

diff --git a/packages/vanilla-wallet-kit/src/assets/icons/chevron-left.ts b/packages/vanilla-wallet-kit/src/assets/icons/chevron-left.ts
@@ -0,0 +1,17 @@
+import { html, svg } from 'lit';
+
+export const ChevronLeftSvg = svg`
+      <path
+        d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
+    `;
+
+export const LightChevronLeftSvg = html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#777777">
+        ${ChevronLeftSvg}
+    </svg>
+`;
+export const DarkChevronLeftSvg = html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#999999">
+        ${ChevronLeftSvg}
+    </svg>
+`;
diff --git a/packages/vanilla-wallet-kit/src/assets/icons/copy.ts b/packages/vanilla-wallet-kit/src/assets/icons/copy.ts
@@ -0,0 +1,17 @@
+import { html, svg } from 'lit';
+
+export const CopySvg = svg`
+      <path
+        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
+    `;
+
+export const LightCopySvg = html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#777777">
+        ${CopySvg}
+    </svg>
+`;
+export const DarkCopySvg = html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#999999">
+        ${CopySvg}
+    </svg>
+`;
diff --git a/packages/vanilla-wallet-kit/src/assets/icons/index.ts b/packages/vanilla-wallet-kit/src/assets/icons/index.ts
@@ -1 +1,3 @@
 export * from './close';
+export * from './chevron-left';
+export * from './copy';
diff --git a/packages/vanilla-wallet-kit/src/client.ts b/packages/vanilla-wallet-kit/src/client.ts
@@ -1,11 +1,30 @@
 import type { WalletSource } from '@vechainfoundation/wallet-kit';
 import { MultiWalletConnex } from '@vechainfoundation/wallet-kit';
 import type { ConnexOptions } from '@vechainfoundation/wallet-kit/src';
-import type { SourceInfo } from './constants';
+import type { WCModal } from '@vechainfoundation/wallet-connect';
+import type { OpenOptions } from '@vechainfoundation/wallet-connect/src/types';
 import './components';
+import type { SourceInfo } from './constants';
 
 export type VechainWalletKitOptions = MultiWalletConnex | ConnexOptions;
 
+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;
@@ -14,10 +33,22 @@ class VechainWalletKit {
         if ('thor' in options) {
             this.connex = options;
         } else {
-            this.connex = new MultiWalletConnex(options);
+            this.connex = new MultiWalletConnex(
+                this.addCustomWalletConnectModalIfNotPresent(options),
+            );
         }
     }
 
+    addCustomWalletConnectModalIfNotPresent(
+        options: ConnexOptions,
+    ): ConnexOptions {
+        return {
+            ...options,
+            customWcModal:
+                options.customWcModal || new CustomWalletConnectModal(),
+        };
+    }
+
     setSource = (wallet: WalletSource): void => {
         this.connex.wallet.setSource(wallet);
     };
@@ -33,28 +64,31 @@ class VechainWalletKitModal {
     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 }) => {
-                    // eslint-disable-next-line no-console
-                    console.log('account connected', 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);
     }
 }
 
 export const configureThorModal = (
-    walletKit: VechainWalletKitOptions,
+    walletKitOptions: VechainWalletKitOptions,
 ): void => {
-    const vechainWalletKit = new VechainWalletKit(walletKit);
+    const vechainWalletKit = new VechainWalletKit(walletKitOptions);
     const vechainWalletKitModal = new VechainWalletKitModal(vechainWalletKit);
     vechainWalletKitModal.initModalListeners();
 };
diff --git a/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts b/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts
@@ -32,7 +32,7 @@ export class Modal extends LitElement {
 
         .modal.DARK {
             background-color: ${Colors.Dark};
-            color: ${Colors.LightGray};
+            color: ${Colors.LightGrey};
         }
 
         @media (max-width: 600px) {

diff --git a/packages/vanilla-wallet-kit/src/components/index.ts b/packages/vanilla-wallet-kit/src/components/index.ts
@@ -11,3 +11,4 @@ export * from './vwk-connect-button';
 export * from './vwk-connect-button-with-modal';
 export * from './vwk-source-card';
 export * from './vwk-fonts';
+export * from './vwk-wallet-connect-qrcode';
diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-button/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-button/index.ts
@@ -21,13 +21,13 @@ export class ConnectButton extends LitElement {
         }
 
         button.LIGHT {
-            background-color: ${Colors.LightGray};
+            background-color: ${Colors.LightGrey};
             color: ${Colors.Dark};
         }
 
         button.DARK {
             background-color: ${Colors.Dark};
-            color: ${Colors.LightGray};
+            color: ${Colors.LightGrey};
         }
     `;