Refactor MASBalance component to use balance from account store and s… (

#508)

* Refactor MASBalance component to use balance from account store and streamline balance fetching logic

* Bump version to 1.0.2 in package.json and package-lock.json

* Refactor account store to remove fetchBalance method and directly use connectedAccount's balance method

* Refactor balance fetching logic in account store to use setBalance function

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massalabs/react-ui-kit",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "files": ["src", "presets"],
   "main": "src/index.ts",

src/lib/ConnectMassaWallets/components/MASBalance.tsx

@@ -1,8 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import React from 'react';
-
-import { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import Intl from '../i18n';
 import { useAccountStore } from '../store';
@@ -11,18 +9,7 @@ import { massaToken } from '../../massa-react/utils/const';
 import { formatAmount } from '../../util/parseAmount';
 
 export function MASBalance() {
-  const [balance, setBalance] = useState<bigint>();
-
-  const { connectedAccount, currentWallet, network } = useAccountStore();
-
-  useEffect(() => {
-    if (!connectedAccount) return;
-    const fetchBalance = async () => {
-      const balance = await connectedAccount.balance(false);
-      setBalance(balance);
-    };
-    fetchBalance();
-  }, [connectedAccount, setBalance, currentWallet, network]);
+  const { balance } = useAccountStore();
 
   const formattedBalance = formatAmount(balance?.toString() || '0', 9).full;
 

src/lib/ConnectMassaWallets/store/accountStore.ts

@@ -4,6 +4,7 @@ import { Wallet, WalletName } from '@massalabs/wallet-provider';
 
 export interface AccountStoreState {
   connectedAccount?: Provider;
+  balance?: bigint;
   accounts?: Provider[];
   currentWallet?: Wallet;
   wallets: Wallet[];
@@ -20,12 +21,14 @@ export interface AccountStoreState {
   setWallets: (wallets: Wallet[]) => void;
   setConnectedAccount: (account?: Provider) => void;
   setCurrentNetwork: (network: Network) => void;
+  refreshBalance: (final: boolean) => void;
 }
 
 export const useAccountStore = create<AccountStoreState>((set, get) => ({
   accounts: undefined,
   network: undefined,
   connectedAccount: undefined,
+  balance: undefined,
   accountObserver: undefined,
   networkObserver: undefined,
   currentWallet: undefined,
@@ -78,7 +81,7 @@ export const useAccountStore = create<AccountStoreState>((set, get) => ({
   setAccounts: async (wallet: Wallet, account?: Provider) => {
     const accounts = await wallet.accounts();
     set({ accounts });
-    set({ connectedAccount: account || accounts[0] });
+    get().setConnectedAccount(account || accounts[0]);
   },
 
   setWallets: (wallets: Wallet[]) => {
@@ -88,16 +91,33 @@ export const useAccountStore = create<AccountStoreState>((set, get) => ({
     }
   },
 
-  setConnectedAccount: (connectedAccount?: Provider) => {
+  setConnectedAccount: async (connectedAccount?: Provider) => {
     set({ connectedAccount });
+    if (!connectedAccount) return;
+    setBalance(connectedAccount, false, set);
   },
 
   setCurrentNetwork: (network: Network) => {
     if (network === get().network) return;
     set({ network });
   },
+
+  refreshBalance: async (final: boolean) => {
+    const { connectedAccount } = get();
+    if (!connectedAccount) return;
+    setBalance(connectedAccount, final, set);
+  },
 }));
 
+async function setBalance(
+  provider: Provider,
+  final: boolean,
+  set: (partial: Partial<AccountStoreState>) => void,
+) {
+  const balance = await provider.balance(final);
+  set({ balance });
+}
+
 function resetObservers(
   get: () => AccountStoreState,
   set: (partial: Partial<AccountStoreState>) => void,