enhancement: general polishing of evm bridge

src/components/elements/button.svelte

@@ -31,6 +31,7 @@
         if (href === undefined) {
             event.preventDefault()
         }
+
         if (!formValidation || (!$formDisabled && !disabled)) {
             dispatch('action', event)
         }
@@ -195,6 +196,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
+            width: 100%;
         }
         &.loading {
             :global(.content .icon:not(.loading)) {

src/components/elements/input.svelte

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

src/components/elements/input/label.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">
+<script>
+    export let align: 'center' | 'left' | 'right' = 'center';
 </script>
 
 <style type="scss">
@@ -13,6 +14,6 @@
     }
 </style>
 
-<div class="label">
+<div class="label" style="text-align: {align};">
     <slot />
 </div>

src/components/elements/select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+
     const dispatch = createEventDispatcher();
 
     interface Option {
@@ -9,16 +10,19 @@
 
     export let value = '';
     export let options: Option[]  = [];
+    export let fluid: boolean = false;
 
     function handleChange(event: Event) {
         value = (event.target as HTMLSelectElement).value;
         dispatch('change', value);
     }
 </script>
 
-<select bind:value={value} on:change={handleChange}>
+<select class={fluid ? "fullWidth" : ""} bind:value={value} on:change={handleChange}>
     {#each options as option (option.value)}
-        <option value={option.value}>{option.label}</option>
+        <option value={option.value}>
+            {option.label}
+        </option>
     {/each}
 </select>
 
@@ -29,11 +33,15 @@
         appearance: none;
         width: 170px;
         padding: 10px 12px;
-        margin: 8px 0;
+        margin-bottom: 15px;
         border: 1px solid var(--dark-grey);
         border-radius: 12px;
         background-color: var(--main-grey);
         font-size: 12px;
-        color: var(--main-black)
+        color: var(--main-black);
+
+        &.fullWidth {
+            width: 100%;
+        }
     }
 </style>

src/lib/evm.ts

@@ -130,6 +130,8 @@ export async function transferNativeToEvm({nativeSession, evmAccount, amount}: T
             },
         })
 
+        console.log({result})
+
         return result
     } catch (error) {
         throw new Error(`Transaction failed: ${error}`)

src/pages/evm/swap.svelte

@@ -7,7 +7,6 @@
     import {activeSession, evmAccount} from '~/store'
 
     import {transferNativeToEvm, transferEvmToNative, connectEthWallet} from '~/lib/evm'
-    import type { EvmAccount } from '~/lib/evm'
 
     import Page from '~/components/layout/page.svelte'
     import Form from './swap/form.svelte'
@@ -44,19 +43,24 @@
         }
     }
 
-    function handleReset() {
+    function handleBack() {
         step = 'form'
         error = undefined
         nativeTransactResult = undefined
         evmTransactResult = undefined
+        amount = '0.0000'
     }
 
     async function submitForm() {
         if ($evmAccount) {
             return step = 'confirm'
         }
 
-        let ethWalletAccount: EvmAccount | undefined
+        connectEvmWallet()
+    }
+
+    async function connectEvmWallet() {
+        let ethWalletAccount
 
         try {
             ethWalletAccount = await connectEthWallet()
@@ -78,18 +82,29 @@
 <Page divider={false}>
     <div class="container"> 
         {#if error}
-            <Error error={error} handleReset={handleReset} />
+            <Error error={error} handleBack={handleBack} />
         {:else if step === 'form'}
-            <Form handleContinue={submitForm} bind:amount={amount} bind:transferOption={transferOption} />
+            <Form
+                handleContinue={submitForm}
+                connectEvmWallet={connectEvmWallet}
+                bind:amount={amount}
+                bind:transferOption={transferOption}
+            />
         {:else if step === 'confirm'}
             <Confirm
                 amount={amount}
-                from={transferOption === 'nativeToEvm' ? 'EOS (Native)' : 'EOS (EVM)'}
-                to={transferOption === 'nativeToEvm' ? 'EOS (EVM)' : 'EOS (Native)'}
+                from={transferOption === 'nativeToEvm' ? 'Native' : 'EVM'}
+                to={transferOption === 'nativeToEvm' ? 'EVM' : 'Native'}
                 handleConfirm={transfer}
+                handleBack={handleBack}
             />
         {:else if step === 'success' && nativeTransactResult || evmTransactResult}
-            <Success transferOption={transferOption} nativeTransactResult={nativeTransactResult} evmTransactResult={evmTransactResult} />
+            <Success 
+                transferOption={transferOption}
+                nativeTransactResult={nativeTransactResult}
+                evmTransactResult={evmTransactResult}
+                handleBack={handleBack}
+            />
         {/if}
     </div>
 </Page>

src/pages/evm/swap/confirm.svelte

@@ -1,11 +1,16 @@
 <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'
+
+
     export let from: string
     export let to: string
     export let amount: string
     export let handleConfirm: () => void
+    export let handleBack: () => void
 </script>
 
 <div class="container">
@@ -16,48 +21,70 @@
 
     <table>
         <tr>
-            <td>From</td>
-            <td>{from}</td>
+            <td>From {from}</td>
+            <td>{from === 'EVM' ? $evmAccount?.address : $activeSession?.auth.actor}</td>
         </tr>
         <tr>
-            <td>To</td>
-            <td>{to}</td>
+            <td>To {to}</td>
+            <td>{from === 'Native' ? $evmAccount?.address : $activeSession?.auth.actor}</td>
         </tr>
         <tr>
             <td>Amount</td>
             <td>{Asset.from(Number(amount), "4,EOS")}</td>
         </tr>
     </table>
-    <Button on:action={handleConfirm}>
-        Sign Transaction
-    </Button>
+    <div class="bottom-section">
+        <Button fluid style="primary" on:action={handleConfirm}>
+            Sign Transaction
+        </Button>
+        <br />
+        <Button fluid on:action={handleBack}>
+            Cancel
+        </Button>
+    </div>
 </div>
 
-<style>
+<style type="scss">
 .container {
     max-width: 500px;
     margin: auto;
     padding: 3em;
     background-color: transparent;
     text-align: center;
     border: 2px solid var(--main-grey);
-}
 
-.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: 1.5em;
-    border-top: 1px solid #ddd;
-}
+        tr {
+            display: flex;
+            justify-content: space-between;
+            font-size: 11px;
+            border-top: 1px solid #ddd;
 
-table tr:first-child td {
-    border: none;
+
+            &:first-child {
+                border: none;
+            }
+
+            td {
+                padding: 1.5em;
+            }
+
+        }
+    }
+
+
+    .bottom-section {
+        max-width: 300px;
+        margin: auto;
+    }
 }
+
+
 </style>

src/pages/evm/swap/error.svelte

@@ -2,7 +2,7 @@
     import Button from "~/components/elements/button.svelte"
 
     export let error: string
-    export let handleReset: () => void
+    export let handleBack: () => void
 </script>
 
 <div class="container">
@@ -17,7 +17,7 @@
         </tr>
     </table>
 
-    <Button on:click={handleReset}>
+    <Button on:click={handleBack}>
         Retry
     </Button>
 </div>