From b9fc0ada22f7d9a3a11b4307d3ad58442fcb3f3f Mon Sep 17 00:00:00 2001
From: dafuga <danielfugere28@gmail.com>
Date: Fri, 1 Sep 2023 23:41:23 -0700
Subject: [PATCH] chore: added EvmTxFollower component

---
 src/components/evm-tx-follower/index.svelte | 128 ++++++++++++++++++++
 src/components/tx-follower/index.svelte     |  16 ++-
 2 files changed, 139 insertions(+), 5 deletions(-)
 create mode 100644 src/components/evm-tx-follower/index.svelte

diff --git a/src/components/evm-tx-follower/index.svelte b/src/components/evm-tx-follower/index.svelte
new file mode 100644
index 00000000..a9706917
--- /dev/null
+++ b/src/components/evm-tx-follower/index.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import type {ChainConfig} from '~/config'
+    import type {Checksum256Type} from '@greymass/eosio'
+
+    import {Checksum256} from '@greymass/eosio'
+    import {router} from 'tinro'
+
+    import Icon from '~/components/elements/icon.svelte'
+    import Button from '~/components/elements/button.svelte'
+    import Card from '~/components/elements/card.svelte'
+
+    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 */
+    export let evmTransactResult: ethers.providers.TransactionResponse | undefined
+     /** The text of the primary button at the bottom of the page */
+     export let primaryButtonText = 'Done'
+    /** The function to call when the primary button is clicked */
+    export let handlePrimaryButtonClick: () => void = () => {
+        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'
+            )
+        }
+    }
+
+    const blockExplorerUrl = 'https://explorer.evm.eosnetwork.com/tx/'
+    const blockExplorerTransactionUrl = `${blockExplorerUrl}${evmTransactResult?.hash}`
+</script>
+
+<style type="scss">
+    header {
+        text-align: center;
+        h1 {
+            font-size: 24px;
+            letter-spacing: -0.47px;
+            padding: 15px 0 24px;
+        }
+        :global(.icon) {
+            color: var(--main-green);
+        }
+        a {
+            text-decoration: none;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: block;
+            color: var(--main-blue);
+            &:visited {
+                color: var(--main-blue);
+            }
+        }
+        nav {
+            margin-top: 30px;
+            border-bottom: 1px solid var(--divider-grey);
+
+            ul {
+                display: flex;
+                justify-content: center;
+
+                a {
+                    display: block;
+                    border-bottom: 3px solid transparent;
+                    padding: 10px 9px;
+                    text-transform: uppercase;
+                    font-size: 10px;
+                    font-weight: bold;
+                    margin: 0 21px;
+                    &.active {
+                        color: var(--main-black);
+                        border-bottom-color: var(--main-blue);
+                    }
+                }
+            }
+        }
+    }
+    footer {
+        margin-top: 48px;
+        display: flex;
+        div {
+            width: 100%;
+            &:first-child {
+                margin-right: 10px;
+            }
+        }
+        @media (max-width: 600px) {
+            display: block;
+            div:first-child {
+                margin: 0 0 10px;
+            }
+        }
+    }
+</style>
+
+<Card>
+    <header>
+        <Icon size="massive" name="check-circle" />
+        <h1>{title}</h1>
+        <a target="_blank" href={blockExplorerTransactionUrl}>{txId}</a>
+    </header>
+    <footer>
+        <div>
+            <slot name="done">
+                <Button style="primary" fluid size="large" on:action={handlePrimaryButtonClick}
+                    >{primaryButtonText}</Button
+                >
+            </slot>
+        </div>
+        <div>
+            <Button fluid size="large" href={blockExplorerTransactionUrl} target="_blank">
+                View on block explorer
+            </Button>
+        </div>
+    </footer>
+</Card>
diff --git a/src/components/tx-follower/index.svelte b/src/components/tx-follower/index.svelte
index a7ec81eb..ff1292a9 100644
--- a/src/components/tx-follower/index.svelte
+++ b/src/components/tx-follower/index.svelte
@@ -13,12 +13,18 @@
     import Summary from './summary.svelte'
     import Advanced from './advanced.svelte'
 
-    /** The transaction id to follow. */
+    /** The transaction id to follow */
     export let id: Checksum256Type
-    /** The chain where the transaction was submitted. */
+    /** The chain where the transaction was submitted */
     export let chain: ChainConfig
-    /** Title, e.g. Tokens sent. */
+    /** Title, e.g. Tokens sent */
     export let title = 'Transaction sent'
+    /** The text of the primary button at the bottom of the page */
+    export let primaryButtonText = 'Done'
+    /** The function to call when the primary button is clicked */
+    export let handlePrimaryButtonClick: () => void = () => {
+        router.goto('/')
+    }
 
     let txId: Checksum256
     $: {
@@ -130,8 +136,8 @@
     <footer>
         <div>
             <slot name="done">
-                <Button style="primary" fluid size="large" on:action={() => router.goto('/')}
-                    >Done</Button
+                <Button style="primary" fluid size="large" on:action={handlePrimaryButtonClick}
+                    >{primaryButtonText}</Button
                 >
             </slot>
         </div>