fix: ui improvements, adding mobile and disabled attributes, and fix …

…multiple buttons bug (#193)
vechain · Feb 9, 2024 · a34b536 · a34b536
1 parent c80446e
commit a34b536
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 18 deletions.
diff --git a/packages/dapp-kit-react/package.json b/packages/dapp-kit-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-react",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "private": false,
     "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit",
     "repository": "github:vechain/vechain-dapp-kit",

diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-ui",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "private": false,
     "description": "Vanilla JS DAppKit",
     "keywords": [

diff --git a/packages/dapp-kit-ui/src/assets/icons/index.ts b/packages/dapp-kit-ui/src/assets/icons/index.ts
@@ -4,3 +4,4 @@ export * from './copy';
 export * from './check';
 export * from './disconnect';
 export * from './wallet-connect';
+export * from './link';
diff --git a/packages/dapp-kit-ui/src/assets/icons/link.ts b/packages/dapp-kit-ui/src/assets/icons/link.ts
@@ -0,0 +1,27 @@
+import { html, svg } from 'lit';
+import { Colors } from '../../constants';
+
+export const LinkSvg = svg`
+      <path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/>
+    `;
+
+export const LightLinkSvg = html`
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 640 512"
+        stroke=${Colors.Light.Tertiary}
+        fill=${Colors.Light.Tertiary}
+    >
+        ${LinkSvg}
+    </svg>
+`;
+export const DarkLinkSvg = html`
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 640 512"
+        stroke=${Colors.Dark.Tertiary}
+        fill=${Colors.Dark.Tertiary}
+    >
+        ${LinkSvg}
+    </svg>
+`;
diff --git a/packages/dapp-kit-ui/src/components/buttons/address-button.ts b/packages/dapp-kit-ui/src/components/buttons/address-button.ts
@@ -16,6 +16,14 @@ export class AddressButton extends LitElement {
                 gap: 4px;
             }
 
+            button.mobile {
+                padding: 0px;
+            }
+
+            button.mobile:hover {
+                opacity: 0.9;
+            }
+
             /* Style for the wallet address */
 
             .wallet-address {
@@ -29,6 +37,12 @@ export class AddressButton extends LitElement {
                 height: 23px;
                 border-radius: 50%;
             }
+
+            .address-icon.mobile {
+                width: 41px;
+                height: 41px;
+                border-radius: 12px;
+            }
         `,
     ];
 
@@ -43,11 +57,31 @@ export class AddressButton extends LitElement {
         DAppKitUI.modal.open();
     };
 
+    @property()
+    disabled = false;
+
+    @property()
+    mobile = false;
+
     render(): TemplateResult {
+        if (this.mobile) {
+            return html` <vdk-fonts></vdk-fonts>
+                <button
+                    class="wallet-button ${this.mode} mobile"
+                    @click=${this.handleOpen}
+                    ?disabled=${this.disabled}
+                >
+                    <img
+                        class="address-icon mobile"
+                        src=${getPicassoImage(this.address ?? '')}
+                    />
+                </button>`;
+        }
         return html` <vdk-fonts></vdk-fonts>
             <button
                 class="wallet-button ${this.mode}"
                 @click=${this.handleOpen}
+                ?disabled=${this.disabled}
             >
                 <img
                     class="address-icon"

diff --git a/packages/dapp-kit-ui/src/components/buttons/button.ts b/packages/dapp-kit-ui/src/components/buttons/button.ts
@@ -50,17 +50,27 @@ export class Button extends LitElement {
     @property()
     address = '';
 
+    @property()
+    disabled = false;
+
+    @property()
+    mobile = false;
+
     override render(): TemplateResult {
         return html`
             ${this.address
                 ? html`<vdk-address-button
                       .mode=${this.mode}
                       .address=${this.address}
+                      .disabled=${this.disabled}
+                      .mobile=${this.mobile}
                   ></vdk-address-button>`
                 : html`<vdk-connect-button
                       .mode=${this.mode}
                       .i18n=${this.i18n}
                       .language=${this.language}
+                      .disabled=${this.disabled}
+                      .mobile=${this.mobile}
                   ></vdk-connect-button>`}
         `;
     }

diff --git a/packages/dapp-kit-ui/src/components/buttons/connect-button.ts b/packages/dapp-kit-ui/src/components/buttons/connect-button.ts
@@ -6,6 +6,7 @@ import { buttonStyle } from '../../assets/styles';
 import { defaultI18n, type I18n } from '../../constants';
 import { useTranslate } from '../../utils';
 import { DAppKitUI } from '../../client';
+import { DarkLinkSvg, LightLinkSvg } from '../../assets/icons';
 
 @customElement('vdk-connect-button')
 export class ConnectButton extends LitElement {
@@ -15,6 +16,10 @@ export class ConnectButton extends LitElement {
             button {
                 width: auto;
             }
+            button.mobile {
+                height: 41px;
+                width: 41px;
+            }
         `,
     ];
 
@@ -33,11 +38,35 @@ export class ConnectButton extends LitElement {
         DAppKitUI.modal.open();
     };
 
+    @property()
+    disabled = false;
+
+    @property()
+    mobile = false;
+
     override render(): TemplateResult {
+        if (this.mobile) {
+            const connectIcon =
+                this.mode === 'LIGHT' ? LightLinkSvg : DarkLinkSvg;
+
+            return html` <vdk-fonts></vdk-fonts>
+                <button
+                    class="${this.mode} mobile"
+                    @click=${this.handleOpen}
+                    ?disabled=${this.disabled}
+                >
+                    ${connectIcon}
+                </button>`;
+        }
+
         const translate = useTranslate(this.i18n, this.language);
         return html`
             <vdk-fonts></vdk-fonts>
-            <button class="${this.mode}" @click=${this.handleOpen}>
+            <button
+                class="${this.mode}"
+                @click=${this.handleOpen}
+                ?disabled=${this.disabled}
+            >
                 ${translate('connect-wallet')}
             </button>
         `;

diff --git a/packages/dapp-kit-ui/src/utils/ui-config.ts b/packages/dapp-kit-ui/src/utils/ui-config.ts
@@ -83,17 +83,16 @@ const getInitOptions = (
 };
 
 export const initButton = (options: DAppKitUIOptions): void => {
-    const button = document.querySelector('vdk-button');
+    const buttons = document.querySelectorAll('vdk-button');
     const initOptions = getInitOptions(options);
-    if (!button) {
-        return;
-    }
-    for (const [key, value] of Object.entries(initOptions)) {
-        if (value) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (button as any)[key] = value;
+    buttons.forEach((button) => {
+        for (const [key, value] of Object.entries(initOptions)) {
+            if (value) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (button as any)[key] = value;
+            }
         }
-    }
+    });
 };
 
 export const initModal = (options: DAppKitUIOptions): void => {

diff --git a/packages/dapp-kit/package.json b/packages/dapp-kit/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "private": false,
     "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit",
     "repository": "github:vechain/vechain-dapp-kit",

diff --git a/packages/dapp-kit/src/classes/wallet-manager.ts b/packages/dapp-kit/src/classes/wallet-manager.ts
@@ -273,20 +273,22 @@ class WalletManager {
     };
 
     private getAvailableSources = (): WalletSource[] => {
-        const wallets: WalletSource[] = ['sync2'];
+        const wallets: WalletSource[] = [];
 
         if (window.vechain) {
             wallets.push('veworld');
         }
 
-        if (window.connex) {
-            wallets.push('sync');
-        }
-
         if (this.options.walletConnectOptions) {
             wallets.push('wallet-connect');
         }
 
+        wallets.push('sync2');
+
+        if (window.connex) {
+            wallets.push('sync');
+        }
+
         return wallets;
     };