feat(bridge): add transaction detail modal (#468)

packages/bridge-ui/src/components/Transaction.svelte

@@ -7,7 +7,7 @@
   import { Contract, ethers } from "ethers";
   import { bridges } from "../store/bridge";
   import { signer } from "../store/signer";
-  import { pendingTransactions } from "../store/transactions";
+  import { pendingTransactions, showTransactionDetails } from "../store/transactions";
   import { errorToast, successToast } from "../utils/toast";
   import { _ } from "svelte-i18n";
   import {
@@ -113,20 +113,7 @@
       : ethers.utils.formatUnits(transaction.amountInWei)}
     {transaction.message?.data !== "0x" ? transaction.symbol : "ETH"}
   </td>
-
-  <td>
-    <span
-      class="cursor-pointer inline-block"
-      on:click={() =>
-        window.open(
-          `${fromChain.explorerUrl}/tx/${transaction.ethersTx.hash}`,
-          "_blank"
-        )}
-    >
-      <ArrowTopRightOnSquare />
-    </span>
-  </td>
-
+
   <td>
     {#if !processable}
       Pending...
@@ -168,6 +155,14 @@
       <Tooltip />
     </span>
   </td>
+
+  <td>
+    <span
+      class="cursor-pointer inline-block"
+      on:click={() => $showTransactionDetails = transaction}>
+      <ArrowTopRightOnSquare />
+    </span>
+  </td>
 </tr>
 
 <TooltipModal title="Message Status" bind:isOpen={tooltipOpen}>

packages/bridge-ui/src/components/TransactionDetail.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { ethers } from "ethers";
+  import { ArrowTopRightOnSquare } from "svelte-heros-v2";
+  import { truncateString } from "../utils/truncateString";
+  import Modal from "./modals/Modal.svelte";
+  import { chains } from "../domain/chain";
+  import { showTransactionDetails } from "../store/transactions";
+  export let transaction;
+</script>
+<Modal onClose={() => $showTransactionDetails = null} isOpen={!!transaction} title="Transaction Detail">
+  <table class="table table-normal w-2/3 m-auto">
+    <tr>
+      <td>Tx Hash</td>
+      <td class="text-right">
+        <a class="link flex items-center justify-end" target="_blank" rel="noreferrer" href={`${chains[transaction.fromChainId].explorerUrl}/tx/${transaction.ethersTx.hash}`}>
+          <span class="mr-2">{truncateString(transaction.ethersTx.hash)}</span>
+          <ArrowTopRightOnSquare />
+        </a>
+      </td>
+    </tr>
+    {#if transaction.message}
+    <tr>
+      <td>Sender</td>
+      <td class="text-right">
+        {truncateString(transaction.message.sender)}
+      </td>
+    </tr>
+    <tr>
+      <td>Owner</td>
+      <td class="text-right">
+        {truncateString(transaction.message.owner)}
+      </td>
+    </tr>
+    <tr>
+      <td>Refund Address</td>
+      <td class="text-right">
+        {truncateString(transaction.message.refundAddress)}
+      </td>
+    </tr>
+    {#if transaction.message.callValue}
+    <tr>
+      <td>Call value</td>
+      <td class="text-right">
+        {ethers.utils.formatEther(transaction.message.callValue)} ETH
+      </td>
+    </tr>
+    {/if}
+    {#if transaction.message.processingFee}
+    <tr>
+      <td>Processing Fee</td>
+      <td class="text-right">
+        {ethers.utils.formatEther(transaction.message.processingFee)} ETH
+      </td>
+    </tr>
+    {/if}
+    <tr>
+      <td>Gas Limit</td>
+      <td class="text-right">
+        {transaction.message.gasLimit}
+      </td>
+    </tr>
+    <tr>
+      <td>Data</td>
+      <td class="text-right">
+        {transaction.message.data}
+      </td>
+    </tr>
+    <tr>
+      <td>Memo</td>
+      <td class="text-right">
+        {transaction.message.memo}
+      </td>
+    </tr>
+    {/if}
+  </table>
+</Modal>

packages/bridge-ui/src/components/Transactions.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { chains } from "../domain/chain";
-  import { transactions } from "../store/transactions";
+  import { transactions, showTransactionDetails } from "../store/transactions";
   import Transaction from "./Transaction.svelte";
+  import TransactionDetail from './TransactionDetail.svelte';
 </script>
 
 <div class="my-4 px-4">
@@ -12,8 +13,8 @@
           <th>From</th>
           <th>To</th>
           <th>Amount</th>
-          <th>View</th>
           <th>Status</th>
+          <th>Details</th>
         </tr>
       </thead>
       <tbody>
@@ -29,4 +30,8 @@
   {:else}
     No transactions
   {/if}
+
+  {#if $showTransactionDetails}
+    <TransactionDetail transaction={$showTransactionDetails} />
+  {/if}
 </div>

packages/bridge-ui/src/store/transactions.ts

@@ -6,4 +6,5 @@ import type { BridgeTransaction, Transactioner } from "../domain/transactions";
 const pendingTransactions = writable<Transaction[]>([]);
 const transactions = writable<BridgeTransaction[]>([]);
 const transactioner = writable<Transactioner>();
-export { pendingTransactions, transactions, transactioner };
+const showTransactionDetails = writable<BridgeTransaction>();
+export { pendingTransactions, transactions, transactioner, showTransactionDetails };