Skip to content

fix: balance and token icons are unavailable when the bridge page is reopened #31343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 28, 2025
Merged

fix: balance and token icons are unavailable when the bridge page is reopened #31343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
012b1d7
fix: show SOL balance on reopen
micaelae Mar 27, 2025
70f3b09
fix: show token icons when reopening the bridge page
micaelae Mar 27, 2025
adb4fa6
fix: Linea and Ethereum balances
micaelae Mar 27, 2025
a49e380
fix: set insufficientBal to undefined when not running an e2e test
micaelae Mar 27, 2025
12744fa
Merge branch 'main' into mms2147-balance-resets-on-reopen
micaelae Mar 28, 2025
ea01374
Merge branch 'main' into mms2147-balance-resets-on-reopen
micaelae Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions ui/hooks/bridge/useLatestBalance.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import {
formatChainIdToCaip,
formatChainIdToHex,
ChainId,
isNativeAddress,
} from '@metamask/bridge-controller';
import { useSelector } from 'react-redux';
import { getSelectedInternalAccount } from '../../selectors';
import { useAsyncResult } from '../useAsync';
import { Numeric } from '../../../shared/modules/Numeric';
Expand All @@ -17,7 +17,7 @@ import {
getMultichainBalances,
getMultichainCurrentChainId,
} from '../../selectors/multichain';
import { getProviderConfig } from '../../../shared/modules/selectors/networks';
import { MULTICHAIN_NATIVE_CURRENCY_TO_CAIP19 } from '../../../shared/constants/multichain/assets';

/**
* Custom hook to fetch and format the latest balance of a given token or native asset.
Expand All @@ -32,6 +32,7 @@ const useLatestBalance = (
symbol: string;
string?: string;
chainId?: Hex | CaipChainId | ChainId;
assetId?: string;
} | null,
) => {
const { address: selectedAddress, id } = useMultichainSelector(
Expand All @@ -42,7 +43,6 @@ const useLatestBalance = (
const nonEvmBalancesByAccountId = useMultichainSelector(
getMultichainBalances,
);
const { rpcUrl } = useSelector(getProviderConfig);

const nonEvmBalances = nonEvmBalancesByAccountId?.[id];

Expand All @@ -56,8 +56,11 @@ const useLatestBalance = (
// No need to fetch the balance for non-EVM tokens, use the balance provided by the
// multichain balances controller
if (isSolanaChainId(chainId) && token.decimals) {
const caipAssetType = isNativeAddress(token.address)
? MULTICHAIN_NATIVE_CURRENCY_TO_CAIP19.SOL
: token.assetId ?? token.address;
return Numeric.from(
nonEvmBalances?.[token.address]?.amount ?? token.string,
nonEvmBalances?.[caipAssetType]?.amount ?? token?.string,
10,
)
.shiftedBy(-1 * token.decimals)
Expand All @@ -66,8 +69,7 @@ const useLatestBalance = (

if (
token.address &&
formatChainIdToCaip(currentChainId) === formatChainIdToCaip(chainId) &&
rpcUrl
formatChainIdToCaip(currentChainId) === formatChainIdToCaip(chainId)
) {
return (
await calcLatestSrcBalance(
Expand All @@ -80,7 +82,7 @@ const useLatestBalance = (
}

return undefined;
}, [currentChainId, token, selectedAddress, rpcUrl, nonEvmBalances]);
}, [currentChainId, token, selectedAddress, nonEvmBalances]);

if (token && !token.decimals) {
throw new Error(
Expand Down
8 changes: 5 additions & 3 deletions ui/pages/bridge/prepare/prepare-bridge-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,15 +253,15 @@ const PrepareBridgePage = () => {
setToToken({
...destAsset,
chainId: destChainId,
image: destAsset.icon ?? '',
image: srcAsset.icon ?? destAsset.iconUrl ?? '',
address: destAsset.address,
}),
);
dispatch(
setFromToken({
...srcAsset,
chainId: srcChainId,
image: srcAsset.icon ?? '',
image: srcAsset.icon || srcAsset.iconUrl || '',
address: srcAsset.address,
}),
);
Expand Down Expand Up @@ -324,7 +324,9 @@ const PrepareBridgePage = () => {
// This override allows quotes to be returned when the rpcUrl is a forked network
// Otherwise quotes get filtered out by the bridge-api when the wallet's real
// balance is less than the tenderly balance
insufficientBal: Boolean(providerConfig?.rpcUrl?.includes('localhost')),
insufficientBal: providerConfig?.rpcUrl?.includes('localhost')
? true
: undefined,
slippage,
walletAddress: selectedAccount?.address ?? '',
destWalletAddress: selectedDestinationAccount?.address,
Expand Down
Loading