enhancement: polished the error page

src/components/elements/input.svelte

@@ -29,7 +29,7 @@
     const form: Form = getContext('form')
 
     const setInitialFormValidation = async () => {
-        form.setInput(name, isValid ? false : true)
+        form.setInput(name, isValid ? await isValid(value) : true)
     }
 
     if (form) {

src/components/elements/input/asset.svelte

@@ -33,7 +33,7 @@
                 validateNonZero(value, symbol)
             }
             if (balance) {
-                // validateBalance(value, balance)
+                validateBalance(value, balance)
             }
         } catch (errorObject) {
             errorMessage = errorObject.message

src/lib/evm.ts

@@ -118,50 +118,35 @@ export async function transferNativeToEvm({nativeSession, evmAccount, amount}: T
         memo: evmAccount.address,
     })
 
-    let result
-
-    try {
-        result = await nativeSession.transact({
-            action: {
-                authorization: [nativeSession.auth],
-                account: Name.from('eosio.token'),
-                name: Name.from('transfer'),
-                data: action,
-            },
-        })
-
-        console.log({result})
-
-        return result
-    } catch (error) {
-        throw new Error(`Transaction failed: ${error}`)
-    }
+    return nativeSession.transact({
+        action: {
+            authorization: [nativeSession.auth],
+            account: Name.from('eosio.token'),
+            name: Name.from('transfer'),
+            data: action,
+        },
+    })
 }
 
 export async function transferEvmToNative({nativeSession, evmAccount, amount}: TransferParams) {
-    try {
-        const targetEvmAddress = convertToEvmAddress(String(nativeSession.auth.actor))
-
-        const gas = await provider.estimateGas({
-            from: evmAccount.address,
-            to: targetEvmAddress,
-            value: ethers.utils.parseEther(amount),
-            gasPrice: await provider.getGasPrice(),
-            data: ethers.utils.formatBytes32String(''),
-        })
-        const result = await evmAccount.sendTransaction({
-            from: evmAccount.address,
-            to: targetEvmAddress,
-            value: ethers.utils.parseEther(amount),
-            gasPrice: await provider.getGasPrice(),
-            gasLimit: gas,
-            data: ethers.utils.formatBytes32String(''),
-        })
+    const targetEvmAddress = convertToEvmAddress(String(nativeSession.auth.actor))
+
+    const gas = await provider.estimateGas({
+        from: evmAccount.address,
+        to: targetEvmAddress,
+        value: ethers.utils.parseEther(amount),
+        gasPrice: await provider.getGasPrice(),
+        data: ethers.utils.formatBytes32String(''),
+    })
 
-        return result
-    } catch (err) {
-        console.error(err)
-    }
+    return evmAccount.sendTransaction({
+        from: evmAccount.address,
+        to: targetEvmAddress,
+        value: ethers.utils.parseEther(amount),
+        gasPrice: await provider.getGasPrice(),
+        gasLimit: gas,
+        data: ethers.utils.formatBytes32String(''),
+    })
 }
 
 async function switchNetwork() {

src/pages/evm/swap.svelte

@@ -13,15 +13,15 @@
     import Error from './swap/error.svelte'
 
     let step = 'form'
-    let amount: string = '0.0000'
-    let error: string | undefined
+    let amount: string = ''
+    let errorMessage: string | undefined
     let transferOption: 'nativeToEvm' | 'evmToNative' = 'nativeToEvm'
     let nativeTransactResult: TransactResult | undefined
     let evmTransactResult: ethers.providers.TransactionResponse | undefined
 
     async function transfer() {
         if (!$evmAccount) {
-            return (error = 'An evm session is required.')
+            return (errorMessage = 'An evm session is required.')
         }
 
         try {
@@ -39,22 +39,20 @@
                 })
             }
         } catch (error) {
-            return (error = `Could not transfer. Error: ${error.message}`)
+            return (errorMessage = `Could not transfer. Error: ${
+                JSON.stringify(error) === '{}' ? error.message : JSON.stringify(error)
+            }`)
         }
 
