From c28df19a84f1d2b5daa8155f7a8ab050090b845d Mon Sep 17 00:00:00 2001
From: Daniel Fugere <danielfugere28@gmail.com>
Date: Wed, 20 Sep 2023 15:03:31 -0700
Subject: [PATCH] Telos support in EVM bridge  (#168)

* fix: catching metamask error when funds are insufficient

closes issue #166

* chore: adding support for Telos EVM

* refactor: using transferTypes object to determine how different transfers should be processed

* refactor: putting all evm transfer logic in evm specific classes

* fix: getting page running again

* refactor: refactored transfer page to use manager classes

* fix: getting page running again

* refactor: using the get method to get store values

* chore: added telos evm bridge methods

* fix: getting telos bridge working

* fix: connecting to evm wallet for telos bridge

* enhancement: handling case where enter is pressed in the transfer form

* chore: getting the telos page working

* style: linted

* fix: using correct evm network for telos bridge

* enhancement: polished evm network switching

* fix: catching error when fee makes transfer exceed balance

* fix: making network switching more robust
---
 src/abi-types.ts                              |  23 ++
 src/auth.ts                                   |   8 +-
 .../elements/form/transaction.svelte          |   2 -
 src/config.ts                                 |   2 +-
 src/lib/evm.ts                                | 336 ++++++++++--------
 src/pages/transfer/confirm.svelte             |  46 ++-
 src/pages/transfer/form.svelte                | 115 ++++--
 src/pages/transfer/index.svelte               | 191 ++++------
 src/pages/transfer/managers/eosEvmBridge.ts   |  81 +++++
 src/pages/transfer/managers/evmEosBridge.ts   |  90 +++++
 src/pages/transfer/managers/evmTelosBridge.ts |  65 ++++
 src/pages/transfer/managers/index.ts          |  12 +
 src/pages/transfer/managers/telosEvmBridge.ts | 103 ++++++
 .../transfer/managers/transferManager.ts      | 100 ++++++
 src/pages/transfer/success.svelte             |  51 ++-
 src/store.ts                                  |  24 +-
 src/stores/account-provider.ts                |   6 +
 src/stores/balances-provider.ts               |  13 +-
 18 files changed, 947 insertions(+), 321 deletions(-)
 create mode 100644 src/pages/transfer/managers/eosEvmBridge.ts
 create mode 100644 src/pages/transfer/managers/evmEosBridge.ts
 create mode 100644 src/pages/transfer/managers/evmTelosBridge.ts
 create mode 100644 src/pages/transfer/managers/index.ts
 create mode 100644 src/pages/transfer/managers/telosEvmBridge.ts
 create mode 100644 src/pages/transfer/managers/transferManager.ts

diff --git a/src/abi-types.ts b/src/abi-types.ts
index c881898e..7770a8fa 100644
--- a/src/abi-types.ts
+++ b/src/abi-types.ts
@@ -11,6 +11,7 @@ import {
     UInt16,
     UInt32,
     UInt64,
+    Checksum160,
 } from 'anchor-link'
 
 @Struct.type('buyrambytes')
@@ -170,3 +171,25 @@ export class Transfer extends Struct {
     @Struct.field('asset') quantity!: Asset
     @Struct.field('string') memo!: string
 }
+
+@Struct.type('withdraw')
+export class TelosEvmWithdraw extends Struct {
+    @Struct.field('name') to!: Name
+    @Struct.field('asset') quantity!: Asset
+}
+
+@Struct.type('openwallet')
+export class TelosEvmOpenWallet extends Struct {
+    @Struct.field('name') account!: Name
+    @Struct.field('checksum160') address!: Checksum160
+    @Struct.field('name') actor!: Name
+    @Struct.field('name') permission!: Name
+}
+
+@Struct.type('create')
+export class TelosEvmCreate extends Struct {
+    @Struct.field('name') account!: Name
+    @Struct.field('string') data!: string
+    @Struct.field('name') actor!: Name
+    @Struct.field('name') permission!: Name
+}
diff --git a/src/auth.ts b/src/auth.ts
index cc458aaa..14364a7b 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -5,7 +5,8 @@ import {get} from 'svelte/store'
 import {storeAccount} from './stores/account-provider'
 import {getClient} from './api-client'
 import {appId, chains} from './config'
-import {activeSession, availableSessions} from './store'
+import {activeEvmSession, activeSession, availableSessions} from './store'
+import {startEvmSession} from './lib/evm'
 
 const transport = new Transport({
     requestStatus: false,
@@ -97,4 +98,9 @@ export async function activate(id: SessionLike) {
         throw new Error('No such session')
     }
     activeSession.set(session)
+
+    if (get(activeEvmSession)) {
+        activeEvmSession.set(undefined)
+        startEvmSession()
+    }
 }
diff --git a/src/components/elements/form/transaction.svelte b/src/components/elements/form/transaction.svelte
index f5000a9b..98a67e6d 100644
--- a/src/components/elements/form/transaction.svelte
+++ b/src/components/elements/form/transaction.svelte
@@ -61,7 +61,6 @@
         },
         clear: () => {
             error = false
-            console.log('clearing')
             transaction_id.set(undefined)
         },
         retryTransaction: () => {
@@ -73,7 +72,6 @@
             }
         },
         setTransaction: (id: string) => {
-            console.log('setting')
             transaction_id.set(id)
         },
         setTransactionError: (err: any) => {
diff --git a/src/config.ts b/src/config.ts
index 760d1074..d46f79e1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -203,7 +203,7 @@ export const chains: ChainConfig[] = [
         resourceSampleAccount: 'greymassfuel',
         resourceSampleMilliseconds: 1000,
         testnet: false,
-        bloksUrl: 'https://telos.bloks.io',
+        bloksUrl: 'https://explorer.telos.net',
         balanceProviders: new Set([BalanceProviders.LightAPI]),
     },
     {
diff --git a/src/lib/evm.ts b/src/lib/evm.ts
index e44aa197..ce0063cb 100644
--- a/src/lib/evm.ts
+++ b/src/lib/evm.ts
@@ -1,12 +1,21 @@
-import type {LinkSession} from 'anchor-link'
-import {Asset, Name} from 'anchor-link'
-import {ethers} from 'ethers'
-
+import {get} from 'svelte/store'
 import BN from 'bn.js'
+import {activeBlockchain, activeEvmSession, activeSession} from '~/store'
+import {wait} from '~/helpers'
 
-import {Transfer} from '~/abi-types'
+import {Asset, Name, NameType} from 'anchor-link'
+import {BigNumber, ethers} from 'ethers'
 import {getClient} from '~/api-client'
 
+export type AvailableEvms = 'eos-mainnet' | 'telos'
+export interface EvmChainConfig {
+    chainId: string
+    chainName: string
+    nativeCurrency: {name: string; symbol: string; decimals: number}
+    rpcUrls: string[]
+    blockExplorerUrls: string[]
+}
+
 let evmProvider: ethers.providers.Web3Provider
 
 declare global {
@@ -15,36 +24,80 @@ declare global {
     }
 }
 
-interface EvmAccountParams {
+export const evmChainConfigs: {[key: string]: EvmChainConfig} = {
+    eos: {
+        chainId: '0x4571',
+        chainName: 'EOS EVM Network',
+        nativeCurrency: {name: 'EOS', symbol: '4,EOS', decimals: 18},
+        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},
+        rpcUrls: ['https://mainnet.telos.net/evm'],
+        blockExplorerUrls: ['https://teloscan.io'],
+    },
+}
+
+export interface EvmSessionParams {
     signer: ethers.providers.JsonRpcSigner
     address: string
+    chainName: string
+    nativeAccountName?: NameType
 }
 
-function getProvider() {
-    if (evmProvider) {
-        return evmProvider
-    }
-
-    if (window.ethereum) {
-        evmProvider = new ethers.providers.Web3Provider(window.ethereum)
-        return evmProvider
-    }
-
-    throw new Error('No provider found')
+export interface EvmSessionFromParams {
+    chainName: string
+    nativeAccountName?: NameType
 }
 
-export class EvmAccount {
+export class EvmSession {
     address: string
     signer: ethers.providers.JsonRpcSigner
+    chainName: string
+    nativeAccountName?: NameType
 
-    constructor({address, signer}: EvmAccountParams) {
+    constructor({address, signer, chainName, nativeAccountName}: EvmSessionParams) {
         this.address = address
         this.signer = signer
+        this.chainName = chainName
+        this.nativeAccountName = nativeAccountName
     }
 
-    static from(EvmAccountParams: EvmAccountParams) {
-        // Implement your logic here
-        return new EvmAccount(EvmAccountParams)
+    get checksumAddress() {
+        return this.address.replace('0x', '').toLowerCase()
+    }
+
+    get chainConfig() {
+        return evmChainConfigs[this.chainName]
+    }
+
+    static async from({chainName, nativeAccountName}: EvmSessionFromParams) {
+        if (window.ethereum) {
+            const evmChainConfig = evmChainConfigs[chainName]
+            const provider = getProvider()
+            let network = await provider.getNetwork()
+            if (network.chainId !== Number(evmChainConfig.chainId.replace('0x', ''))) {
+                await switchNetwork(evmChainConfig)
+                network = await provider.detectNetwork()
+            }
+
+            await window.ethereum.request({method: 'eth_requestAccounts'})
+            const signer = provider.getSigner()
+
+            await window.ethereum.get_currency_balance
+
+            return new EvmSession({
+                address: await signer.getAddress(),
+                signer,
+                chainName,
+                nativeAccountName,
+            })
+        } else {
+            throw new Error('You need to install Metamask in order to use this feature.')
+        }
     }
 
     async sendTransaction(tx: ethers.providers.TransactionRequest) {
@@ -52,10 +105,68 @@ export class EvmAccount {
     }
 
     async getBalance() {
+        if (this.chainName === 'telos') {
+            return this.getTelosEvmBalance()
+        }
+
         const wei = await this.signer.getBalance()
 
-        return formatEOS(ethers.utils.formatEther(wei))
+        const tokenName = evmChainConfigs[this.chainName].nativeCurrency.name
+
+        return Asset.from(formatToken(ethers.utils.formatEther(wei), tokenName))
     }
+
+    async getTelosEvmBalance() {
+        if (!this.nativeAccountName) {
+            throw new Error('Native account name is necessary to fetch Telos balance.')
+        }
+
+        const account = await getTelosEvmAccount(this.nativeAccountName)
+
+        if (!account) {
+            return Asset.from(0, this.chainConfig.nativeCurrency.symbol)
+        }
+
+        const bn = BigNumber.from(`0x${account.balance}`)
+
+        return Asset.from(
+            Number(ethers.utils.formatEther(bn)),
+            this.chainConfig.nativeCurrency.symbol
+        )
+    }
+}
+
+export async function getTelosEvmAccount(nativeAccountName: NameType) {
+    const chain = get(activeBlockchain)
+    const client = getClient(chain.chainId)
+
+    if (!client) {
+        throw new Error('API client could not be instantiated')
+    }
+
+    const {rows} = await client.v1.chain.get_table_rows({
+        code: 'eosio.evm',
+        scope: 'eosio.evm',
+        table: 'account',
+        index_position: 'tertiary',
+        lower_bound: Name.from(nativeAccountName),
+        upper_bound: Name.from(nativeAccountName),
+    })
+
+    return rows[0]
+}
+
+export function getProvider() {
+    if (evmProvider) {
+        return evmProvider
+    }
+
+    if (window.ethereum) {
+        evmProvider = new ethers.providers.Web3Provider(window.ethereum, 'any')
+        return evmProvider
+    }
+
+    throw new Error('No provider found')
 }
 
 export function convertToEvmAddress(eosAccountName: string): string {
@@ -66,6 +177,26 @@ 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({
+            method: 'wallet_switchEthereumChain',
+            params: [{chainId: evmChainConfig.chainId}],
+        })
+        .catch(async (e: {code: number}) => {
+            if (e.code === 4902) {
+                await window.ethereum.request({
+                    method: 'wallet_addEthereumChain',
+                    params: [evmChainConfig],
+                })
+            }
+        })
+}
+
 function convertToEthAddress(eosAddress: string) {
     try {
         return uint64ToAddr(strToUint64(eosAddress))
@@ -118,149 +249,44 @@ function uint64ToAddr(str: string) {
     return '0xbbbbbbbbbbbbbbbbbbbbbbbb' + str
 }
 
-interface TransferParams {
-    amount: string
-    evmAccount: EvmAccount
-    nativeSession: LinkSession
-}
-
-export async function transferNativeToEvm({nativeSession, evmAccount, amount}: TransferParams) {
-    const action = Transfer.from({
-        from: nativeSession.auth.actor,
-        to: 'eosio.evm',
-        quantity: String(Asset.fromFloat(Number(amount), '4,EOS')),
-        memo: evmAccount.address,
-    })
-
-    return nativeSession.transact({
-        action: {
-            authorization: [nativeSession.auth],
-            account: Name.from('eosio.token'),
-            name: Name.from('transfer'),
-            data: action,
-        },
-    })
-}
-
-export async function estimateGas({nativeSession, evmAccount, amount}: TransferParams) {
-    const provider = getProvider()
-
-    const targetEvmAddress = convertToEvmAddress(String(nativeSession.auth.actor))
-
-    const gasPrice = await provider.getGasPrice()
-
-    // 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)
-
-    const gas = await provider.estimateGas({
-        from: evmAccount.address,
-        to: targetEvmAddress,
-        value: ethers.utils.parseEther(reducedAmount),
-        gasPrice,
-        data: ethers.utils.formatBytes32String(''),
-    })
-
-    return {gas, gasPrice}
-}
-
-export async function getNativeTransferFee({
-    nativeSession,
-}: {
-    nativeSession: LinkSession
-}): Promise<Asset> {
-    const apiClient = getClient(nativeSession.chainId)
+let connectingToEvm = false
 
-    let apiResponse
+export async function startEvmSession(): Promise<EvmSession | undefined> {
+    let evmSession: EvmSession
 
-    try {
-        apiResponse = await apiClient.v1.chain.get_table_rows({
-            code: 'eosio.evm',
-            scope: 'eosio.evm',
-            table: 'config',
-        })
-    } catch (err) {
-        throw new Error('Failed to get config table from eosio.evm. Full error: ' + err)
+    if (connectingToEvm) {
+        await wait(5000)
+        return startEvmSession()
     }
 
-    const config = apiResponse.rows[0]
+    connectingToEvm = true
 
-    return Asset.from(config.ingress_bridge_fee)
-}
-
-export async function getGasAmount({
-    nativeSession,
-    evmAccount,
-    amount,
-}: TransferParams): Promise<Asset> {
-    const {gas, gasPrice} = await estimateGas({nativeSession, evmAccount, amount})
-
-    const eosAmount = ethers.utils.formatEther(Number(gas) * Number(gasPrice))
-
-    return Asset.fromFloat(Number(eosAmount), '4,EOS')
-}
-
-export async function transferEvmToNative({nativeSession, evmAccount, amount}: TransferParams) {
-    const targetEvmAddress = convertToEvmAddress(String(nativeSession.auth.actor))
-
-    const {gas} = await estimateGas({nativeSession, evmAccount, amount})
+    const blockchain = get(activeBlockchain)
+    const nativeSession = get(activeSession)
 
-    return evmAccount.sendTransaction({
-        from: evmAccount.address,
-        to: targetEvmAddress,
-        value: ethers.utils.parseEther(amount),
-        gasPrice: await getProvider().getGasPrice(),
-        gasLimit: gas,
-        data: ethers.utils.formatBytes32String(''),
-    })
-}
-
-async function switchNetwork() {
-    await window.ethereum
-        .request({
-            method: 'wallet_switchEthereumChain',
-            params: [{chainId: '0x4571'}],
-        })
-        .catch(async (e: {code: number}) => {
-            if (e.code === 4902) {
-                await window.ethereum.request({
-                    method: 'wallet_addEthereumChain',
-                    params: [
-                        {
-                            chainId: '0x4571',
-                            chainName: 'EOS EVM Network',
-                            nativeCurrency: {name: 'EOS', symbol: 'EOS', decimals: 18},
-                            rpcUrls: ['https://api.evm.eosnetwork.com/'],
-                            blockExplorerUrls: ['https://explorer.evm.eosnetwork.com'],
-                        },
-                    ],
-                })
-            }
+    try {
+        evmSession = await EvmSession.from({
+            chainName: blockchain.id,
+            nativeAccountName: nativeSession?.auth.actor,
         })
-}
-
-export async function connectEthWallet(): Promise<EvmAccount> {
-    if (window.ethereum) {
-        const provider = getProvider()
-        let networkId = await provider.getNetwork()
-        if (networkId.chainId !== 17777) {
-            await switchNetwork()
-            networkId = await provider.getNetwork()
+    } catch (e) {
+        if (e.code === -32002) {
+            await wait(5000)
+            return startEvmSession()
         }
 
-        await window.ethereum.request({method: 'eth_requestAccounts'})
-        const signer = provider.getSigner()
+        if (!e.message) {
+            connectingToEvm = false
+            return
+        }
 
-        await window.ethereum.get_currency_balance
+        throw new Error(`Could not connect to EVM. Error: ${e.message}`)
+    }
 
-        return EvmAccount.from({
-            address: await signer.getAddress(),
-            signer,
-        })
-    } else {
-        throw 'You need to install Metamask in order to use this feature.'
+    if (evmSession) {
+        activeEvmSession.set(evmSession)
+        connectingToEvm = false
     }
-}
 
-function formatEOS(amount: String) {
-    return `${Number(amount).toFixed(4)} EOS`
+    return evmSession
 }
diff --git a/src/pages/transfer/confirm.svelte b/src/pages/transfer/confirm.svelte
index d99f390d..42b3dca6 100644
--- a/src/pages/transfer/confirm.svelte
+++ b/src/pages/transfer/confirm.svelte
@@ -5,18 +5,36 @@
     import TokenImage from '~/components/elements/image/token.svelte'
     import {systemTokenKey} from '~/stores/tokens'
 
-    import {valueInFiat} from '~/lib/fiat'
+    import type {TransferManager} from './managers/transferManager'
 
-    import {evmAccount, activeSession, activePriceTicker} from '~/store'
-    import type {Token} from '~/stores/tokens'
-
-    export let from: Token
-    export let to: Token
+    export let transferManager: TransferManager
     export let depositAmount: Asset
     export let receivedAmount: Asset
     export let feeAmount: Asset | undefined
     export let handleConfirm: () => void
     export let handleBack: () => void
+
+    let depositAmountInUsd: string
+    let receivedAmountInUsd: string
+    let feeAmountInUsd: string
+
+    function getUsdValues() {
+        transferManager.convertToUsd(depositAmount?.value).then((usdValue) => {
+            depositAmountInUsd = usdValue
+        })
+
+        transferManager.convertToUsd(receivedAmount?.value).then((usdValue) => {
+            receivedAmountInUsd = usdValue
+        })
+
+        if (feeAmount) {
+            transferManager.convertToUsd(feeAmount?.value).then((usdValue) => {
+                feeAmountInUsd = usdValue
+            })
+        }
+    }
+
+    getUsdValues()
 </script>
 
 <style type="scss">
@@ -118,12 +136,12 @@
 
     <table>
         <tr>
-            <td>From {from.name === 'EOS (EVM)' ? 'EVM' : from.name}</td>
-            <td>{from?.name === 'EVM' ? $evmAccount?.address : $activeSession?.auth.actor}</td>
+            <td>From {transferManager.fromDisplayString}</td>
+            <td>{transferManager.fromAddress}</td>
         </tr>
         <tr>
-            <td>To {to.name}</td>
-            <td>{from?.name === 'EOS' ? $evmAccount?.address : $activeSession?.auth.actor}</td>
+            <td>To {transferManager.toDisplayString}</td>
+            <td>{transferManager.toAddress}</td>
         </tr>
         <tr>
             <td>Deposit Amount</td>
@@ -135,7 +153,7 @@
                     {depositAmount}
                 </div>
                 <div class="fiat-value">
-                    ~{valueInFiat(depositAmount?.value, $activePriceTicker)}
+                    {depositAmountInUsd ? `~ ${depositAmountInUsd}` : ''}
                 </div>
             </td>
         </tr>
@@ -146,10 +164,10 @@
                     <div class="image-container">
                         <TokenImage width="20" height="20" tokenKey={$systemTokenKey} />
                     </div>
-                    {feeAmount || '0.0000 EOS'}
+                    {feeAmount || `0.0000 ${$systemTokenKey}`}
                 </div>
                 <div class="fiat-value">
-                    ~{valueInFiat(feeAmount?.value || 0, $activePriceTicker)}
+                    {feeAmountInUsd ? `~ ${feeAmountInUsd}` : ''}
                 </div>
             </td>
         </tr>
@@ -163,7 +181,7 @@
                     {receivedAmount}
                 </div>
                 <div class="fiat-value">
-                    ~{valueInFiat(receivedAmount?.value, $activePriceTicker)}
+                    {receivedAmountInUsd ? `~ ${receivedAmountInUsd}` : ''}
                 </div>
             </td>
         </tr>
diff --git a/src/pages/transfer/form.svelte b/src/pages/transfer/form.svelte
index cb23f719..cf8a9b78 100644
--- a/src/pages/transfer/form.svelte
+++ b/src/pages/transfer/form.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import {Asset as CoreAsset} from '@greymass/eosio'
-    import {currentAccountBalance, evmAccount, activeSession} from '~/store'
+    import {activeEvmSession, activeSession, activeBlockchain, currentAccountBalance} from '~/store'
     import {Token, systemToken} from '~/stores/tokens'
 
     import Label from '~/components/elements/input/label.svelte'
@@ -8,12 +8,15 @@
     import Button from '~/components/elements/button.svelte'
     import Asset from '~/components/elements/input/asset.svelte'
     import Selector from '~/components/elements/input/token/selector.svelte'
+    import type {TransferManager} from './managers/transferManager'
+    import {transferManagers} from './managers'
+    import type {EvmSession} from '~/lib/evm'
 
     export let handleContinue: () => void
     export let amount: string = ''
     export let from: Token | undefined
     export let to: Token | undefined
-    export let evmBalance: CoreAsset | undefined
+    export let transferManager: TransferManager | undefined
     export let feeAmount: CoreAsset | undefined
     export let depositAmount: CoreAsset | undefined
     export let receivedAmount: CoreAsset | undefined
@@ -30,10 +33,12 @@
         to = token
     }
 
-    $: readyToContinue = from && to && validAmount && $evmAccount
+    $: readyToContinue = from && to && validAmount
 
     function onContinue() {
         if (readyToContinue) {
+            removeEventListener('keyup', handleEnter)
+
             handleContinue()
         }
     }
@@ -53,28 +58,92 @@
 
     let fromOptions: Token[] = []
     let toOptions: Token[] = []
+    let availableToReceive: CoreAsset | undefined
+
+    let generatingOptions = false
+
+    async function generateOptions(evmSession?: EvmSession) {
+        if (!!generatingOptions) return
+
+        generatingOptions = true
+
+        fromOptions = []
+
+        await Promise.all(
+            Object.values(transferManagers).map(async (TransferManagerClass) => {
+                if (!$systemToken) return
+
+                // Only displaying accounts that support the current chain
+                if (!TransferManagerClass.supportedChains.includes($activeBlockchain?.id)) return
+
+                let accountBalance
+
+                if (!TransferManagerClass.evmRequired || evmSession) {
+                    const transferManager = new (TransferManagerClass as unknown as new (
+                        ...args: any[]
+                    ) => TransferManager)($activeSession!, evmSession)
+                    await transferManager.updateMainBalance()
+                    accountBalance = await transferManager.balance()
+                }
+
+                fromOptions.push({
+                    ...$systemToken,
+                    key: TransferManagerClass.from,
+                    name: TransferManagerClass.fromDisplayString,
+                    balance: accountBalance || 'Connect',
+                })
+            })
+        )
+
+        generatingOptions = false
+    }
 
     $: {
-        if ($systemToken) {
-            const evmToken = {
-                ...$systemToken,
-                name: 'EOS (EVM)',
-                contract: 'eosio.evm',
-                balance: evmBalance || 'Connect',
-            }
-            fromOptions = [$systemToken, evmToken]
-            if (from?.name === 'EOS (EVM)') {
-                toOptions = [$systemToken]
-            } else if (from?.name === 'EOS') {
-                toOptions = [evmToken]
-            } else {
-                toOptions = fromOptions
-            }
+        if (from) {
+            toOptions = fromOptions.filter((token) => token.key !== from?.key)
+        } else {
+            toOptions = fromOptions
+        }
+    }
+
+    let lastBalanceValue = $currentAccountBalance?.value
+
+    $: {
+        // Regenerate options if the balance changes
+        if ($activeEvmSession && lastBalanceValue !== $currentAccountBalance?.value) {
+            generateOptions($activeEvmSession)
+            lastBalanceValue = $currentAccountBalance?.value
+        }
+    }
+
+    $: {
+        // Regenerate options if the user connects to evm wallet
+        if ($activeEvmSession) {
+            generateOptions($activeEvmSession)
+        } else {
+            generateOptions()
+        }
+    }
+
+    $: {
+        transferManager?.balance().then((balance) => {
+            availableToReceive = CoreAsset.from(
+                (balance?.value || 0) - (feeAmount?.value || 0),
+                balance?.symbol || '4,EOS'
+            )
+        })
+    }
+
+    // Continue when the user presses enter
+    const handleEnter = (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            event.preventDefault()
+
+            onContinue()
         }
     }
 
-    $: balance = from?.name === 'EOS' ? $currentAccountBalance : evmBalance
-    $: availableToReceive = CoreAsset.from((balance?.value || 0) - (feeAmount?.value || 0), '4,EOS')
+    addEventListener('keyup', handleEnter)
 </script>
 
 <style type="scss">
@@ -176,7 +245,9 @@
                     bind:value={amount}
                 />
                 {#if from && to}
-                    <button on:click={useEntireBalance}>Entire Balance</button>
+                    <button type="button" on:click={useEntireBalance} on:keyup={() => {}}>
+                        Entire Balance
+                    </button>
                 {/if}
             </div>
             <div class="right-section">
@@ -205,7 +276,7 @@
             <Button fluid style="primary" disabled={!readyToContinue} on:action={onContinue}
                 >Continue</Button
             >
-            {#if !$evmAccount}
+            {#if !$activeEvmSession}
                 <h3>Connect to metamask wallet to continue</h3>
             {/if}
         </div>
diff --git a/src/pages/transfer/index.svelte b/src/pages/transfer/index.svelte
index 39390b2c..9bcc4a09 100644
--- a/src/pages/transfer/index.svelte
+++ b/src/pages/transfer/index.svelte
@@ -1,24 +1,20 @@
 <script lang="ts">
-    import {Asset, TransactResult} from 'anchor-link'
+    import {Asset, LinkSession, TransactResult} from 'anchor-link'
     import type {ethers} from 'ethers'
 
-    import {currentAccountBalance, evmAccount, activeSession} from '~/store'
-
-    import {
-        transferNativeToEvm,
-        transferEvmToNative,
-        connectEthWallet,
-        getGasAmount,
-        getNativeTransferFee,
-    } from '~/lib/evm'
+    import {activeSession, activeEvmSession} from '~/store'
 
     import Page from '~/components/layout/page.svelte'
     import Form from './form.svelte'
     import Confirm from './confirm.svelte'
     import Success from './success.svelte'
     import Error from './error.svelte'
+    import {systemToken} from '~/stores/tokens'
+    import {transferManagers} from './managers'
+    import type {TransferManager} from './managers/transferManager'
+    import {startEvmSession} from '~/lib/evm'
+
     import type {Token} from '~/stores/tokens'
-    import {updateAccount} from '~/stores/account-provider'
 
     let step = 'form'
     let deposit: string = ''
@@ -26,61 +22,57 @@
     let errorMessage: string | undefined
     let from: Token | undefined
     let to: Token | undefined
-    let nativeTransactResult: TransactResult | undefined
-    let evmTransactResult: ethers.providers.TransactionResponse | undefined
+    let transactResult: TransactResult | ethers.providers.TransactionResponse | undefined
     let transferFee: Asset | undefined
-    let evmBalance: Asset | undefined
+    let transferManager: TransferManager | undefined
+
+    $: systemContractSymbol = String($systemToken?.symbol)
+    $: {
+        const TransferManagerClass =
+            from?.name && to?.name ? transferManagers[`${from.name} - ${to?.name}`] : undefined
+        if (TransferManagerClass) {
+            transferManager = new (TransferManagerClass as unknown as new (
+                ...args: any[]
+            ) => TransferManager)($activeSession!, $activeEvmSession)
+        }
+    }
 
     async function useEntireBalance() {
         if (!from || !to) return
 
-        let value
-        if (from?.name === 'EOS (EVM)') {
-            value = evmBalance?.value
-        } else if (from?.name === 'EOS') {
-            value = $currentAccountBalance?.value
-        }
+        const balance = await transferManager?.balance()
+
+        if (!balance) return
+
+        const balanceValue = balance.value
+
+        await estimateTransferFee(String(balanceValue))
 
-        await estimateTransferFee(String(value))
+        const transferFeeValue = transferFee?.value || 0
 
-        received = ((value || 0) - (transferFee?.value || 0))?.toFixed(4)
+        received = (
+            (balanceValue || 0) - (transferFeeValue === 0 ? 0 : transferFeeValue - 0.0001)
+        )?.toFixed(4)
     }
 
     async function transfer() {
-        if (!$evmAccount) {
-            return (errorMessage = 'An evm session is required.')
-        }
-
         try {
-            if (from?.name === 'EOS') {
-                nativeTransactResult = await transferNativeToEvm({
-                    nativeSession: $activeSession!,
-                    evmAccount: $evmAccount,
-                    amount: deposit,
-                })
-            } else {
-                evmTransactResult = await transferEvmToNative({
-                    nativeSession: $activeSession!,
-                    evmAccount: $evmAccount,
-                    amount: received,
-                })
-            }
+            transactResult = await transferManager?.transfer(deposit, received)
         } catch (error) {
             return (errorMessage = `Could not transfer. Error: ${
-                JSON.stringify(error) === '{}' ? error.message : JSON.stringify(error)
+                error.underlyingError?.message || JSON.stringify(error) === '{}'
+                    ? error.message
+                    : JSON.stringify(error)
             }`)
         }
 
-        setTimeout(updateBalances, 20000) // Waiting a 20 seconds and then updating the balances
-
         step = 'success'
     }
 
-    function handleBack() {
+    function handleBack(updateBalances = false) {
         step = 'form'
         errorMessage = undefined
-        nativeTransactResult = undefined
-        evmTransactResult = undefined
+        transactResult = undefined
         deposit = ''
         received = ''
     }
@@ -96,100 +88,70 @@
     }
 
     async function estimateTransferFee(transferAmount?: string): Promise<Asset | undefined> {
-        if (!$evmAccount) {
+        if (!$activeEvmSession) {
             errorMessage = 'An evm session is required.'
             return
         }
 
         try {
-            if (from?.name === 'EOS') {
-                transferFee = await getNativeTransferFee({
-                    nativeSession: $activeSession!,
-                })
-            } else {
-                transferFee = await getGasAmount({
-                    nativeSession: $activeSession!,
-                    evmAccount: $evmAccount,
-                    amount: transferAmount || received,
-                })
-            }
+            transferFee = await transferManager?.transferFee(transferAmount || received)
         } catch (error) {
-            errorMessage = `Could not estimate transfer fee. Error: ${
-                JSON.stringify(error) === '{}' ? error.message : JSON.stringify(error)
-            }`
+            if (
+                !error?.data?.message?.includes('insufficient funds for transfer') &&
+                !error?.data?.message?.includes('gas required exceeds allowance')
+            ) {
+                errorMessage = `Could not estimate transfer fee. Error: ${
+                    JSON.stringify(error) === '{}' ? error.message : JSON.stringify(error)
+                }`
+            }
             return
         }
 
         return transferFee
     }
 
-    let connectInterval: number | undefined
-    let connectingToEvmWallet = false
-
-    async function connectEvmWallet() {
-        let ethWalletAccount
-
-        if (connectingToEvmWallet || !!$evmAccount) {
-            return
-        }
-
-        connectingToEvmWallet = true
-
-        try {
-            ethWalletAccount = await connectEthWallet()
-        } catch (e) {
-            if (e.code === -32002) {
-                return
-            }
-
-            if (!e.message) {
-                return (connectingToEvmWallet = false)
-            }
-
-            return (errorMessage = `Could not connect to ETH wallet. Error: ${e.message}`)
-        }
-
-        if (ethWalletAccount) {
-            evmAccount.set(ethWalletAccount)
-            connectInterval && clearInterval(connectInterval)
-            connectingToEvmWallet = false
-        }
+    async function handlePageLoad() {
+        // For now, we are always connecting to evm wallet on page load. This may change in the future.
+        await startEvmSession()
     }
 
-    function getEvmBalance() {
-        $evmAccount?.getBalance().then((balance) => {
-            evmBalance = Asset.from(Number(balance.split(' ')[0]), '4,EOS')
-        })
-    }
+    handlePageLoad()
 
-    function updateBalances() {
-        updateAccount($activeSession!.auth.actor, $activeSession!.chainId)
-        getEvmBalance()
+    $: {
+        if (transferManager && received !== '' && Number(received) > 0) {
+            estimateTransferFee()
+        }
     }
 
     $: {
-        if ($evmAccount) {
-            getEvmBalance()
+        if (transferFee && received !== '') {
+            deposit = (parseFloat(received) + parseFloat(transferFee?.value.toFixed(4))).toFixed(4)
         }
     }
 
-    connectInterval = window.setInterval(connectEvmWallet, 3000)
-    connectEvmWallet()
+    let previousSession: LinkSession | undefined
 
     $: {
-        if (from && to && received !== '' && Number(received) > 0) {
-            estimateTransferFee()
+        if (!previousSession) {
+            previousSession = $activeSession
         }
     }
 
     $: {
-        if (transferFee && received !== '') {
-            deposit = (parseFloat(received) + parseFloat(transferFee?.value.toFixed(4))).toFixed(4)
+        if (
+            previousSession &&
+            String($activeSession?.chainId) !== String(previousSession?.chainId)
+        ) {
+            startEvmSession()
+            previousSession = $activeSession
         }
     }
 
-    $: receivedAmount = isNaN(Number(received)) ? undefined : Asset.from(Number(received), '4,EOS')
-    $: depositAmount = Asset.from(Number(deposit), '4,EOS')
+    // Eventually we may want to get the symbol from the transferManager instead of the systemToken
+    $: receivedAmount = isNaN(Number(received))
+        ? undefined
+        : Asset.from(Number(received), systemContractSymbol)
+    $: depositAmount = Asset.from(Number(deposit), systemContractSymbol)
 </script>
 
 <style type="scss">
@@ -203,12 +165,12 @@
     <div class="container">
         {#if errorMessage}
             <Error error={errorMessage} {handleBack} />
-        {:else if step === 'form' || !from || !to || !deposit || !received}
+        {:else if step === 'form' || !transferManager || !deposit || !received}
             <Form
                 handleContinue={submitForm}
                 {depositAmount}
                 {receivedAmount}
-                {evmBalance}
+                {transferManager}
                 {useEntireBalance}
                 bind:feeAmount={transferFee}
                 bind:amount={received}
@@ -219,14 +181,13 @@
             <Confirm
                 {depositAmount}
                 {receivedAmount}
+                {transferManager}
                 feeAmount={transferFee}
-                {from}
-                {to}
                 handleConfirm={transfer}
                 {handleBack}
             />
-        {:else if (step === 'success' && nativeTransactResult) || evmTransactResult}
-            <Success {nativeTransactResult} {evmTransactResult} {handleBack} />
+        {:else if step === 'success' && transactResult}
+            <Success {transactResult} {transferManager} {handleBack} />
         {/if}
     </div>
 </Page>
diff --git a/src/pages/transfer/managers/eosEvmBridge.ts b/src/pages/transfer/managers/eosEvmBridge.ts
new file mode 100644
index 00000000..73f6c773
--- /dev/null
+++ b/src/pages/transfer/managers/eosEvmBridge.ts
@@ -0,0 +1,81 @@
+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'
+
+export class EosEvmBridge extends TransferManager {
+    static from = 'eos'
+    static fromDisplayString = 'EOS'
+    static to = 'evm'
+    static toDisplayString = 'EOS (EVM)'
+    static supportedChains = ['eos']
+    static evmRequired = true
+
+    get fromAddress() {
+        return String(this.nativeSession.auth.actor)
+    }
+
+    get toAddress() {
+        return this.evmSession.address
+    }
+
+    async transferFee() {
+        const apiClient = getClient(this.nativeSession.chainId)
+
+        let apiResponse
+
+        try {
+            apiResponse = await apiClient.v1.chain.get_table_rows({
+                code: 'eosio.evm',
+                scope: 'eosio.evm',
+                table: 'config',
+            })
+        } catch (err) {
+            throw new Error('Failed to get config table from eosio.evm. Full error: ' + err)
+        }
+
+        const config = apiResponse.rows[0]
+
+        return Asset.from(config.ingress_bridge_fee || '0.0000 EOS')
+    }
+
+    transfer(amount: string) {
+        const action = Transfer.from({
+            from: this.nativeSession.auth.actor,
+            to: 'eosio.evm',
+            quantity: String(Asset.fromFloat(Number(amount), '4,EOS')),
+            memo: this.evmSession.address,
+        })
+
+        return this.nativeSession.transact({
+            action: {
+                authorization: [this.nativeSession.auth],
+                account: Name.from('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
new file mode 100644
index 00000000..184405de
--- /dev/null
+++ b/src/pages/transfer/managers/evmEosBridge.ts
@@ -0,0 +1,90 @@
+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
+
+    get fromAddress() {
+        return this.evmSession.address
+    }
+
+    get toAddress() {
+        return String(this.nativeSession.auth.actor)
+    }
+
+    async transferFee(amount: string) {
+        const {gas, gasPrice} = await this.estimateGas(amount)
+
+        const eosAmount = ethers.utils.formatEther(Number(gas) * Number(gasPrice))
+
+        return Asset.fromFloat(Number(eosAmount), this.evmSession.chainConfig.nativeCurrency.symbol)
+    }
+
+    async transfer(amount: string, amountReceived?: string) {
+        const targetEvmAddress = convertToEvmAddress(String(this.nativeSession.auth.actor))
+
+        const amountToTransfer = amountReceived || amount
+
+        const {gas} = await this.estimateGas(amountToTransfer)
+
+        return this.evmSession.sendTransaction({
+            from: this.evmSession.address,
+            to: targetEvmAddress,
+            value: ethers.utils.parseEther(amountToTransfer),
+            gasPrice: await getProvider().getGasPrice(),
+            gasLimit: gas,
+            data: ethers.utils.formatBytes32String(''),
+        })
+    }
+
+    private async estimateGas(amount: string) {
+        const provider = getProvider()
+
+        const targetEvmAddress = convertToEvmAddress(String(this.nativeSession.auth.actor))
+
+        const gasPrice = await provider.getGasPrice()
+
+        // 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)
+
+        const gas = await provider.estimateGas({
+            from: this.evmSession.address,
+            to: targetEvmAddress,
+            value: ethers.utils.parseEther(reducedAmount),
+            gasPrice,
+            data: ethers.utils.formatBytes32String(''),
+        })
+
+        return {gas, gasPrice}
+    }
+
+    async balance() {
+        return get(evmBalance)
+    }
+
+    async receivingBalance() {
+        return get(currentAccountBalance)
+    }
+
+    async updateBalances() {
+        updateActiveAccount()
+        updateEvmBalance()
+    }
+
+    updateMainBalance() {
+        return updateEvmBalance()
+    }
+}
diff --git a/src/pages/transfer/managers/evmTelosBridge.ts b/src/pages/transfer/managers/evmTelosBridge.ts
new file mode 100644
index 00000000..112e4c6e
--- /dev/null
+++ b/src/pages/transfer/managers/evmTelosBridge.ts
@@ -0,0 +1,65 @@
+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
+
+    get fromAddress() {
+        return this.evmSession.address!
+    }
+
+    get toAddress() {
+        return String(this.nativeSession.auth.actor)
+    }
+
+    async transfer(amount: string) {
+        const systemTokenSymbol = get(systemToken)?.symbol
+
+        if (!systemTokenSymbol) {
+            throw new Error('No system token symbol found')
+        }
+
+        const action = TelosEvmWithdraw.from({
+            to: this.nativeSession.auth.actor,
+            quantity: String(Asset.fromFloat(Number(amount), systemTokenSymbol)),
+        })
+
+        return this.nativeSession.transact({
+            action: {
+                authorization: [this.nativeSession.auth],
+                account: Name.from('eosio.evm'),
+                name: Name.from('withdraw'),
+                data: action,
+            },
+        })
+    }
+
+    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
new file mode 100644
index 00000000..f09345c2
--- /dev/null
+++ b/src/pages/transfer/managers/index.ts
@@ -0,0 +1,12 @@
+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,
+}
diff --git a/src/pages/transfer/managers/telosEvmBridge.ts b/src/pages/transfer/managers/telosEvmBridge.ts
new file mode 100644
index 00000000..ed0f4dcf
--- /dev/null
+++ b/src/pages/transfer/managers/telosEvmBridge.ts
@@ -0,0 +1,103 @@
+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
+
+    get fromAddress() {
+        return String(this.nativeSession.auth.actor)
+    }
+
+    get toAddress() {
+        return this.evmSession.address
+    }
+
+    async transfer(amount: string) {
+        const telosEvmAccount = await getTelosEvmAccount(this.nativeSession.auth.actor)
+
+        const actions = []
+
+        if (!telosEvmAccount) {
+            actions.push(this.telosEvmCreate())
+        }
+
+        const transfer = Transfer.from({
+            from: this.nativeSession.auth.actor,
+            to: 'eosio.evm',
+            quantity: String(Asset.fromFloat(Number(amount), '4,TLOS')),
+            memo: this.evmSession.checksumAddress || '',
+        })
+
+        actions.push({
+            authorization: [this.nativeSession.auth],
+            account: Name.from('eosio.token'),
+            name: Name.from('transfer'),
+            data: transfer,
+        })
+
+        return this.nativeSession.transact({
+            actions,
+        })
+    }
+
+    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,
+            address: this.evmSession.checksumAddress,
+            actor: this.nativeSession.auth.actor,
+            permission: this.nativeSession.auth.permission,
+        })
+
+        return {
+            authorization: [this.nativeSession.auth],
+            account: Name.from('eosio.evm'),
+            name: Name.from('openwallet'),
+            data: action,
+        }
+    }
+
+    telosEvmCreate() {
+        const action = TelosEvmCreate.from({
+            account: this.nativeSession.auth.actor,
+            data: this.evmSession.checksumAddress,
+            actor: this.nativeSession.auth.actor,
+            permission: this.nativeSession.auth.permission,
+        })
+
+        return {
+            authorization: [this.nativeSession.auth],
+            account: Name.from('eosio.evm'),
+            name: Name.from('create'),
+            data: action,
+        }
+    }
+}
diff --git a/src/pages/transfer/managers/transferManager.ts b/src/pages/transfer/managers/transferManager.ts
new file mode 100644
index 00000000..082964d1
--- /dev/null
+++ b/src/pages/transfer/managers/transferManager.ts
@@ -0,0 +1,100 @@
+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'
+
+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
+
+    constructor(nativeSession: LinkSession, evmSession: EvmSession) {
+        this.nativeSession = nativeSession
+        this.evmSession = evmSession
+        this.self = this.constructor as typeof TransferManager
+    }
+
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    transfer(
+        _amount: string,
+        _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'))
+    }
+    /* 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')
+    }
+
+    updateMainBalance(): Promise<void> {
+        throw new Error('updateMainBalance() not implemented')
+    }
+
+    async convertToUsd(amount: number): Promise<string> {
+        const systemTokenPrice = await waitForStoreValue(activePriceTicker)
+
+        return valueInFiat(amount, systemTokenPrice)
+    }
+
+    // onSelect(): Promise<void> {
+    //     // This may be needed in the future
+    //     throw new Error('onSelect() not implemented')
+    // }
+
+    get fromAddress(): string {
+        throw new Error('fromAddress() not implemented')
+    }
+
+    get toAddress(): string {
+        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
+    }
+
+    get evmRequired() {
+        return this.self.evmRequired
+    }
+}
diff --git a/src/pages/transfer/success.svelte b/src/pages/transfer/success.svelte
index 1e25bfbd..89f79f96 100644
--- a/src/pages/transfer/success.svelte
+++ b/src/pages/transfer/success.svelte
@@ -1,20 +1,59 @@
 <script lang="ts">
     import TxFollower from '~/components/tx-follower/index.svelte'
     import EvmTxFollower from '~/components/evm-tx-follower/index.svelte'
-    import type {TransactResult} from 'anchor-link'
+    import type {Asset, TransactResult} from 'anchor-link'
     import type {ethers} from 'ethers'
 
     import {activeBlockchain} from '~/store'
+    import type {TransferManager} from './managers/transferManager'
 
-    export let nativeTransactResult: TransactResult | undefined
-    export let evmTransactResult: ethers.providers.TransactionResponse | undefined
+    export let transferManager: TransferManager
+    export let transactResult: TransactResult | ethers.providers.TransactionResponse
     export let handleBack: () => void
+
+    let refreshInterval: NodeJS.Timeout
+
+    async function awaitBalancesUpdate() {
+        // Create a copy of the initial value
+        const initialSendingBalance = await transferManager.balance()
+        const initialReceivedBalance = await transferManager.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)
+
+        // Timeout after 30 seconds
+        setTimeout(() => {
+            clearInterval(refreshInterval)
+        }, 30000)
+    }
+
+    awaitBalancesUpdate()
 </script>
 
-{#if nativeTransactResult}
+{#if 'payload' in transactResult}
     <TxFollower
         title="Transfer Sent"
-        id={nativeTransactResult.payload.tx}
+        id={transactResult.payload.tx}
         chain={$activeBlockchain}
         primaryButtonText="New Transfer"
         handlePrimaryButtonClick={handleBack}
@@ -22,7 +61,7 @@
 {:else}
     <EvmTxFollower
         title="Transfer Sent"
-        {evmTransactResult}
+        evmTransactResult={transactResult}
         primaryButtonText="New Transfer"
         handlePrimaryButtonClick={handleBack}
     />
diff --git a/src/store.ts b/src/store.ts
index d04a3cfc..08820235 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -6,7 +6,7 @@ import {ChainConfig, chainConfig, chains} from './config'
 import {Preferences} from './preferences'
 import {priceTicker} from './price-ticker'
 import {accountProvider} from './stores/account-provider'
-import type {EvmAccount} from './lib/evm'
+import type {EvmSession} from '~/lib/evm'
 
 /** Set to true when app initialization completes. */
 export const appReady = writable<boolean>(false)
@@ -14,8 +14,11 @@ export const appReady = writable<boolean>(false)
 /** Active anchor link session, aka logged in user. */
 export const activeSession = writable<LinkSession | undefined>(undefined)
 
-/** Active EVM account, aka logged in user. */
-export const evmAccount = writable<EvmAccount | null>(null)
+/** Active EVM session, aka logged in user. */
+export const activeEvmSession = writable<EvmSession | undefined>(undefined)
+
+/** EVM session balance */
+export const evmBalance = writable<Asset | undefined>(undefined)
 
 /** Configuration of the currently selected blockchain */
 export const activeBlockchain: Readable<ChainConfig> = derived(activeSession, (session) => {
@@ -79,3 +82,18 @@ export const darkMode = derived(
         }
     }
 )
+
+export const waitForStoreValue = <StoreType>(
+    store: Readable<StoreType | undefined>
+): Promise<StoreType> => {
+    let unsubscribe: (() => void) | undefined
+    return new Promise((resolve) => {
+        unsubscribe = store.subscribe((value) => {
+            if (value) {
+                // Replace this condition with whatever means "populated" for you
+                resolve(value)
+                unsubscribe && unsubscribe()
+            }
+        })
+    })
+}
diff --git a/src/stores/account-provider.ts b/src/stores/account-provider.ts
index 1c71e958..2562596e 100644
--- a/src/stores/account-provider.ts
+++ b/src/stores/account-provider.ts
@@ -60,6 +60,12 @@ export async function updateAccount(name: Name, chainId: ChainId, refresh: boole
     isLoading.set(false)
 }
 
+export function updateActiveAccount() {
+    const session = get(activeSession)
+    if (!session) return
+    updateAccount(session.auth.actor, session.chainId)
+}
+
 function fetchBalance(name: Name, chainId: ChainId) {
     const chain = chainConfig(chainId)
     return getClient(chainId).v1.chain.get_currency_balance(chain.coreTokenContract, name)
diff --git a/src/stores/balances-provider.ts b/src/stores/balances-provider.ts
index 117c01d3..83f4a471 100644
--- a/src/stores/balances-provider.ts
+++ b/src/stores/balances-provider.ts
@@ -1,9 +1,9 @@
-import type {LinkSession} from 'anchor-link'
+import {Asset, LinkSession} from 'anchor-link'
 import {get, writable} from 'svelte/store'
 import type {Writable} from 'svelte/store'
 
 import {chainConfig} from '~/config'
-import {activeSession} from '~/store'
+import {activeEvmSession, activeSession, evmBalance, waitForStoreValue} from '~/store'
 import type {Balance} from '~/stores/balances'
 import {getBalanceProvider} from '~/lib/balance-providers/utils'
 
@@ -56,3 +56,12 @@ export async function updateBalances(session: LinkSession) {
     }
     isLoading.set(false)
 }
+
+export async function updateEvmBalance() {
+    const evmSession = await waitForStoreValue(activeEvmSession)
+
+    if (evmSession) {
+        const balance = await evmSession.getBalance()
+        evmBalance.set(Asset.from(balance))
+    }
+}