69 feat implement the address badge as a vanilla component

packages/dapp-kit-ui/package.json

@@ -25,6 +25,7 @@
         "watch": "tsup --watch"
     },
     "dependencies": {
+        "@vechain/picasso": "2.1.1",
         "@vechainfoundation/dapp-kit": "*",
         "@wagmi/core": "^1.4.5",
         "@web3modal/ethereum": "^2.7.1",

packages/dapp-kit-ui/src/assets/icons/disconnect.ts

@@ -0,0 +1,18 @@
+import { html, svg } from 'lit';
+
+export const DisconnectSvg = svg`
+    <path
+        d="M3 1C2.44771 1 2 1.44772 2 2V13C2 13.5523 2.44772 14 3 14H10.5C10.7761 14 11 13.7761 11 13.5C11 13.2239 10.7761 13 10.5 13H3V2L10.5 2C10.7761 2 11 1.77614 11 1.5C11 1.22386 10.7761 1 10.5 1H3ZM12.6036 4.89645C12.4083 4.70118 12.0917 4.70118 11.8964 4.89645C11.7012 5.09171 11.7012 5.40829 11.8964 5.60355L13.2929 7H6.5C6.22386 7 6 7.22386 6 7.5C6 7.77614 6.22386 8 6.5 8H13.2929L11.8964 9.39645C11.7012 9.59171 11.7012 9.90829 11.8964 10.1036C12.0917 10.2988 12.4083 10.2988 12.6036 10.1036L14.8536 7.85355C15.0488 7.65829 15.0488 7.34171 14.8536 7.14645L12.6036 4.89645Z"
+    />
+`;
+
+export const LightDisconnectSvg = html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="#777777">
+        ${DisconnectSvg}
+    </svg>
+`;
+export const DarkDisconnectSvg = html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="#999999">
+        ${DisconnectSvg}
+    </svg>
+`;

packages/dapp-kit-ui/src/components/index.ts

@@ -2,6 +2,9 @@ import './base';
 import './vwk-connect-modal';
 import './vwk-connect-button';
 import './vwk-connect-button-with-modal';
+import './vwk-connected-address-badge';
+import './vwk-connected-address-modal';
+import './vwk-connected-address-badge-with-modal';
 import './vwk-source-card';
 import './vwk-fonts';
 import './vwk-wallet-connect-qrcode';
@@ -10,6 +13,9 @@ export * from './base';
 export * from './vwk-connect-modal';
 export * from './vwk-connect-button';
 export * from './vwk-connect-button-with-modal';
+export * from './vwk-connected-address-badge';
+export * from './vwk-connected-address-modal';
+export * from './vwk-connected-address-badge-with-modal';
 export * from './vwk-source-card';
 export * from './vwk-fonts';
 export * from './vwk-wallet-connect-qrcode';

packages/dapp-kit-ui/src/components/vwk-connect-button-with-modal/index.ts

@@ -19,6 +19,9 @@ export class ConnectButtonWithModal extends LitElement {
     @property({ type: Boolean })
     open = false;
 
+    @property({ type: String })
+    address?: string;
+
     private get wallet(): WalletManager {
         return DAppKit.connex.wallet;
     }
@@ -30,30 +33,45 @@ export class ConnectButtonWithModal extends LitElement {
             this.wallet
                 .connect()
                 // eslint-disable-next-line no-console
-                .then((res) => console.log(res))
+                .then((res) => (this.address = res.account))
                 .finally(() => {
                     this.open = false;
                 });
         }
     };
 
+    @property({ type: Function })
+    onDisconnectClick = (): void => {
+        this.wallet.disconnect().finally(() => {
+            this.address = undefined;
+        });
+    };
+
     override render(): TemplateResult {
         return html`
             <div>
                 <vwk-fonts></vwk-fonts>
-                <vwk-connect-button
-                    .title=${this.title}
-                    .mode=${this.mode}
-                    .theme=${this.theme}
-                    .onClick=${this.handleOpen}
-                ></vwk-connect-button>
-                <vwk-connect-modal
-                    .mode=${this.mode}
-                    .theme=${this.theme}
-                    .open=${this.open}
-                    .onClose=${this.handleClose}
-                    .onSourceClick=${this.onSourceClick}
-                ></vwk-connect-modal>
+
+                ${this.address
+                    ? html`<vwk-connected-address-badge-with-modal
+                          .mode=${this.mode}
+                          .theme=${this.theme}
+                          .address=${this.address}
+                          .onDisconnectClick=${this.onDisconnectClick}
+                      ></vwk-connected-address-badge-with-modal>`
+                    : html`<vwk-connect-button
+                              .title=${this.title}
+                              .mode=${this.mode}
+                              .theme=${this.theme}
+                              .onClick=${this.handleOpen}
+                          ></vwk-connect-button>
+                          <vwk-connect-modal
+                              .mode=${this.mode}
+                              .theme=${this.theme}
+                              .open=${this.open}
+                              .onClose=${this.handleClose}
+                              .onSourceClick=${this.onSourceClick}
+                          ></vwk-connect-modal>`}
             </div>
         `;
     }

packages/dapp-kit-ui/src/components/vwk-connected-address-badge-with-modal/index.ts

@@ -0,0 +1,58 @@
+import type { TemplateResult } from 'lit';
+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 ConnectedAddressBadgeWithModal extends LitElement {
+    @property({ type: String })
+    mode: ThemeMode = 'LIGHT';
+
+    @property({ type: String })
+    theme: Theme = 'DEFAULT';
+
+    @property({ type: String })
+    address?: string;
+
+    @property({ type: Boolean })
+    open = false;
+
+    @property({ type: Function })
+    onDisconnectClick?: () => void = undefined;
+
+    override render(): TemplateResult {
+        return html`
+            <div>
+                <vwk-fonts></vwk-fonts>
+                <vwk-connected-address-badge
+                    .mode=${this.mode}
+                    .theme=${this.theme}
+                    .address=${this.address}
+                    .onClick=${this.handleOpen}
+                ></vwk-connected-address-badge>
+                <vwk-connected-address-modal
+                    .mode=${this.mode}
+                    .theme=${this.theme}
+                    .open=${this.open}
+                    .onClose=${this.handleClose}
+                    .address=${this.address}
+                    .onDisconnectClick=${this.onDisconnectClick}
+                ></vwk-connected-address-modal>
+            </div>
+        `;
+    }
+
+    private handleOpen = (): void => {
+        this.open = true;
+    };
+
+    private handleClose = (): void => {
+        this.open = false;
+    };
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'vwk-connected-address-badge-with-modal': ConnectedAddressBadgeWithModal;
+    }
+}

