enhancement: displaying fee amount on confirmation page

greymass · Aug 14, 2023 · 01e3bcb · 01e3bcb
1 parent e6be13e
commit 01e3bcb
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 10 deletions.
diff --git 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
@@ -1,14 +1,14 @@
 <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'
     import type {Token} from '~/stores/tokens'
 
     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
@@ -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}