From 467847562400ceea880f21f4ad5bd319c7d4baad Mon Sep 17 00:00:00 2001 From: BenRey Date: Mon, 20 Jan 2025 16:02:04 +0100 Subject: [PATCH 1/4] Refactor MASBalance component to use balance from account store and streamline balance fetching logic --- .../components/MASBalance.tsx | 17 ++------------- .../ConnectMassaWallets/store/accountStore.ts | 21 +++++++++++++++++-- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/lib/ConnectMassaWallets/components/MASBalance.tsx b/src/lib/ConnectMassaWallets/components/MASBalance.tsx index 8fa2fc9e..e155134f 100644 --- a/src/lib/ConnectMassaWallets/components/MASBalance.tsx +++ b/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(); - - 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; diff --git a/src/lib/ConnectMassaWallets/store/accountStore.ts b/src/lib/ConnectMassaWallets/store/accountStore.ts index 29e28527..8e99065f 100644 --- a/src/lib/ConnectMassaWallets/store/accountStore.ts +++ b/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,15 @@ export interface AccountStoreState { setWallets: (wallets: Wallet[]) => void; setConnectedAccount: (account?: Provider) => void; setCurrentNetwork: (network: Network) => void; + fetchBalance: (provider: Provider, final: boolean) => Promise; + refreshBalance: (final: boolean) => void; } export const useAccountStore = create((set, get) => ({ accounts: undefined, network: undefined, connectedAccount: undefined, + balance: undefined, accountObserver: undefined, networkObserver: undefined, currentWallet: undefined, @@ -78,7 +82,7 @@ export const useAccountStore = create((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,14 +92,27 @@ export const useAccountStore = create((set, get) => ({ } }, - setConnectedAccount: (connectedAccount?: Provider) => { + setConnectedAccount: async (connectedAccount?: Provider) => { set({ connectedAccount }); + if (!connectedAccount) return; + get().fetchBalance(connectedAccount, false); }, setCurrentNetwork: (network: Network) => { if (network === get().network) return; set({ network }); }, + + fetchBalance: async (provider: Provider) => { + const balance = await provider.balance(false); + set({ balance }); + }, + + refreshBalance: async (final: boolean) => { + const { connectedAccount } = get(); + if (!connectedAccount) return; + get().fetchBalance(connectedAccount, final); + }, })); function resetObservers( From 58fe07956694d8d7e7c7325b63116f619c994c16 Mon Sep 17 00:00:00 2001 From: BenRey Date: Mon, 20 Jan 2025 16:03:33 +0100 Subject: [PATCH 2/4] Bump version to 1.0.2 in package.json and package-lock.json --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 18c9173f..ea509d7b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@massalabs/react-ui-kit", - "version": "1.0.1", + "version": "1.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@massalabs/react-ui-kit", - "version": "1.0.1", + "version": "1.0.2", "dependencies": { "@headlessui/react": "^1.7.15", "@massalabs/massa-web3": "^5.1.1", diff --git a/package.json b/package.json index 38f9eaff..20d768cb 100644 --- a/package.json +++ b/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", From f773acf860152f767ce40759207bb4d381661f24 Mon Sep 17 00:00:00 2001 From: BenRey Date: Mon, 20 Jan 2025 16:11:53 +0100 Subject: [PATCH 3/4] Refactor account store to remove fetchBalance method and directly use connectedAccount's balance method --- src/lib/ConnectMassaWallets/store/accountStore.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/lib/ConnectMassaWallets/store/accountStore.ts b/src/lib/ConnectMassaWallets/store/accountStore.ts index 8e99065f..287ef7ac 100644 --- a/src/lib/ConnectMassaWallets/store/accountStore.ts +++ b/src/lib/ConnectMassaWallets/store/accountStore.ts @@ -21,7 +21,6 @@ export interface AccountStoreState { setWallets: (wallets: Wallet[]) => void; setConnectedAccount: (account?: Provider) => void; setCurrentNetwork: (network: Network) => void; - fetchBalance: (provider: Provider, final: boolean) => Promise; refreshBalance: (final: boolean) => void; } @@ -95,7 +94,8 @@ export const useAccountStore = create((set, get) => ({ setConnectedAccount: async (connectedAccount?: Provider) => { set({ connectedAccount }); if (!connectedAccount) return; - get().fetchBalance(connectedAccount, false); + const balance = await connectedAccount.balance(false); + set({ balance }); }, setCurrentNetwork: (network: Network) => { @@ -103,15 +103,11 @@ export const useAccountStore = create((set, get) => ({ set({ network }); }, - fetchBalance: async (provider: Provider) => { - const balance = await provider.balance(false); - set({ balance }); - }, - refreshBalance: async (final: boolean) => { const { connectedAccount } = get(); if (!connectedAccount) return; - get().fetchBalance(connectedAccount, final); + const balance = await connectedAccount.balance(final); + set({ balance }); }, })); From a96a11c49031c338ebffcff6e225d61406d2a0cb Mon Sep 17 00:00:00 2001 From: BenRey Date: Mon, 20 Jan 2025 22:14:03 +0100 Subject: [PATCH 4/4] Refactor balance fetching logic in account store to use setBalance function --- src/lib/ConnectMassaWallets/store/accountStore.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/lib/ConnectMassaWallets/store/accountStore.ts b/src/lib/ConnectMassaWallets/store/accountStore.ts index 287ef7ac..827ae99f 100644 --- a/src/lib/ConnectMassaWallets/store/accountStore.ts +++ b/src/lib/ConnectMassaWallets/store/accountStore.ts @@ -94,8 +94,7 @@ export const useAccountStore = create((set, get) => ({ setConnectedAccount: async (connectedAccount?: Provider) => { set({ connectedAccount }); if (!connectedAccount) return; - const balance = await connectedAccount.balance(false); - set({ balance }); + setBalance(connectedAccount, false, set); }, setCurrentNetwork: (network: Network) => { @@ -106,11 +105,19 @@ export const useAccountStore = create((set, get) => ({ refreshBalance: async (final: boolean) => { const { connectedAccount } = get(); if (!connectedAccount) return; - const balance = await connectedAccount.balance(final); - set({ balance }); + setBalance(connectedAccount, final, set); }, })); +async function setBalance( + provider: Provider, + final: boolean, + set: (partial: Partial) => void, +) { + const balance = await provider.balance(final); + set({ balance }); +} + function resetObservers( get: () => AccountStoreState, set: (partial: Partial) => void,