From b9f86ce59c109ee630b27cd4623de927e4643e63 Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Sat, 22 Jul 2023 00:38:22 -0400
Subject: [PATCH] enhancement: using the token selector to let users select
 account

---
 .../elements/input/token/selector.svelte      | 26 ++++++----
 .../elements/input/token/selector/row.svelte  |  3 ++
 src/pages/evm/swap/form.svelte                | 50 ++++++++-----------
 3 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/src/components/elements/input/token/selector.svelte b/src/components/elements/input/token/selector.svelte
index 56dbe3b9..feb2059f 100644
--- a/src/components/elements/input/token/selector.svelte
+++ b/src/components/elements/input/token/selector.svelte
@@ -14,6 +14,7 @@
 
     export let defaultToken: Token
     export let onTokenSelect: (token: Token) => void
+    export let tokenOptions: Token[]
 
     let selectedToken = defaultToken
     let displayModal = writable<boolean>(false)
@@ -34,6 +35,9 @@
     let filteredTokens: Token[] = []
 
     $: {
+        if (tokenOptions) {
+            return filteredTokens = tokenOptions
+        }
         filteredTokens =
             ($tokens &&
                 $tokens.filter((token) => {
@@ -107,16 +111,18 @@
         <Icon name="x" />
     </div>
     <h2>Select Token</h2>
-    <Form>
-        <Input
-            on:changed={updateQuery}
-            value={query}
-            name="query"
-            focus
-            fluid
-            placeholder="Search tokens..."
-        />
-    </Form>
+    {#if !tokenOptions}
+        <Form>
+            <Input
+                on:changed={updateQuery}
+                value={query}
+                name="query"
+                focus
+                fluid
+                placeholder="Search tokens..."
+            />
+        </Form>
+    {/if}
     <div class="table-container">
         <table>
             <tr>
diff --git a/src/components/elements/input/token/selector/row.svelte b/src/components/elements/input/token/selector/row.svelte
index f6215389..bfc6dd09 100644
--- a/src/components/elements/input/token/selector/row.svelte
+++ b/src/components/elements/input/token/selector/row.svelte
@@ -14,6 +14,9 @@
     let balance
 
     $: {
+        if (token.balance) {
+            formattedTokenBalance = formatBalanceString(token.balance)
+        }
         balance = $balances && $balances.find((balance) => balance.tokenKey === token.key)
 
         if (balance) {
diff --git a/src/pages/evm/swap/form.svelte b/src/pages/evm/swap/form.svelte
index 40a1431a..e7a6ce2c 100644
--- a/src/pages/evm/swap/form.svelte
+++ b/src/pages/evm/swap/form.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
     import {Asset as CoreAsset} from '@greymass/eosio'
     import {currentAccountBalance, evmAccount, activeSession} from '~/store'
+    import {Token, systemToken} from '~/stores/tokens'
 
     import Label from '~/components/elements/input/label.svelte'
     import Form from '~/components/elements/form.svelte'
     import Button from '~/components/elements/button.svelte'
-    import Select from '~/components/elements/select.svelte'
     import Asset from '~/components/elements/input/asset.svelte'
+    import Selector from '~/components/elements/input/token/selector.svelte'
 
     export let handleContinue: () => void
     export let amount: string = '0.0001'
@@ -16,15 +17,15 @@
     let evmBalance: CoreAsset | undefined
     let validAmount = false
 
-    function handleFromChange(event: CustomEvent) {
-        from = event.detail
+    function handleFromChange(token: Token) {
+        from = token
         to = undefined
 
         amount = ''
     }
 
-    function handleToChange(event: CustomEvent) {
-        to = event.detail
+    function handleToChange(token: Token) {
+        to = token
     }
 
     function useEntireBalance() {
@@ -60,25 +61,22 @@
     }
 
     $: nativeLabel = `Native (${$currentAccountBalance})`
-    $: evmLabel = `EVM (${evmBalance ? evmBalance : 'not connected'})`
-    
-    $: fromOptions = [
-        {value: 'Native', label: nativeLabel},
-        {value: 'EVM', label: evmLabel},
-    ]
+    $: evmLabel = `EVM (${evmBalance ? evmBalance : 'not connected'})` 
 
-    const toOptions: {value:string, label:string}[] = []
+    const fromOptions: Token[] = []
+    const toOptions: Token[] = []
 
     $: {
+        if (!$systemToken) {
+            return
+        }
+        fromOptions.push($systemToken, $systemToken)
         if (to === 'Native') {
-            toOptions.push({value: 'EVM', label: evmLabel})
+            toOptions.push()
         } else if (to === 'EVM') {
-            toOptions.push({value: 'Native', label: nativeLabel})
+            toOptions.push($systemToken)
         } else {
-            toOptions.push(
-                {value: 'Native', label: nativeLabel},
-                {value: 'EVM', label: evmLabel},
-            )
+            toOptions.push(...fromOptions)
         }
     }
 
@@ -147,11 +145,9 @@
         <div class="middle-section">
             <div class="left-section">
                 <Label align="left">From</Label>
-                <Select
-                    bind:value={from}
-                    on:change={handleFromChange}
-                    options={fromOptions}
-                    fluid
+                <Selector
+                    onTokenSelect={handleFromChange}
+                    tokenOptions={fromOptions}
                 />
                 <Label align="left">Amount</Label>
                 <Asset
@@ -165,11 +161,9 @@
             </div>
             <div class="right-section">
                 <Label align="left">To</Label>
-                <Select
-                    bind:value={to}
-                    on:change={handleToChange}
-                    options={toOptions}
-                    fluid
+                <Selector
+                    onTokenSelect={handleToChange}
+                    tokenOptions={toOptions}
                 />
             </div>
         </div>