From 6be75d7b99b20b42f17daeac638490589ea22a0c Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Fri, 30 Jun 2023 12:05:12 -0400
Subject: [PATCH] style: linted

---
 src/components/elements/input/asset.svelte |   2 +-
 src/components/elements/input/label.svelte |   2 +-
 src/components/elements/select.svelte      |  34 +++----
 src/pages/evm/swap.svelte                  |  52 +++++------
 src/pages/evm/swap/confirm.svelte          | 102 ++++++++++-----------
 src/pages/evm/swap/error.svelte            |   8 +-
 src/pages/evm/swap/form.svelte             |  36 +++++---
 src/pages/evm/swap/success.svelte          |  65 ++++++-------
 8 files changed, 143 insertions(+), 158 deletions(-)

diff --git a/src/components/elements/input/asset.svelte b/src/components/elements/input/asset.svelte
index bb551e9a..054ab462 100644
--- a/src/components/elements/input/asset.svelte
+++ b/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
diff --git a/src/components/elements/input/label.svelte b/src/components/elements/input/label.svelte
index cbc0a645..1f16ad40 100644
--- a/src/components/elements/input/label.svelte
+++ b/src/components/elements/input/label.svelte
@@ -1,5 +1,5 @@
 <script>
-    export let align: 'center' | 'left' | 'right' = 'center';
+    export let align: 'center' | 'left' | 'right' = 'center'
 </script>
 
 <style type="scss">
diff --git a/src/components/elements/select.svelte b/src/components/elements/select.svelte
index 554d847e..8662fd7b 100644
--- a/src/components/elements/select.svelte
+++ b/src/components/elements/select.svelte
@@ -1,31 +1,23 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import {createEventDispatcher} from 'svelte'
 
-    const dispatch = createEventDispatcher();
+    const dispatch = createEventDispatcher()
 
     interface Option {
-        value: string;
-        label: string;
+        value: string
+        label: string
     }
 
-    export let value = '';
-    export let options: Option[]  = [];
-    export let fluid: boolean = false;
+    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);
+        value = (event.target as HTMLSelectElement).value
+        dispatch('change', value)
     }
 </script>
 
-<select class={fluid ? "fullWidth" : ""} bind:value={value} on:change={handleChange}>
-    {#each options as option (option.value)}
-        <option value={option.value}>
-            {option.label}
-        </option>
-    {/each}
-</select>
-
 <style type="scss">
     select {
         -webkit-appearance: none;
@@ -45,3 +37,11 @@
         }
     }
 </style>
