Introduce WalletConnect

v3xlabs · Feb 15, 2024 · bc5cbd2 · bc5cbd2
1 parent 8699a0d
commit bc5cbd2
Show file tree

Hide file tree

Showing 8 changed files with 176 additions and 55 deletions.
diff --git a/packages/thorin-core/package.json b/packages/thorin-core/package.json
@@ -14,7 +14,9 @@
     "license": "LGPL-3.0-only",
     "dependencies": {
         "@rollup/plugin-commonjs": "^25.0.7",
-        "lit": "^3.1.2"
+        "@rollup/plugin-json": "^6.1.0",
+        "lit": "^3.1.2",
+        "rollup-plugin-peer-deps-external": "^2.2.4"
     },
     "devDependencies": {
         "@rollup/plugin-node-resolve": "^15.2.3",

diff --git a/packages/thorin-core/rollup.config.mjs b/packages/thorin-core/rollup.config.mjs
@@ -2,6 +2,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import copy from 'rollup-plugin-copy';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
 export default {
     input: 'src/index.ts',
@@ -13,6 +14,7 @@ export default {
         },
     ],
     plugins: [
+        peerDepsExternal(),
         nodeResolve(),
         commonjs(),
         typescript(),

diff --git a/packages/thorin-core/src/button/index.ts b/packages/thorin-core/src/button/index.ts
@@ -154,25 +154,25 @@ export class ThorinButton extends LitElement {
     width: 'auto' | 'full' = 'auto';
 
     @property({ attribute: false })
-    onclick: (_event: PointerEvent) => void = () => { };
+    onClick: (_event: PointerEvent) => void = () => {};
 
     render() {
         return html`
             <button
                 @click="${this._onClick}"
-                class="${this.computeClass}"
+                class="${this.computeClass()}"
                 ?disabled="${this.variant == 'disabled'}"
             >
                 <slot></slot>
             </button>
         `;
     }
 
-    private get computeClass() {
+    private computeClass() {
         return (
             [this.width === 'full' ? 'full' : '', this.computeVariant()]
                 .join(' ')
-                .trim() || undefined
+                .trim() || ''
         );
     }
 
@@ -189,8 +189,8 @@ export class ThorinButton extends LitElement {
     }
 
     private _onClick(event: PointerEvent) {
-        if (this.onclick) {
-            this.onclick(event);
+        if (this.onClick) {
+            this.onClick(event);
         }
     }
 }

diff --git a/packages/thorin-core/src/connect-modal/index.ts b/packages/thorin-core/src/connect-modal/index.ts
@@ -1,3 +1,5 @@
+/* eslint-disable unicorn/no-nested-ternary */
+import { walletConnect } from '@wagmi/connectors';
 import { Connector, createConfig, getConnectors, http } from '@wagmi/core';
 import { mainnet } from '@wagmi/core/chains';
 import { css, html, LitElement } from 'lit';
@@ -40,6 +42,19 @@ export class ThorinConnectModal extends LitElement {
         .connector-name {
             font-weight: 600;
         }
+        .qr {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .connected {
+            padding: var(--thorin-spacing-4);
+            background: var(--thorin-green-surface);
+            color: var(--thorin-text-primary);
+        }
+        .space-y-4 > *:not(:first-child) {
+            margin-top: var(--thorin-spacing-4);
+        }
     `;
 
     @state()
@@ -48,56 +63,116 @@ export class ThorinConnectModal extends LitElement {
     @state()
     activeConnector: Connector | undefined = undefined;
 
-    render() {
-        const connectors = getConnectors(wagmiConfig);
+    @state()
+    connectors: Connector[] = [];
 
+    @state()
+    showQR: string | undefined = undefined;
+
+    firstUpdated() {
+        const wc = walletConnect({
+            projectId: 'b451d5ff25d61b3fde7b30f167a5a957',
+            metadata: {
+                name: 'Thorin Design System',
+                description: 'Connect to Thorin Design System',
+                url: 'https://thorin.design',
+                icons: [],
+            },
+            showQrModal: false,
+        });
+        const emitter = {
+            emit: (topic: string, data: any) => {
+                console.log('emitting', topic);
+
+                if (topic == 'message') {
+                    if (data.type === 'display_uri') {
+                        this.showQR = data.data;
+                    } else {
+                        console.log('Encountered New Packet from WC:');
+                        console.log(data);
+                    }
+                } else {
+                    console.log('Encountered New Topic from WC:');
+                    console.log(topic, data);
+                }
+            },
+        };
+        const x = wc({ chains: [mainnet], emitter } as any) as any;
+
+        this.connectors = [...getConnectors(wagmiConfig), x];
+    }
+
+    render() {
         return html`
             <thorin-modal ?open="${this.open}" title="Connect Wallet">
-                ${this.connecting ? html`<div>connecting...</div>` : ''}
-                ${this.activeConnector && this.connecting
-                    ? html`
-                          <div class="connecting-to">
-                              ${this.activeConnector.icon
-                                  ? html` <img
-                                        src="${this.activeConnector.icon}"
-                                        alt="${this.activeConnector.name}"
-                                    />`
-                                  : ''}
-                              <div>
-                                  Connecting to
-                                  <span class="connector-name">
-                                      ${this.activeConnector.name}
-                                  </span>
-                              </div>
-                          </div>
-                      `
-                    : ''}
-                ${!this.connecting
-                    ? html` <div class="button-list">
-                          ${connectors.map(
-                              (connector) =>
-                                  html`
-                                      <thorin-button
-                                          width="full"
-                                          @click=${() => {
-                                              this.connecting = true;
-                                              this.activeConnector = connector;
-                                              connector
-                                                  .connect()
-                                                  .finally(() => {
-                                                      this.connecting = false;
-                                                      // this.open = false;
-                                                  });
-                                          }}
-                                          >${connector.name}</thorin-button
-                                      >
-                                  `
-                          )}
-                      </div>`
-                    : ''}
+                <div class="space-y-4">
+                    ${this.activeConnector && !this.connecting
+                        ? html`<div class="connected">Connected</div>`
+                        : ''}
+                    ${this.activeConnector && this.connecting
+                        ? this.activeConnector.type == 'walletConnect'
+                            ? html`<div class="connecting-to">
+                                  ${this.showQR
+                                      ? html`<div class="qr">
+                                            <qr-code
+                                                data="${this.showQR}"
+                                            ></qr-code>
+                                        </div>`
+                                      : ''}
+                              </div>`
+                            : html`
+                                  <div class="connecting-to">
+                                      ${this.activeConnector.icon
+                                          ? html` <img
+                                                src="${this.activeConnector
+                                                    .icon}"
+                                                alt="${this.activeConnector
+                                                    .name}"
+                                            />`
+                                          : ''}
+                                      <div>
+                                          Connecting to
+                                          <span class="connector-name">
+                                              ${this.activeConnector.name}
+                                          </span>
+                                      </div>
+                                  </div>
+                              `
+                        : ''}
+                    ${!this.connecting
+                        ? html` <div class="button-list">
+                              ${this.connectors.map(
+                                  (connector) =>
+                                      html`
+                                          <thorin-button
+                                              width="full"
+                                              .onClick=${() =>
+                                                  this._connect(connector)}
+                                              >${connector.name}</thorin-button
+                                          >
+                                      `
+                              )}
+                          </div>`
+                        : ''}
+                </div>
             </thorin-modal>
         `;
     }
+
+    _connect(connector: Connector) {
+        this.connecting = true;
+        this.activeConnector = connector;
+        console.log(connector);
+        connector
+            .connect()
+            .catch((error) => {
+                console.log('failed to connect', error);
+            })
+            .finally(() => {
+                this.connecting = false;
+                // this.open = false;
+            });
+    }
 }
 
 declare global {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/web/index.html b/web/index.html
@@ -91,10 +91,10 @@ <h2>Labels</h2>
             <div class="card">
                 <h2>Modals</h2>
                 <div class="flex">
-                    <thorin-button onclick="opentestmodal()"
+                    <thorin-button onClick="opentestmodal()"
                         >Open Modal</thorin-button
                     >
-                    <thorin-button onclick="openconnectmodal()"
+                    <thorin-button onClick="openconnectmodal()"
                         >Open Connect Modal</thorin-button
                     >
                 </div>
@@ -108,7 +108,7 @@ <h2>Modals</h2>
                 <thorin-avatar name="nick.eth"></thorin-avatar>
                 <p>Hello world</p>
                 <div id="big"></div>
-                <thorin-button onclick="randomizebig()" width="full">
+                <thorin-button onClick="randomizebig()" width="full">
                     Randomize Modal Size
                 </thorin-button>
             </div>

diff --git a/web/index.ts b/web/index.ts
@@ -1,4 +1,5 @@
 import { hello } from '@ens-tools/thorin-core';
 import '@ens-tools/thorin-core/dist/style.css';
+import 'webcomponent-qr-code';
 
 hello();
diff --git a/web/package.json b/web/package.json
@@ -12,7 +12,8 @@
     "author": "V3X Labs BV.",
     "license": "LGPL-3.0-only",
     "dependencies": {
+        "@ens-tools/thorin-core": "workspace:*",
         "vite": "^5.1.2",
-        "@ens-tools/thorin-core": "workspace:*"
+        "webcomponent-qr-code": "^1.2.0"
     }
 }