124 improving ux and align it with the familyco one (#125)

* fix: ux improvements * fix: badge renaming * fix: colors * fix: tests * fix: comment store link
vechain · Nov 30, 2023 · 430431f · 430431f
1 parent b984755
commit 430431f
Show file tree

Hide file tree

Showing 30 changed files with 526 additions and 488 deletions.
diff --git a/packages/dapp-kit-ui/index.html b/packages/dapp-kit-ui/index.html
@@ -8,8 +8,8 @@
         <script crossorigin type="module" src="./index.js"></script>
     </head>
     <body>
-        <vwk-connect-button-with-modal
+        <vwk-vechain-dapp-connect-kit
             mode="DARK"
-        ></vwk-connect-button-with-modal>
+        ></vwk-vechain-dapp-connect-kit>
     </body>
 </html>
diff --git a/packages/dapp-kit-ui/index.js b/packages/dapp-kit-ui/index.js
@@ -1,6 +1,6 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable no-undef */
-import { DAppKit } from './dist';
+import { DAppKitUI } from './dist';
 
 const walletConnectOptions = {
     projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
@@ -20,4 +20,4 @@ const vechainWalletKitOptions = {
     usePersistence: true,
 };
 
-DAppKit.configure(vechainWalletKitOptions);
+DAppKitUI.configure(vechainWalletKitOptions);
diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json
@@ -28,6 +28,7 @@
         "lint": "tsc --noEmit &&  eslint src --ext .js,.jsx,.ts,.tsx",
         "purge": "yarn clean && rm -rf node_modules",
         "test": "vitest run --coverage",
+        "test:dev": "vitest run ",
         "watch": "tsup --watch"
     },
     "dependencies": {

diff --git a/packages/dapp-kit-ui/src/assets/icons/index.ts b/packages/dapp-kit-ui/src/assets/icons/index.ts
@@ -2,3 +2,4 @@ export * from './close';
 export * from './chevron-left';
 export * from './copy';
 export * from './check';
+export * from './disconnect';
diff --git a/packages/dapp-kit-ui/src/assets/index.ts b/packages/dapp-kit-ui/src/assets/index.ts
@@ -1,2 +1,3 @@
 export * from './icons';
 export * from './images';
+export * from './styles';
diff --git a/packages/dapp-kit-ui/src/assets/styles/button.ts b/packages/dapp-kit-ui/src/assets/styles/button.ts
@@ -0,0 +1,78 @@
+import { css } from 'lit';
+import { Colors } from '../../constants/colors';
+
+export const buttonStyle = css`
+    button {
+        font-family: 'Inter', sans-serif;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        border: none;
+        border-radius: 12px;
+        padding: 12px;
+        font-size: 15px;
+        font-weight: 500;
+        width: 100%;
+        gap: 10px;
+    }
+
+    button.LIGHT {
+        background-color: ${Colors.XXLightGrey};
+        color: ${Colors.LightBlack};
+    }
+    button.LIGHT:hover {
+        background-color: ${Colors.XLightGrey};
+    }
+    button.LIGHT:active {
+        background-color: ${Colors.LightGrey};
+    }
+
+    button.DARK {
+        background-color: ${Colors.XXDarkGrey};
+        color: ${Colors.XXLightGrey};
+    }
+    button.DARK:hover {
+        background-color: ${Colors.XDarkGrey};
+    }
+    button.DARK:active {
+        background-color: ${Colors.DarkGrey};
+    }
+`;
+
+export const triggerButtonStyle = css`
+    button {
+        font-family: 'Inter', sans-serif;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        border-radius: 12px;
+        padding: 12px;
+    }
+
+    button.LIGHT {
+        background-color: ${Colors.XXLightGrey};
+        color: ${Colors.LightBlack};
+    }
+    button.LIGHT:hover {
+        background-color: ${Colors.XLightGrey};
+    }
+    button.LIGHT:active {
+        background-color: ${Colors.LightGrey};
+    }
+
+    button.DARK {
+        background-color: ${Colors.LightBlack};
+        color: ${Colors.XXLightGrey};
+    }
+    button.DARK:hover {
+        background-color: ${Colors.XLightBlack};
+    }
+    button.DARK:active {
+        background-color: ${Colors.XXLightBlack};
+    }
+`;
diff --git a/packages/dapp-kit-ui/src/assets/styles/index.ts b/packages/dapp-kit-ui/src/assets/styles/index.ts
@@ -0,0 +1 @@
+export * from './button';
diff --git a/packages/dapp-kit-ui/src/components/address-badge.ts b/packages/dapp-kit-ui/src/components/address-badge.ts
diff --git a/...rc/components/address-badge-with-modal.ts → ...c/components/address-button-with-modal.ts b/...rc/components/address-badge-with-modal.ts → ...c/components/address-button-with-modal.ts
@@ -3,8 +3,8 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { Theme, ThemeMode } from '../constants';
 
-@customElement('vwk-connected-address-badge-with-modal')
-export class AddressBadgeWithModal extends LitElement {
+@customElement('vwk-connected-address-button-with-modal')
+export class AddressButtonWithModal extends LitElement {
     @property({ type: String })
     mode: ThemeMode = 'LIGHT';
 
@@ -24,12 +24,12 @@ export class AddressBadgeWithModal extends LitElement {
         return html`
             <div>
                 <vwk-fonts></vwk-fonts>
-                <vwk-connected-address-badge
+                <vwk-connected-address-button
                     .mode=${this.mode}
                     .theme=${this.theme}
                     .address=${this.address}
                     .onClick=${this.handleOpen}
-                ></vwk-connected-address-badge>
+                ></vwk-connected-address-button>
                 <vwk-connected-address-modal
                     .mode=${this.mode}
                     .theme=${this.theme}
@@ -53,6 +53,6 @@ export class AddressBadgeWithModal extends LitElement {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'vwk-connected-address-badge-with-modal': AddressBadgeWithModal;
+        'vwk-connected-address-button-with-modal': AddressButtonWithModal;
     }
 }
diff --git a/packages/dapp-kit-ui/src/components/address-button.ts b/packages/dapp-kit-ui/src/components/address-button.ts
@@ -0,0 +1,62 @@
+import { css, html, LitElement, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { type ThemeMode } from '../constants';
+import { friendlyAddress, getPicassoImage } from '../utils/account';
+import { triggerButtonStyle } from '../assets';
+
+@customElement('vwk-connected-address-button')
+export class AddressButton extends LitElement {
+    static override styles = [
+        triggerButtonStyle,
+        css`
+            button {
+                padding: 9px 12px;
+            }
+
+            /* Style for the wallet address */
+
+            .wallet-address {
+                font-size: 14px;
+                margin-left: 8px;
+                font-family: 'Inter', sans-serif;
+            }
+
+            .address-icon {
+                width: 23px;
+                height: 23px;
+                margin-right: 4px;
+                border-radius: 50%;
+            }
+        `,
+    ];
+
+    @property()
+    address?: string;
+
+    @property()
+    mode: ThemeMode = 'DARK';
+
+    @property({ type: Function })
+    onClick? = undefined;
+
+    render(): TemplateResult {
+        return html` <button
+            class="wallet-button ${this.mode}"
+            @click=${this.onClick}
+        >
+            <img
+                class="address-icon"
+                src=${getPicassoImage(this.address ?? '')}
+            />
+            <span class="wallet-address"
+                >${friendlyAddress(this.address ?? '')}</span
+            >
+        </button>`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'vwk-connected-address-button': AddressButton;
+    }
+}