From 01e3bcbe14ec72659715c6ede163bcd269559930 Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Mon, 14 Aug 2023 10:30:02 -0400
Subject: [PATCH] enhancement: displaying fee amount on confirmation page

---
 src/lib/evm.ts                    | 22 ++++++++++++++++++++--
 src/pages/transfer/confirm.svelte | 16 ++++++++++++----
 src/pages/transfer/index.svelte   | 19 +++++++++++++++----
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/lib/evm.ts b/src/lib/evm.ts
index f03f40c1..b9ded41a 100644
--- a/src/lib/evm.ts
+++ b/src/lib/evm.ts
@@ -128,17 +128,35 @@ export async function transferNativeToEvm({nativeSession, evmAccount, amount}: T
     })
 }
 
-export async function transferEvmToNative({nativeSession, evmAccount, amount}: TransferParams) {
+export async function estimateGas({nativeSession, evmAccount, amount}: TransferParams) {
     const targetEvmAddress = convertToEvmAddress(String(nativeSession.auth.actor))
 
+    const gasPrice = await provider.getGasPrice()
+
     const gas = await provider.estimateGas({
         from: evmAccount.address,
         to: targetEvmAddress,
         value: ethers.utils.parseEther(amount),
-        gasPrice: await provider.getGasPrice(),
+        gasPrice,
         data: ethers.utils.formatBytes32String(''),
     })
 
+    return {gas, gasPrice}
+}
+
+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})
+
     return evmAccount.sendTransaction({
         from: evmAccount.address,
         to: targetEvmAddress,
diff --git a/src/pages/transfer/confirm.svelte b/src/pages/transfer/confirm.svelte
index 5c614b0b..4be1fa80 100644
--- a/src/pages/transfer/confirm.svelte
+++ b/src/pages/transfer/confirm.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import {Asset} from '@greymass/eosio'
-    import {getAddress} from 'ethers/lib/utils'
     import Button from '~/components/elements/button.svelte'
 
     import {evmAccount, activeSession} from '~/store'
@@ -8,7 +7,8 @@
 
     export let from: Token
     export let to: Token
-    export let amount: string
+    export let depositAmount: Asset
+    export let feeAmount: Asset | undefined
     export let handleConfirm: () => void
     export let handleBack: () => void
 </script>
@@ -85,8 +85,16 @@
             <td>{from?.name === 'EOS' ? $evmAccount?.address : $activeSession?.auth.actor}</td>
         </tr>
         <tr>
-            <td>Amount</td>
-            <td>{Asset.from(Number(amount), '4,EOS')}</td>
+            <td>Deposit Amount</td>
+            <td>{depositAmount}</td>
+        </tr>
+        <tr>
+            <td>Fee Amount</td>
+            <td>{feeAmount}</td>
+        </tr>
+        <tr>
+            <td>Received Amount</td>
+            <td>{feeAmount ? Asset.from(depositAmount.value - feeAmount.value, '4,EOS') : '0 EOS'}</td>
         </tr>
     </table>
     <div class="bottom-section">
diff --git a/src/pages/transfer/index.svelte b/src/pages/transfer/index.svelte
index 83131b6e..e24ca483 100644
--- a/src/pages/transfer/index.svelte
+++ b/src/pages/transfer/index.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import type {TransactResult} from 'anchor-link'
+    import {Asset, TransactResult} from 'anchor-link'
     import type {ethers} from 'ethers'
 
     import {activeSession, evmAccount} from '~/store'
 
-    import {transferNativeToEvm, transferEvmToNative, connectEthWallet} from '~/lib/evm'
+    import {transferNativeToEvm, transferEvmToNative, connectEthWallet, estimateGas, getGasAmount} from '~/lib/evm'
 
     import Page from '~/components/layout/page.svelte'
     import Form from './form.svelte'
@@ -20,6 +20,7 @@
     let to: Token | undefined
     let nativeTransactResult: TransactResult | undefined
     let evmTransactResult: ethers.providers.TransactionResponse | undefined
+    let transferFee: Asset | undefined
 
     async function transfer() {
         if (!$evmAccount) {
@@ -58,7 +59,17 @@
     }
 
     async function submitForm() {
+        if (!$evmAccount) {
+            return (errorMessage = 'An evm session is required.')
+        }
+        
         step = 'confirm'
+
+        transferFee = await getGasAmount({
+            nativeSession: $activeSession!,
+            evmAccount: $evmAccount,
+            amount,
+        })
     }
 
     let connectInterval: number | undefined
@@ -109,10 +120,10 @@
     <div class="container">
         {#if errorMessage}
             <Error error={errorMessage} {handleBack} />
-        {:else if step === 'form' || !from || !to}
+        {:else if step === 'form' || !from || !to || !amount}
             <Form handleContinue={submitForm} bind:amount bind:from bind:to />
         {:else if step === 'confirm'}
-            <Confirm {amount} {from} {to} handleConfirm={transfer} {handleBack} />
+            <Confirm depositAmount={Asset.from(Number(amount), '4,EOS')} feeAmount={transferFee} {from} {to} handleConfirm={transfer} {handleBack} />
         {:else if (step === 'success' && nativeTransactResult) || evmTransactResult}
             <Success {from} {to} {nativeTransactResult} {evmTransactResult} {handleBack} />
         {/if}