From bc5cbd2907d9dfdc5fa1dd2b77b9798085f71d64 Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Thu, 15 Feb 2024 08:38:36 +0000
Subject: [PATCH] Introduce WalletConnect

---
 packages/thorin-core/package.json             |   4 +-
 packages/thorin-core/rollup.config.mjs        |   2 +
 packages/thorin-core/src/button/index.ts      |  12 +-
 .../thorin-core/src/connect-modal/index.ts    | 163 +++++++++++++-----
 pnpm-lock.yaml                                |  40 +++++
 web/index.html                                |   6 +-
 web/index.ts                                  |   1 +
 web/package.json                              |   3 +-
 8 files changed, 176 insertions(+), 55 deletions(-)

diff --git a/packages/thorin-core/package.json b/packages/thorin-core/package.json
index fbe6b25..f63a285 100644
--- 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
index 06cefa0..8658535 100644
--- 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
index cf0235d..6e8b0f6 100644
--- a/packages/thorin-core/src/button/index.ts
+++ b/packages/thorin-core/src/button/index.ts
@@ -154,13 +154,13 @@ 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>
@@ -168,11 +168,11 @@ export class ThorinButton extends LitElement {
         `;
     }
 
-    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
index 3b2dcfd..bc976b7 100644
--- 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
index 2e3e70e..c2d15e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@rollup/plugin-commonjs':
         specifier: ^25.0.7
         version: 25.0.7(rollup@4.10.0)
+      '@rollup/plugin-json':
+        specifier: ^6.1.0
+        version: 6.1.0(rollup@4.10.0)
       '@wagmi/connectors':
         specifier: ^4.1.14
         version: 4.1.14(@wagmi/core@2.6.5)(react-native@0.73.4)(react@18.2.0)(rollup@4.10.0)(typescript@5.3.3)(viem@2.7.9)
@@ -26,6 +29,9 @@ importers:
       lit:
         specifier: ^3.1.2
         version: 3.1.2
+      rollup-plugin-peer-deps-external:
+        specifier: ^2.2.4
+        version: 2.2.4(rollup@4.10.0)
       viem:
         specifier: 2.x
         version: 2.7.9(typescript@5.3.3)
@@ -66,6 +72,9 @@ importers:
       vite:
         specifier: ^5.1.2
         version: 5.1.2
+      webcomponent-qr-code:
+        specifier: ^1.2.0
+        version: 1.2.0
 
 packages:
 
@@ -2879,6 +2888,19 @@ packages:
       rollup: 4.10.0
     dev: false
 
+  /@rollup/plugin-json@6.1.0(rollup@4.10.0):
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.10.0)
+      rollup: 4.10.0
+    dev: false
+
   /@rollup/plugin-node-resolve@15.2.3(rollup@4.10.0):
     resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
     engines: {node: '>=14.0.0'}
@@ -7869,6 +7891,10 @@ packages:
       yargs: 15.4.1
     dev: false
 
+  /qrjs@0.2.0:
+    resolution: {integrity: sha512-6tOePfihDByEXDULYlT/FmV27m5rX6IehCeZ82LouBD5kzSNqNXuVog8m1KGuGNyQovVOb0nKOB2ybHRRRgKJw==}
+    dev: false
+
   /query-string@7.1.3:
     resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
     engines: {node: '>=6'}
@@ -8268,6 +8294,14 @@ packages:
       is-plain-object: 3.0.1
     dev: true
 
+  /rollup-plugin-peer-deps-external@2.2.4(rollup@4.10.0):
+    resolution: {integrity: sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==}
+    peerDependencies:
+      rollup: '*'
+    dependencies:
+      rollup: 4.10.0
+    dev: false
+
   /rollup-plugin-visualizer@5.12.0(rollup@4.10.0):
     resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
     engines: {node: '>=14'}
@@ -9288,6 +9322,12 @@ packages:
       defaults: 1.0.4
     dev: false
 
+  /webcomponent-qr-code@1.2.0:
+    resolution: {integrity: sha512-1qEJ70HpiO0GbPy9T6XCtHn+RyI3awtpU88BBPQkhefwuRKg408X6z7mJeQxBnKkFQSv3ZWwmlgMvIjIO3RGOg==}
+    dependencies:
+      qrjs: 0.2.0
+    dev: false
+
   /webextension-polyfill-ts@0.25.0:
     resolution: {integrity: sha512-ikQhwwHYkpBu00pFaUzIKY26I6L87DeRI+Q6jBT1daZUNuu8dSrg5U9l/ZbqdaQ1M/TTSPKeAa3kolP5liuedw==}
     deprecated: This project has moved to @types/webextension-polyfill
diff --git a/web/index.html b/web/index.html
index bc569e9..dff2b3e 100644
--- 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
index da912d6..c569eee 100644
--- 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
index 29cd216..b2d7581 100644
--- 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"
     }
 }