Merge pull request #171 from greymass/dev

Release EVM Bridge

global.d.ts

@@ -0,0 +1,5 @@
+declare global {
+    interface Window {
+        ethereum: any
+    }
+}

package.json

@@ -25,6 +25,8 @@
         "@types/feather-icons": "^4.7.0",
         "anchor-link": "^3.3.0",
         "anchor-link-browser-transport": "^3.2.0",
+        "bn.js": "^5.2.1",
+        "ethers": "^5.6.9",
         "feather-icons": "^4.28.0",
         "idb": "^7.0.1",
         "inter-ui": "^3.15.0",
@@ -37,6 +39,7 @@
         "@snowpack/plugin-svelte": "^3.4.0",
         "@snowpack/plugin-typescript": "^1.1.1",
         "@snowpack/plugin-webpack": "^3.0.0",
+        "@types/bn.js": "^5.1.1",
         "@types/pako": "^1.0.1",
         "@types/snowpack-env": "^2.3.2",
         "@typescript-eslint/eslint-plugin": "^4.22.1",

src/abi-types.ts

@@ -11,6 +11,7 @@ import {
     UInt16,
     UInt32,
     UInt64,
+    Checksum160,
 } from 'anchor-link'
 
 @Struct.type('buyrambytes')
@@ -170,3 +171,25 @@ export class Transfer extends Struct {
     @Struct.field('asset') quantity!: Asset
     @Struct.field('string') memo!: string
 }
+
+@Struct.type('withdraw')
+export class TelosEvmWithdraw extends Struct {
+    @Struct.field('name') to!: Name
+    @Struct.field('asset') quantity!: Asset
+}
+
+@Struct.type('openwallet')
+export class TelosEvmOpenWallet extends Struct {
+    @Struct.field('name') account!: Name
+    @Struct.field('checksum160') address!: Checksum160
+    @Struct.field('name') actor!: Name
+    @Struct.field('name') permission!: Name
+}
+
+@Struct.type('create')
+export class TelosEvmCreate extends Struct {
+    @Struct.field('name') account!: Name
+    @Struct.field('string') data!: string
+    @Struct.field('name') actor!: Name
+    @Struct.field('name') permission!: Name
+}

src/app.svelte

@@ -9,14 +9,15 @@
     import Login from '~/pages/login.svelte'
     import Dashboard from '~/pages/dashboard/index.svelte'
     import Request from '~/pages/request/index.svelte'
-    import Transfer from '~/pages/transfer/index.svelte'
+    import Send from '~/pages/send/index.svelte'
     import TokensPurchase from '~/pages/tokens/purchase/index.svelte'
     import Resources from '~/pages/resources/index.svelte'
     import Components from '~/pages/_components/index.svelte'
     import Loading from '~/pages/loading.svelte'
     import Toasts from '~/components/elements/toasts.svelte'
     import BanxaSuccess from '~/pages/banxa/success.svelte'
     import BanxaFailure from '~/pages/banxa/failure.svelte'
+    import Transfer from '~/pages/transfer/index.svelte'
 
     $: {
         document.body.classList.toggle('darkmode', $darkMode)
@@ -177,14 +178,14 @@
             <Route path="/">
                 <Dashboard />
             </Route>
-            <Route path="/transfer">
-                <Transfer />
+            <Route path="/send">
+                <Send />
             </Route>
             <Route path="/tokens/buy">
                 <TokensPurchase />
             </Route>
-            <Route path="/transfer/:contract/:token" let:meta>
-                <Transfer {meta} />
+            <Route path="/send/:contract/:token" let:meta>
+                <Send {meta} />
             </Route>
             <Route path="/request/:payload">
                 <Request />
@@ -198,6 +199,9 @@
             <Route path="/banxa/failure">
                 <BanxaFailure />
             </Route>
+            <Route path="/transfer">
+                <Transfer />
+            </Route>
             <Route fallback>
                 <Page title="Page not found">
                     <p>You shouldn't be here. Get out before it's too late.</p>

src/auth.ts

@@ -5,7 +5,8 @@ import {get} from 'svelte/store'
 import {storeAccount} from './stores/account-provider'
 import {getClient} from './api-client'
 import {appId, chains} from './config'
-import {activeSession, availableSessions} from './store'
+import {activeEvmSession, activeSession, availableSessions} from './store'
+import {startEvmSession} from './lib/evm'
 
 const transport = new Transport({
     requestStatus: false,
@@ -97,4 +98,9 @@ export async function activate(id: SessionLike) {
         throw new Error('No such session')
     }
     activeSession.set(session)
+
+    if (get(activeEvmSession)) {
+        activeEvmSession.set(undefined)
+        startEvmSession()
+    }
 }

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/form/transaction.svelte

@@ -19,7 +19,7 @@
     let error: boolean = false
     let errorMessage: string = ''
     let transaction_id = writable<string | undefined>(undefined)
-    let refreshInterval: number
+    let refreshInterval: NodeJS.Timeout
 
     function refreshAccount(account_name: Name) {
         // Refresh the account data
@@ -61,7 +61,6 @@
         },
         clear: () => {
             error = false
-            console.log('clearing')
             transaction_id.set(undefined)
         },
         retryTransaction: () => {
@@ -73,7 +72,6 @@
             }
         },
         setTransaction: (id: string) => {
-            console.log('setting')
             transaction_id.set(id)
         },
         setTransactionError: (err: any) => {

src/components/elements/input.svelte

@@ -3,14 +3,17 @@
     import type {InputResponse} from 'src/ui-types'
     import type {Form} from '~/ui-types'
     import {createEventDispatcher} from 'svelte'
+    import type {inputType} from '~/ui-types'
 
     export let disabled: boolean = false
     export let focus: boolean = false
-    export let inputmode: string = ''
+    export let inputmode: inputType = undefined
     export let name: string = ''
     export let placeholder: string = ''
     export let value: string = ''
 
+    const inputmodeParam = inputmode as any
+
     /** Whether or not the button should go full width */
     export let fluid: boolean = false
 
@@ -19,7 +22,7 @@
     export let isValid: any = () => true
     export let assumeValid: boolean = false
 
-    let timer: number | undefined
+    let timer: NodeJS.Timeout | undefined
     let delay: number = 300
 
     // Get parent form context (if exists)
@@ -59,7 +62,7 @@
 
     type HTMLInputFormEvent = Event & {currentTarget: EventTarget & HTMLInputElement}
     const debounce = (e: HTMLInputFormEvent) => {
-        clearTimeout(timer)
+        timer && clearTimeout(timer)
         value = e.currentTarget.value
         // Immediately invalidate
         invalidate(name, value)
@@ -78,6 +81,10 @@
         }, delay)
     }
     const handleInput = (e: HTMLInputFormEvent): void => debounce(e)
