Fix native tokens whitelist

src/app/InitBankBalance.tsx

@@ -5,19 +5,19 @@ import {
   useInitialTokenBalance,
 } from "data/queries/bank"
 import { BankBalanceProvider } from "data/queries/bank"
-//import { useNetworkName } from "data/wallet"
+import { useNetworkName } from "data/wallet"
 import { combineState } from "data/query"
 import { WithFetching } from "components/feedback"
-//import { useCustomTokensNative } from "data/settings/CustomTokens"
-//import { useWhitelist } from "data/queries/chains"
+import { useCustomTokensNative } from "data/settings/CustomTokens"
+import { useWhitelist } from "data/queries/chains"
 
 const InitBankBalance = ({ children }: PropsWithChildren<{}>) => {
   const balances = useInitialBankBalance()
   const tokenBalancesQuery = useInitialTokenBalance()
-  //const native = useCustomTokensNative()
-  //const { whitelist } = useWhitelist()
+  const native = useCustomTokensNative()
+  const { whitelist } = useWhitelist()
 
-  //const networkName = useNetworkName()
+  const networkName = useNetworkName()
 
   const state = combineState(...balances, ...tokenBalancesQuery)
   const bankBalance = balances.reduce(
@@ -29,19 +29,24 @@ const InitBankBalance = ({ children }: PropsWithChildren<{}>) => {
     [] as CoinBalance[]
   )
 
-  /*native.list.forEach(({ denom }) => {
-    if (!bankBalance.find((balance) => balance.denom === denom)) {
-      const token = whitelist[networkName][denom]
+  native.list.forEach(({ id }) => {
+    const [chain, denom] = id.split(":")
+    if (
+      !bankBalance.find(
+        (balance) => balance.denom === denom && balance.chain === chain
+      )
+    ) {
+      const token = whitelist[networkName][id]
 
       if (!token || !token.chains || token.chains.length === 0) return
 
       bankBalance.push({
         denom,
         amount: "0",
-        chain: token.chains[0],
+        chain,
       })
     }
-  })*/
+  })
 
   return (
     <BankBalanceProvider value={[...bankBalance, ...tokenBalance]}>

src/data/settings/CustomTokens.ts

@@ -2,7 +2,7 @@ import { atom, useRecoilState } from "recoil"
 import update from "immutability-helper"
 import { DefaultCustomTokensItem, SettingKey } from "utils/localStorage"
 import { getLocalSetting, setLocalSetting } from "utils/localStorage"
-import { useNetworkName } from "../wallet"
+import { useChainID, useNetworkName } from "../wallet"
 
 const customTokensState = atom({
   key: "customTokens",
@@ -17,13 +17,17 @@ interface Params<T> {
 const useCustomTokens = <T extends CustomToken>({ type, key }: Params<T>) => {
   const [customTokens, setCustomTokens] = useRecoilState(customTokensState)
   const networkName = useNetworkName()
+  const chainID = useChainID()
   const list = (customTokens[networkName]?.[type] ?? []) as T[]
 
   const getIsAdded = (param: T) =>
     !!list.find((item) => item[key] === param[key])
 
   const updateList = (list: T[]) => {
-    const prev = { [networkName]: DefaultCustomTokensItem, ...customTokens }
+    const prev = {
+      [networkName]: DefaultCustomTokensItem(chainID),
+      ...customTokens,
+    }
     const next = update(prev, { [networkName]: { [type]: { $set: list } } })
     setCustomTokens(next)
     setLocalSetting(SettingKey.CustomTokens, next)
@@ -45,7 +49,7 @@ export const useCustomTokensCW20 = () => {
 }
 
 export const useCustomTokensNative = () => {
-  return useCustomTokens<NativeTokenBasicInfo>({ type: "native", key: "denom" })
+  return useCustomTokens<NativeTokenBasicInfo>({ type: "native", key: "id" })
 }
 
 export const useCustomTokensCW721 = () => {

src/pages/custom/ManageCustomTokens.tsx

@@ -74,15 +74,27 @@ const Component = ({ whitelist, keyword }: Props) => {
     list: [...cw20.list, ...native.list],
     getIsAdded: (item: CustomTokenCW20 | NativeTokenItem) => {
       if (isCW20(item)) return cw20.getIsAdded(item)
-      return native.getIsAdded({ denom: item.token })
+      const nativeItem = item as NativeTokenItem
+      return native.getIsAdded({
+        id: [nativeItem.chains[0], nativeItem.token].join(":"),
+        denom: nativeItem.token,
+      })
     },
     add: (item: CustomTokenCW20 | NativeTokenItem) => {
       if (isCW20(item)) return cw20.add(item)
-      return native.add({ denom: item.token })
+      const nativeItem = item as NativeTokenItem
+      return native.add({
+        id: [nativeItem.chains[0], nativeItem.token].join(":"),
+        denom: nativeItem.token,
+      })
     },
     remove: (item: CustomTokenCW20 | NativeTokenItem) => {
       if (isCW20(item)) return cw20.remove(item)
-      return native.remove({ denom: item.token })
+      const nativeItem = item as NativeTokenItem
+      return native.remove({
+        id: [nativeItem.chains[0], nativeItem.token].join(":"),
+        denom: nativeItem.token,
+      })
     },
   }
 

src/types/settings.d.ts

@@ -10,6 +10,7 @@ type CustomTokens = Record<NetworkName, CustomTokensByNetwork>
 
 interface NativeTokenBasicInfo {
   denom: CoinDenom
+  id: string
 }
 
 interface CustomTokensByNetwork {

src/utils/localStorage/keys.ts

@@ -12,7 +12,7 @@ export enum SettingKey {
   Chain = "Chain",
   CustomLCD = "CustomLCD",
   HideLowBalTokens = "HideLowBalTokens",
-  CustomTokens = "CustomTokens", // Wallet
+  CustomTokens = "CustomTokensInterchain", // Wallet
   MinimumValue = "MinimumValue", // Wallet (UST value to show on the list)
   WithdrawAs = "WithdrawAs", // Rewards (Preferred denom to withdraw rewards)
   EnabledNetworks = "EnabledNetworks",
@@ -27,22 +27,26 @@ export const isSystemDarkMode =
 
 export const DefaultTheme = themes[1]
 
-export const DefaultCustomTokensItem = {
+export const DefaultCustomTokensItem = (chainID: string) => ({
   cw20: [],
   cw721: [],
   native: [
     {
       denom: "uluna",
+      id: `${chainID}:uluna`,
     },
   ],
-}
+})
+
 export const DefaultDisplayChains = {
   mainnet: ["phoenix-1", "osmosis-1"],
   testnet: ["pisco-1"],
   classic: ["columbus-5"],
 }
 
-export const DefaultCustomTokens = { mainnet: DefaultCustomTokensItem }
+export const DefaultCustomTokens = {
+  mainnet: DefaultCustomTokensItem("phoenix-1"),
+}
 
 export const DefaultSettings = {
   [SettingKey.Theme]: DefaultTheme,