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

@@ -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)
     }
 }

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">

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

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'
 

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,
             }

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 {