onClickAsset(nativeCurrency)}
title={nativeCurrency}
- // The primary and secondary currencies are subject to change based on the user's settings
- // TODO: rename this primary/secondary concept here to be more intuitive, regardless of setting
primary={string}
tokenSymbol={symbol}
secondary={secondary}
diff --git a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
index a54a8031eaf6..a14e65ac572b 100644
--- a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
+++ b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
@@ -82,7 +82,7 @@ export const useNativeTokenBalance = () => {
const nativeTokenWithBalance: TokenWithBalance = {
address: '',
- symbol: tokenSymbol || '',
+ symbol: tokenSymbol ?? '',
string: primaryBalance,
image: primaryTokenImage,
secondary: secondaryBalance,
diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
index 1f27e0ac7efa..8a107b154fb9 100644
--- a/ui/components/app/assets/token-list/token-list.tsx
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -75,14 +75,20 @@ export default function TokenList({
) : (
- {sortedTokens.map((tokenData, index) => {
+ {sortedTokens.map((tokenData) => {
if (tokenData?.isNative) {
// we need cloneElement so that we can pass the unique key
return React.cloneElement(nativeToken as React.ReactElement, {
- key: index,
+ key: `${tokenData.symbol}-${tokenData.address}`,
});
}
- return ;
+ return (
+
+ );
})}
);