Merge branch 'main' into 69-feat-implement-the-address-badge-as-a-van…

…illa-component
vechain · Nov 22, 2023 · 2898f57 · 2898f57
2 parents dd97392 + 41c8d56
commit 2898f57
Show file tree

Hide file tree

Showing 12 changed files with 181 additions and 36 deletions.
diff --git a/packages/dapp-kit-ui/index.html b/packages/dapp-kit-ui/index.html
@@ -9,7 +9,7 @@
     </head>
     <body>
         <vwk-connect-button-with-modal
-            mode="DARK"
+            mode="LIGHT"
         ></vwk-connect-button-with-modal>
     </body>
 </html>
diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json
@@ -17,7 +17,7 @@
     "scripts": {
         "build": "tsup",
         "clean": "rm -rf dist .turbo",
-        "dev": "parcel --no-cache index.html",
+        "dev": "rm -rf ../../.parcel-cache; parcel --no-cache index.html",
         "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
         "lint": "tsc --noEmit &&  eslint src --ext .js,.jsx,.ts,.tsx",
         "purge": "yarn clean && rm -rf node_modules",

diff --git a/packages/dapp-kit-ui/src/assets/icons/check.ts b/packages/dapp-kit-ui/src/assets/icons/check.ts
@@ -0,0 +1,9 @@
+import { html } from 'lit';
+
+export const CheckSvg = html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3496ff">
+        <path
+            d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+        />
+    </svg>
+`;
diff --git a/packages/dapp-kit-ui/src/assets/icons/copy.ts b/packages/dapp-kit-ui/src/assets/icons/copy.ts
@@ -1,17 +1,26 @@
 import { html, svg } from 'lit';
 
 export const CopySvg = svg`
-      <path
-        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
+      <path d="M17.5 14H19C20.1046 14 21 13.1046 21 12V5C21 3.89543 20.1046 3 19 3H12C10.8954 3 10 3.89543 10 5V6.5M5 10H12C13.1046 10 14 10.8954 14 12V19C14 20.1046 13.1046 21 12 21H5C3.89543 21 3 20.1046 3 19V12C3 10.8954 3.89543 10 5 10Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     `;
 
 export const LightCopySvg = html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#777777">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        stroke="#777777"
+        fill="#00000000"
+    >
         ${CopySvg}
     </svg>
 `;
 export const DarkCopySvg = html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#999999">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        stroke="#999999"
+        fill="#00000000"
+    >
         ${CopySvg}
     </svg>
 `;
diff --git a/packages/dapp-kit-ui/src/assets/icons/index.ts b/packages/dapp-kit-ui/src/assets/icons/index.ts
@@ -1,3 +1,4 @@
 export * from './close';
 export * from './chevron-left';
 export * from './copy';
+export * from './check';
diff --git a/packages/dapp-kit-ui/src/components/base/vwk-base-modal/index.ts b/packages/dapp-kit-ui/src/components/base/vwk-base-modal/index.ts
@@ -1,6 +1,6 @@
 import type { TemplateResult } from 'lit';
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { Breakpoint, Colors } from '../../../constants';
 import type { Theme, ThemeMode } from '../../../constants/theme';
 
@@ -17,11 +17,23 @@ export class Modal extends LitElement {
             width: 100%;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.5);
+            opacity: 1;
+            transition: opacity 0.3s;
+        }
+        .modal-container.hidden {
+            opacity: 0;
+            pointer-events: none;
         }
 
         .modal {
             position: absolute;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            transition: height 0.2s, opacity 0.3s;
+            overflow: hidden;
+            opacity: 1;
+        }
+        .modal-container.hidden .modal {
+            opacity: 0;
         }
 
         .modal.LIGHT {
@@ -55,6 +67,30 @@ export class Modal extends LitElement {
             }
         }
     `;
+
+    changeHeightOnResize = (): void => {
+        if (!this.modalSubContainer) {
+            return;
+        }
+        this.modalHeight = this.modalSubContainer.clientHeight;
+        new ResizeObserver(() => {
+            this.modalHeight = this.modalSubContainer?.clientHeight ?? 0;
+        }).observe(this.modalSubContainer);
+    };
+
+    override connectedCallback(): void {
+        super.connectedCallback();
+        addEventListener('load', this.changeHeightOnResize);
+    }
+    override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        window.removeEventListener('load', this.changeHeightOnResize);
+    }
+
+    @query('.modal-sub-container')
+    modalSubContainer?: Element;
+    @property()
+    modalHeight?: number;
     @property({ type: Boolean })
     open = false;
     @property()
@@ -70,14 +106,21 @@ export class Modal extends LitElement {
     };
 
     override render(): TemplateResult {
-        if (!this.open) return html``;
         return html`
