feat: create modal and button with vanilla js

vechain · Oct 31, 2023 · 9b9b7b2 · 9b9b7b2
1 parent 7803089
commit 9b9b7b2
Show file tree

Hide file tree

Showing 31 changed files with 393 additions and 386 deletions.
diff --git a/apps/sample-vanilla-app/index.html b/apps/sample-vanilla-app/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 
-<html>
+<html lang="en">
     <head>
+        <title>Sample Vanilla App</title>
         <meta charset="utf-8" />
         <script crossorigin type="module" src="index.js"></script>
         <style>
@@ -12,8 +13,6 @@
         </style>
     </head>
     <body>
-        <connect-button>
-            <p>This is child content</p>
-        </connect-button>
+        <vwk-connect-button-with-modal></vwk-connect-button-with-modal>
     </body>
 </html>
diff --git a/apps/sample-vanilla-app/index.js b/apps/sample-vanilla-app/index.js
@@ -1 +1,7 @@
 import '@vechain/vanilla-wallet-kit';
+
+// eslint-disable-next-line no-undef
+addEventListener('vwk-source-card-clicked', (e) => {
+    // eslint-disable-next-line no-console
+    console.log('vwk-source-card-clicked', e.detail);
+});
diff --git a/packages/vanilla-wallet-kit/index.html b/packages/vanilla-wallet-kit/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 
-<html>
+<html lang="en">
   <head>
+    <title>Connect</title>
     <meta charset="utf-8" />
-    <script src="./node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="./dist/index.js"></script>
   </head>
   <body>
-    <connect-button-with-modal mode="dark"></connect-button-with-modal>
+    <vwk-connect-button-with-modal mode="DARK"></vwk-connect-button-with-modal>
   </body>
 </html>
