refactor: handle balance and balanceSymbol fetch to update w3m-button (…

…#2433)
reown-com · Aug 8, 2024 · 2ca998a · 2ca998a
1 parent 4bf3fa0
commit 2ca998a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/scaffold-ui/src/modal/w3m-button/index.ts b/packages/scaffold-ui/src/modal/w3m-button/index.ts
@@ -33,11 +33,17 @@ export class W3mButton extends LitElement {
 
   @state() private isLoading = ModalController.state.loading
 
+  @state() private balanceVal = AccountController.state.balance
+
+  @state() private balanceSymbol = AccountController.state.balanceSymbol
+
   // -- Lifecycle ----------------------------------------- //
   public override firstUpdated() {
     this.unsubscribe.push(
-      AccountController.subscribeKey('isConnected', val => {
-        this.isAccount = val
+      AccountController.subscribe(val => {
+        this.isAccount = val.isConnected
+        this.balanceVal = val.balance
+        this.balanceSymbol = val.balanceSymbol
       }),
       ModalController.subscribeKey('loading', val => {
         this.isLoading = val
@@ -51,7 +57,9 @@ export class W3mButton extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
-    return this.isAccount && !this.isLoading
+    const isBalanceFetched = this.balanceVal && this.balanceSymbol
+
+    return isBalanceFetched && this.isAccount && !this.isLoading
       ? html`
           <w3m-account-button
             .disabled=${Boolean(this.disabled)}

diff --git a/packages/scaffold-ui/src/partials/w3m-account-default-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-account-default-widget/index.ts
@@ -91,9 +91,9 @@ export class W3mAccountDefaultWidget extends LitElement {
           ? this.multiAccountTemplate()
           : this.singleAccountTemplate()}
         <wui-flex flexDirection="column" alignItems="center">
-          <wui-text variant="paragraph-500" color="fg-200"
-            >${CoreHelperUtil.formatBalance(this.balance, this.balanceSymbol)}</wui-text
-          >
+          <wui-text variant="paragraph-500" color="fg-200">
+            ${CoreHelperUtil.formatBalance(this.balance, this.balanceSymbol)}
+          </wui-text>
         </wui-flex>
         ${this.explorerBtnTemplate()}
       </wui-flex>