-            <div class="modal-container" @click=${this.onClose}>
+            <div
+                class="modal-container ${!this.open ? 'hidden' : ''}"
+                @click=${this.onClose}
+            >
                 <div
                     class="modal ${this.mode} ${this.theme}"
                     @click=${this.stopPropagation}
+                    style="height: ${this.modalHeight
+                        ? `${this.modalHeight}px`
+                        : 'auto'}"
                 >
-                    <slot></slot>
+                    <div class="modal-sub-container">
+                        <slot></slot>
+                    </div>
                 </div>
             </div>
         `;

diff --git a/packages/dapp-kit-ui/src/components/vwk-connect-button/index.ts b/packages/dapp-kit-ui/src/components/vwk-connect-button/index.ts
@@ -20,13 +20,17 @@ export class ConnectButton extends LitElement {
             opacity: 0.9;
         }
 
+        button:active {
+            opacity: 0.8;
+        }
+
         button.LIGHT {
             background-color: ${Colors.LightGrey};
             color: ${Colors.Dark};
         }
 
         button.DARK {
-            background-color: ${Colors.Dark};
+            background-color: ${Colors.DarkGrey};
             color: ${Colors.LightGrey};
         }
     `;

diff --git a/packages/dapp-kit-ui/src/components/vwk-connect-modal/index.ts b/packages/dapp-kit-ui/src/components/vwk-connect-modal/index.ts
@@ -10,7 +10,7 @@ import {
     LightChevronLeftSvg,
     LightCloseSvg,
 } from '../../assets';
-import { dispatchCustomEvent, subscribeToCustomEvent } from '../../utils';
+import { subscribeToCustomEvent } from '../../utils';
 import { DAppKit } from '../../client';
 import type { Theme, ThemeMode } from '../../constants/theme';
 