+
+    $: {
+        isValid(value)
+    }
 </script>
 
 <style type="scss">
@@ -110,7 +117,7 @@
     type="text"
     {name}
     {disabled}
-    {inputmode}
+    inputmode={inputmodeParam}
     {placeholder}
     bind:this={ref}
     bind:value

src/components/elements/input/account.svelte

@@ -4,11 +4,13 @@
     import {validatePresence} from './validators/presence'
     import {validateAccountLength} from './validators/account'
 
+    import type {inputType} from '~/ui-types'
+
     // Generic input type matching
     export let name: string = ''
     export let fluid: boolean = false
     export let focus: boolean = false
-    export let inputmode: string = ''
+    export let inputmode: inputType = undefined
     export let placeholder: string | undefined = undefined
     export let value: string = ''
 

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/input/labelled.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
     import Input from '~/components/elements/input.svelte'
     import ErrorMessage from './errorMessage.svelte'
+    import type {inputType} from '~/ui-types'
 
     export let errorMessage: string | undefined = undefined
 
     export let name: string = ''
     export let fluid: boolean = false
     export let focus: boolean = false
-    export let inputmode: string = ''
+    export let inputmode: inputType = null
     export let isValid: any = () => true
     export let placeholder: string | undefined = undefined
     export let value: string = ''

src/components/elements/input/token/selector.svelte

@@ -12,10 +12,11 @@
 
     import TokenSelectorRow from './selector/row.svelte'
 
-    export let defaultToken: Token
+    export let defaultToken: Token | undefined = undefined
+    export let selectedToken: Token | undefined = undefined
+    export let tokenOptions: Token[] | undefined = undefined
     export let onTokenSelect: (token: Token) => void
 
-    let selectedToken = defaultToken
     let displayModal = writable<boolean>(false)
     let query: string = ''
 
@@ -34,17 +35,21 @@
     let filteredTokens: Token[] = []
 
     $: {
-        filteredTokens =
-            ($tokens &&
-                $tokens.filter((token) => {
-                    const blockchainMatches = token.chainId.equals($activeBlockchain.chainId)
-                    const queryExists = query.length === 0
-                    const queryMatches = String(token.name)
-                        .toLowerCase()
-                        .includes(query.toLowerCase())
-                    return blockchainMatches && (queryExists || queryMatches)
-                })) ||
-            []
+        if (tokenOptions) {
+            filteredTokens = tokenOptions
+        } else {
+            filteredTokens =
+                ($tokens &&
+                    $tokens.filter((token) => {
+                        const blockchainMatches = token.chainId.equals($activeBlockchain.chainId)
+                        const queryExists = query.length === 0
+                        const queryMatches = String(token.name)
+                            .toLowerCase()
+                            .includes(query.toLowerCase())
+                        return blockchainMatches && (queryExists || queryMatches)
+                    })) ||
+                []
+        }
     }
 </script>
 
@@ -100,23 +105,52 @@
             }
         }
     }
+
+    .placeholder {
+        padding: 10px 12px;
+        border-radius: 12px;
+        max-width: 400px;
+        border: 1px solid var(--divider-grey);
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .text-container {
+            flex: 1;
+            font-family: Inter;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            letter-spacing: -0.04px;
+            color: var(--main-black);
+            display: inline;
+            text-align: left;
+        }
+
+        .arrow-container {
+            display: flex;
+            width: 20px;
+        }
+    }
 </style>
 
 <Modal display={displayModal} hideCloseButton>
     <div on:click={() => ($displayModal = false)} class="close-button">
         <Icon name="x" />
     </div>
     <h2>Select Token</h2>
-    <Form>
-        <Input
-            on:changed={updateQuery}
-            value={query}
-            name="query"
-            focus
-            fluid
-            placeholder="Search tokens..."
-        />
-    </Form>
+    {#if !tokenOptions}
+        <Form>
+            <Input
+                on:changed={updateQuery}
+                value={query}
+                name="query"
+                focus
+                fluid
+                placeholder="Search tokens..."
+            />
+        </Form>
+    {/if}
     <div class="table-container">
         <table>
             <tr>
@@ -147,4 +181,16 @@
     </div>
 </Modal>
 
-<TokenSelectorRow onClick={() => ($displayModal = true)} token={selectedToken} />
+{#if selectedToken}
+    <TokenSelectorRow
+        onClick={() => ($displayModal = true)}
+        token={selectedToken || defaultToken}
+    />
+{:else}
+    <div class="placeholder" on:click={() => ($displayModal = true)}>
+        <span class="text-container"> Select Token </span>
+        <div class="arrow-container">
+            <Icon name="chevron-right" size="large" />
+        </div>
+    </div>
+{/if}