+
+<select class={fluid ? 'fullWidth' : ''} bind:value on:change={handleChange}>
+    {#each options as option (option.value)}
+        <option value={option.value}>
+            {option.label}
+        </option>
+    {/each}
+</select>
diff --git a/src/pages/evm/swap.svelte b/src/pages/evm/swap.svelte
index 8afde8a5..1a8e2a76 100644
--- a/src/pages/evm/swap.svelte
+++ b/src/pages/evm/swap.svelte
@@ -1,8 +1,6 @@
-
-
 <script lang="ts">
-    import type { TransactResult } from 'anchor-link'
-    import type { ethers } from 'ethers'
+    import type {TransactResult} from 'anchor-link'
+    import type {ethers} from 'ethers'
 
     import {activeSession, evmAccount} from '~/store'
 
@@ -23,17 +21,25 @@
 
     async function transfer() {
         if (!$evmAccount) {
-            return error = 'An evm session is required.'
+            return (error = 'An evm session is required.')
         }
 
         try {
             if (transferOption === 'nativeToEvm') {
-                nativeTransactResult = await transferNativeToEvm({ nativeSession: $activeSession!, evmAccount: $evmAccount, amount })
+                nativeTransactResult = await transferNativeToEvm({
+                    nativeSession: $activeSession!,
+                    evmAccount: $evmAccount,
+                    amount,
+                })
             } else {
-                evmTransactResult = await transferEvmToNative({ nativeSession: $activeSession!, evmAccount: $evmAccount, amount })
+                evmTransactResult = await transferEvmToNative({
+                    nativeSession: $activeSession!,
+                    evmAccount: $evmAccount,
+                    amount,
+                })
             }
         } catch (error) {
-            return error = `Could not transfer. Error: ${error.message}`
+            return (error = `Could not transfer. Error: ${error.message}`)
         }
 
         if (nativeTransactResult || evmTransactResult) {
@@ -53,7 +59,7 @@
 
     async function submitForm() {
         if ($evmAccount) {
-            return step = 'confirm'
+            return (step = 'confirm')
         }
 
         connectEvmWallet()
@@ -65,7 +71,7 @@
         try {
             ethWalletAccount = await connectEthWallet()
         } catch (e) {
-            return error = `Could not connect to ETH wallet. Error: ${e.message}`
+            return (error = `Could not connect to ETH wallet. Error: ${e.message}`)
         }
 
         evmAccount.set(ethWalletAccount)
@@ -73,38 +79,28 @@
 </script>
 
 <style type="scss">
-     div {
+    div {
         max-width: 700px;
         margin: 0 auto;
     }
 </style>
 
 <Page divider={false}>
-    <div class="container"> 
+    <div class="container">
         {#if error}
-            <Error error={error} handleBack={handleBack} />
+            <Error {error} {handleBack} />
         {:else if step === 'form'}
-            <Form
-                handleContinue={submitForm}
-                connectEvmWallet={connectEvmWallet}
-                bind:amount={amount}
-                bind:transferOption={transferOption}
-            />
+            <Form handleContinue={submitForm} {connectEvmWallet} bind:amount bind:transferOption />
         {:else if step === 'confirm'}
             <Confirm
-                amount={amount}
+                {amount}
                 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}
-                handleBack={handleBack}
+                {handleBack}
             />
+        {:else if (step === 'success' && nativeTransactResult) || evmTransactResult}
+            <Success {transferOption} {nativeTransactResult} {evmTransactResult} {handleBack} />
         {/if}
     </div>
 </Page>
diff --git a/src/pages/evm/swap/confirm.svelte b/src/pages/evm/swap/confirm.svelte
index 033c40d2..a6d0288d 100644
--- a/src/pages/evm/swap/confirm.svelte
+++ b/src/pages/evm/swap/confirm.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-    import { Asset } from "@greymass/eosio"
-    import { getAddress } from "ethers/lib/utils"
-    import Button from "~/components/elements/button.svelte"
+    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
@@ -13,6 +12,46 @@
     export let handleBack: () => void
 </script>
 
+<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;
+        }
+
+        table {
+            width: 100%;
+            margin-bottom: 2em;
+
+            tr {
+                display: flex;
+                justify-content: space-between;
+                font-size: 11px;
+                border-top: 1px solid #ddd;
+
+                &:first-child {
+                    border: none;
+                }
+
+                td {
+                    padding: 1.5em;
+                }
+            }
+        }
+
+        .bottom-section {
+            max-width: 300px;
+            margin: auto;
+        }
+    }
+</style>
+
 <div class="container">
     <div class="top-section">
         <h1>Transfer</h1>
@@ -30,61 +69,12 @@
         </tr>
         <tr>
             <td>Amount</td>
-            <td>{Asset.from(Number(amount), "4,EOS")}</td>
+            <td>{Asset.from(Number(amount), '4,EOS')}</td>
         </tr>
     </table>
     <div class="bottom-section">
-        <Button fluid style="primary" on:action={handleConfirm}>
-            Sign Transaction
-        </Button>
+        <Button fluid style="primary" on:action={handleConfirm}>Sign Transaction</Button>
         <br />
-        <Button fluid on:action={handleBack}>
-            Cancel
-        </Button>
+        <Button fluid on:action={handleBack}>Cancel</Button>
     </div>
 </div>
-
-<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;
-    }
-
-    table {
-        width: 100%;
-        margin-bottom: 2em;
-
-        tr {
-            display: flex;
-            justify-content: space-between;
-            font-size: 11px;
-            border-top: 1px solid #ddd;
-
-
-            &: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 49cb4742..6620f82a 100644
--- a/src/pages/evm/swap/error.svelte
+++ b/src/pages/evm/swap/error.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Button from "~/components/elements/button.svelte"
+    import Button from '~/components/elements/button.svelte'
 
     export let error: string
     export let handleBack: () => void
@@ -17,7 +17,5 @@
         </tr>
     </table>
 
-    <Button on:click={handleBack}>
-        Retry
-    </Button>
-</div>
\ No newline at end of file
+    <Button on:click={handleBack}>Retry</Button>
+</div>
diff --git a/src/pages/evm/swap/form.svelte b/src/pages/evm/swap/form.svelte
index 912e10ee..dbcedfa2 100644
--- a/src/pages/evm/swap/form.svelte
+++ b/src/pages/evm/swap/form.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Asset as CoreAsset } from '@greymass/eosio'
-    import { currentAccountBalance, evmAccount } from '~/store'
+    import {Asset as CoreAsset} from '@greymass/eosio'
+    import {currentAccountBalance, evmAccount} from '~/store'
 
     import Label from '~/components/elements/input/label.svelte'
     import Form from '~/components/elements/form.svelte'
@@ -17,7 +17,7 @@
     let validAmount = false
 
     function handleSelectChange(event: CustomEvent) {
-        transferOption = event.detail;
+        transferOption = event.detail
 
         if (!$evmAccount) {
             connectEvmWallet()
@@ -37,13 +37,13 @@
             handleContinue()
         }
     }
-    
+
     $: {
         $evmAccount?.getBalance().then((balance) => {
             evmBalance = CoreAsset.from(Number(balance.split(' ')[0]), '4,EOS')
         })
     }
-        
+
     $: nativeToEVMLabel = `Native (${$currentAccountBalance})`
     $: evmToNativeLabel = `EVM (${evmBalance ? evmBalance : 'not connected'})`
 </script>
@@ -66,10 +66,11 @@
             display: flex;
             justify-content: space-between;
 
-            .left-section, .right-section {
+            .left-section,
+            .right-section {
                 border: 2px solid var(--main-grey);
                 border-radius: 10px;
-                width: 44%;  /* or set a flex-basis instead */
+                width: 44%; /* or set a flex-basis instead */
                 margin: 3%;
                 padding: 20px;
 
@@ -87,7 +88,6 @@
                     padding: 0;
                 }
             }
-            
         }
 
         .bottom-section {
@@ -110,7 +110,10 @@
                 <Select
                     bind:value={transferOption}
                     on:change={handleSelectChange}
-                    options={[ {value: 'nativeToEvm', label: nativeToEVMLabel}, {value: 'evmToNative', label: evmToNativeLabel}]}
+                    options={[
+                        {value: 'nativeToEvm', label: nativeToEVMLabel},
+                        {value: 'evmToNative', label: evmToNativeLabel},
+                    ]}
                     fluid
                 />
                 <Label align="left">Amount</Label>
@@ -120,22 +123,25 @@
                     bind:valid={validAmount}
                     bind:value={amount}
                 />
-                <button on:click={useEntireBalance}>
-                    Entire Balance
-                </button>
+                <button on:click={useEntireBalance}> Entire Balance </button>
             </div>
             <div class="right-section">
                 <Label align="left">To</Label>
                 <Select
                     bind:value={transferOption}
                     on:change={handleSelectChange}
-                    options={[ {value: 'nativeToEvm', label: evmToNativeLabel}, {value: 'evmToNative', label: nativeToEVMLabel}]}
+                    options={[
+                        {value: 'nativeToEvm', label: evmToNativeLabel},
+                        {value: 'evmToNative', label: nativeToEVMLabel},
+                    ]}
                     fluid
                 />
             </div>
         </div>
-        <div class="bottom-section">  
-            <Button fluid style="primary" disabled={!validAmount} on:action={onContinue}>Continue</Button>
+        <div class="bottom-section">
+            <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 ce1709bf..2ffe3271 100644
--- a/src/pages/evm/swap/success.svelte
+++ b/src/pages/evm/swap/success.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import TxFollower from "~/components/tx-follower/index.svelte"
-    import Button from "~/components/elements/button.svelte"
-    import type { TransactResult } from "anchor-link"
-    import type { ethers } from "ethers";
+    import TxFollower from '~/components/tx-follower/index.svelte'
+    import Button from '~/components/elements/button.svelte'
+    import type {TransactResult} from 'anchor-link'
+    import type {ethers} from 'ethers'
 
-    import { activeBlockchain } from "~/store"
+    import {activeBlockchain} from '~/store'
 
     export let transferOption: string
     export let nativeTransactResult: TransactResult | undefined
@@ -12,36 +12,6 @@
     export let handleBack: () => void
 </script>
 
-
-{#if nativeTransactResult}
-    <TxFollower id={nativeTransactResult.payload.tx} chain={$activeBlockchain} />
-{:else}
-    <div class="container">
-        <div class="top-section">
-            <h1>Transfer Sent</h1>
-        </div>
-
-        <table>
-            <tr>
-                <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>
-{/if}
-
 <style>
     .container {
         font-family: Arial, sans-serif;
@@ -70,3 +40,28 @@
         border-top: 1px solid #ddd;
     }
 </style>
+
+{#if nativeTransactResult}
+    <TxFollower id={nativeTransactResult.payload.tx} chain={$activeBlockchain} />
+{:else}
+    <div class="container">
+        <div class="top-section">
+            <h1>Transfer Sent</h1>
+        </div>
+
+        <table>
+            <tr>
+                <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>
+{/if}