@@ -19,7 +19,6 @@ export class ConnectModal extends LitElement {
     static override styles = css`
         .modal-container {
             padding: 20px;
-            transition: width 5s, height 4s;
         }
 
         .modal-header {
@@ -32,7 +31,6 @@ export class ConnectModal extends LitElement {
 
         .modal-body {
             flex-direction: column;
-            transition: width 2s, height 4s;
         }
 
         .modal-footer {
@@ -126,6 +124,18 @@ export class ConnectModal extends LitElement {
     @property({ type: Function })
     onClose: () => void = () => nothing;
 
+    private onBack = (): void => {
+        this.walletConnectQRcode = undefined;
+    };
+
+    private handleClose = (): void => {
+        // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal
+        setTimeout(() => {
+            this.onBack();
+        }, 500);
+        this.onClose();
+    };
+
     override render(): TemplateResult {
         return html`
         <vwk-fonts></vwk-fonts>
@@ -180,15 +190,6 @@ export class ConnectModal extends LitElement {
         </vwk-base-modal>
     `;
     }
-
-    private onBack = (): void => {
-        dispatchCustomEvent('vwk-close-wc-modal', undefined);
-    };
-
-    private handleClose = (): void => {
-        this.onBack();
-        this.onClose();
-    };
 }
 
 declare global {

diff --git a/packages/dapp-kit-ui/src/components/vwk-source-card/index.ts b/packages/dapp-kit-ui/src/components/vwk-source-card/index.ts
@@ -24,6 +24,10 @@ export class SourceCard extends LitElement {
         }
 
         .card:hover {
+            opacity: 0.9;
+        }
+
+        .card:active {
             opacity: 0.8;
         }
 

diff --git a/packages/dapp-kit-ui/src/components/vwk-wallet-connect-qrcode/index.ts b/packages/dapp-kit-ui/src/components/vwk-wallet-connect-qrcode/index.ts
@@ -2,7 +2,12 @@ import type { TemplateResult } from 'lit';
 import { css, html, LitElement, nothing, svg } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Colors } from '../../constants';
-import { DarkCopySvg, LightCopySvg, WalletConnectLogo } from '../../assets';
+import {
+    CheckSvg,
+    DarkCopySvg,
+    LightCopySvg,
+    WalletConnectLogo,
+} from '../../assets';
 import { QrCodeUtil } from '../../utils';
 import type { Theme, ThemeMode } from '../../constants/theme';
 
@@ -17,11 +22,11 @@ export class WalletConnectQrCode extends LitElement {
         }
 
         .qrcode-container {
-            margin: 20px auto 30px auto;
+            margin: 20px auto 20px auto;
             background-color: ${Colors.White};
             width: 280px;
             padding: 10px;
-            border: 1px solid ${Colors.LightGrey};
+            border: 1px solid ${Colors.Grey};
             border-radius: 20px;
             display: flex;
             justify-content: center;
@@ -35,6 +40,40 @@ export class WalletConnectQrCode extends LitElement {
             object-fit: contain;
         }
 
+        .separator {
+            display: flex;
+            align-items: center;
+            padding-bottom: 20px;
+        }
+
+        .line {
+            display: flex;
+            flex-grow: 1;
+            height: 1px;
+        }
+
+        .line.LIGHT {
+            background-color: ${Colors.Grey};
+        }
+
+        .line.DARK {
+            background-color: ${Colors.Grey};
+        }
+
+        .or {
+            font-family: 'Inter', sans-serif;
+            font-size: 14px;
+            padding: 0 12px;
+        }
+
+        .or.LIGHT {
+            color: ${Colors.Grey};
+        }
+
+        .or.DARK {
+            color: ${Colors.Grey};
+        }
+
         button {
             cursor: pointer;
             display: flex;
@@ -52,7 +91,7 @@ export class WalletConnectQrCode extends LitElement {
         }
 
         button:active {
-            opacity: 0.7;
+            opacity: 0.8;
         }
 
         button.LIGHT {
@@ -66,8 +105,8 @@ export class WalletConnectQrCode extends LitElement {
         }
 
         .icon {
-            width: 16px;
-            height: 16px;
+            width: 20px;
+            height: 20px;
             margin-right: 10px;
         }
     `;
@@ -78,24 +117,31 @@ export class WalletConnectQrCode extends LitElement {
     theme: Theme = 'DEFAULT';
     @property()
     walletConnectQRcode?: string = undefined;
+    @property()
+    showCopiedIcon = false;
 
     override render(): TemplateResult | typeof nothing {
+        let copyIcon = this.mode === 'LIGHT' ? LightCopySvg : DarkCopySvg;
+        if (this.showCopiedIcon) {
+            copyIcon = CheckSvg;
+        }
         return this.walletConnectQRcode
             ? html`
                   <div class="qrcode-body">
                       <div class="qrcode-container">
                           ${this.svgWCQrCode(this.walletConnectQRcode)}
                           <img src=${WalletConnectLogo} />
                       </div>
+                      <div class="separator">
+                          <div class="line ${this.mode} ${this.theme}"></div>
+                          <div class="or ${this.mode} ${this.theme}">or</div>
+                          <div class="line ${this.mode} ${this.theme}"></div>
+                      </div>
                       <button
                           class="${this.mode} ${this.theme}"
                           @click=${this.onCopy}
                       >
-                          <div class="icon">
-                              ${this.mode === 'LIGHT'
-                                  ? LightCopySvg
-                                  : DarkCopySvg}
-                          </div>
+                          <div class="icon">${copyIcon}</div>
                           Copy to Clipboard
                       </button>
                   </div>
@@ -105,6 +151,10 @@ export class WalletConnectQrCode extends LitElement {
 
     private onCopy = async (): Promise<void> => {
         await navigator.clipboard.writeText(this.walletConnectQRcode || '');
+        this.showCopiedIcon = true;
+        setTimeout(() => {
+            this.showCopiedIcon = false;
+        }, 3000);
     };
 
     private svgWCQrCode(uri: string): TemplateResult {