Introduce basic ConnectModal

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

Hide file tree

Showing 9 changed files with 7,243 additions and 411 deletions.
diff --git a/packages/thorin-core/.eslintrc.json b/packages/thorin-core/.eslintrc.json
@@ -16,6 +16,7 @@
         "browser": true
     },
     "rules": {
-        "unicorn/template-indent": "off"
+        "unicorn/template-indent": "off",
+        "sonarjs/no-nested-template-literals": "off"
     }
 }
diff --git a/packages/thorin-core/package.json b/packages/thorin-core/package.json
@@ -4,6 +4,7 @@
     "main": "dist/bundle.js",
     "module": "dist/bundle.js",
     "types": "dist/index.d.ts",
+    "type": "module",
     "scripts": {
         "build": "rollup -c",
         "lint": "eslint -c .eslintrc.json --ext .ts ./src"
@@ -12,8 +13,8 @@
     "author": "V3X Labs BV.",
     "license": "LGPL-3.0-only",
     "dependencies": {
-        "lit": "^3.1.2",
-        "rollup-plugin-copy": "^3.5.0"
+        "@rollup/plugin-commonjs": "^25.0.7",
+        "lit": "^3.1.2"
     },
     "devDependencies": {
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -22,7 +23,13 @@
         "eslint": "^8.56.0",
         "eslint-plugin-v3xlabs": "^1.6.2",
         "rollup": "^4.10.0",
+        "rollup-plugin-copy": "^3.5.0",
         "tslib": "^2.6.2",
         "typescript": "^5.3.3"
+    },
+    "peerDependencies": {
+        "@wagmi/connectors": "^4.1.14",
+        "@wagmi/core": "^2.6.5",
+        "viem": "2.x"
     }
-}
+}
diff --git a/packages/thorin-core/rollup.config.mjs b/packages/thorin-core/rollup.config.mjs
@@ -1,21 +1,23 @@
-import typescript from "@rollup/plugin-typescript";
-import { nodeResolve } from "@rollup/plugin-node-resolve";
-import copy from "rollup-plugin-copy";
+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';
 
 export default {
-    input: "src/index.ts",
+    input: 'src/index.ts',
     output: [
         {
-            file: "dist/bundle.js",
-            format: "esm",
+            file: 'dist/bundle.js',
+            format: 'esm',
             sourcemap: true,
         },
     ],
     plugins: [
         nodeResolve(),
+        commonjs(),
         typescript(),
         copy({
-            targets: [{ src: "src/style.css", dest: "dist" }],
+            targets: [{ src: 'src/style.css', dest: 'dist' }],
         }),
     ],
 };
diff --git a/packages/thorin-core/src/connect-modal/index.ts b/packages/thorin-core/src/connect-modal/index.ts
@@ -1,17 +1,100 @@
+import { Connector, createConfig, getConnectors, http } from '@wagmi/core';
+import { mainnet } from '@wagmi/core/chains';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+
+const wagmiConfig = createConfig({
+    chains: [mainnet],
+    transports: {
+        [mainnet.id]: http(),
+    },
+});
 
 @customElement('thorin-connect-modal')
 export class ThorinConnectModal extends LitElement {
     @property({ type: Boolean, reflect: true })
     open = false;
 
-    static styles = css``;
+    static styles = css`
+        .button-list {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        .connecting-to {
+            aspect-ratio: 1/1;
+            width: 100%;
+            background: var(--thorin-background-secondary);
+            border-radius: var(--thorin-radius-card);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+        }
+        .connecting-to img {
+            width: 48px;
+            height: 48px;
+            border-radius: 4px;
+        }
+        .connector-name {
+            font-weight: 600;
+        }
+    `;
+
+    @state()
+    connecting: boolean = false;
+
+    @state()
+    activeConnector: Connector | undefined = undefined;
 
     render() {
+        const connectors = getConnectors(wagmiConfig);
+
         return html`
-            <thorin-modal ?open="${this.open}">
-                <div>connect modal</div>
+            <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>`
+                    : ''}
             </thorin-modal>
         `;
     }

diff --git a/packages/thorin-core/src/index.ts b/packages/thorin-core/src/index.ts
@@ -1,9 +1,9 @@
-export { ThorinAvatar } from './avatar';
-export { ThorinButton } from './button';
-export { ThorinConnectModal } from './connect-modal';
-export { ThorinLabel } from './label';
-export { ThorinModal } from './modal';
-export { ThorinTag } from './tag';
+export { ThorinAvatar } from './avatar/index.js';
+export { ThorinButton } from './button/index.js';
+export { ThorinConnectModal } from './connect-modal/index.js';
+export { ThorinLabel } from './label/index.js';
+export { ThorinModal } from './modal/index.js';
+export { ThorinTag } from './tag/index.js';
 
 export const hello = () => {
     console.log('Thorin Design v0.0.1');

diff --git a/packages/thorin-core/src/modal/index.ts b/packages/thorin-core/src/modal/index.ts
@@ -6,6 +6,9 @@ export class ThorinModal extends LitElement {
     @property({ type: Boolean, reflect: true })
     open = false;
 
+    @property({ type: String })
+    title = '';
+
     static styles = css`
         :host {
             display: none;
@@ -62,6 +65,12 @@ export class ThorinModal extends LitElement {
             top: 50%;
             transform: translate(-50%, -50%);
         }
+        .title {
+            text-align: center;
+            font-weight: bold;
+            font-size: 20px;
+            padding-bottom: var(--thorin-spacing-2);
+        }
         /* Modal Breakpoint */
         @media (max-width: 576px) {
             .modal-container {
@@ -98,6 +107,7 @@ export class ThorinModal extends LitElement {
             <div class="modal-container">
                 <div class="modal">
                     <div class="content">
+                        <div class="title">${this.title}</div>
                         <slot></slot>
                     </div>
                 </div>

diff --git a/packages/thorin-core/tsconfig.json b/packages/thorin-core/tsconfig.json
@@ -1,14 +1,20 @@
 {
     "compilerOptions": {
-        "target": "es2020",
-        "module": "es2020",
-        "lib": ["es2020", "dom"],
+        "target": "ES2020",
+        "module": "ESNext",
+        "lib": ["ESNext", "dom"],
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
         "declaration": true,
         "outDir": "./dist",
-        "moduleResolution": "node",
-        "emitDecoratorMetadata": true,
+        "sourceMap": true,
         "experimentalDecorators": true,
-        "sourceMap": true
+        "emitDecoratorMetadata": true
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules", "dist"]