diff --git a/packages/yoroi-extension/app/Routes.js b/packages/yoroi-extension/app/Routes.js index ae9222dcac..eab5d3a409 100644 --- a/packages/yoroi-extension/app/Routes.js +++ b/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'; diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx b/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx index 6a705fd6fe..9c5a619643 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx @@ -49,7 +49,14 @@ 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 { @@ -57,15 +64,15 @@ const PortfolioHeader = observer(({ walletBalance, setKeyword, isLoading, toolti 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; + 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); diff --git a/packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx b/packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx index 0665f5dc5c..a7a68c9327 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx +++ b/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 {children}; diff --git a/packages/yoroi-extension/app/UI/features/portfolio/module/state.ts b/packages/yoroi-extension/app/UI/features/portfolio/module/state.ts index 59fdd4ba8b..ca8b5f4f84 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/module/state.ts +++ b/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: () => {}, diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx index 40391bca78..188bbe039e 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx +++ b/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 - {isPrimary ? walletBalance?.ada : token.formatedAmount} + {isPrimary ? Number(primaryBalance) : token.formatedAmount} {token.info.name}