From 4d85d2baff8ed3ec67c5cf7fa6abe801a4d9791a Mon Sep 17 00:00:00 2001
From: Davide Carpini <carpini.davide@gmail.com>
Date: Sat, 24 Feb 2024 18:19:18 +0100
Subject: [PATCH] Carpini fix connect button bugs (#201)

* fix: link icon

* fix: connection button
---
 .../src/components/buttons/button.ts          | 23 ++++++++++++++-----
 .../src/components/buttons/connect-button.ts  | 11 ++++++++-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/dapp-kit-ui/src/components/buttons/button.ts b/packages/dapp-kit-ui/src/components/buttons/button.ts
index 166271d5..8bb1777a 100644
--- a/packages/dapp-kit-ui/src/components/buttons/button.ts
+++ b/packages/dapp-kit-ui/src/components/buttons/button.ts
@@ -1,6 +1,5 @@
 import { html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { subscribeKey } from 'valtio/vanilla/utils';
 import { DAppKitUI } from '../../client';
 import { defaultI18n, type I18n, type ThemeMode } from '../../constants';
 import { subscribeToCustomEvent } from '../../utils';
@@ -9,10 +8,17 @@ import { subscribeToCustomEvent } from '../../utils';
 export class Button extends LitElement {
     constructor() {
         super();
+
         if (DAppKitUI.initialized) {
-            this.initAddressListener();
             this.setAddressFromState();
             this.configureButtonUI();
+            this.initAddressListener();
+
+            // this subscribeToCustomEvent need to be done if the DappKitUI button is reconfigured and so recreated after the initial configuration
+            subscribeToCustomEvent('vdk-dapp-kit-configured', () => {
+                this.setAddressFromState();
+                this.initAddressListener();
+            });
         } else {
             subscribeToCustomEvent('vdk-dapp-kit-configured', () => {
                 this.setAddressFromState();
@@ -23,19 +29,24 @@ export class Button extends LitElement {
 
     private setAddressFromState(): void {
         this.address = DAppKitUI.wallet.state.address ?? '';
+        this.requestUpdate();
     }
 
     private configureButtonUI(): void {
         this.mode = DAppKitUI.configuration?.themeMode ?? 'LIGHT';
         this.i18n = DAppKitUI.configuration?.i18n ?? defaultI18n;
         this.language = DAppKitUI.configuration?.language ?? 'en';
+        this.requestUpdate();
     }
 
     private initAddressListener(): void {
-        subscribeKey(DAppKitUI.wallet.state, 'address', (v) => {
-            this.address = v ?? '';
-            this.requestUpdate();
-        });
+        DAppKitUI.wallet.subscribeToKey(
+            'address',
+            (_address: string | null) => {
+                this.address = _address ?? '';
+                this.requestUpdate();
+            },
+        );
     }
 
     @property()
diff --git a/packages/dapp-kit-ui/src/components/buttons/connect-button.ts b/packages/dapp-kit-ui/src/components/buttons/connect-button.ts
index 46bd6c6b..dbf19294 100644
--- a/packages/dapp-kit-ui/src/components/buttons/connect-button.ts
+++ b/packages/dapp-kit-ui/src/components/buttons/connect-button.ts
@@ -19,6 +19,15 @@ export class ConnectButton extends LitElement {
             button.mobile {
                 height: 41px;
                 width: 41px;
+                padding: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .icon {
+                padding-top: 4px;
+                width: 18px;
+                height: 18px;
             }
         `,
     ];
@@ -55,7 +64,7 @@ export class ConnectButton extends LitElement {
                     @click=${this.handleOpen}
                     ?disabled=${this.disabled}
                 >
-                    ${connectIcon}
+                    <div class="icon">${connectIcon}</div>
                 </button>`;
         }