fix: YOEXT-1742 The top bar balance is not updated on portfolio page

packages/yoroi-extension/app/Routes.js

@@ -1,7 +1,7 @@
 // @flow
 
 import type { Node } from 'react';
-import React, { Suspense } from 'react';
+import React, { Suspense, useMemo } from 'react';
 import { Navigate, Route, Routes, Outlet } from 'react-router';
 import ConnectedWebsitesPage, { ConnectedWebsitesPagePromise } from './containers/dapp-connector/ConnectedWebsitesContainer';
 import Transfer, { WalletTransferPagePromise } from './containers/transfer/Transfer';

packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx

@@ -49,23 +49,31 @@ const PortfolioHeader = observer(({ walletBalance, setKeyword, isLoading, toolti
   const [loading, setLoading] = React.useState(false);
   const strings = useStrings();
   const theme: any = useTheme();
-  const { unitOfAccount, changeUnitOfAccountPair, accountPair, primaryTokenInfo } = usePortfolio();
+  const {
+    unitOfAccount,
+    changeUnitOfAccountPair,
+    accountPair,
+    primaryTokenInfo,
+    selectedWallet: contextSelectedWallet,
+    networkId: contextNetworkId,
+  } = usePortfolio();
   const { tokenActivity } = usePortfolioTokenActivity();
   const localStorageApi = new LocalStorageApi();
   const {
     ptActivity: { open, close: ptPrice },
     config,
   } = useCurrencyPairing();
 
-  // TODO refactor and remove this caluclation from here in the future - this should come from the main selected wallet context
-  const { wallets, delegation } = stores;
-  const selectedWallet /*: WalletState */ = wallets.selectedOrFail;
-  const networkId = selectedWallet.networkId;
+  // ✅ Use context data instead of store data for automatic re-rendering
+  const { delegation } = stores;
+  const selectedWallet = contextSelectedWallet;
+  const networkId = contextNetworkId;
   const rewards = delegation.getRewardBalanceOrZero(selectedWallet);
-  const balance = selectedWallet.balance;
+
+  const balance = selectedWallet?.balance;
   const totalBalanceAmount = getTotalAmount(balance, rewards);
   const defaultEntry = totalBalanceAmount?.getDefaultEntry();
-  const primaryBalance = defaultEntry.amount.shiftedBy(-primaryTokenInfo.decimals);
+  const primaryBalance = defaultEntry?.amount.shiftedBy(-primaryTokenInfo?.decimals || 0);
   // End of total Ada balance calculation
 
   const { changeValue, changePercent, variantPnl } = priceChange(open, ptPrice);

packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx

@@ -60,7 +60,16 @@ export const PortfolioContextProvider = ({
   openDialogWrapper,
   shouldHideBalance,
 }: PortfolioProviderProps) => {
-  const { walletBalance, ftAssetList, selectedWallet, networkId, primaryTokenInfo, backendServiceZero, explorer } = currentWallet;
+  const {
+    walletBalance,
+    ftAssetList,
+    selectedWallet,
+    networkId,
+    primaryTokenInfo,
+    backendServiceZero,
+    explorer,
+    stakingRewards,
+  } = currentWallet;
 
   if (selectedWallet === undefined) {
     return <></>;
@@ -98,6 +107,8 @@ export const PortfolioContextProvider = ({
       ftAssetList: ftAssetList || [],
       networkId,
       primaryTokenInfo,
+      stakingRewards,
+      selectedWallet,
       isHiddenAmount: shouldHideBalance,
       openBuyDialog: () => {
         if (selectedWallet.isTestnet) {
@@ -111,7 +122,7 @@ export const PortfolioContextProvider = ({
       explorer,
       isTestnet: selectedWallet.isTestnet,
     }),
-    [state, actions, ftAssetList, networkId, selectedWallet, settingFiatPairUnit]
+    [state, actions, ftAssetList, networkId, selectedWallet, settingFiatPairUnit, stakingRewards]
   );
 
   return <PortfolioContext.Provider value={context}>{children}</PortfolioContext.Provider>;

packages/yoroi-extension/app/UI/features/portfolio/module/state.ts

@@ -41,6 +41,8 @@ export type PortfolioState = {
   ftAssetList: any[];
   showWelcomeBanner: boolean;
   primaryTokenInfo: any;
+  stakingRewards: any;
+  selectedWallet: any;
   isHiddenAmount: boolean;
   openBuyDialog: () => void;
   backendServiceZero: string;
@@ -60,6 +62,8 @@ export const defaultPortfolioState: PortfolioState = {
   networkId: null,
   ftAssetList: [],
   primaryTokenInfo: null,
+  stakingRewards: null,
+  selectedWallet: null,
   isHiddenAmount: false,
   showWelcomeBanner: false,
   openBuyDialog: () => {},

packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx

@@ -11,6 +11,8 @@ import { DEFAULT_FIAT_PAIR, TOKEN_CHART_INTERVAL } from '../../common/helpers/co
 import { formatPriceChange, priceChange } from '../../common/helpers/priceChange';
 import { useGetPortfolioTokenChart } from '../../common/hooks/usePortfolioTokenChart';
 import { usePortfolio } from '../../module/PortfolioContextProvider';
+import { useMemo } from 'react';
+import { getTotalAmount } from '../../../../utils/createCurrentWalletInfo';
 
 export const TokenDisplay = ({ token, pathId }: { token: TokenInfoType; pathId: string }) => {
   const theme = useTheme();
@@ -136,11 +138,19 @@ export const TokenPriceChangeChip = ({
 
 export const TokenPriceTotal = observer(({ token, secondaryToken24Activity, stores, pathId }) => {
   const theme = useTheme();
-  const { accountPair, primaryTokenInfo, walletBalance, showWelcomeBanner } = usePortfolio();
+  const { accountPair, primaryTokenInfo, showWelcomeBanner, selectedWallet: contextSelectedWallet } = usePortfolio();
   const mainFiatFullPathId = `${pathId}-totalMain-text`;
   const secondFiatFullPathId = `${pathId}-totalSecond-text`;
   const mainCurrencyValueFullPathId = `${pathId}-totalMainCurrencyValue-text`;
   const mainCurrencyFiatFullPathId = `${pathId}-totalMainCurrencyFiat-text`;
+  const selectedWallet = contextSelectedWallet;
+
+  const { delegation } = stores;
+  const rewards = delegation.getRewardBalanceOrZero(selectedWallet);
+  const balance = selectedWallet?.balance;
+  const totalBalanceAmount = getTotalAmount(balance, rewards);
+  const defaultEntry = totalBalanceAmount?.getDefaultEntry();
+  const primaryBalance = defaultEntry?.amount.shiftedBy(-primaryTokenInfo?.decimals || 0);
 
   // TODO refactor this properly
   if (showWelcomeBanner) {
@@ -182,12 +192,15 @@ export const TokenPriceTotal = observer(({ token, secondaryToken24Activity, stor
 
   if (ptPrice === null) return `... ${currency}`;
 
-  const totalPrice =
-    ptPrice &&
-    atomicBreakdown(tokenQuantityAsBigInt, decimals)
-      .bn.times(tokenPrice ?? 1)
-      .times(showingAda ? 1 : new BigNumber(ptPrice.toString()))
-      .toFormat(decimals);
+  const totalPrice = useMemo(() => {
+    return (
+      ptPrice &&
+      atomicBreakdown(tokenQuantityAsBigInt, decimals)
+        .bn.times(tokenPrice ?? 1)
+        .times(showingAda ? 1 : new BigNumber(ptPrice.toString()))
+        .toFormat(decimals)
+    );
+  }, [primaryBalance, selectedWallet?.balance]);
 
   const primaryAda = isPrimary && showingAda;
 
@@ -200,7 +213,7 @@ export const TokenPriceTotal = observer(({ token, secondaryToken24Activity, stor
         <Typography columnGap="3px" color="ds.text_gray_medium" sx={{ display: 'flex' }}>
           <HiddenAmount isHidden={stores.profile.shouldHideBalance}>
             <Typography mr="4px" id={mainCurrencyValueFullPathId}>
-              {isPrimary ? walletBalance?.ada : token.formatedAmount}
+              {isPrimary ? Number(primaryBalance) : token.formatedAmount}
             </Typography>
           </HiddenAmount>
           <Typography id={mainCurrencyFiatFullPathId}>{token.info.name}</Typography>