From b23218a0d0de221fe823b951f17d5988c875678d Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Thu, 29 Jun 2023 19:29:32 -0400
Subject: [PATCH] enhancement: general polishing of evm bridge

---
 src/components/elements/button.svelte      |   2 +
 src/components/elements/input.svelte       |   2 +-
 src/components/elements/input/label.svelte |   5 +-
 src/components/elements/select.svelte      |  16 ++-
 src/lib/evm.ts                             |   2 +
 src/pages/evm/swap.svelte                  |  31 ++++--
 src/pages/evm/swap/confirm.svelte          |  71 +++++++++-----
 src/pages/evm/swap/error.svelte            |   4 +-
 src/pages/evm/swap/form.svelte             | 108 +++++++++++++--------
 src/pages/evm/swap/success.svelte          |  52 +++++-----
 src/store.ts                               |   2 +-
 11 files changed, 188 insertions(+), 107 deletions(-)

diff --git a/src/components/elements/button.svelte b/src/components/elements/button.svelte
index 7a3df3a5..71fde25b 100644
--- a/src/components/elements/button.svelte
+++ b/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)) {
diff --git a/src/components/elements/input.svelte b/src/components/elements/input.svelte
index d759e416..030f5447 100644
--- a/src/components/elements/input.svelte
+++ b/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) {
diff --git a/src/components/elements/input/label.svelte b/src/components/elements/input/label.svelte
index b735eadf..cbc0a645 100644
--- a/src/components/elements/input/label.svelte
+++ b/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>
diff --git a/src/components/elements/select.svelte b/src/components/elements/select.svelte
index 9bd0ff30..554d847e 100644
--- a/src/components/elements/select.svelte
+++ b/src/components/elements/select.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+
     const dispatch = createEventDispatcher();
 
     interface Option {
@@ -9,6 +10,7 @@
 
     export let value = '';
     export let options: Option[]  = [];
+    export let fluid: boolean = false;
 
     function handleChange(event: Event) {
         value = (event.target as HTMLSelectElement).value;
@@ -16,9 +18,11 @@
     }
 </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>
diff --git a/src/lib/evm.ts b/src/lib/evm.ts
index c3c6c84d..24f268cc 100644
--- a/src/lib/evm.ts
+++ b/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}`)
diff --git a/src/pages/evm/swap.svelte b/src/pages/evm/swap.svelte
index 9f1bc27e..8afde8a5 100644
--- a/src/pages/evm/swap.svelte
+++ b/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,11 +43,12 @@
         }
     }
 
-    function handleReset() {
+    function handleBack() {
         step = 'form'
         error = undefined
         nativeTransactResult = undefined
         evmTransactResult = undefined
+        amount = '0.0000'
     }
 
     async function submitForm() {
@@ -56,7 +56,11 @@
             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>
diff --git a/src/pages/evm/swap/confirm.svelte b/src/pages/evm/swap/confirm.svelte
index f9b0fdae..033c40d2 100644
--- a/src/pages/evm/swap/confirm.svelte
+++ b/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,24 +21,30 @@
 
     <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;
@@ -41,23 +52,39 @@
     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>
diff --git a/src/pages/evm/swap/error.svelte b/src/pages/evm/swap/error.svelte
index 2c1c2f94..49cb4742 100644
--- a/src/pages/evm/swap/error.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/evm/swap/form.svelte b/src/pages/evm/swap/form.svelte
index 77f1c01c..912e10ee 100644
--- a/src/pages/evm/swap/form.svelte
+++ b/src/pages/evm/swap/form.svelte
@@ -1,33 +1,48 @@
 <script lang="ts">
-    import { currentAccountBalance } from '~/store'
+    import { Asset as CoreAsset } from '@greymass/eosio'
+    import { currentAccountBalance, evmAccount } from '~/store'
 
     import Label from '~/components/elements/input/label.svelte'
-    import Input from '~/components/elements/input.svelte'
     import Form from '~/components/elements/form.svelte'
     import Button from '~/components/elements/button.svelte'
     import Select from '~/components/elements/select.svelte'
-    import {evmAccount} from '~/store'
+    import Asset from '~/components/elements/input/asset.svelte'
 
     export let handleContinue: () => void
-    export let amount: string
+    export let connectEvmWallet: () => void
+    export let amount: string = '0.0001'
     export let transferOption: string = 'nativeToEvm'
 
-    let evmBalance: string
+    let evmBalance: CoreAsset | undefined
     let validAmount = false
 
-    function handleChange(event: CustomEvent) {
+    function handleSelectChange(event: CustomEvent) {
         transferOption = event.detail;
+
+        if (!$evmAccount) {
+            connectEvmWallet()
+        }
+    }
+
+    function useEntireBalance() {
+        if (transferOption === 'nativeToEvm') {
+            amount = $currentAccountBalance?.value.toFixed(4) || '0.0000'
+        } else {
+            amount = evmBalance?.value.toFixed(4) || '0.0000'
+        }
+    }
+
+    function onContinue() {
+        if (validAmount) {
+            handleContinue()
+        }
     }
     
     $: {
         $evmAccount?.getBalance().then((balance) => {
-            evmBalance = String(balance)
+            evmBalance = CoreAsset.from(Number(balance.split(' ')[0]), '4,EOS')
         })
     }
-
-    $: {
-       validAmount = Number(amount) > 0
-    }
         
     $: nativeToEVMLabel = `Native (${$currentAccountBalance})`
     $: evmToNativeLabel = `EVM (${evmBalance ? evmBalance : 'not connected'})`
@@ -41,39 +56,44 @@
         text-align: center;
 
         .top-section {
-            padding: 20px;
+            padding: 10px;
+
+            h1 {
+                margin-bottom: 10px;
+            }
         }
         .middle-section {
             display: flex;
             justify-content: space-between;
 
             .left-section, .right-section {
-                width: 50%;  /* or set a flex-basis instead */
-            }
+                border: 2px solid var(--main-grey);
+                border-radius: 10px;
+                width: 44%;  /* or set a flex-basis instead */
+                margin: 3%;
+                padding: 20px;
 
-            .left-section {
-                border-right: 1px solid #ddd;
+                button {
+                    cursor: pointer;
+                    color: var(--main-blue);
+                    font-size: 0.7em;
+                    margin: 10px 15px;
+                    display: block;
+                    float: right;
+                    font-weight: bold;
+                    text-transform: uppercase;
+                    background: none;
+                    border: none;
+                    padding: 0;
+                }
             }
+            
         }
 
         .bottom-section {
             padding: 30px;
-        }
-
-        form {
-            select {
-                -webkit-appearance: none;  /* Remove default select dropdown indicator */
-                -moz-appearance: none;
-                appearance: none;
-                width: 170px;
-                padding: 10px 12px;
-                margin: 8px 0;
-                border: 1px solid var(--dark-grey);
-                border-radius: 12px;
-                background-color: var(--main-grey);
-                font-size: 12px;
-                color: var(--main-black)
-            }
+            max-width: 300px;
+            margin: auto;
         }
     }
 </style>
@@ -86,26 +106,36 @@
     <Form>
         <div class="middle-section">
             <div class="left-section">
-                <Label>From</Label>
+                <Label align="left">From</Label>
                 <Select
                     bind:value={transferOption}
-                    on:change={handleChange}
+                    on:change={handleSelectChange}
                     options={[ {value: 'nativeToEvm', label: nativeToEVMLabel}, {value: 'evmToNative', label: evmToNativeLabel}]}
+                    fluid
+                />
+                <Label align="left">Amount</Label>
+                <Asset
+                    fluid
+                    balance={transferOption === 'nativeToEvm' ? $currentAccountBalance : evmBalance}
+                    bind:valid={validAmount}
+                    bind:value={amount}
                 />
-                <Label>Amount</Label>
-                <Input bind:value={amount} />
+                <button on:click={useEntireBalance}>
+                    Entire Balance
+                </button>
             </div>
             <div class="right-section">
-                <Label>To</Label>
+                <Label align="left">To</Label>
                 <Select
                     bind:value={transferOption}
-                    on:change={handleChange}
+                    on:change={handleSelectChange}
                     options={[ {value: 'nativeToEvm', label: evmToNativeLabel}, {value: 'evmToNative', label: nativeToEVMLabel}]}
+                    fluid
                 />
             </div>
         </div>
         <div class="bottom-section">  
-            <Button disabled={!validAmount} on:action={handleContinue}>Continue</Button>
+            <Button fluid style="primary" disabled={!validAmount} on:action={onContinue}>Continue</Button>
         </div>
     </Form>
 </div>
diff --git a/src/pages/evm/swap/success.svelte b/src/pages/evm/swap/success.svelte
index 50db4e2c..ce1709bf 100644
--- a/src/pages/evm/swap/success.svelte
+++ b/src/pages/evm/swap/success.svelte
@@ -9,6 +9,7 @@
     export let transferOption: string
     export let nativeTransactResult: TransactResult | undefined
     export let evmTransactResult: ethers.providers.TransactionResponse | undefined
+    export let handleBack: () => void
 </script>
 
 
@@ -27,7 +28,7 @@
             </tr>
             <tr>
                 <td>
-                    <Button>
+                    <Button style="primary" on:action={handleBack}>
                         New Transfer
                     </Button>
                 </td>
@@ -42,35 +43,30 @@
 {/if}
 
 <style>
-.container {
-    font-family: Arial, sans-serif;
-    max-width: 500px;
-    margin: auto;
-    padding: 3em;
-    background-color: transparent;
-    text-align: center;
-}
-
-.top-section {
-    margin-bottom: 2em;
-}
+    .container {
+        font-family: Arial, sans-serif;
+        max-width: 500px;
+        margin: auto;
+        padding: 3em;
+        background-color: transparent;
+        text-align: center;
+    }
 
-table {
-    width: 100%;
-    margin-bottom: 2em;
-}
+    .top-section {
+        margin-bottom: 2em;
+    }
 
-table td {
-    padding: 1em;
-    border-bottom: 1px solid #ddd;
-}
+    table {
+        width: 100%;
+        margin-bottom: 2em;
+    }
 
-table tr:first-child td {
-    border-top: 1px solid #ddd;
-}
+    table td {
+        padding: 1em;
+        border-bottom: 1px solid #ddd;
+    }
 
-Button {
-    display: block;
-    margin: 1em auto;
-}
+    table tr:first-child td {
+        border-top: 1px solid #ddd;
+    }
 </style>
diff --git a/src/store.ts b/src/store.ts
index d04a3cfc..731f0842 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -11,7 +11,7 @@ import type {EvmAccount} from './lib/evm'
 /** Set to true when app initialization completes. */
 export const appReady = writable<boolean>(false)
 
-/** Active anchor link session, aka logged in user. */
+/** Active anchor link seactiveSessionssion, aka logged in user. */
 export const activeSession = writable<LinkSession | undefined>(undefined)
 
 /** Active EVM account, aka logged in user. */