-        if (nativeTransactResult || evmTransactResult) {
-            step = 'success'
-        } else {
-            error = 'Could not transfer.'
-        }
+        step = 'success'
     }
 
     function handleBack() {
         step = 'form'
-        error = undefined
+        errorMessage = undefined
         nativeTransactResult = undefined
         evmTransactResult = undefined
-        amount = '0.0000'
+        amount = ''
     }
 
     async function submitForm() {
@@ -71,7 +69,7 @@
         try {
             ethWalletAccount = await connectEthWallet()
         } catch (e) {
-            return (error = `Could not connect to ETH wallet. Error: ${e.message}`)
+            return (errorMessage = `Could not connect to ETH wallet. Error: ${e.message}`)
         }
 
         evmAccount.set(ethWalletAccount)
@@ -87,8 +85,8 @@
 
 <Page divider={false}>
     <div class="container">
-        {#if error}
-            <Error {error} {handleBack} />
+        {#if errorMessage}
+            <Error error={errorMessage} {handleBack} />
         {:else if step === 'form'}
             <Form handleContinue={submitForm} {connectEvmWallet} bind:amount bind:transferOption />
         {:else if step === 'confirm'}

src/pages/evm/swap/error.svelte

@@ -5,17 +5,55 @@
     export let handleBack: () => void
 </script>
 
+<style type="scss">
+    .container {
+        width: 100%;
+        margin: 0 auto;
+        padding: 1em;
+        text-align: center;
+
+        .top-section {
+            padding: 10px;
+
+            h1 {
+                margin-bottom: 10px;
+                color: var(--main-red);
+            }
+        }
+
+        .middle-section {
+            border: 2px solid var(--main-grey);
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 2em;
+
+            p {
+                width: 100%;
+                padding: 5px;
+                text-align: left;
+            }
+        }
+
+        .bottom-section {
+            padding: 30px;
+            max-width: 300px;
+            margin: auto;
+        }
+    }
+</style>
+
 <div class="container">
     <div class="top-section">
         <h1>Transfer Failed</h1>
     </div>
 
-    <table>
-        <tr>
-            <td>Error</td>
-            <td>{error}</td>
-        </tr>
-    </table>
+    <div class="middle-section">
+        <p>
+            {error}
+        </p>
+    </div>
 
-    <Button on:click={handleBack}>Retry</Button>
+    <div class="bottom-section">
+        <Button fluid style="primary" on:action={handleBack}>Retry</Button>
+    </div>
 </div>

src/pages/evm/swap/form.svelte

@@ -19,6 +19,8 @@
     function handleSelectChange(event: CustomEvent) {
         transferOption = event.detail
 
+        amount = ''
+
         if (!$evmAccount) {
             connectEvmWallet()
         }
@@ -119,6 +121,7 @@
                 <Label align="left">Amount</Label>
                 <Asset
                     fluid
+                    placeholder="0.0000"
                     balance={transferOption === 'nativeToEvm' ? $currentAccountBalance : evmBalance}
                     bind:valid={validAmount}
                     bind:value={amount}

src/pages/evm/swap/success.svelte

@@ -10,34 +10,41 @@
     export let nativeTransactResult: TransactResult | undefined
     export let evmTransactResult: ethers.providers.TransactionResponse | undefined
     export let handleBack: () => void
+
+    const blockExplorerUrl = 'https://explorer.evm.eosnetwork.com/tx/'
 </script>
 
-<style>
+<style type="scss">
     .container {
         font-family: Arial, sans-serif;
-        max-width: 500px;
         margin: auto;
         padding: 3em;
         background-color: transparent;
         text-align: center;
-    }
 
-    .top-section {
-        margin-bottom: 2em;
-    }
+        .top-section {
+            margin-bottom: 2em;
+        }
 
-    table {
-        width: 100%;
-        margin-bottom: 2em;
-    }
+        table {
+            width: 100%;
+            margin-bottom: 2em;
 
-    table td {
-        padding: 1em;
-        border-bottom: 1px solid #ddd;
-    }
+            tr:first-child td {
+                border-top: 1px solid #ddd;
+            }
 
-    table tr:first-child td {
-        border-top: 1px solid #ddd;
+            tr td {
+                padding: 1em;
+                border-bottom: 1px solid #ddd;
+            }
+        }
+
+        .bottom-section {
+            display: flex;
+            justify-content: center;
+            gap: 1em;
+        }
     }
 </style>
 
@@ -54,14 +61,13 @@
                 <td>Transaction ID</td>
                 <td>{evmTransactResult?.hash}</td>
             </tr>
-            <tr>
-                <td>
-                    <Button style="primary" on:action={handleBack}>New Transfer</Button>
-                </td>
-                <td>
-                    <Button>View on Block Explorer</Button>
-                </td>
-            </tr>
         </table>
+
+        <div class="bottom-section">
+            <Button style="primary" on:action={handleBack}>New Transfer</Button>
+            <Button on:action={() => window.open(`${blockExplorerUrl}${evmTransactResult?.hash}`)}
+                >View on Block Explorer</Button
+            >
+        </div>
     </div>
 {/if}