fix: fix incorrect balances

widget/embedded/src/components/TokenList/TokenList.tsx

@@ -139,7 +139,6 @@ export function TokenList(props: PropTypes) {
       )
     );
   };
-
   const renderList = () => {
     return (
       <VirtualizedList

widget/embedded/src/store/slices/wallets.ts

@@ -24,11 +24,14 @@ import {
 
 type WalletAddress = string;
 type TokenAddress = string;
+type TokenSymbol = string;
 type BlockchainId = string;
-/** format: `BlockchainId-TokenAddress` */
-export type AssetKey = `${BlockchainId}-${TokenAddress}`;
-/** format: `BlockchainId-TokenAddress-WalletAddress` */
-export type BalanceKey = `${BlockchainId}-${TokenAddress}-${WalletAddress}`;
+/** format: `BlockchainId-TokenAddress-TokenSymbol` */
+export type AssetKey = `${BlockchainId}-${TokenAddress}-${TokenSymbol}`;
+/** format: `BlockchainId-TokenAddress-TokenSymbol-WalletAddress` */
+export type BalanceKey =
+  `${BlockchainId}-${TokenAddress}-${TokenSymbol}-${WalletAddress}`;
+
 export type BalanceState = {
   [key: BalanceKey]: Balance;
 };
@@ -268,6 +271,7 @@ export const createWalletsSlice: StateCreator<
           createBalanceKey(wallet.address, {
             address: asset.address,
             blockchain: wallet.chain,
+            symbol: asset.symbol,
           }) === key
       );
 
@@ -283,7 +287,6 @@ export const createWalletsSlice: StateCreator<
         );
       }
     });
-
     set({
       _balances: nextBalancesState,
       _aggregatedBalances: nextAggregatedBalanceState,

widget/embedded/src/store/utils/wallets.ts

@@ -13,33 +13,30 @@ import BigNumber from 'bignumber.js';
 import { ZERO } from '../../constants/numbers';
 
 /**
- * output format: BlockchainId-TokenAddress
+ * Note: We need to use `symbol` as well since native coins and cosmos blockchains don't have `address`
+ * output format: BlockchainId-TokenAddress-TokenSymbol
  */
-export function createAssetKey(
-  asset: Pick<Asset, 'address' | 'blockchain'>
-): AssetKey {
-  return `${asset.blockchain}-${asset.address}`;
+export function createAssetKey(asset: Asset): AssetKey {
+  return `${asset.blockchain}-${asset.address}-${asset.symbol}`;
 }
 
 /**
- * output format: BlockchainId-TokenAddress-WalletAddress
+ * output format: BlockchainId-TokenAddress-TokenSymbol-WalletAddress
  */
 export function createBalanceKey(
   accountAddress: string,
-  asset: Pick<Asset, 'address' | 'blockchain'>
+  asset: Asset
 ): BalanceKey {
   const assetKey = createAssetKey(asset);
   return `${assetKey}-${accountAddress}`;
 }
 
-export function extractAssetFromBalanceKey(
-  key: BalanceKey
-): Pick<Asset, 'address' | 'blockchain'> {
-  const [assetChain, assetAddress] = key.split('-');
-
+export function extractAssetFromBalanceKey(key: BalanceKey): Asset {
+  const [assetChain, assetAddress, assetSymbol] = key.split('-');
   return {
     address: assetAddress,
     blockchain: assetChain,
+    symbol: assetSymbol,
   };
 }