diff --git a/packages/vanilla-wallet-kit/package.json b/packages/vanilla-wallet-kit/package.json
@@ -41,10 +41,9 @@
     "watch": "tsc --watch"
   },
   "dependencies": {
-    "@wagmi/core": "^1.4.5",
-    "@web3modal/wagmi": "^3.2.0",
-    "lit": "^3.0.0",
-    "viem": "^1.18.1"
+    "@web3modal/ethers5": "^3.2.0",
+    "ethers": "5.7.2",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.1",

diff --git a/packages/vanilla-wallet-kit/src/assets/icons/close.ts b/packages/vanilla-wallet-kit/src/assets/icons/close.ts
@@ -1,10 +1,17 @@
 import {html, svg} from 'lit';
 
-export const CloseSvg = html`
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    ${svg`
+export const CloseSvg = 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" />
-    `}
+    `;
+
+export const LightCloseSvg = html`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#777777">
+    ${CloseSvg}
+  </svg>
+`;
+export const DarkCloseSvg = html`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#999999">
+    ${CloseSvg}
   </svg>
 `;
diff --git a/packages/vanilla-wallet-kit/src/assets/images/index.ts b/packages/vanilla-wallet-kit/src/assets/images/index.ts
@@ -0,0 +1,4 @@
+export * from './sync';
+export * from './sync2';
+export * from './wallet-connect';
+export * from './veworld';
diff --git a/packages/vanilla-wallet-kit/src/assets/images/sync.ts b/packages/vanilla-wallet-kit/src/assets/images/sync.ts
diff --git a/packages/vanilla-wallet-kit/src/assets/images/sync2.ts b/packages/vanilla-wallet-kit/src/assets/images/sync2.ts
@@ -0,0 +1 @@
+export const Sync2Logo = `data:image/png;base64,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`;
diff --git a/packages/vanilla-wallet-kit/src/assets/images/veworld.ts b/packages/vanilla-wallet-kit/src/assets/images/veworld.ts
diff --git a/packages/vanilla-wallet-kit/src/assets/images/wallet-connect.ts b/packages/vanilla-wallet-kit/src/assets/images/wallet-connect.ts
diff --git a/packages/vanilla-wallet-kit/src/assets/index.ts b/packages/vanilla-wallet-kit/src/assets/index.ts
@@ -1 +1,2 @@
 export * from './icons';
+export * from './images';
diff --git a/packages/vanilla-wallet-kit/src/components/base/index.ts b/packages/vanilla-wallet-kit/src/components/base/index.ts
@@ -0,0 +1 @@
+export * from './vwk-base-modal';
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
@@ -0,0 +1 @@
+export * from './vwk-base-modal';
diff --git a/...a-wallet-kit/src/components/base-modal.ts → ...nts/base/vwk-base-modal/vwk-base-modal.ts b/...a-wallet-kit/src/components/base-modal.ts → ...nts/base/vwk-base-modal/vwk-base-modal.ts
@@ -1,7 +1,8 @@
 import {LitElement, html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {Colors, Theme, ThemeMode} from '../../../wallet-kit';
 
-@customElement('base-modal')
+@customElement('vwk-base-modal')
 class Modal extends LitElement {
   @property({type: Boolean})
   open = false;
@@ -21,12 +22,20 @@ class Modal extends LitElement {
 
     .modal {
       position: absolute;
-      background-color: white;
-      padding: 20px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       box-sizing: border-box;
     }
 
+    .modal.LIGHT {
+      background-color: ${Colors.White};
+      color: ${Colors.Dark};
+    }
+
+    .modal.DARK {
+      background-color: ${Colors.Dark};
+      color: ${Colors.LightGray};
+    }
+
     @media (max-width: 600px) {
       .modal {
         width: 100%;
@@ -40,7 +49,7 @@ class Modal extends LitElement {
 
     @media (min-width: 600px) {
       .modal {
-        width: 400px;
+        width: 350px;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -52,11 +61,24 @@ class Modal extends LitElement {
   @property({type: Function})
   onClose = () => {};
 
+  stopPropagation = (event: Event) => {
+    event.stopPropagation();
+  };
+
+  @property()
+  mode = ThemeMode.Light;
+
+  @property()
+  theme = Theme.Default;
+
   override render() {
     if (!this.open) return html``;
     return html`
       <div class="modal-container" @click=${this.onClose}>
-        <div class="modal">
+        <div
+          class="modal ${this.mode} ${this.theme}"
+          @click=${this.stopPropagation}
+        >
           <slot></slot>
         </div>
       </div>
@@ -66,6 +88,6 @@ class Modal extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'base-modal': Modal;
+    'vwk-base-modal': Modal;
   }
 }
diff --git a/packages/vanilla-wallet-kit/src/components/index.ts b/packages/vanilla-wallet-kit/src/components/index.ts
@@ -1 +1,5 @@
-export * from './base-modal';
+export * from './base';
+export * from './vwk-connect-modal';
+export * from './vwk-connect-button';
+export * from './vwk-connect-button-with-modal';
+export * from './vwk-fonts';
diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts
@@ -0,0 +1 @@
+export * from './vwk-connect-button-with-modal';
diff --git a/...llet-kit/src/connect-button-with-modal.ts → ...th-modal/vwk-connect-button-with-modal.ts b/...llet-kit/src/connect-button-with-modal.ts → ...th-modal/vwk-connect-button-with-modal.ts
@@ -1,8 +1,8 @@
-import {LitElement, html, nothing} from 'lit';
+import {LitElement, html} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
-import {Theme, ThemeMode} from './wallet-kit';
+import {SourceInfo, Theme, ThemeMode} from '../../wallet-kit';
 
-@customElement('connect-button-with-modal')
+@customElement('vwk-connect-button-with-modal')
 class ConnectButtonWithModal extends LitElement {
   @property({type: String})
   override title = 'Connect Wallet';
@@ -16,6 +16,9 @@ class ConnectButtonWithModal extends LitElement {
   @property({type: Boolean})
   open = false;
 
+  @property({type: Function})
+  onSourceClick?: (source?: SourceInfo) => {} = undefined;
+
   private handleOpen = () => {
     this.open = true;
   };
@@ -27,23 +30,27 @@ class ConnectButtonWithModal extends LitElement {
   override render() {
     return html`
       <div>
-        <connect-button
+        <vwk-fonts></vwk-fonts>
+        <vwk-connect-button
           .title=${this.title}
           .mode=${this.mode}
           .theme=${this.theme}
           .onClick=${this.handleOpen}
-        ></connect-button>
-        <connect-modal
-          open=${this.open || nothing}
+        ></vwk-connect-button>
+        <vwk-connect-modal
+          .mode=${this.mode}
+          .theme=${this.theme}
+          .open=${this.open}
           .onClose=${this.handleClose}
-        ></connect-modal>
+          .onSourceClick=${this.onSourceClick}
+        ></vwk-connect-modal>
       </div>
     `;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'connect-button-with-modal': ConnectButtonWithModal;
+    'vwk-connect-button-with-modal': ConnectButtonWithModal;
   }
 }
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
@@ -0,0 +1 @@
+export * from './vwk-connect-button';
diff --git a/.../vanilla-wallet-kit/src/connect-button.ts → .../vwk-connect-button/vwk-connect-button.ts b/.../vanilla-wallet-kit/src/connect-button.ts → .../vwk-connect-button/vwk-connect-button.ts
@@ -1,26 +1,27 @@
 import {LitElement, html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
-import {Theme, ThemeMode, Colors} from './wallet-kit';
+import {Theme, ThemeMode, Colors} from '../../wallet-kit';
 
-@customElement('connect-button')
-export class ConnectButton extends LitElement {
+@customElement('vwk-connect-button')
+class ConnectButton extends LitElement {
   static override styles = css`
     button {
       cursor: pointer;
       display: block;
       border: none;
-      border-radius: 20px;
+      border-radius: 12px;
       padding: 8px 12px;
+      font-family: 'Inter', sans-serif;
     }
     button:hover {
       opacity: 0.9;
     }
 
-    button.light {
+    button.LIGHT {
       background-color: ${Colors.LightGray};
       color: ${Colors.Dark};
     }
-    button.dark {
+    button.DARK {
       background-color: ${Colors.Dark};
       color: ${Colors.LightGray};
     }
@@ -49,6 +50,6 @@ export class ConnectButton extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'connect-button': ConnectButton;
+    'vwk-connect-button': ConnectButton;
   }
 }
diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts
@@ -0,0 +1,2 @@
+export * from './vwk-connect-modal';
+export * from './vwk-source-card';
diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-connect-modal.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/vwk-connect-modal.ts
@@ -0,0 +1,81 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {DarkCloseSvg, LightCloseSvg} from '../../assets';
+import {SourceInfo, Theme, ThemeMode, WalletSources} from '../../wallet-kit';
+
+@customElement('vwk-connect-modal')
+class ConnectModal extends LitElement {
+  static override styles = css`
+    .modal-container {
+      padding: 20px;
+    }
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 10px;
+      font-family: 'Inter', sans-serif;
+    }
+    .modal-body {
+      flex-direction: column;
+    }
+    .close-icon {
+      cursor: pointer;
+      width: 20px;
+      height: 20px;
+    }
+  `;
+
+  @property({type: Boolean})
+  open = false;
+
+  @property({type: Function})
+  onClose = () => {};
+
+  @property({type: Function})
+  onSourceClick?: (source?: SourceInfo) => {} = undefined;
+
+  @property()
+  mode = ThemeMode.Light;
+
+  @property()
+  theme = Theme.Default;
+
+  override render() {
+    return html`
+      <vwk-fonts></vwk-fonts>
+      <vwk-base-modal
+        .open=${this.open}
+        .onClose=${this.onClose}
+        .mode=${this.mode}
+        .theme=${this.theme}
+      >
+        <div class="modal-container">
+          <div class="modal-header">
+            <div></div>
+            <div>Connect Wallet</div>
+            <div class="close-icon" @click=${this.onClose}>
+              ${this.mode == ThemeMode.Light ? LightCloseSvg : DarkCloseSvg}
+            </div>
+          </div>
+          <div class="modal-body">
+            ${WalletSources.map(
+              (source) =>
+                html`<vwk-source-card
+                  .source=${source}
+                  .mode=${this.mode}
+                  .onClick=${this.onSourceClick}
+                ></vwk-source-card>`
+            )}
+          </div>
+        </div>
+      </vwk-base-modal>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vwk-connect-modal': ConnectModal;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const Sync2Logo = `data:image/png;base64,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`;
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './icons';
		export * from './images';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from './vwk-connect-button-with-modal';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './vwk-connect-modal';
		export * from './vwk-source-card';