packages/dapp-kit-ui/src/components/vwk-connected-address-badge/index.ts

@@ -0,0 +1,80 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Colors, ThemeMode } from '../../constants';
+import { friendlyAddress, getPicassoImage } from '../../utils/account';
+
+@customElement('vwk-connected-address-badge')
+export class ConnectedAddressBadge extends LitElement {
+    static override styles = css`
+        /* Style for the badge */
+        .wallet-badge {
+            display: flex;
+            width: fit-content;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            padding: 8px;
+            background-color: #4caf50;
+            color: #fff;
+            border-radius: 12px;
+        }
+
+        .wallet-badge:hover {
+            opacity: 0.9;
+            cursor: pointer;
+        }
+
+        .wallet-badge.DARK {
+            background-color: ${Colors.Dark};
+            color: ${Colors.LightGrey};
+        }
+
+        .wallet-badge.LIGHT {
+            background-color: ${Colors.LightGrey};
+            color: ${Colors.Dark};
+        }
+
+        /* Style for the wallet address */
+        .wallet-address {
+            font-size: 14px;
+            margin-left: 8px;
+            font-family: monospace;
+        }
+        .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() {
+        return html` <div
+            class="wallet-badge ${this.mode}"
+            @click=${this.onClick}
+        >
+            <img
+                class="address-icon"
+                src=${getPicassoImage(this.address ?? '')}
+            />
+            <span class="wallet-address"
+                >${friendlyAddress(this.address ?? '')}</span
+            >
+        </div>`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'vwk-connected-address-badge': ConnectedAddressBadge;
+    }
+}