enhancement: adding customization props to TxFollower components

greymass · Sep 2, 2023 · 2d74892 · 2d74892
1 parent b9fc0ad
commit 2d74892
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 112 deletions.
diff --git a/src/components/evm-tx-follower/index.svelte b/src/components/evm-tx-follower/index.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-    import type {ChainConfig} from '~/config'
-    import type {Checksum256Type} from '@greymass/eosio'
-
     import {Checksum256} from '@greymass/eosio'
     import {router} from 'tinro'
 
@@ -11,8 +8,6 @@
 
     import type { ethers } from 'ethers'
 
-    /** The chain where the transaction was submitted */
-    export let chain: ChainConfig
     /** Title, e.g. Tokens sent */
     export let title = 'Transaction sent'
     /** The EVM transaction result */
@@ -24,18 +19,12 @@
         router.goto('/')
     }
 
-    $: console.log({ evmTransactResult })
-
-    let txId: Checksum256
-    $: {
-        try {
-            txId = Checksum256.from(evmTransactResult?.hash || '')
-        } catch (error) {
-            console.warn('Invalid transaction id passed to TxFollower', error)
-            txId = Checksum256.from(
-                '0000000000000000000000000000000000000000000000000000000000000000'
-            )
-        }
+    let txId: string
+    if (evmTransactResult?.hash) {
+        txId = evmTransactResult?.hash
+    } else {
+        console.warn('Invalid EVM Transact Result data passed to EvmTxFollower. Missing transaction hash.')
+        txId = '0000000000000000000000000000000000000000000000000000000000000000'
     }
 
     const blockExplorerUrl = 'https://explorer.evm.eosnetwork.com/tx/'

diff --git a/src/pages/transfer/confirm.svelte b/src/pages/transfer/confirm.svelte
@@ -72,6 +72,7 @@
         /* Media Query for Mobile */
         @media screen and (max-width: 768px) {
             padding: 1em;
+            border: none;
 
             table {
                 tr {
@@ -95,8 +96,8 @@
 
     <table>
         <tr>
-            <td>From {from.name}</td>
-            <td>{from?.name === 'EOS (EVM)' ? $evmAccount?.address : $activeSession?.auth.actor}</td
+            <td>From {from.name === 'EOS (EVM)' ? 'EVM' : from.name}</td>
+            <td>{from?.name === 'EVM' ? $evmAccount?.address : $activeSession?.auth.actor}</td
             >
         </tr>
         <tr>

diff --git a/src/pages/transfer/success.svelte b/src/pages/transfer/success.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import TxFollower from '~/components/tx-follower/index.svelte'
-    import Button from '~/components/elements/button.svelte'
+    import EvmTxFollower from '~/components/evm-tx-follower/index.svelte'
     import type {TransactResult} from 'anchor-link'
     import type {ethers} from 'ethers'
 
@@ -12,100 +12,21 @@
     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 type="scss">
-    .container {
-        width: 100%;
-        font-family: Arial, sans-serif;
-        margin: auto;
-        padding: 3em;
-        background-color: transparent;
-        text-align: center;
-
-        .top-section {
-            margin-bottom: 2em;
-        }
-
-        table {
-            width: 100%;
-            margin-bottom: 2em;
-
-            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;
-        }
-
-        /* Media Query for Mobile */
-        @media screen and (max-width: 768px) {
-            padding: 1em;
-
-            table {
-                width: 300px;
-                margin: auto;
-
-                tr:first-child td {
-                    border: none;
-                }
-
-                tr {
-                    display: flex;
-                    flex-direction: column;
-                }
-
-                tr td {
-                    border: none;
-                    word-wrap: break-word;
-                    width: 300px;
-                }
-
-                tr td:last-child {
-                    padding-top: 0;
-                    margin-bottom: 20px;
-                }
-            }
-
-            .bottom-section {
-                flex-direction: column;
-                align-items: center;
-            }
-        }
-    }
-</style>
-
 {#if nativeTransactResult}
-    <TxFollower id={nativeTransactResult.payload.tx} chain={$activeBlockchain} />
+    <TxFollower
+        title="Transfer Sent"
+        id={nativeTransactResult.payload.tx}
+        chain={$activeBlockchain}
+        primaryButtonText="New Transfer"
+        handlePrimaryButtonClick={handleBack}
+    />
 {:else}
-    <div class="container">
-        <div class="top-section">
-            <h1>Transfer Sent</h1>
-        </div>
-
-        <table>
-            <tr>
-                <td>Transaction ID:</td>
-                <td>{evmTransactResult?.hash}</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>
+    <EvmTxFollower
+        title="Transfer Sent"
+        evmTransactResult={evmTransactResult}
+        primaryButtonText="New Transfer"
+        handlePrimaryButtonClick={handleBack}
+    />
 {/if}