313 eth bsc balance issues

CHANGELOG.md

@@ -4,7 +4,9 @@
 
 ## Add
 
-- Chain enabled disable [#281](https://github.com/asgardex/asgardex-desktop/pull/309)
+- Chain enabled disable [#281](https://github.com/asgardex/asgardex-desktop/pull/312)
+- Added erc20 manual add [#313] (https://github.com/asgardex/asgardex-desktop/pull/314)
+
 # 1.22.0 (2024-07-29)
 
 ## Updates/Fixes

src/main/preload.ts

@@ -73,6 +73,7 @@ const getFileStoreApi = <FileName extends StoreFileName>(
 contextBridge.exposeInMainWorld('apiCommonStorage', getFileStoreApi('common'))
 contextBridge.exposeInMainWorld('apiUserNodesStorage', getFileStoreApi('userNodes'))
 contextBridge.exposeInMainWorld('apiChainStorage', getFileStoreApi('userChains'))
+contextBridge.exposeInMainWorld('apiAssetStorage', getFileStoreApi('userAssets'))
 contextBridge.exposeInMainWorld('apiPoolsStorage', getFileStoreApi('pools'))
 
 //

src/renderer/components/settings/WalletSettings.tsx

@@ -17,7 +17,7 @@ import { LTCChain } from '@xchainjs/xchain-litecoin'
 import { MAYAChain } from '@xchainjs/xchain-mayachain'
 import { THORChain } from '@xchainjs/xchain-thorchain'
 import { Asset, Address, Chain } from '@xchainjs/xchain-util'
-import { List, Collapse, RadioChangeEvent } from 'antd'
+import { List, Collapse, RadioChangeEvent, AutoComplete, message } from 'antd'
 import * as FP from 'fp-ts/function'
 import * as A from 'fp-ts/lib/Array'
 import * as O from 'fp-ts/lib/Option'
@@ -45,6 +45,7 @@ import { useSubscriptionState } from '../../hooks/useSubscriptionState'
 import * as appRoutes from '../../routes/app'
 import * as walletRoutes from '../../routes/wallet'
 import { userChains$, addChain, removeChain } from '../../services/storage/userChains'
+import { addAsset, removeAsset } from '../../services/storage/userChainTokens'
 import {
   KeystoreWalletsUI,
   RemoveKeystoreWalletHandler,
@@ -61,6 +62,10 @@ import {
   VerifiedLedgerAddressRD
 } from '../../services/wallet/types'
 import { walletTypeToI18n } from '../../services/wallet/util'
+import { ARB_TOKEN_WHITELIST } from '../../types/generated/mayachain/arberc20whitelist'
+import { AVAX_TOKEN_WHITELIST } from '../../types/generated/thorchain/avaxerc20whitelist'
+import { BSC_TOKEN_WHITELIST } from '../../types/generated/thorchain/bscerc20whitelist'
+import { ERC20_WHITELIST } from '../../types/generated/thorchain/erc20whitelist'
 import { AttentionIcon } from '../icons'
 import * as StyledR from '../shared/form/Radio.styles'
 import { BorderButton, FlatButton, TextButton } from '../uielements/button'
@@ -611,6 +616,108 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
     }
   }, [exportKeystore, setExportKeystoreErrorMsg])
 
+  // Handler to update the search state
+  const [assetSearch, setAssetSearch] = useState<{ [key in Chain]?: string }>({})
+  const [filteredAssets, setFilteredAssets] = useState<{ [key in Chain]?: Asset[] }>({})
+
+  const [isAddingByChain, setIsAddingByChain] = useState<{ [key in Chain]?: boolean }>({})
+
+  const toggleStorageMode = useCallback((chain: Chain) => {
+    setIsAddingByChain((prevState) => ({
+      ...prevState,
+      [chain]: !prevState[chain] // Toggle the current state for the specific chain
+    }))
+  }, [])
+
+  const handleAssetSearch = useCallback((value: string, chain: Chain) => {
+    const searchValue = value.toUpperCase()
+
+    setAssetSearch((prevState) => ({
+      ...prevState,
+      [chain]: searchValue
+    }))
+
+    let matchedAssets: Asset[]
+    switch (chain) {
+      case ETHChain:
+        matchedAssets = ERC20_WHITELIST.filter(
+          ({ asset }) => asset.symbol.toUpperCase().includes(searchValue) && !asset.synth
+        ).map(({ asset }) => asset)
+        break
+      case AVAXChain:
+        matchedAssets = AVAX_TOKEN_WHITELIST.filter(
+          ({ asset }) => asset.symbol.toUpperCase().includes(searchValue) && !asset.synth
+        ).map(({ asset }) => asset)
+        break
+      case BSCChain:
+        matchedAssets = BSC_TOKEN_WHITELIST.filter(
+          ({ asset }) => asset.symbol.toUpperCase().includes(searchValue) && !asset.synth
+        ).map(({ asset }) => asset)
+        break
+      case ARBChain:
+        matchedAssets = ARB_TOKEN_WHITELIST.filter(
+          ({ asset }) => asset.symbol.toUpperCase().includes(searchValue) && !asset.synth
+        ).map(({ asset }) => asset)
+        break
+      default:
+        matchedAssets = []
+        break
+    }
+    setFilteredAssets((prevState) => ({
+      ...prevState,
+      [chain]: matchedAssets
+    }))
+  }, [])
+
+  const addAssetToStorage = useCallback((asset: Asset, chain: Chain) => {
+    addAsset(asset)
+
+    setAssetSearch((prevState) => ({
+      ...prevState,
+      [chain]: ''
+    }))
+
+    setFilteredAssets((prevState) => ({
+      ...prevState,
+      [chain]: []
+    }))
+  }, [])
+
+  const handleRemoveAsset = useCallback(
+    (value: string, chain: Chain) => {
+      const selectedAsset = (filteredAssets[chain] || []).find((asset) => asset.symbol === value)
+      if (selectedAsset) {
+        removeAsset(selectedAsset)
+        setAssetSearch((prevState) => ({
+          ...prevState,
+          [chain]: ''
+        }))
+
+        setFilteredAssets((prevState) => ({
+          ...prevState,
+          [chain]: []
+        }))
+      }
+    },
+    [filteredAssets]
+  )
+
+  const onSelectAsset = useCallback(
+    (value: string, chain: Chain) => {
+      const selectedAsset = (filteredAssets[chain] || []).find((asset) => asset.symbol === value)
+      if (selectedAsset) {
+        if (isAddingByChain[chain]) {
+          addAssetToStorage(selectedAsset, chain)
+          message.success(`${selectedAsset.symbol} added to ${selectedAsset.chain} successfully!`)
+        } else {
+          handleRemoveAsset(selectedAsset.symbol, chain)
+          message.success(`${selectedAsset.symbol} removed from ${selectedAsset.chain} successfully!`)
+        }
+      }
+    },
+    [addAssetToStorage, filteredAssets, handleRemoveAsset, isAddingByChain]
+  )
+
   const renderAccounts = useMemo(
     () =>
       FP.pipe(
@@ -641,6 +748,41 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
                       : intl.formatMessage({ id: 'common.enable' })}
                   </span>
                 </div>
+                {(chain === ETHChain || chain === AVAXChain || chain === BSCChain || chain === ARBChain) && (
+                  <div className="mx-40px mt-10px flex w-full items-center">
+                    <SwitchButton
+                      active={!!isAddingByChain[chain]} // Use the toggle state for the specific chain
+                      onChange={() => toggleStorageMode(chain)} // Pass the specific chain to toggle the state
+                      className="mr-10px"
+                    />
+                    <span className="mr-2 text-text0 dark:text-text0d">
+                      {isAddingByChain[chain]
+                        ? intl.formatMessage({ id: 'common.add' })
+                        : intl.formatMessage({ id: 'common.remove' })}
+                    </span>
+                    <AutoComplete
+                      value={assetSearch[chain] || ''}
+                      onChange={(value) => handleAssetSearch(value, chain)}
+                      onSelect={(value: string) => onSelectAsset(value, chain)}
+                      style={{ minWidth: 450, width: 'auto' }}
+                      placeholder={intl.formatMessage({ id: 'common.searchAsset' })}
+                      allowClear>
+                      {(filteredAssets[chain] || []).map((asset: Asset) => (
+                        <AutoComplete.Option key={asset.symbol} value={asset.symbol}>
+                          <div>{asset.symbol}</div>
+                        </AutoComplete.Option>
+                      ))}
+                    </AutoComplete>
+                    <InfoIcon
+                      className="ml-10px"
+                      tooltip={
+                        isAddingByChain[chain]
+                          ? intl.formatMessage({ id: 'common.addAssetManually' })
+                          : intl.formatMessage({ id: 'common.remove' })
+                      }
+                    />
+                  </div>
+                )}
               </Styled.ListItem>
             )}
           />
@@ -653,9 +795,15 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
       network,
       renderLedgerAddress,
       renderLedgerNotSupported,
-      intl,
       enabledChains,
-      toggleChain
+      intl,
+      isAddingByChain,
+      assetSearch,
+      filteredAssets,
+      toggleChain,
+      toggleStorageMode,
+      handleAssetSearch,
+      onSelectAsset
     ]
   )
 

