From 5f094ab208800bf6de16ddc99436a040557805fa Mon Sep 17 00:00:00 2001
From: Daniel Fugere <danielfugere28@gmail.com>
Date: Wed, 13 Dec 2023 15:00:05 -0800
Subject: [PATCH] USDT, SEOS, BOX and USN bridges support (#178)

* enhancement: adding support for USDT

* chore: modified token selector to accept less redundant tokenOption values

* refactor: moving balances to balances store

* fix: fetching usdt balance properly

* fix: getting bridge working again

* refactor: added evm tokens to tokens.json

* fix: getting transfer page working again

* chore: general polishing of transfer page

* fix: fixed use entire balance button

fix: getting correct transfer fee working again

* fix: fixed confirm page

* fix: fixing token selector on send/receive page

* fix: getting usdt transfer working

* chore: handling the evm to native usdt transfer

* fix: using erc20 interface for usdt transfers

* debug: logging big number conversion issue

* chore: having form and confirm page play nicely with usdt

* refactor: using sent instead of deposit

* fix: getting evm to eos usdt transfer working

* fix: fixing other transfers

* style: linted

* chore: added seos, box and usn bridges

* enhancement: removing tokens.json dependency

* fix: getting new tokens working on transfer page

* enhancement: getting chain swapping working better

* style: linted

* fix: handling the case where chain swapping happens right after transfer

* style: linted

* fix: detecting metamask login properly

* chore: changed the transfer page subtitle

* fix: updated the SEOS, BOX and USN precision and transfer fees

* enhancement: checking balances less often for longer

* fix: refetching balances when evm session is not immediately accessible
---
 src/auth.ts                                   |   4 +-
 .../elements/input/token/selector.svelte      |  56 +-
 .../elements/input/token/selector/row.svelte  |   7 +-
 src/components/layout/account/sidebar.svelte  |   2 +
 src/lib/balance-providers/bloks.ts            |   1 +
 src/lib/balance-providers/light-api.ts        |  40 +-
 src/lib/evm/data/erc20_abi.json               | 527 ++++++++++++++++++
 src/lib/evm/data/tokens.json                  | 124 +++++
 src/lib/{evm.ts => evm/index.ts}              | 163 +++++-
 src/pages/dashboard/row.svelte                |   6 +-
 src/pages/send/index.svelte                   |  29 +-
 src/pages/transfer/confirm.svelte             |  94 ++--
 src/pages/transfer/form.svelte                | 116 ++--
 src/pages/transfer/index.svelte               |  69 ++-
 src/pages/transfer/managers/eosEvmBridge.ts   |  51 +-
 src/pages/transfer/managers/evmEosBridge.ts   | 103 ++--
 src/pages/transfer/managers/evmTelosBridge.ts |  24 -
 src/pages/transfer/managers/index.ts          | 129 ++++-
 src/pages/transfer/managers/telosEvmBridge.ts |  26 -
 .../transfer/managers/transferManager.ts      |  52 +-
 src/pages/transfer/success.svelte             |  31 +-
 src/stores/balances-provider.ts               |  34 +-
 src/stores/balances.ts                        |   6 +-
 src/stores/tokens.ts                          |  26 +-
 24 files changed, 1327 insertions(+), 393 deletions(-)
 create mode 100644 src/lib/evm/data/erc20_abi.json
 create mode 100644 src/lib/evm/data/tokens.json
 rename src/lib/{evm.ts => evm/index.ts} (64%)

diff --git a/src/auth.ts b/src/auth.ts
index 14364a7b..60e93339 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -7,6 +7,7 @@ import {getClient} from './api-client'
 import {appId, chains} from './config'
 import {activeEvmSession, activeSession, availableSessions} from './store'
 import {startEvmSession} from './lib/evm'
+import {fetchBalances} from './stores/balances'
 
 const transport = new Transport({
     requestStatus: false,
@@ -101,6 +102,7 @@ export async function activate(id: SessionLike) {
 
     if (get(activeEvmSession)) {
         activeEvmSession.set(undefined)
-        startEvmSession()
+        await startEvmSession()
+        fetchBalances(get(activeSession), true)
     }
 }
diff --git a/src/components/elements/input/token/selector.svelte b/src/components/elements/input/token/selector.svelte
index 4f9c9cc7..ddf1bedf 100644
--- a/src/components/elements/input/token/selector.svelte
+++ b/src/components/elements/input/token/selector.svelte
@@ -1,9 +1,10 @@
 <script>
     import {writable} from 'svelte/store'
+    import {Asset} from 'anchor-link'
 
     import {activeBlockchain} from '~/store'
     import type {Token} from '~/stores/tokens'
-    import {tokens} from '~/stores/tokens'
+    import {tokenFromBalance, tokens} from '~/stores/tokens'
     import {balances} from '~/stores/balances'
 
     import Form from '~/components/elements/form.svelte'
@@ -13,11 +14,14 @@
 
     import TokenSelectorRow from './selector/row.svelte'
 
+    import type {Balance} from '~/stores/balances'
+
     export let defaultToken: Token | undefined = undefined
     export let selectedToken: Token | undefined = undefined
     export let tokenOptions: Token[] | undefined = undefined
     export let onTokenSelect: (token: Token) => void
     export let showTokensWithoutBalance: boolean = false
+    export let includeEvmTokens: boolean = false
 
     $: {
         if (defaultToken) {
@@ -44,32 +48,38 @@
 
     $: {
         if (tokenOptions) {
-            filteredTokens = tokenOptions
+            filteredTokens = showTokensWithoutBalance
+                ? tokenOptions
+                : tokenOptions.filter((token) => hasBalance(token))
         } else {
+            filteredTokens = showTokensWithoutBalance
+                ? $tokens
+                : $balances.map((balance) => {
+                      const token = $tokens.find((t) => t.key === balance.tokenKey)
+
+                      return token || tokenFromBalance(balance)
+                  })
+
             filteredTokens =
-                ($tokens &&
-                    $tokens.filter((token) => {
-                        const blockchainMatches = token.chainId.equals($activeBlockchain.chainId)
-                        let balanceExists
-                        if (!showTokensWithoutBalance) {
-                            balanceExists = !!(
-                                token.balance ||
-                                $balances.find((balance) => balance.tokenKey === token.key)
-                            )
-                        }
-                        const queryExists = query.length === 0
-                        const queryMatches = String(token.name)
-                            .toLowerCase()
-                            .includes(query.toLowerCase())
-                        return (
-                            blockchainMatches &&
-                            (queryExists || queryMatches) &&
-                            (showTokensWithoutBalance || balanceExists)
-                        )
-                    })) ||
-                []
+                filteredTokens.filter((token) => {
+                    if (token.evm && !includeEvmTokens) return false
+
+                    const blockchainMatches = token.chainId.equals($activeBlockchain.chainId)
+                    const queryExists = query.length === 0
+                    const queryMatches = String(token.name)
+                        .toLowerCase()
+                        .includes(query.toLowerCase())
+
+                    return blockchainMatches && hasBalance(token) && (queryExists || queryMatches)
+                }) || []
         }
     }
+
+    function hasBalance(token: Token, balance?: Balance) {
+        const balanceEntry = balance || $balances.find((b) => b.tokenKey === token?.key)
+
+        return !!balanceEntry?.quantity && balanceEntry.quantity.value > 0
+    }
 </script>
 
 <style type="scss">
diff --git a/src/components/elements/input/token/selector/row.svelte b/src/components/elements/input/token/selector/row.svelte
index 3d53ab4d..91f00355 100644
--- a/src/components/elements/input/token/selector/row.svelte
+++ b/src/components/elements/input/token/selector/row.svelte
@@ -14,12 +14,7 @@
     let balance
 
     $: {
-        if (token.balance) {
-            balance = token.balance
-        } else {
-            balance =
-                $balances && $balances.find((balance) => balance.tokenKey === token.key)?.quantity
-        }
+        balance = $balances && $balances.find((balance) => balance.tokenKey === token.key)?.quantity
 
         if (typeof balance === 'string') {
             formattedTokenBalance = balance
diff --git a/src/components/layout/account/sidebar.svelte b/src/components/layout/account/sidebar.svelte
index 6039a8c4..d23fb1cd 100644
--- a/src/components/layout/account/sidebar.svelte
+++ b/src/components/layout/account/sidebar.svelte
@@ -1,6 +1,8 @@
 <script>
     import {activate} from '~/auth'
     import type {SessionLike} from '~/auth'
+    import {activeSession} from '~/store'
+    import {fetchBalances} from '~/stores/balances'
 
     import Icon from '~/components/elements/icon.svelte'
 
diff --git a/src/lib/balance-providers/bloks.ts b/src/lib/balance-providers/bloks.ts
index 7c0d624e..1386bc10 100644
--- a/src/lib/balance-providers/bloks.ts
+++ b/src/lib/balance-providers/bloks.ts
@@ -68,6 +68,7 @@ export class BloksProvider implements BalanceProvider {
                 key,
                 chainId: this.chain.chainId,
                 account: account,
+                contract: Name.from(token.contract),
                 tokenKey: token.key,
                 quantity: asset,
             }
diff --git a/src/lib/balance-providers/light-api.ts b/src/lib/balance-providers/light-api.ts
index 82721d04..de50e5d0 100644
--- a/src/lib/balance-providers/light-api.ts
+++ b/src/lib/balance-providers/light-api.ts
@@ -51,23 +51,29 @@ export class LightAPIProvider implements BalanceProvider {
     }
 
     parseTokenBalances(account: Name, balances: RawTokenBalance[]) {
-        return balances.map((balance) => {
-            const symbol: Asset.Symbol = Asset.Symbol.from(
-                `${balance.decimals},${balance.currency}`
-            )
-            const token = this.parseTokenInfo(balance)
-            const amount = balance.amount ? Number(balance.amount) : 0
-            const asset = Asset.from(amount, symbol)
-            const key = makeBalanceKey(token, account)
-            const record: Balance = {
-                key,
-                chainId: this.chain.chainId,
-                account: account,
-                tokenKey: token.key,
-                quantity: asset,
-            }
-            return record
-        })
+        return balances
+            .filter((balance) => {
+                return balance.amount && Number(balance.amount) !== 0
+            })
+            .map((balance) => {
+                const symbol: Asset.Symbol = Asset.Symbol.from(
+                    `${balance.decimals},${balance.currency}`
+                )
+                const token = this.parseTokenInfo(balance)
+                const amount = balance.amount ? Number(balance.amount) : 0
+                const asset = Asset.from(amount, symbol)
+                const key = makeBalanceKey(token, account)
+                const record: Balance = {
+                    key,
+                    chainId: this.chain.chainId,
+                    account: account,
+                    contract: Name.from(balance.contract),
+                    tokenKey: token.key,
+                    quantity: asset,
+                }
+                return record
+            })
+            .filter((balance) => !!balance)
     }
 
     parseTokenInfo(balance: RawTokenBalance): Token {
diff --git a/src/lib/evm/data/erc20_abi.json b/src/lib/evm/data/erc20_abi.json
new file mode 100644
index 00000000..36a64ae5
--- /dev/null
+++ b/src/lib/evm/data/erc20_abi.json
@@ -0,0 +1,527 @@
+[
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": false,
+                "internalType": "address",
+                "name": "previousAdmin",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "address",
+                "name": "newAdmin",
+                "type": "address"
+            }
+        ],
+        "name": "AdminChanged",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "owner",
+                "type": "address"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "spender",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint256",
+                "name": "value",
+                "type": "uint256"
+            }
+        ],
+        "name": "Approval",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "beacon",
+                "type": "address"
+            }
+        ],
+        "name": "BeaconUpgraded",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": false,
+                "internalType": "uint8",
+                "name": "version",
+                "type": "uint8"
+            }
+        ],
+        "name": "Initialized",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "from",
+                "type": "address"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "to",
+                "type": "address"
+            },
+            {
+                "indexed": false,
+                "internalType": "uint256",
+                "name": "value",
+                "type": "uint256"
+            }
+        ],
+        "name": "Transfer",
+        "type": "event"
+    },
+    {
+        "anonymous": false,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "implementation",
+                "type": "address"
+            }
+        ],
+        "name": "Upgraded",
+        "type": "event"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "owner",
+                "type": "address"
+            },
+            {
+                "internalType": "address",
+                "name": "spender",
+                "type": "address"
+            }
+        ],
+        "name": "allowance",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "spender",
+                "type": "address"
+            },
+            {
+                "internalType": "uint256",
+                "name": "amount",
+                "type": "uint256"
+            }
+        ],
+        "name": "approve",
+        "outputs": [
+            {
+                "internalType": "bool",
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "account",
+                "type": "address"
+            }
+        ],
+        "name": "balanceOf",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "to",
+                "type": "address"
+            },
+            {
+                "internalType": "uint256",
+                "name": "amount",
+                "type": "uint256"
+            },
+            {
+                "internalType": "string",
+                "name": "memo",
+                "type": "string"
+            }
+        ],
+        "name": "bridgeTransfer",
+        "outputs": [
+            {
+                "internalType": "bool",
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "stateMutability": "payable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "decimals",
+        "outputs": [
+            {
+                "internalType": "uint8",
+                "name": "",
+                "type": "uint8"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "spender",
+                "type": "address"
+            },
+            {
+                "internalType": "uint256",
+                "name": "subtractedValue",
+                "type": "uint256"
+            }
+        ],
+        "name": "decreaseAllowance",
+        "outputs": [
+            {
+                "internalType": "bool",
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "egressFee",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "eosTokenContract",
+        "outputs": [
+            {
+                "internalType": "string",
+                "name": "",
+                "type": "string"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "evmAddress",
+        "outputs": [
+            {
+                "internalType": "address",
+                "name": "",
+                "type": "address"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "spender",
+                "type": "address"
+            },
+            {
+                "internalType": "uint256",
+                "name": "addedValue",
+                "type": "uint256"
+            }
+        ],
+        "name": "increaseAllowance",
+        "outputs": [
+            {
+                "internalType": "bool",
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint8",
+                "name": "_precision",
+                "type": "uint8"
+            },
+            {
+                "internalType": "uint256",
+                "name": "_egressFee",
+                "type": "uint256"
+            },
+            {
+                "internalType": "string",
+                "name": "_name",
+                "type": "string"
+            },
+            {
+                "internalType": "string",
+                "name": "_symbol",
+                "type": "string"
+            },
+            {
+                "internalType": "string",
+                "name": "_eos_token_contract",
+                "type": "string"
+            }
+        ],
+        "name": "initialize",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "linkedEOSAccountName",
+        "outputs": [
+            {
+                "internalType": "string",
+                "name": "",
+                "type": "string"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "linkedEOSAddress",
+        "outputs": [
+            {
+                "internalType": "address",
+                "name": "",
+                "type": "address"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "name",
+        "outputs": [
+            {
+                "internalType": "string",
+                "name": "",
+                "type": "string"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "precision",
+        "outputs": [
+            {
+                "internalType": "uint8",
+                "name": "",
+                "type": "uint8"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "proxiableUUID",
+        "outputs": [
+            {
+                "internalType": "bytes32",
+                "name": "",
+                "type": "bytes32"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "uint256",
+                "name": "_egressFee",
+                "type": "uint256"
+            }
+        ],
+        "name": "setFee",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "symbol",
+        "outputs": [
+            {
+                "internalType": "string",
+                "name": "",
+                "type": "string"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [],
+        "name": "totalSupply",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "to",
+                "type": "address"
+            },
+            {
+                "internalType": "uint256",
+                "name": "amount",
+                "type": "uint256"
+            }
+        ],
+        "name": "transfer",
+        "outputs": [
+            {
+                "internalType": "bool",
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "from",
+                "type": "address"
+            },
+            {
+                "internalType": "address",
+                "name": "to",
+                "type": "address"
+            },
+            {
+                "internalType": "uint256",
+                "name": "amount",
+                "type": "uint256"
+            }
+        ],
+        "name": "transferFrom",
+        "outputs": [
+            {
+                "internalType": "bool",
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "newImplementation",
+                "type": "address"
+            }
+        ],
+        "name": "upgradeTo",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "newImplementation",
+                "type": "address"
+            },
+            {
+                "internalType": "bytes",
+                "name": "data",
+                "type": "bytes"
+            }
+        ],
+        "name": "upgradeToAndCall",
+        "outputs": [],
+        "stateMutability": "payable",
+        "type": "function"
+    }
+]
diff --git a/src/lib/evm/data/tokens.json b/src/lib/evm/data/tokens.json
new file mode 100644
index 00000000..654dc386
--- /dev/null
+++ b/src/lib/evm/data/tokens.json
@@ -0,0 +1,124 @@
+[
+    {
+        "key": "evm-eos",
+        "symbol": "EOS",
+        "account": "eosio.evm",
+        "chain": "eos",
+        "supply": {
+            "precision": 4
+        },
+        "metadata": {
+            "name": "EOS (EVM)",
+            "website": "https://eos.io",
+            "logo": "/images/token-eos-dark.svg",
+            "created_at": "2022-08-15T13:34:31.994Z",
+            "desc": {
+                "en": "EOS (Enterprise Operation System) is a blockchain smart contract platform developed by Block.one, which aims to provide bottom blockchain platform services for high-performance distributed applications.",
+                "zh": "EOS (Enterprise Operation System) \u662f\u4e00\u4e2a\u533a\u5757\u94fe\u667a\u80fd\u5408\u7ea6\u5e73\u53f0\uff0c\u7531Block.one \u5f00\u53d1\u3002\u5b83\u81f4\u529b\u4e8e\u4e3a\u9ad8\u6027\u80fd\u5206\u5e03\u5f0f\u5e94\u7528\u63d0\u4f9b\u533a\u5757\u94fe\u5e95\u5c42\u670d\u52a1\u3002"
+            }
+        },
+        "chain_rank": "",
+        "evm": true
+    },
+    {
+        "key": "evm-usdt",
+        "symbol": "USDT",
+        "account": "eosio.evm",
+        "chain": "eos",
+        "supply": {
+            "precision": 4
+        },
+        "metadata": {
+            "name": "USDT (EVM)",
+            "website": "",
+            "logo": "https://raw.githubusercontent.com/eoscafe/eos-airdrops/master/logos/USDT.png",
+            "created_at": "2022-08-15T13:34:32.002Z"
+        },
+        "chain_rank": "",
+        "evm": true
+    },
+    {
+        "key": "evm-seos",
+        "symbol": "SEOS",
+        "account": "eosio.evm",
+        "chain": "eos",
+        "supply": {
+            "precision": 4
+        },
+        "metadata": {
+            "name": "SEOS (EVM)",
+            "website": "",
+            "logo": "",
+            "created_at": ""
+        },
+        "chain_rank": "",
+        "evm": true
+    },
+    {
+        "key": "aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906-stoken.defi-seos",
+        "symbol": "SEOS",
+        "account": "stoken.defi",
+        "chain": "eos",
+        "supply": {
+            "precision": 4
+        },
+        "metadata": {
+            "name": "SEOS",
+            "website": "",
+            "logo": "",
+            "created_at": ""
+        },
+        "chain_rank": ""
+    },
+    {
+        "key": "evm-box",
+        "symbol": "BOX",
+        "account": "eosio.evm",
+        "chain": "eos",
+        "supply": {
+            "precision": 6
+        },
+        "metadata": {
+            "name": "BOX (EVM)",
+            "website": "",
+            "logo": "https://raw.githubusercontent.com/eoscafe/eos-airdrops/master/logos/token.defi-box.png",
+            "created_at": "2022-08-15T13:34:32.001Z"
+        },
+        "chain_rank": "",
+        "evm": true
+    },
+    {
+        "key": "evm-usn",
+        "symbol": "USN",
+        "account": "eosio.evm",
+        "chain": "eos",
+        "supply": {
+            "precision": 4
+        },
+        "metadata": {
+            "name": "USN (EVM)",
+            "website": "",
+            "logo": "https://raw.githubusercontent.com/eoscafe/eos-airdrops/master/logos/usn.png",
+            "created_at": "2022-08-15T13:34:32.001Z"
+        },
+        "chain_rank": "",
+        "evm": true
+    },
+    {
+        "key": "evm-tlos",
+        "symbol": "TLOS",
+        "account": "eosio.evm",
+        "chain": "telos",
+        "supply": {
+            "precision": 4
+        },
+        "metadata": {
+            "name": "TLOS (EVM)",
+            "website": "",
+            "logo": "/images/chains/telos-dark.svg",
+            "created_at": "2022-08-15T13:34:32.004Z"
+        },
+        "chain_rank": "",
+        "evm": true
+    }
+]
diff --git a/src/lib/evm.ts b/src/lib/evm/index.ts
similarity index 64%
rename from src/lib/evm.ts
rename to src/lib/evm/index.ts
index ce0063cb..a7f5f163 100644
--- a/src/lib/evm.ts
+++ b/src/lib/evm/index.ts
@@ -7,11 +7,21 @@ import {Asset, Name, NameType} from 'anchor-link'
 import {BigNumber, ethers} from 'ethers'
 import {getClient} from '~/api-client'
 
+import erc20_abi from './data/erc20_abi.json'
+
 export type AvailableEvms = 'eos-mainnet' | 'telos'
+
+export interface EvmToken {
+    name: string
+    symbol: string
+    decimals: number
+    address?: string
+    nativeToken?: boolean
+}
 export interface EvmChainConfig {
     chainId: string
     chainName: string
-    nativeCurrency: {name: string; symbol: string; decimals: number}
+    tokens: EvmToken[]
     rpcUrls: string[]
     blockExplorerUrls: string[]
 }
@@ -28,14 +38,40 @@ export const evmChainConfigs: {[key: string]: EvmChainConfig} = {
     eos: {
         chainId: '0x4571',
         chainName: 'EOS EVM Network',
-        nativeCurrency: {name: 'EOS', symbol: '4,EOS', decimals: 18},
+        tokens: [
+            {name: 'EOS', symbol: '4,EOS', decimals: 18, nativeToken: true},
+            {
+                name: 'USDT',
+                symbol: '4,USDT',
+                decimals: 6,
+                address: '0x33B57dC70014FD7AA6e1ed3080eeD2B619632B8e',
+            },
+            {
+                name: 'SEOS',
+                symbol: '4,SEOS',
+                decimals: 6,
+                address: '0xbfb10f85b889328e4a42507e31a07977ae00eec6',
+            },
+            {
+                name: 'BOX',
+                symbol: '6,BOX',
+                decimals: 6,
+                address: '0x9b3754f036de42846e60c8d8c89b18764f168367',
+            },
+            {
+                name: 'USN',
+                symbol: '4,USN',
+                decimals: 6,
+                address: '0x8d0258d6ccfb0ce394dc542c545566936b7974f9',
+            },
+        ],
         rpcUrls: ['https://api.evm.eosnetwork.com/'],
         blockExplorerUrls: ['https://explorer.evm.eosnetwork.com'],
     },
     telos: {
         chainId: '0x28',
         chainName: 'Telos EVM Mainnet',
-        nativeCurrency: {name: 'Telos', symbol: '4,TLOS', decimals: 18},
+        tokens: [{name: 'Telos', symbol: '4,TLOS', decimals: 18, nativeToken: true}],
         rpcUrls: ['https://mainnet.telos.net/evm'],
         blockExplorerUrls: ['https://teloscan.io'],
     },
@@ -74,6 +110,23 @@ export class EvmSession {
         return evmChainConfigs[this.chainName]
     }
 
+    erc20ContractBySymbol(tokenSymbol: Asset.SymbolType) {
+        const token = this.getTokens()?.find((token) => token.symbol === String(tokenSymbol))
+
+        return token && this.erc20Contract(token)
+    }
+
+    erc20Contract(token: EvmToken) {
+        if (!token.address) {
+            return
+        }
+        return new ethers.Contract(token.address, erc20_abi, this.signer)
+    }
+
+    erc20Interface() {
+        return new ethers.utils.Interface(erc20_abi)
+    }
+
     static async from({chainName, nativeAccountName}: EvmSessionFromParams) {
         if (window.ethereum) {
             const evmChainConfig = evmChainConfigs[chainName]
@@ -104,16 +157,74 @@ export class EvmSession {
         return this.signer.sendTransaction(tx)
     }
 
-    async getBalance() {
+    async getBalance(tokenName?: string) {
         if (this.chainName === 'telos') {
             return this.getTelosEvmBalance()
         }
 
-        const wei = await this.signer.getBalance()
+        let token
+
+        if (tokenName) {
+            token = this.getToken(tokenName)
+        } else {
+            token = this.getNativeToken()
+        }
+
+        if (!token) {
+            throw new Error('Token not found.')
+        }
+
+        let wei: BigNumber
+
+        const contract = this.erc20Contract(token)
+
+        if (contract) {
+            wei = await contract.balanceOf(this.address)
+        } else if (token?.nativeToken) {
+            wei = await this.signer.getBalance()
+        } else {
+            throw new Error('Non native token must have an address.')
+        }
+
+        return weiToAmount(wei, token)
+    }
+
+    getBalances() {
+        const evmChainConfig = evmChainConfigs[this.chainName]
+
+        return Promise.all(evmChainConfig.tokens.map(async (token) => this.getBalance(token.name)))
+    }
+
+    getTokens() {
+        const evmChainConfig = evmChainConfigs[this.chainName]
+
+        return evmChainConfig.tokens
+    }
+
+    getToken(tokenSymbolOrCode: Asset.SymbolType | Asset.SymbolCodeType) {
+        const token = this.getTokens()?.find(
+            (token) =>
+                token.symbol === String(tokenSymbolOrCode) ||
+                token.name === String(tokenSymbolOrCode)
+        )
+
+        if (!token) {
+            throw new Error(`Token "${tokenSymbolOrCode}" not found.`)
+        }
+
+        return token
+    }
+
+    getNativeToken() {
+        const evmChainConfig = evmChainConfigs[this.chainName]
+
+        const nativeToken = evmChainConfig.tokens?.find((token) => token.nativeToken)
 
-        const tokenName = evmChainConfigs[this.chainName].nativeCurrency.name
+        if (!nativeToken) {
+            throw new Error('Native token info not found.')
+        }
 
-        return Asset.from(formatToken(ethers.utils.formatEther(wei), tokenName))
+        return nativeToken
     }
 
     async getTelosEvmBalance() {
@@ -123,16 +234,17 @@ export class EvmSession {
 
         const account = await getTelosEvmAccount(this.nativeAccountName)
 
+        const nativeTokenSymbol = this.chainConfig.tokens?.find(
+            (token) => token.nativeToken
+        )?.symbol
+
         if (!account) {
-            return Asset.from(0, this.chainConfig.nativeCurrency.symbol)
+            return Asset.from(0, nativeTokenSymbol!)
         }
 
         const bn = BigNumber.from(`0x${account.balance}`)
 
-        return Asset.from(
-            Number(ethers.utils.formatEther(bn)),
-            this.chainConfig.nativeCurrency.symbol
-        )
+        return Asset.from(Number(ethers.utils.formatEther(bn)), nativeTokenSymbol!)
     }
 }
 
@@ -177,10 +289,6 @@ export function convertToEvmAddress(eosAccountName: string): string {
     return convertToEthAddress(eosAccountName)
 }
 
-function formatToken(amount: string, tokenSymbol: string) {
-    return `${Number(amount).toFixed(4)} ${tokenSymbol}`
-}
-
 export async function switchNetwork(evmChainConfig: EvmChainConfig) {
     await window.ethereum
         .request({
@@ -249,18 +357,9 @@ function uint64ToAddr(str: string) {
     return '0xbbbbbbbbbbbbbbbbbbbbbbbb' + str
 }
 
-let connectingToEvm = false
-
 export async function startEvmSession(): Promise<EvmSession | undefined> {
     let evmSession: EvmSession
 
-    if (connectingToEvm) {
-        await wait(5000)
-        return startEvmSession()
-    }
-
-    connectingToEvm = true
-
     const blockchain = get(activeBlockchain)
     const nativeSession = get(activeSession)
 
@@ -276,7 +375,6 @@ export async function startEvmSession(): Promise<EvmSession | undefined> {
         }
 
         if (!e.message) {
-            connectingToEvm = false
             return
         }
 
@@ -285,8 +383,19 @@ export async function startEvmSession(): Promise<EvmSession | undefined> {
 
     if (evmSession) {
         activeEvmSession.set(evmSession)
-        connectingToEvm = false
     }
 
     return evmSession
 }
+
+export function weiToAmount(wei: BigNumber, token: EvmToken) {
+    return Asset.from(fromWei(wei, token.decimals), token.symbol)
+}
+
+export function fromWei(wei: BigNumber, decimals: number) {
+    if (decimals === 18) {
+        return Number(ethers.utils.formatEther(wei))
+    } else {
+        return wei.toNumber() / Math.pow(10, decimals)
+    }
+}
diff --git a/src/pages/dashboard/row.svelte b/src/pages/dashboard/row.svelte
index dabd8d96..1605a3ba 100644
--- a/src/pages/dashboard/row.svelte
+++ b/src/pages/dashboard/row.svelte
@@ -3,7 +3,7 @@
     import {derived} from 'svelte/store'
     import type {Balance} from '~/stores/balances'
     import type {Token} from '~/stores/tokens'
-    import {tokens} from '~/stores/tokens'
+    import {tokenFromBalance, tokens} from '~/stores/tokens'
 
     import Button from '~/components/elements/button.svelte'
     import Icon from '~/components/elements/icon.svelte'
@@ -19,8 +19,8 @@
     let expanded = false
 
     let token: Readable<Token | undefined> = derived([tokens], ([$tokens]) => {
-        if (balance && $tokens) {
-            return $tokens.find((t) => t.key === balance.tokenKey)
+        if (balance) {
+            return $tokens.find((t) => t.key === balance.tokenKey) || tokenFromBalance(balance)
         }
     })
 
diff --git a/src/pages/send/index.svelte b/src/pages/send/index.svelte
index 608f6c72..dcf2f410 100644
--- a/src/pages/send/index.svelte
+++ b/src/pages/send/index.svelte
@@ -12,7 +12,7 @@
     import type {Token, TokenKeyParams} from '~/stores/tokens'
     import type {Balance} from '~/stores/balances'
     import {balances, makeBalanceKey} from '~/stores/balances'
-    import {tokens, makeTokenKey} from '~/stores/tokens'
+    import {tokens, makeTokenKey, tokenFromBalance} from '~/stores/tokens'
     import {systemTokenKey} from '~/stores/tokens'
     import {transferData, Step} from '~/pages/send/transfer'
     import {syncTxFee, stopSyncTxFee, fetchTxFee} from '~/pages/send/fio'
@@ -34,12 +34,20 @@
     })
 
     const token: Readable<Token | undefined> = derived(
-        [activeSession, systemTokenKey, transferData, tokens],
-        ([$activeSession, $systemTokenKey, $transferData, $tokens]) => {
+        [activeSession, systemTokenKey, transferData, tokens, balances],
+        ([$activeSession, $systemTokenKey, $transferData, $tokens, $balances]) => {
             if ($activeSession && $systemTokenKey && $tokens) {
                 // If this transfer session data has a token key, use it first
                 if ($transferData.tokenKey) {
-                    return $tokens.find((t) => t.key === $transferData.tokenKey)
+                    const token = $tokens.find((t) => t.key === $transferData.tokenKey)
+
+                    if (token) {
+                        return token
+                    } else {
+                        const balance = $balances.find((b) => b.tokenKey === $transferData.tokenKey)
+
+                        return balance && tokenFromBalance(balance)
+                    }
                 }
                 // If the URL has a token key, use it second
                 if (meta) {
@@ -49,7 +57,15 @@
                         name: Name.from(meta.params.token),
                     }
                     const key = makeTokenKey(params)
-                    return $tokens.find((t) => t.key === key)
+                    const token = $tokens.find((t) => t.key === key)
+
+                    if (token) {
+                        return token
+                    }
+
+                    const balance = $balances.find((b) => b.tokenKey === key)
+
+                    return balance && tokenFromBalance(balance)
                 }
                 // Otherwise return the system token key
                 return $tokens.find((t) => t.key === $systemTokenKey)
@@ -61,8 +77,7 @@
         [activeSession, balances, token],
         ([$activeSession, $currentBalances, $token]) => {
             if ($token) {
-                const key = makeBalanceKey($token, $activeSession!.auth.actor)
-                return $currentBalances.find((b) => b.key === key)
+                return $currentBalances.find((b) => b.tokenKey === $token.key)
             }
         }
     )
diff --git a/src/pages/transfer/confirm.svelte b/src/pages/transfer/confirm.svelte
index 42b3dca6..5c11835c 100644
--- a/src/pages/transfer/confirm.svelte
+++ b/src/pages/transfer/confirm.svelte
@@ -3,38 +3,60 @@
 
     import Button from '~/components/elements/button.svelte'
     import TokenImage from '~/components/elements/image/token.svelte'
-    import {systemTokenKey} from '~/stores/tokens'
+    import {systemToken, tokens} from '~/stores/tokens'
 
+    import type {TransferType} from './managers'
     import type {TransferManager} from './managers/transferManager'
+    import {activeBlockchain} from '~/store'
 
     export let transferManager: TransferManager
-    export let depositAmount: Asset
+    export let transferManagerData: TransferType
     export let receivedAmount: Asset
+    export let sentAmount: Asset
     export let feeAmount: Asset | undefined
     export let handleConfirm: () => void
     export let handleBack: () => void
 
-    let depositAmountInUsd: string
-    let receivedAmountInUsd: string
-    let feeAmountInUsd: string
+    let receivedAmountInUsd: string | undefined
+    let sentAmountInUsd: string | undefined
+    let feeAmountInUsd: string | undefined
 
     function getUsdValues() {
-        transferManager.convertToUsd(depositAmount?.value).then((usdValue) => {
-            depositAmountInUsd = usdValue
-        })
+        transferManager
+            .convertToUsd(receivedAmount?.value, transferManagerData?.tokenName)
+            .then((usdValue) => {
+                receivedAmountInUsd = usdValue
+            })
 
-        transferManager.convertToUsd(receivedAmount?.value).then((usdValue) => {
-            receivedAmountInUsd = usdValue
-        })
+        transferManager
+            .convertToUsd(sentAmount?.value, transferManagerData?.tokenName)
+            .then((usdValue) => {
+                receivedAmountInUsd = usdValue
+            })
 
         if (feeAmount) {
-            transferManager.convertToUsd(feeAmount?.value).then((usdValue) => {
-                feeAmountInUsd = usdValue
-            })
+            transferManager
+                .convertToUsd(feeAmount?.value, transferManagerData?.tokenName)
+                .then((usdValue) => {
+                    feeAmountInUsd = usdValue
+                })
         }
     }
 
     getUsdValues()
+
+    $: transferToken = ($tokens.find(
+        (token) =>
+            token.name === transferManagerData.tokenName &&
+            token.contract === transferManagerData.tokenContract &&
+            $activeBlockchain?.chainId.equals(token.chainId)
+    ) || $systemToken)!
+    $: feeToken = ($tokens.find(
+        (token) =>
+            String(token.symbol) === String(feeAmount?.symbol) &&
+            $activeBlockchain?.chainId.equals(token.chainId)
+    ) || $systemToken)!
+    $: feeSymbol = feeAmount?.symbol
 </script>
 
 <style type="scss">
@@ -136,24 +158,24 @@
 
     <table>
         <tr>
-            <td>From {transferManager.fromDisplayString}</td>
+            <td>From {transferManagerData.fromLabel}</td>
             <td>{transferManager.fromAddress}</td>
         </tr>
         <tr>
-            <td>To {transferManager.toDisplayString}</td>
+            <td>To {transferManagerData.toLabel}</td>
             <td>{transferManager.toAddress}</td>
         </tr>
         <tr>
-            <td>Deposit Amount</td>
+            <td>Sent Amount</td>
             <td>
                 <div>
                     <div class="image-container">
-                        <TokenImage width="20" height="20" tokenKey={$systemTokenKey} />
+                        <TokenImage width="20" height="20" tokenKey={transferToken.key} />
                     </div>
-                    {depositAmount}
+                    {sentAmount}
                 </div>
                 <div class="fiat-value">
-                    {depositAmountInUsd ? `~ ${depositAmountInUsd}` : ''}
+                    {sentAmountInUsd ? `~ ${sentAmountInUsd}` : ''}
                 </div>
             </td>
         </tr>
@@ -162,29 +184,31 @@
             <td>
                 <div>
                     <div class="image-container">
-                        <TokenImage width="20" height="20" tokenKey={$systemTokenKey} />
+                        <TokenImage width="20" height="20" tokenKey={feeToken.key} />
                     </div>
-                    {feeAmount || `0.0000 ${$systemTokenKey}`}
+                    {feeAmount || `0.0000 ${feeSymbol || $systemToken?.symbol}`}
                 </div>
                 <div class="fiat-value">
                     {feeAmountInUsd ? `~ ${feeAmountInUsd}` : ''}
                 </div>
             </td>
         </tr>
-        <tr>
-            <td>Received Amount</td>
-            <td>
-                <div>
-                    <div class="image-container">
-                        <TokenImage width="20" height="20" tokenKey={$systemTokenKey} />
+        {#if String(receivedAmount) !== String(sentAmount)}
+            <tr>
+                <td>Received Amount</td>
+                <td>
+                    <div>
+                        <div class="image-container">
+                            <TokenImage width="20" height="20" tokenKey={transferToken.key} />
+                        </div>
+                        {receivedAmount}
                     </div>
-                    {receivedAmount}
-                </div>
-                <div class="fiat-value">
-                    {receivedAmountInUsd ? `~ ${receivedAmountInUsd}` : ''}
-                </div>
-            </td>
-        </tr>
+                    <div class="fiat-value">
+                        {receivedAmountInUsd ? `~ ${receivedAmountInUsd}` : ''}
+                    </div>
+                </td>
+            </tr>
+        {/if}
     </table>
     <div class="bottom-section">
         <Button fluid style="primary" on:action={handleConfirm}>Sign Transaction</Button>
diff --git a/src/pages/transfer/form.svelte b/src/pages/transfer/form.svelte
index 48f2b9c8..cfd0e505 100644
--- a/src/pages/transfer/form.svelte
+++ b/src/pages/transfer/form.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import {Asset as CoreAsset} from '@greymass/eosio'
-    import {activeEvmSession, activeSession, activeBlockchain, currentAccountBalance} from '~/store'
-    import {Token, systemToken} from '~/stores/tokens'
+    import {activeEvmSession, activeSession, activeBlockchain} from '~/store'
+    import {tokens, type Token, makeTokenKey, tokenFromBalance} from '~/stores/tokens'
 
     import Label from '~/components/elements/input/label.svelte'
     import Form from '~/components/elements/form.svelte'
@@ -11,6 +11,7 @@
     import type {TransferManager} from './managers/transferManager'
     import {transferManagers} from './managers'
     import type {EvmSession} from '~/lib/evm'
+    import {balances} from '~/stores/balances'
 
     export let handleContinue: () => void
     export let amount: string = ''
@@ -18,7 +19,7 @@
     export let to: Token | undefined
     export let transferManager: TransferManager | undefined
     export let feeAmount: CoreAsset | undefined
-    export let depositAmount: CoreAsset | undefined
+    export let sentAmount: CoreAsset | undefined
     export let receivedAmount: CoreAsset | undefined
     export let useEntireBalance: () => void
 
@@ -62,6 +63,8 @@
 
     let generatingOptions = false
 
+    $: balance = $balances.find((balance) => balance.tokenKey === from?.key)
+
     async function generateOptions(evmSession?: EvmSession) {
         if (!!generatingOptions) return
 
@@ -69,69 +72,78 @@
 
         fromOptions = []
 
+        const fromOptionsBeingSet: Token[] = []
+
         await Promise.all(
-            Object.values(transferManagers).map(async (TransferManagerClass) => {
-                if (!$systemToken) return
+            Object.values(transferManagers).map(async (transferManagerData) => {
+                const TransferManagerClass = transferManagerData.transferClass
 
                 // Only displaying accounts that support the current chain
                 if (!TransferManagerClass.supportedChains.includes($activeBlockchain?.id)) return
 
-                let accountBalance
+                const tokenKey = makeTokenKey({
+                    chainId: $activeBlockchain!.chainId,
+                    contract: transferManagerData.tokenContract,
+                    name: transferManagerData.tokenName,
+                })
+
+                let token = $tokens?.find((token) => token.key === tokenKey)
+
+                if (!token) {
+                    const balance = $balances.find((balance) => balance.tokenKey === tokenKey)
 
-                if (!TransferManagerClass.evmRequired || evmSession) {
-                    const transferManager = new (TransferManagerClass as unknown as new (
-                        ...args: any[]
-                    ) => TransferManager)($activeSession!, evmSession)
-                    await transferManager.updateMainBalance()
-                    accountBalance = await transferManager.balance()
+                    token = balance && tokenFromBalance(balance)
                 }
 
-                fromOptions.push({
-                    ...$systemToken,
-                    key: TransferManagerClass.from,
-                    name: TransferManagerClass.fromDisplayString,
-                    balance: accountBalance || 'Connect',
-                })
+                if (!token) {
+                    console.error(`Token ${transferManagerData.tokenName} not found`)
+                    return
+                }
+
+                fromOptionsBeingSet.push(token)
             })
         )
 
+        fromOptions = [...fromOptionsBeingSet]
+
         generatingOptions = false
     }
 
     $: {
         if (from) {
-            toOptions = fromOptions.filter((token) => token.key !== from?.key)
+            toOptions = fromOptions.filter(
+                (token) => from?.symbol.equals(token.symbol) && token.name !== from?.name
+            )
         } else {
-            toOptions = fromOptions
+            toOptions = []
         }
     }
 
-    let lastBalanceValue = $currentAccountBalance?.value
-
     $: {
-        // Regenerate options if the balance changes
-        if ($activeEvmSession && lastBalanceValue !== $currentAccountBalance?.value) {
-            generateOptions($activeEvmSession)
-            lastBalanceValue = $currentAccountBalance?.value
+        if (from) {
+            const fromInOptions = fromOptions.find(
+                (token) => from?.symbol.equals(token.symbol) && token.name !== from?.name
+            )
+            if (!fromInOptions) {
+                toOptions = []
+            }
         }
     }
 
     $: {
-        // Regenerate options if the user connects to evm wallet
-        if ($activeEvmSession) {
-            generateOptions($activeEvmSession)
-        } else {
+        if ($tokens) {
             generateOptions()
         }
     }
 
     $: {
-        transferManager?.balance().then((balance) => {
-            availableToReceive = CoreAsset.from(
-                (balance?.value || 0) - (feeAmount?.value || 0),
-                balance?.symbol || '4,EOS'
-            )
-        })
+        const balanceAmount = balance?.quantity
+        const feeIsInSameToken = String(feeAmount?.symbol) === String(from?.symbol)
+        const valueAvailableToReceive =
+            (balanceAmount?.value || 0) - (feeIsInSameToken ? feeAmount?.value || 0 : 0)
+        availableToReceive =
+            balanceAmount &&
+            CoreAsset.from(valueAvailableToReceive, balanceAmount?.symbol || '4,EOS')
     }
 
     // Continue when the user presses enter
@@ -223,7 +235,7 @@
 <div class="container">
     <div class="top-section">
         <h1>Transfer</h1>
-        <h3>Transfer tokens between your accounts</h3>
+        <h3>Transfer tokens between {$activeBlockchain?.name} and {$activeBlockchain?.name} EVM</h3>
     </div>
     <Form>
         <div class="middle-section">
@@ -234,7 +246,6 @@
                         onTokenSelect={handleFromChange}
                         selectedToken={from}
                         tokenOptions={fromOptions}
-                        showTokensWithoutBalance
                     />
                 </div>
                 <Label align="left">Amount</Label>
@@ -261,16 +272,25 @@
                         showTokensWithoutBalance
                     />
                 </div>
-                {#if receivedAmount && receivedAmount.value > 0 && feeAmount && feeAmount.value > 0}
-                    <div class="label-container">
-                        <Label align="left">Amount Received: {String(receivedAmount)}</Label>
-                    </div>
-                    <div class="label-container">
-                        <Label align="left">Transfer Fee: {String(feeAmount)}</Label>
-                    </div>
-                    <div class="label-container">
-                        <Label align="left">Total transferred: {String(depositAmount)}</Label>
-                    </div>
+                {#if sentAmount && sentAmount.value > 0 && feeAmount && feeAmount.value > 0}
+                    {#if feeAmount.symbol.equals(sentAmount.symbol)}
+                        <div class="label-container">
+                            <Label align="left">Amount Received: {String(receivedAmount)}</Label>
+                        </div>
+                        <div class="label-container">
+                            <Label align="left">Transfer Fee: {String(feeAmount)}</Label>
+                        </div>
+                        <div class="label-container">
+                            <Label align="left">Total Transferred: {String(sentAmount)}</Label>
+                        </div>
+                    {:else}
+                        <div class="label-container">
+                            <Label align="left">Amount Sent: {String(sentAmount)}</Label>
+                        </div>
+                        <div class="label-container">
+                            <Label align="left">Transfer Fee: {String(feeAmount)}</Label>
+                        </div>
+                    {/if}
                 {/if}
             </div>
         </div>
diff --git a/src/pages/transfer/index.svelte b/src/pages/transfer/index.svelte
index 9bcc4a09..54d6872d 100644
--- a/src/pages/transfer/index.svelte
+++ b/src/pages/transfer/index.svelte
@@ -10,39 +10,42 @@
     import Success from './success.svelte'
     import Error from './error.svelte'
     import {systemToken} from '~/stores/tokens'
-    import {transferManagers} from './managers'
+    import {TransferType, transferManagers} from './managers'
     import type {TransferManager} from './managers/transferManager'
     import {startEvmSession} from '~/lib/evm'
 
     import type {Token} from '~/stores/tokens'
+    import {balances} from '~/stores/balances'
 
     let step = 'form'
-    let deposit: string = ''
+    let sent: string = ''
     let received: string = ''
     let errorMessage: string | undefined
     let from: Token | undefined
     let to: Token | undefined
     let transactResult: TransactResult | ethers.providers.TransactionResponse | undefined
     let transferFee: Asset | undefined
+    let transferManagerData: TransferType | undefined
     let transferManager: TransferManager | undefined
 
     $: systemContractSymbol = String($systemToken?.symbol)
+    $: balance = $balances?.find((balance) => balance.tokenKey === from?.key)?.quantity
+    $: receivingBalance = $balances?.find((balance) => balance.tokenKey === to?.key)?.quantity
     $: {
-        const TransferManagerClass =
+        transferManagerData =
             from?.name && to?.name ? transferManagers[`${from.name} - ${to?.name}`] : undefined
+
+        const TransferManagerClass = transferManagerData?.transferClass
+
         if (TransferManagerClass) {
             transferManager = new (TransferManagerClass as unknown as new (
                 ...args: any[]
-            ) => TransferManager)($activeSession!, $activeEvmSession)
+            ) => TransferManager)($activeSession!, $activeEvmSession, transferManagerData)
         }
     }
 
     async function useEntireBalance() {
-        if (!from || !to) return
-
-        const balance = await transferManager?.balance()
-
-        if (!balance) return
+        if (!from || !to || !balance) return
 
         const balanceValue = balance.value
 
@@ -50,14 +53,14 @@
 
         const transferFeeValue = transferFee?.value || 0
 
-        received = (
-            (balanceValue || 0) - (transferFeeValue === 0 ? 0 : transferFeeValue - 0.0001)
-        )?.toFixed(4)
+        received = ((balanceValue || 0) - (transferFeeValue === 0 ? 0 : transferFeeValue))?.toFixed(
+            4
+        )
     }
 
     async function transfer() {
         try {
-            transactResult = await transferManager?.transfer(deposit, received)
+            transactResult = await transferManager?.transfer(sent, from!.symbol, received)
         } catch (error) {
             return (errorMessage = `Could not transfer. Error: ${
                 error.underlyingError?.message || JSON.stringify(error) === '{}'
@@ -69,11 +72,11 @@
         step = 'success'
     }
 
-    function handleBack(updateBalances = false) {
+    function handleBack() {
         step = 'form'
         errorMessage = undefined
         transactResult = undefined
-        deposit = ''
+        sent = ''
         received = ''
     }
 
@@ -82,9 +85,9 @@
 
         await estimateTransferFee()
 
-        deposit = (parseFloat(received) + parseFloat(transferFee?.value.toFixed(4) || '')).toFixed(
-            4
-        )
+        if (transferFee?.symbol.equals(from?.symbol!)) {
+            sent = (parseFloat(received) + transferFee?.value || 0).toFixed(4)
+        }
     }
 
     async function estimateTransferFee(transferAmount?: string): Promise<Asset | undefined> {
@@ -94,7 +97,10 @@
         }
 
         try {
-            transferFee = await transferManager?.transferFee(transferAmount || received)
+            transferFee = await transferManager?.transferFee(
+                transferAmount || received,
+                from?.symbol
+            )
         } catch (error) {
             if (
                 !error?.data?.message?.includes('insufficient funds for transfer') &&
@@ -125,7 +131,11 @@
 
     $: {
         if (transferFee && received !== '') {
-            deposit = (parseFloat(received) + parseFloat(transferFee?.value.toFixed(4))).toFixed(4)
+            if (transferFee?.symbol.equals(from?.symbol!)) {
+                sent = (parseFloat(received) + transferFee?.value || 0).toFixed(4)
+            } else {
+                sent = received
+            }
         }
     }
 
@@ -148,10 +158,12 @@
     }
 
     // Eventually we may want to get the symbol from the transferManager instead of the systemToken
-    $: receivedAmount = isNaN(Number(received))
+    $: sentAmount = isNaN(Number(sent))
         ? undefined
-        : Asset.from(Number(received), systemContractSymbol)
-    $: depositAmount = Asset.from(Number(deposit), systemContractSymbol)
+        : Asset.from(Number(sent), from?.symbol || systemContractSymbol)
+    $: receivedAmount = received
+        ? Asset.from(Number(received), from?.symbol || systemContractSymbol)
+        : undefined
 </script>
 
 <style type="scss">
@@ -165,10 +177,10 @@
     <div class="container">
         {#if errorMessage}
             <Error error={errorMessage} {handleBack} />
-        {:else if step === 'form' || !transferManager || !deposit || !received}
+        {:else if step === 'form' || !transferManager || !sent || !received}
             <Form
                 handleContinue={submitForm}
-                {depositAmount}
+                {sentAmount}
                 {receivedAmount}
                 {transferManager}
                 {useEntireBalance}
@@ -177,17 +189,18 @@
                 bind:from
                 bind:to
             />
-        {:else if step === 'confirm' && receivedAmount}
+        {:else if step === 'confirm' && sentAmount && receivedAmount && transferManagerData}
             <Confirm
-                {depositAmount}
+                {sentAmount}
                 {receivedAmount}
                 {transferManager}
+                {transferManagerData}
                 feeAmount={transferFee}
                 handleConfirm={transfer}
                 {handleBack}
             />
         {:else if step === 'success' && transactResult}
-            <Success {transactResult} {transferManager} {handleBack} />
+            <Success {transactResult} {transferManager} {balance} {receivingBalance} {handleBack} />
         {/if}
     </div>
 </Page>
diff --git a/src/pages/transfer/managers/eosEvmBridge.ts b/src/pages/transfer/managers/eosEvmBridge.ts
index 73f6c773..7668b937 100644
--- a/src/pages/transfer/managers/eosEvmBridge.ts
+++ b/src/pages/transfer/managers/eosEvmBridge.ts
@@ -1,18 +1,17 @@
 import {Asset, Name} from 'anchor-link'
-import {get} from 'svelte/store'
 
 import {Transfer} from '~/abi-types'
 import {getClient} from '~/api-client'
 import {TransferManager} from './transferManager'
-import {currentAccountBalance, evmBalance} from '~/store'
-import {updateActiveAccount} from '~/stores/account-provider'
-import {updateEvmBalance} from '~/stores/balances-provider'
+
+const bridgeFees: Record<string, number> = {
+    USDT: 0.01,
+    SEOS: 0.1,
+    BOX: 0.1,
+    USN: 0.1,
+}
 
 export class EosEvmBridge extends TransferManager {
-    static from = 'eos'
-    static fromDisplayString = 'EOS'
-    static to = 'evm'
-    static toDisplayString = 'EOS (EVM)'
     static supportedChains = ['eos']
     static evmRequired = true
 
@@ -24,7 +23,12 @@ export class EosEvmBridge extends TransferManager {
         return this.evmSession.address
     }
 
-    async transferFee() {
+    async transferFee(_amount: string, tokenSymbol: Asset.SymbolType = '4,EOS') {
+        const symbolCode = String(Asset.Symbol.from(tokenSymbol).code)
+        if (bridgeFees[symbolCode]) {
+            return Asset.from(bridgeFees[symbolCode], tokenSymbol)
+        }
+
         const apiClient = getClient(this.nativeSession.chainId)
 
         let apiResponse
@@ -41,41 +45,26 @@ export class EosEvmBridge extends TransferManager {
 
         const config = apiResponse.rows[0]
 
-        return Asset.from(config.ingress_bridge_fee || '0.0000 EOS')
+        const ingressBridgeFee = Asset.from(config.ingress_bridge_fee || '0.0000 EOS')
+
+        return Asset.from(ingressBridgeFee.value, tokenSymbol)
     }
 
-    transfer(amount: string) {
+    transfer(amount: string, tokenSymbol: Asset.SymbolType = '4,EOS') {
         const action = Transfer.from({
             from: this.nativeSession.auth.actor,
-            to: 'eosio.evm',
-            quantity: String(Asset.fromFloat(Number(amount), '4,EOS')),
+            to: 'eosio.evmin',
+            quantity: String(Asset.fromFloat(Number(amount), tokenSymbol)),
             memo: this.evmSession.address,
         })
 
         return this.nativeSession.transact({
             action: {
                 authorization: [this.nativeSession.auth],
-                account: Name.from('eosio.token'),
+                account: Name.from(this.transferData.tokenContract || 'eosio.token'),
                 name: Name.from('transfer'),
                 data: action,
             },
         })
     }
-
-    async balance() {
-        return get(currentAccountBalance)
-    }
-
-    async receivingBalance() {
-        return get(evmBalance)
-    }
-
-    async updateBalances() {
-        updateEvmBalance()
-        updateActiveAccount()
-    }
-
-    updateMainBalance() {
-        return updateEvmBalance()
-    }
 }
diff --git a/src/pages/transfer/managers/evmEosBridge.ts b/src/pages/transfer/managers/evmEosBridge.ts
index 184405de..9a9dbf19 100644
--- a/src/pages/transfer/managers/evmEosBridge.ts
+++ b/src/pages/transfer/managers/evmEosBridge.ts
@@ -2,18 +2,9 @@ import {Asset} from 'anchor-link'
 import {ethers} from 'ethers'
 
 import {convertToEvmAddress, getProvider} from '~/lib/evm'
-
 import {TransferManager} from './transferManager'
-import {updateEvmBalance} from '~/stores/balances-provider'
-import {updateActiveAccount} from '~/stores/account-provider'
-import {get} from 'svelte/store'
-import {currentAccountBalance, evmBalance} from '~/store'
 
 export class EvmEosBridge extends TransferManager {
-    static from = 'evm'
-    static fromDisplayString = 'EOS (EVM)'
-    static to = 'eos'
-    static toDisplayString = 'EOS'
     static supportedChains = ['eos']
     static evmRequired = true
 
@@ -25,66 +16,84 @@ export class EvmEosBridge extends TransferManager {
         return String(this.nativeSession.auth.actor)
     }
 
-    async transferFee(amount: string) {
-        const {gas, gasPrice} = await this.estimateGas(amount)
+    async transferFee(amount: string, tokenSymbol: Asset.SymbolType = '4,EOS') {
+        const {gas, gasPrice, egressFee} = await this.estimateFee(amount, tokenSymbol)
 
-        const eosAmount = ethers.utils.formatEther(Number(gas) * Number(gasPrice))
+        const feeAmount = Number(ethers.utils.formatEther(gasPrice)) * Number(gas)
 
-        return Asset.fromFloat(Number(eosAmount), this.evmSession.chainConfig.nativeCurrency.symbol)
-    }
+        const egressAmount = egressFee && Number(ethers.utils.formatEther(egressFee))
 
-    async transfer(amount: string, amountReceived?: string) {
-        const targetEvmAddress = convertToEvmAddress(String(this.nativeSession.auth.actor))
+        return Asset.fromFloat(Number(feeAmount) + Number(egressAmount || 0), '4,EOS')
+    }
 
+    async transfer(amount: string, tokenSymbol: Asset.SymbolType, amountReceived?: string) {
         const amountToTransfer = amountReceived || amount
 
-        const {gas} = await this.estimateGas(amountToTransfer)
+        const {gas} = await this.estimateFee(amountToTransfer, tokenSymbol)
+
+        const transaction = await this.transactionParams(amountToTransfer, tokenSymbol)
 
         return this.evmSession.sendTransaction({
-            from: this.evmSession.address,
-            to: targetEvmAddress,
-            value: ethers.utils.parseEther(amountToTransfer),
-            gasPrice: await getProvider().getGasPrice(),
+            ...transaction,
             gasLimit: gas,
-            data: ethers.utils.formatBytes32String(''),
         })
     }
 
-    private async estimateGas(amount: string) {
-        const provider = getProvider()
+    private async transactionParams(amount: string, tokenSymbol: Asset.SymbolType) {
+        const token = this.evmSession.getTokens().find((t) => t.symbol === String(tokenSymbol))
+
+        if (!token) {
+            throw new Error(`Token ${tokenSymbol} not found`)
+        }
+
+        const erc20Contract = this.evmSession.erc20Contract(token)
+
+        let data
+        let egressFee
 
         const targetEvmAddress = convertToEvmAddress(String(this.nativeSession.auth.actor))
 
-        const gasPrice = await provider.getGasPrice()
+        if (erc20Contract) {
+            const erc20Interface = this.evmSession.erc20Interface()
 
-        // Reducing the amount by 0.005 EOS to avoid getting an error when entire balance is sent. Proper amount is calculated once the gas fee is known.
-        const reducedAmount = String(Number(amount) - 0.005)
+            // Encode the bridgeTransfer function
+            data = erc20Interface.encodeFunctionData('bridgeTransfer', [
+                targetEvmAddress,
+                ethers.utils.parseUnits(amount, 'mwei'),
+                '',
+            ])
 
-        const gas = await provider.estimateGas({
-            from: this.evmSession.address,
-            to: targetEvmAddress,
-            value: ethers.utils.parseEther(reducedAmount),
-            gasPrice,
-            data: ethers.utils.formatBytes32String(''),
-        })
+            egressFee = await erc20Contract.egressFee()
+        } else {
+            data = ethers.utils.formatBytes32String('')
+        }
 
-        return {gas, gasPrice}
+        return {
+            from: this.evmSession.address,
+            to: token.address || targetEvmAddress,
+            value: erc20Contract ? egressFee || 0 : ethers.utils.parseEther(amount),
+            gasPrice: await getProvider().getGasPrice(),
+            data,
+        }
     }
 
-    async balance() {
-        return get(evmBalance)
-    }
+    private async estimateFee(amount: string, tokenSymbol: Asset.SymbolType = '4,EOS') {
+        const token = this.evmSession.getToken(tokenSymbol)
 
-    async receivingBalance() {
-        return get(currentAccountBalance)
-    }
+        const provider = getProvider()
 
-    async updateBalances() {
-        updateActiveAccount()
-        updateEvmBalance()
-    }
+        const gasPrice = await provider.getGasPrice()
+
+        const transaction = await this.transactionParams(amount, tokenSymbol)
+
+        const gas = await provider.estimateGas(transaction)
+
+        let egressFee
+
+        if (token.address) {
+            egressFee = transaction.value
+        }
 
-    updateMainBalance() {
-        return updateEvmBalance()
+        return {gas, gasPrice, egressFee}
     }
 }
diff --git a/src/pages/transfer/managers/evmTelosBridge.ts b/src/pages/transfer/managers/evmTelosBridge.ts
index 112e4c6e..0c766e7f 100644
--- a/src/pages/transfer/managers/evmTelosBridge.ts
+++ b/src/pages/transfer/managers/evmTelosBridge.ts
@@ -1,18 +1,11 @@
 import {get} from 'svelte/store'
 
-import {currentAccountBalance, evmBalance} from '~/store'
 import {TransferManager} from './transferManager'
 import {Asset, Name} from 'anchor-link'
 import {TelosEvmWithdraw} from '~/abi-types'
 import {systemToken} from '~/stores/tokens'
-import {updateActiveAccount} from '~/stores/account-provider'
-import {updateEvmBalance} from '~/stores/balances-provider'
 
 export class EvmTelosBridge extends TransferManager {
-    static from = 'evm'
-    static fromDisplayString = 'TLOS (EVM)'
-    static to = 'telos'
-    static toDisplayString = 'TLOS'
     static supportedChains = ['telos']
     static evmRequired = true
 
@@ -45,21 +38,4 @@ export class EvmTelosBridge extends TransferManager {
             },
         })
     }
-
-    async balance() {
-        return get(evmBalance)
-    }
-
-    async receivingBalance() {
-        return get(currentAccountBalance)
-    }
-
-    async updateBalances(): Promise<void> {
-        updateActiveAccount()
-        updateEvmBalance()
-    }
-
-    updateMainBalance() {
-        return updateEvmBalance()
-    }
 }
diff --git a/src/pages/transfer/managers/index.ts b/src/pages/transfer/managers/index.ts
index f09345c2..45d2d4e6 100644
--- a/src/pages/transfer/managers/index.ts
+++ b/src/pages/transfer/managers/index.ts
@@ -1,12 +1,131 @@
+import type {NameType} from 'anchor-link'
+
 import {EvmTelosBridge} from './evmTelosBridge'
 import {EosEvmBridge} from './eosEvmBridge'
 import {EvmEosBridge} from './evmEosBridge'
 import {TelosEvmBridge} from './telosEvmBridge'
 import type {TransferManager} from './transferManager'
 
-export const transferManagers: {[key: string]: typeof TransferManager} = {
-    'EOS - EOS (EVM)': EosEvmBridge,
-    'EOS (EVM) - EOS': EvmEosBridge,
-    'TLOS - TLOS (EVM)': TelosEvmBridge,
-    'TLOS (EVM) - TLOS': EvmTelosBridge,
+export interface TransferType {
+    transferClass: typeof TransferManager
+    tokenName: string
+    tokenContract: NameType
+    from: string
+    fromLabel: string
+    to: string
+    toLabel: string
+}
+
+export const transferManagers: {[key: string]: TransferType} = {
+    // EOS Bridges
+    'EOS - EOS (EVM)': {
+        transferClass: EosEvmBridge,
+        tokenName: 'EOS',
+        tokenContract: 'eosio.token',
+        from: 'eos',
+        fromLabel: 'EOS',
+        to: 'evm',
+        toLabel: 'EOS (EVM)',
+    },
+    'EOS (EVM) - EOS': {
+        transferClass: EvmEosBridge,
+        tokenName: 'EOS (EVM)',
+        tokenContract: 'eosio.evm',
+        from: 'evm',
+        fromLabel: 'EOS (EVM)',
+        to: 'eos',
+        toLabel: 'EOS',
+    },
+    'USDT - USDT (EVM)': {
+        transferClass: EosEvmBridge,
+        tokenName: 'USDT',
+        tokenContract: 'tethertether',
+        from: 'usdt',
+        fromLabel: 'USDT',
+        to: 'evm',
+        toLabel: 'USDT (EVM)',
+    },
+    'USDT (EVM) - USDT': {
+        transferClass: EvmEosBridge,
+        tokenName: 'USDT (EVM)',
+        tokenContract: 'eosio.evm',
+        from: 'evm',
+        fromLabel: 'USDT (EVM)',
+        to: 'usdt',
+        toLabel: 'USDT',
+    },
+    'SEOS - SEOS (EVM)': {
+        transferClass: EosEvmBridge,
+        tokenName: 'SEOS',
+        tokenContract: 'stoken.defi',
+        from: 'seos',
+        fromLabel: 'SEOS',
+        to: 'evm',
+        toLabel: 'SEOS (EVM)',
+    },
+    'SEOS (EVM) - SEOS': {
+        transferClass: EvmEosBridge,
+        tokenName: 'SEOS (EVM)',
+        tokenContract: 'eosio.evm',
+        from: 'evm',
+        fromLabel: 'SEOS (EVM)',
+        to: 'seos',
+        toLabel: 'SEOS',
+    },
+    'BOX - BOX (EVM)': {
+        transferClass: EosEvmBridge,
+        tokenName: 'BOX',
+        tokenContract: 'token.defi',
+        from: 'box',
+        fromLabel: 'BOX',
+        to: 'evm',
+        toLabel: 'BOX (EVM)',
+    },
+    'BOX (EVM) - BOX': {
+        transferClass: EvmEosBridge,
+        tokenName: 'BOX (EVM)',
+        tokenContract: 'eosio.evm',
+        from: 'evm',
+        fromLabel: 'BOX (EVM)',
+        to: 'box',
+        toLabel: 'BOX',
+    },
+    'USN - USN (EVM)': {
+        transferClass: EosEvmBridge,
+        tokenName: 'USN',
+        tokenContract: 'danchortoken',
+        from: 'usn',
+        fromLabel: 'USN',
+        to: 'evm',
+        toLabel: 'USN (EVM)',
+    },
+    'USN (EVM) - USN': {
+        transferClass: EvmEosBridge,
+        tokenName: 'USN (EVM)',
+        tokenContract: 'eosio.evm',
+        from: 'evm',
+        fromLabel: 'USN (EVM)',
+        to: 'usn',
+        toLabel: 'USN',
+    },
+
+    // Telos Bridges
+    'TLOS - TLOS (EVM)': {
+        transferClass: TelosEvmBridge,
+        tokenName: 'TLOS',
+        tokenContract: 'eosio.token',
+        from: 'tlos',
+        fromLabel: 'TLOS',
+        to: 'evm',
+        toLabel: 'TLOS (EVM)',
+    },
+    'TLOS (EVM) - TLOS': {
+        transferClass: EvmTelosBridge,
+        tokenName: 'TLOS (EVM)',
+        tokenContract: 'eosio.evm',
+        from: 'evm',
+        fromLabel: 'TLOS (EVM)',
+        to: 'tlos',
+        toLabel: 'TLOS',
+    },
 }
diff --git a/src/pages/transfer/managers/telosEvmBridge.ts b/src/pages/transfer/managers/telosEvmBridge.ts
index ed0f4dcf..e99e730d 100644
--- a/src/pages/transfer/managers/telosEvmBridge.ts
+++ b/src/pages/transfer/managers/telosEvmBridge.ts
@@ -1,18 +1,9 @@
-import {get} from 'svelte/store'
-
-import {currentAccountBalance, evmBalance} from '~/store'
 import {TransferManager} from './transferManager'
 import {TelosEvmCreate, TelosEvmOpenWallet, Transfer} from '~/abi-types'
 import {Asset, Name} from 'anchor-link'
-import {updateActiveAccount} from '~/stores/account-provider'
-import {updateEvmBalance} from '~/stores/balances-provider'
 import {getTelosEvmAccount} from '~/lib/evm'
 
 export class TelosEvmBridge extends TransferManager {
-    static from = 'telos'
-    static fromDisplayString = 'TLOS'
-    static to = 'evm'
-    static toDisplayString = 'TLOS (EVM)'
     static supportedChains = ['telos']
     static evmRequired = true
 
@@ -52,23 +43,6 @@ export class TelosEvmBridge extends TransferManager {
         })
     }
 
-    async balance() {
-        return get(currentAccountBalance)
-    }
-
-    async receivingBalance() {
-        return get(evmBalance)
-    }
-
-    async updateMainBalance() {
-        return updateEvmBalance()
-    }
-
-    async updateBalances(): Promise<void> {
-        updateActiveAccount()
-        updateEvmBalance()
-    }
-
     telosEvmOpenWalletAction() {
         const action = TelosEvmOpenWallet.from({
             account: this.nativeSession.auth.actor,
diff --git a/src/pages/transfer/managers/transferManager.ts b/src/pages/transfer/managers/transferManager.ts
index 082964d1..ff7cbbe7 100644
--- a/src/pages/transfer/managers/transferManager.ts
+++ b/src/pages/transfer/managers/transferManager.ts
@@ -1,61 +1,51 @@
 import {Asset} from 'anchor-link'
 import type {LinkSession, TransactResult} from 'anchor-link'
 import type {ethers} from 'ethers'
-import {get} from 'svelte/store'
 
 import type {EvmSession} from '~/lib/evm'
 import {valueInFiat} from '~/lib/fiat'
 import {activePriceTicker, waitForStoreValue} from '~/store'
 import {systemToken} from '~/stores/tokens'
+import type {TransferType} from './index'
 
 export abstract class TransferManager {
     self: typeof TransferManager
-    static from: string
-    static to: string
-    static fromDisplayString: string
-    static toDisplayString: string
     static supportedChains: string[]
     static evmRequired: boolean = false
 
     readonly nativeSession: LinkSession
     readonly evmSession: EvmSession
+    readonly transferData: TransferType
 
-    constructor(nativeSession: LinkSession, evmSession: EvmSession) {
+    constructor(nativeSession: LinkSession, evmSession: EvmSession, transferData: TransferType) {
         this.nativeSession = nativeSession
         this.evmSession = evmSession
+        this.transferData = transferData
+
         this.self = this.constructor as typeof TransferManager
     }
 
     /* eslint-disable @typescript-eslint/no-unused-vars */
     transfer(
         _amount: string,
+        _tokenSymbol: Asset.SymbolType,
         _amountReceived?: string
     ): Promise<TransactResult | ethers.providers.TransactionResponse> {
         throw new Error('transfer() not implemented')
     }
 
-    transferFee(_amount?: string): Promise<Asset> {
-        return Promise.resolve(Asset.from(0, get(systemToken)?.symbol || '4,EOS'))
+    transferFee(_amount?: string, tokenSymbol?: Asset.SymbolType): Promise<Asset> {
+        return Promise.resolve(Asset.from(0, tokenSymbol || '4,EOS'))
     }
     /* eslint-enable @typescript-eslint/no-unused-vars */
 
-    balance(): Promise<Asset | undefined> {
-        throw new Error('balance() not implemented')
-    }
-
-    receivingBalance(): Promise<Asset | undefined> {
-        throw new Error('receivingBalance() not implemented')
-    }
-
-    updateBalances(): Promise<void> {
-        throw new Error('updateBalances() not implemented')
-    }
+    async convertToUsd(amount: number, token?: Asset.SymbolCodeType): Promise<string | undefined> {
+        const activeSystemToken = await waitForStoreValue(systemToken)
 
-    updateMainBalance(): Promise<void> {
-        throw new Error('updateMainBalance() not implemented')
-    }
+        if (token && token !== activeSystemToken.symbol.code) {
+            return
+        }
 
-    async convertToUsd(amount: number): Promise<string> {
         const systemTokenPrice = await waitForStoreValue(activePriceTicker)
 
         return valueInFiat(amount, systemTokenPrice)
@@ -74,22 +64,6 @@ export abstract class TransferManager {
         throw new Error('toAddress() not implemented')
     }
 
-    get from() {
-        return this.self.from
-    }
-
-    get to() {
-        return this.self.to
-    }
-
-    get fromDisplayString() {
-        return this.self.fromDisplayString
-    }
-
-    get toDisplayString() {
-        return this.self.toDisplayString
-    }
-
     get supportedChains() {
         return this.self.supportedChains
     }
diff --git a/src/pages/transfer/success.svelte b/src/pages/transfer/success.svelte
index 89f79f96..c6525d8d 100644
--- a/src/pages/transfer/success.svelte
+++ b/src/pages/transfer/success.svelte
@@ -6,45 +6,36 @@
 
     import {activeBlockchain} from '~/store'
     import type {TransferManager} from './managers/transferManager'
+    import {updateBalances} from '~/stores/balances-provider'
+    import {activeSession} from '~/store'
+    import {get} from 'svelte/store'
 
     export let transferManager: TransferManager
     export let transactResult: TransactResult | ethers.providers.TransactionResponse
     export let handleBack: () => void
+    export let balance: Asset | undefined
+    export let receivingBalance: Asset | undefined
 
     let refreshInterval: NodeJS.Timeout
 
     async function awaitBalancesUpdate() {
         // Create a copy of the initial value
-        const initialSendingBalance = await transferManager.balance()
-        const initialReceivedBalance = await transferManager.receivingBalance()
+        const initialSendingBalance = balance
+        const initialReceivedBalance = receivingBalance
 
         if (!initialSendingBalance) return
         if (!initialReceivedBalance) return
 
-        // Set the current value equal to the initial value
-        let currentSendingBalance: Asset | undefined
-        let currentReceivedBalance: Asset | undefined
-
         // Start an interval to continously monitor for changes to that value
         refreshInterval = setInterval(async () => {
-            currentSendingBalance = await transferManager.balance()
-            currentReceivedBalance = await transferManager.receivingBalance()
-
-            // If the balances changed, stop the interval
-            if (
-                (!currentSendingBalance || !currentSendingBalance.equals(initialSendingBalance)) &&
-                (!currentReceivedBalance || !currentReceivedBalance.equals(initialReceivedBalance))
-            ) {
-                clearInterval(refreshInterval)
-            }
             // Fetch the balances
-            transferManager.updateBalances()
-        }, 1000)
+            updateBalances(get(activeSession)!)
+        }, 5000)
 
-        // Timeout after 30 seconds
+        // Timeout after 60 seconds
         setTimeout(() => {
             clearInterval(refreshInterval)
-        }, 30000)
+        }, 60000)
     }
 
     awaitBalancesUpdate()
diff --git a/src/stores/balances-provider.ts b/src/stores/balances-provider.ts
index 83f4a471..6265ca64 100644
--- a/src/stores/balances-provider.ts
+++ b/src/stores/balances-provider.ts
@@ -1,4 +1,4 @@
-import {Asset, LinkSession} from 'anchor-link'
+import {Asset, LinkSession, Name} from 'anchor-link'
 import {get, writable} from 'svelte/store'
 import type {Writable} from 'svelte/store'
 
@@ -6,6 +6,7 @@ import {chainConfig} from '~/config'
 import {activeEvmSession, activeSession, evmBalance, waitForStoreValue} from '~/store'
 import type {Balance} from '~/stores/balances'
 import {getBalanceProvider} from '~/lib/balance-providers/utils'
+import {makeTokenKey} from './tokens'
 
 export const isLoading: Writable<boolean> = writable(false)
 
@@ -47,6 +48,37 @@ export async function updateBalances(session: LinkSession) {
             const provider = getBalanceProvider(p, chain)
             if (provider) {
                 const balances = await provider.fetchBalances(session.auth.actor)
+                // Fetch evm balances when applicable
+                const evmSession = get(activeEvmSession)
+                if (evmSession) {
+                    const evmBalances = await evmSession.getBalances()
+
+                    if (evmBalances.length > 0) {
+                        evmBalances.forEach((balance) => {
+                            const contract = Name.from('eosio.evm')
+                            const tokenKey = makeTokenKey({
+                                chainId: session.chainId,
+                                contract,
+                                name: `${String(balance.symbol.code).toLowerCase()}-evm`,
+                            })
+
+                            balances.push({
+                                key: `${tokenKey}-balance`,
+                                chainId: session.chainId,
+                                contract: contract,
+                                account: session.auth.actor,
+                                tokenKey,
+                                quantity: balance,
+                            })
+                        })
+                    } else {
+                        // If no balances are returned, try again in 3 seconds
+                        setTimeout(() => {
+                            updateBalances(session)
+                        }, 3000)
+                    }
+                }
+
                 balancesProvider.set({
                     balances: balances,
                 })
diff --git a/src/stores/balances.ts b/src/stores/balances.ts
index 55f3cd6e..69e1b293 100644
--- a/src/stores/balances.ts
+++ b/src/stores/balances.ts
@@ -1,5 +1,5 @@
-import type {AccountName, ChainId, LinkSession, Name} from 'anchor-link'
-import {Asset} from 'anchor-link'
+import type {AccountName, ChainId, LinkSession} from 'anchor-link'
+import {Asset, Name} from 'anchor-link'
 import {derived} from 'svelte/store'
 import type {Readable} from 'svelte/store'
 
@@ -14,6 +14,7 @@ export interface Balance {
     account: Name
     tokenKey: string
     quantity: Asset
+    contract: Name
 }
 
 const initialBalances: Balance[] = []
@@ -73,6 +74,7 @@ export function createBalanceFromToken(
         account: session.auth.actor,
         tokenKey: makeTokenKey(token),
         quantity: balance,
+        contract: Name.from(token.contract),
     }
     return record
 }
diff --git a/src/stores/tokens.ts b/src/stores/tokens.ts
index 85a58358..cd0de628 100644
--- a/src/stores/tokens.ts
+++ b/src/stores/tokens.ts
@@ -9,6 +9,8 @@ import {activeBlockchain, activePriceTicker, activeSession} from '~/store'
 import {priceTicker} from '~/price-ticker'
 import {Balance, balances} from '~/stores/balances'
 
+import EvmTokens from '../lib/evm/data/tokens.json'
+
 export interface Token {
     key: string
     chainId: ChainId
@@ -18,6 +20,7 @@ export interface Token {
     price?: number
     logo?: string
     balance?: Asset | string
+    evm?: boolean
 }
 
 export interface TokenKeyParams {
@@ -26,6 +29,16 @@ export interface TokenKeyParams {
     name: NameType
 }
 
+export function tokenFromBalance(balance: Balance) {
+    return {
+        key: balance.tokenKey,
+        chainId: balance.chainId,
+        contract: balance.contract,
+        name: String(balance.quantity.symbol.code),
+        symbol: balance.quantity.symbol,
+    }
+}
+
 const initialTokens: Token[] = []
 
 export const tokens: Writable<Token[]> = writable(initialTokens, () => {
@@ -56,6 +69,8 @@ export const tokens: Writable<Token[]> = writable(initialTokens, () => {
 export function makeTokenKey(token: TokenKeyParams): string {
     return [String(token.chainId), String(token.contract), String(token.name)]
         .join('-')
+        .replace(/[()]/g, '')
+        .replace(/\s/g, '-')
         .toLowerCase()
 }
 
@@ -111,9 +126,11 @@ export function loadTokenMetadata(session: LinkSession) {
     const sysToken = createTokenFromChainId(session.chainId, get(activePriceTicker))
     records.push(sysToken)
 
-    for (const t of AntelopeTokens) {
-        const chain = chainConfig(session.chainId)
+    const allTokens = [...AntelopeTokens, ...EvmTokens]
+
+    const chain = chainConfig(session.chainId)
 
+    for (const t of allTokens) {
         if (chain.id === t.chain) {
             if (t.supply && t.supply.precision && t.symbol) {
                 const symbol: Asset.Symbol = Asset.Symbol.from(`${t.supply.precision},${t.symbol}`)
@@ -125,7 +142,10 @@ export function loadTokenMetadata(session: LinkSession) {
                     logo: t.metadata.logo,
                 }
 
-                if (token.symbol.equals(sysToken.symbol) && token.contract === token.contract) {
+                if (
+                    token.symbol.equals(sysToken.symbol) &&
+                    token.name !== `${sysToken.name} (EVM)`
+                ) {
                     continue
                 }