enhancement: useEntireBalance now takes into account transferFee

src/pages/transfer/form.svelte

@@ -15,7 +15,9 @@
     export let to: Token | undefined
     export let evmBalance: CoreAsset | undefined
     export let feeAmount: CoreAsset | undefined
+    export let depositAmount: CoreAsset | undefined
     export let receivedAmount: CoreAsset | undefined
+    export let useEntireBalance: () => void
 
     let validAmount = false
 
@@ -30,16 +32,6 @@
         to = token
     }
 
-    function useEntireBalance() {
-        let value
-        if (from?.name === 'EOS (EVM)') {
-            value = evmBalance?.value
-        } else if (from?.name === 'EOS') {
-            value = $currentAccountBalance?.value
-        }
-        amount = ((value || 0) - (feeAmount?.value || 0))?.toFixed(4)
-    }
-
     $: readyToContinue = from && to && validAmount && $evmAccount
 
     function onContinue() {
@@ -128,7 +120,7 @@
                 }
 
                 .label-container {
-                    padding: 10px 20px; 
+                    padding: 3px 8px; 
                 }
             }
 
@@ -198,6 +190,9 @@
                     <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}
             </div>
         </div>

src/pages/transfer/index.svelte

@@ -2,7 +2,7 @@
     import {Asset, TransactResult} from 'anchor-link'
     import type {ethers} from 'ethers'
 
-    import {activeSession, evmAccount} from '~/store'
+    import {currentAccountBalance, evmAccount, activeSession} from '~/store'
 
     import {
         transferNativeToEvm,
@@ -31,6 +31,21 @@
     let transferFee: Asset | undefined
     let evmBalance: Asset | undefined
 
+    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
+        }
+
+        await estimateTransferFee(String(value))
+
+        received = ((value || 0) - (transferFee?.value || 0))?.toFixed(4)
+    }
+
     async function transfer() {
         if (!$evmAccount) {
             return (errorMessage = 'An evm session is required.')
@@ -78,8 +93,7 @@
         deposit = (parseFloat(received) + parseFloat(transferFee?.value.toFixed(4) || '')).toFixed(4)
     }
 
-    async function estimateTransferFee(): Promise<Asset | undefined> {
-        console.log({from, to, deposit})
+    async function estimateTransferFee(transferAmount?: string): Promise<Asset | undefined> {
         if (!$evmAccount) {
             errorMessage = 'An evm session is required.'
             return
@@ -94,7 +108,7 @@
                 transferFee = await getGasAmount({
                     nativeSession: $activeSession!,
                     evmAccount: $evmAccount,
-                    amount: deposit,
+                    amount: transferAmount || received,
                 })
             }
         } catch (error) {
@@ -147,7 +161,6 @@
     }
 
     function updateBalances() {
-        console.log('updateBalances')
         updateAccount($activeSession!.auth.actor, $activeSession!.chainId)
         getEvmBalance()
     }
@@ -162,10 +175,19 @@
     connectEvmWallet()
 
     $: {
-        if (from && to && deposit !== '') {
+        if (from && to && received !== '' && Number(received) > 0) {
             estimateTransferFee()
         }
     }
+
+    $: {
+        if (transferFee && received !== '') {
+            deposit = (parseFloat(received) + parseFloat(transferFee?.value.toFixed(4))).toFixed(4)
+        }
+    }
+
+    $: receivedAmount = Asset.from(Number(received), '4,EOS')
+    $: depositAmount = Asset.from(Number(deposit), '4,EOS')
 </script>
 
 <style type="scss">
@@ -183,16 +205,18 @@
             <Form
                 handleContinue={submitForm}
                 feeAmount={transferFee}
-                receivedAmount={Asset.from(Number(received), '4,EOS')}
+                {depositAmount}
+                {receivedAmount}
                 {evmBalance}
+                {useEntireBalance}
                 bind:amount={received}
                 bind:from
                 bind:to
             />
         {:else if step === 'confirm'}
             <Confirm
-                depositAmount={Asset.from(Number(deposit), '4,EOS')}
-                receivedAmount={Asset.from(Number(received), '4,EOS')}
+                {depositAmount}
+                {receivedAmount}
                 feeAmount={transferFee}
                 {from}
                 {to}