src/renderer/const.ts

@@ -1,4 +1,4 @@
-import { ARBChain, AssetARB } from '@xchainjs/xchain-arbitrum'
+import { ARBChain, AssetAETH, AssetARB } from '@xchainjs/xchain-arbitrum'
 import { AVAXChain, AssetAVAX } from '@xchainjs/xchain-avax'
 import { BTCChain } from '@xchainjs/xchain-bitcoin'
 import { BCHChain } from '@xchainjs/xchain-bitcoincash'
@@ -88,7 +88,7 @@ export const AssetUniH: Asset = {
 // ETH.USDT mainnet
 export const AssetUSDTDAC: Asset = {
   chain: ETHChain,
-  symbol: 'USDT-0XDAC17F958D2EE523A2206206994597C13D831EC7',
+  symbol: 'USDT-0xdAC17F958D2ee523a2206206994597C13D831ec7',
   ticker: 'USDT',
   synth: false
 }
@@ -102,23 +102,23 @@ export const AssetUSDT62E: Asset = {
 // ETH.USDC mainnet
 export const AssetUSDC: Asset = {
   chain: ETHChain,
-  symbol: 'USDC-0XA0B86991C6218B36C1D19D4A2E9EB0CE3606EB48',
+  symbol: 'USDC-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
   ticker: 'USDC',
   synth: false
 }
 
-// AVAX.USDT mainnet
+// AVAX.USDC mainnet
 export const AssetUSDCAVAX: Asset = {
   chain: AVAXChain,
-  symbol: 'USDC-0X9702230A8EA53601F5CD2DC00FDBC13D4DF4A8C7',
+  symbol: 'USDC-0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E',
   ticker: 'USDT',
   synth: false
 }
 
-// AVAX.USDC mainnet
+// AVAX.USDT mainnet
 export const AssetUSDTAVAX: Asset = {
   chain: AVAXChain,
-  symbol: 'USDC-0XB97EF9EF8734C71904D8002F8B6BC66DD9C48A6E',
+  symbol: 'USDT-0x9702230A8Ea53601f5cD2dc00fDBc13d4dF4A8c7',
   ticker: 'USDC',
   synth: false
 }
@@ -139,6 +139,25 @@ export const AssetUSDCBSC: Asset = {
   synth: false
 }
 
+export const ETHAssetsFallBack = [AssetETH, AssetUSDTDAC, AssetUSDC]
+export const BSCAssetsFallBack = [AssetBSC, AssetUSDCBSC, AssetUSDTBSC]
+export const AVAXAssetsFallback = [AssetAVAX, AssetUSDTAVAX, AssetUSDCAVAX]
+
+// for evm only
+export const DEFAULT_USER_ASSETS = [
+  AssetETH,
+  AssetUSDTDAC,
+  AssetUSDC,
+  AssetBSC,
+  AssetUSDCBSC,
+  AssetUSDTBSC,
+  AssetAVAX,
+  AssetUSDTAVAX,
+  AssetUSDCAVAX,
+  AssetARB,
+  AssetAETH
+]
+
 export const DEFAULT_PRICE_ASSETS: PricePoolAssets = [AssetRuneNative, AssetETH, AssetBTC, AssetCacao]
 
 // Weight of chains

src/renderer/i18n/de/common.ts

@@ -96,6 +96,7 @@ const common: CommonMessages = {
   'common.min': 'Min',
   'common.search': 'Suche',
   'common.searchAsset': 'Suche Asset',
+  'common.addAssetManually': 'ERC20 wird nicht angezeigt? Asset manuell hinzufügen',
   'common.searchExample': 'Suchbeispiel für nicht-synth chain.ticker, z.B. btc.btc oder für synth btc/btc',
   'common.excludeSynth': 'Synths ausschließen',
   'common.retry': 'Wiederholen',

src/renderer/i18n/en/common.ts

@@ -96,6 +96,7 @@ const common: CommonMessages = {
   'common.min': 'Min',
   'common.search': 'Search',
   'common.searchAsset': 'Search Asset',
+  'common.addAssetManually': 'ERC20 not showing? add asset manually',
   'common.searchExample': 'Search example for non synth chain.ticker i.e btc.btc or for synth btc/btc',
   'common.excludeSynth': 'Exclude Synths',
   'common.retry': 'Retry',

src/renderer/i18n/es/common.ts

@@ -95,6 +95,7 @@ const common: CommonMessages = {
   'common.min': 'Mín',
   'common.search': 'Buscar en',
   'common.searchAsset': 'Buscar Activo',
+  'common.addAssetManually': '¿No se muestra ERC20? Agrega el activo manualmente',
   'common.searchExample':
     'Ejemplo de búsqueda para cadena no sintética.ticker, es decir, btc.btc o para sintético btc/btc',
   'common.retry': 'Reintentar',

src/renderer/i18n/fr/common.ts

@@ -95,6 +95,7 @@ const common: CommonMessages = {
   'common.min': 'Minimum',
   'common.search': 'Rechercher',
   'common.searchAsset': 'Rechercher un actif',
+  'common.addAssetManually': 'ERC20 ne s’affiche pas ? Ajoutez l’actif manuellement',
   'common.searchExample': 'Exemple de recherche pour chaîne non synthétique.ticker ex. btc.btc ou pour synth btc/btc',
   'common.excludeSynth': 'Exclure les Synth',
   'common.retry': 'Réessayer',

src/renderer/i18n/hi/common.ts

@@ -96,6 +96,7 @@ const common: CommonMessages = {
   'common.min': 'न्यूनतम',
   'common.search': 'खोज',
   'common.searchAsset': 'एसेट खोजें',
+  'common.addAssetManually': 'ERC20 नहीं दिख रहा है? संपत्ति को मैन्युअल रूप से जोड़ें',
   'common.searchExample': 'गैर सिंथ चेन.टिकर के लिए खोज उदाहरण जैसे कि btc.btc या सिंथ के लिए btc/btc',
   'common.excludeSynth': 'सिंथ्स को बाहर करें',
   'common.retry': 'पुनः प्रयास करें',

src/renderer/i18n/ru/common.ts

@@ -96,6 +96,7 @@ const common: CommonMessages = {
   'common.min': 'Мин.',
   'common.search': 'Поиск',
   'common.searchAsset': 'Поиск актива',
+  'common.addAssetManually': 'ERC20 не отображается? Добавьте актив вручную',
   'common.searchExample': 'Пример поиска для не синтетической цепи.ticker, например, btc.btc или для синтетики btc/btc',
   'common.excludeSynth': 'Исключить синтезы',
   'common.retry': 'Повторить',

src/renderer/i18n/types.ts

@@ -93,6 +93,7 @@ export type CommonMessageKey =
   | 'common.min'
   | 'common.search'
   | 'common.searchAsset'
+  | 'common.addAssetManually'
   | 'common.searchExample'
   | 'common.excludeSynth'
   | 'common.retry'