feat: create modal and button wip

vechain · Oct 30, 2023 · 7803089 · 7803089
1 parent 4b9b9b0
commit 7803089
Show file tree

Hide file tree

Showing 23 changed files with 1,089 additions and 155 deletions.
diff --git a/packages/react-wallet-kit/package.json b/packages/react-wallet-kit/package.json
@@ -25,6 +25,7 @@
     "devDependencies": {
         "@types/react": "^18.2.28",
         "@types/react-dom": "^18.2.13",
+        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.1",
         "eslint": "*",
         "react": "^18.2.0",
         "tsup": "*",

diff --git a/packages/vanilla-wallet-kit/index.html b/packages/vanilla-wallet-kit/index.html
@@ -7,6 +7,6 @@
     <script type="module" src="./dist/index.js"></script>
   </head>
   <body>
-    <connect-button />
+    <connect-button-with-modal mode="dark"></connect-button-with-modal>
   </body>
 </html>
diff --git a/packages/vanilla-wallet-kit/package.json b/packages/vanilla-wallet-kit/package.json
@@ -18,30 +18,33 @@
     "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
     "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
     "build": "tsc",
-    "build:watch": "tsc --watch",
     "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js",
-    "clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
+    "clean": "yarn rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
+    "dev": "wds --watch",
     "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
     "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
     "docs:build": "rollup -c --file docs/my-element.bundled.js",
-    "docs:clean": "rimraf docs",
+    "docs:clean": "yarn rimraf docs",
     "docs:gen": "eleventy --config=.eleventy.cjs",
     "docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
     "docs:serve": "wds --root-dir=docs --node-resolve --watch",
     "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
     "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
     "lint:eslint": "eslint 'src/**/*.ts'",
     "lint:lit-analyzer": "lit-analyzer",
-    "serve": "wds --watch",
-    "serve:prod": "MODE=prod npm run serve",
+    "serve": "MODE=prod npm run serve",
     "test": "npm run test:dev && npm run test:prod",
     "test:dev": "wtr",
     "test:prod": "MODE=prod wtr",
     "test:prod:watch": "MODE=prod wtr --watch",
-    "test:watch": "wtr --watch"
+    "test:watch": "wtr --watch",
+    "watch": "tsc --watch"
   },
   "dependencies": {
-    "lit": "^3.0.0"
+    "@wagmi/core": "^1.4.5",
+    "@web3modal/wagmi": "^3.2.0",
+    "lit": "^3.0.0",
+    "viem": "^1.18.1"
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.1",
@@ -52,6 +55,7 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@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",
     "@web/dev-server": "^0.1.31",
     "@web/dev-server-legacy": "^1.0.0",
     "@web/test-runner": "^0.15.0",

diff --git a/packages/vanilla-wallet-kit/rollup.config.js b/packages/vanilla-wallet-kit/rollup.config.js
diff --git a/packages/vanilla-wallet-kit/src/assets/icons/close.ts b/packages/vanilla-wallet-kit/src/assets/icons/close.ts
@@ -0,0 +1,10 @@
+import {html, svg} from 'lit';
+
+export const CloseSvg = html`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    ${svg`
+      <path
+        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+    `}
+  </svg>
+`;
diff --git a/packages/vanilla-wallet-kit/src/assets/icons/index.ts b/packages/vanilla-wallet-kit/src/assets/icons/index.ts
@@ -0,0 +1 @@
+export * from './close';
diff --git a/packages/vanilla-wallet-kit/src/assets/index.ts b/packages/vanilla-wallet-kit/src/assets/index.ts
@@ -0,0 +1 @@
+export * from './icons';
diff --git a/packages/vanilla-wallet-kit/src/components/base-modal.ts b/packages/vanilla-wallet-kit/src/components/base-modal.ts
@@ -0,0 +1,71 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('base-modal')
+class Modal extends LitElement {
+  @property({type: Boolean})
+  open = false;
+
+  static override styles = css`
+    .modal-container {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .modal {
+      position: absolute;
+      background-color: white;
+      padding: 20px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+      box-sizing: border-box;
+    }
+
+    @media (max-width: 600px) {
+      .modal {
+        width: 100%;
+        border-top-left-radius: 16px;
+        border-top-right-radius: 16px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    }
+
+    @media (min-width: 600px) {
+      .modal {
+        width: 400px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 16px;
+      }
+    }
+  `;
+
+  @property({type: Function})
+  onClose = () => {};
+
+  override render() {
+    if (!this.open) return html``;
+    return html`
+      <div class="modal-container" @click=${this.onClose}>
+        <div class="modal">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'base-modal': Modal;
+  }
+}
diff --git a/packages/vanilla-wallet-kit/src/components/index.ts b/packages/vanilla-wallet-kit/src/components/index.ts
@@ -0,0 +1 @@
+export * from './base-modal';
diff --git a/packages/vanilla-wallet-kit/src/connect-button-with-modal.ts b/packages/vanilla-wallet-kit/src/connect-button-with-modal.ts
@@ -0,0 +1,49 @@
+import {LitElement, html, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Theme, ThemeMode} from './wallet-kit';
+
+@customElement('connect-button-with-modal')
+class ConnectButtonWithModal extends LitElement {
+  @property({type: String})
+  override title = 'Connect Wallet';
+
+  @property({type: ThemeMode})
+  mode = ThemeMode.Light;
+
+  @property({type: Theme})
+  theme = Theme.Default;
+
+  @property({type: Boolean})
+  open = false;
+
+  private handleOpen = () => {
+    this.open = true;
+  };
+
+  private handleClose = () => {
+    this.open = false;
+  };
+
+  override render() {
+    return html`
+      <div>
+        <connect-button
+          .title=${this.title}
+          .mode=${this.mode}
+          .theme=${this.theme}
+          .onClick=${this.handleOpen}
+        ></connect-button>
+        <connect-modal
+          open=${this.open || nothing}
+          .onClose=${this.handleClose}
+        ></connect-modal>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'connect-button-with-modal': ConnectButtonWithModal;
+  }
+}
diff --git a/packages/vanilla-wallet-kit/src/connect-button.ts b/packages/vanilla-wallet-kit/src/connect-button.ts
@@ -1,29 +1,49 @@
 import {LitElement, html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {Theme, ThemeMode, Colors} from './wallet-kit';
 
 @customElement('connect-button')
 export class ConnectButton extends LitElement {
   static override styles = css`
     button {
+      cursor: pointer;
       display: block;
       border: none;
       border-radius: 20px;
-      background-color: color(
-        display-p3 0.9647058823529412 0.9686274509803922 0.9764705882352941
-      );
       padding: 8px 12px;
     }
+    button:hover {
+      opacity: 0.9;
+    }
+
+    button.light {
+      background-color: ${Colors.LightGray};
+      color: ${Colors.Dark};
+    }
+    button.dark {
+      background-color: ${Colors.Dark};
+      color: ${Colors.LightGray};
+    }
   `;
 
   @property()
-  text = 'Connect Wallet';
+  override title = 'Connect Wallet';
 
-  override render() {
-    return html` <button @click=${this._onClick}>${this.text}</button> `;
-  }
+  @property()
+  mode = ThemeMode.Light;
+
+  @property()
+  theme = Theme.Default;
 
-  private _onClick() {
-    this.dispatchEvent(new CustomEvent('count-changed'));
+  @property({type: Function})
+  onClick = () => {};
+
+  override render() {
+    return html`
+      <button class="${this.mode} ${this.theme}" @click=${this.onClick}>
+        ${this.title}
+      </button>
+    `;
   }
 }
 

diff --git a/packages/vanilla-wallet-kit/src/connect-modal.ts b/packages/vanilla-wallet-kit/src/connect-modal.ts
@@ -1,42 +1,39 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import {LitElement, html, css} from 'lit';
+import {LitElement, html, css, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {CloseSvg} from './assets';
 
-/**
- * An example element.
- *
- * @fires count-changed - Indicates when the count changes
- * @slot - This element has a slot
- * @csspart button - The button
- */
 @customElement('connect-modal')
-export class ConnectModal extends LitElement {
+class ConnectModal extends LitElement {
+  @property({type: Boolean})
+  open = false;
+
   static override styles = css`
-    button {
-      display: block;
-      border: none;
-      border-radius: 20px;
-      background-color: color(
-        display-p3 0.9647058823529412 0.9686274509803922 0.9764705882352941
-      );
-      padding: 8px 12px;
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .close-icon {
+      cursor: pointer;
+      width: 20px;
+      height: 20px;
     }
   `;
 
-  @property()
-  text = 'Connect Wallet';
+  @property({type: Function})
+  onClose = () => {};
 
   override render() {
-    return html` <button @click=${this._onClick}>${this.text}</button> `;
-  }
-
-  private _onClick() {
-    this.dispatchEvent(new CustomEvent('count-changed'));
+    return html`
+      <base-modal open=${this.open || nothing} .onClose=${this.onClose}>
+        <div class="modal-header">
+          <div></div>
+          <h3>Connect Wallet</h3>
+          <div class="close-icon" @click=${this.onClose}>${CloseSvg}</div>
+          <w3m-button />
+        </div>
+      </base-modal>
+    `;
   }
 }
 

diff --git a/packages/vanilla-wallet-kit/src/index.ts b/packages/vanilla-wallet-kit/src/index.ts
@@ -1,3 +1,5 @@
+export * from './connect-button-with-modal';
 export * from './connect-button';
 export * from './connect-modal';
-export * from './my-element';
+export * from './components';
+export * from './utils';