feat(bridge): add transaction list

taikoxyz · Dec 9, 2022 · a052dce · a052dce
1 parent 0d617c5
commit a052dce
Show file tree

Hide file tree

Showing 9 changed files with 167 additions and 23 deletions.
diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css
@@ -50,4 +50,8 @@
 .taiko-banner {
   background-image: url('assets/taiko-banner.svg');
   background-repeat: no-repeat;
+}
+
+.dropdown-content.address-dropdown-content {
+  border-radius: 6px;
 }
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -9,17 +9,37 @@
   import { getAddressAvatarFromIdenticon } from "../utils/addressAvatar";
   import type { BridgeTransaction } from "../domain/transactions";
   import { LottiePlayer } from "@lottiefiles/svelte-lottie-player";
-  import type { Signer } from "ethers";
+  import { ethers, Signer } from "ethers";
   import { errorToast } from "../utils/toast";
+  import CopyIcon from "./icons/Copy.svelte";
+  import DisconnectIcon from "./icons/Disconnect.svelte";
+  import TransactionsIcon from "./icons/Transactions.svelte";
+  import { slide } from "svelte/transition";
+  import {fromChain} from '../store/chain';
+  import { truncateString } from "../utils/truncateString";
+  import Transactions from "./Transactions.svelte";
 
   export let transactions: BridgeTransaction[] = [];
 
+  let showTransactions = false;
+
   let address: string;
   let addressAvatarImgData: string;
+  let tokenBalance: string = '';
+
   onMount(async () => {
     setAddress($signer);
   });
 
+  $: getUserBalance($signer);
+
+  async function getUserBalance(signer) {
+    if (signer) {
+      const userBalance = await signer.getBalance("latest");
+      tokenBalance = ethers.utils.formatEther(userBalance);
+    }
+  }
+
   $: setAddress($signer).catch((e) => console.error(e));
 
   async function setAddress(signer: Signer) {
@@ -76,28 +96,40 @@
 
     <ChevDown />
   </button>
-  <ul
+  <div
     tabindex="0"
-    class="dropdown-content menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
+    class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-64 mt-2 pb-2"
   >
-    <li class="inline-block md:hidden">
-      <span>{addressSubsection(address)}</span>
-    </li>
-    <li>
-      <span
-        class="cursor-pointer"
-        on:click={async () => await copyToClipboard(address)}>Copy Address</span
-      >
-    </li>
-    <li>
-      <span class="cursor-pointer" on:click={async () => await disconnect()}
-        >Disconnect</span
-      >
-    </li>
-    {#if transactions && transactions.length}
-      <li>
-        <span class="cursor-pointer"> {transactions.length} Transactions</span>
-      </li>
-    {/if}
-  </ul>
+    {#if !showTransactions}
+      <div class="p-5 pb-0 flex flex-col items-center" transition:slide>
+        {#if $fromChain && $signer}
+          <svelte:component this={$fromChain.icon} />
+          <div class="text-lg mt-2">{tokenBalance.length > 10
+            ? `${truncateString(tokenBalance)}...`
+            : tokenBalance} ETH</div>
+        {/if}
+      </div>
+      <div class="divider"></div>
+      <div class="flex inline-block md:hidden">
+        <span>{addressSubsection(address)}</span>
+      </div>
+      <div class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
+      on:click={async () => await copyToClipboard(address)}>
+          <CopyIcon />
+          Copy Address
+      </div>
+      <div class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2" on:click={async () => await disconnect()}><DisconnectIcon /> Disconnect
+      </div>
+      {#if transactions && transactions.length}
+        <div class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2" on:click={() => showTransactions = true}>
+          <TransactionsIcon />
+          {transactions.length} Transactions
+        </div>
+      {/if}
+      {:else}
+        <div class="" transition:slide>
+          <Transactions bind:showTransactions={showTransactions} transactions={transactions} />
+        </div>
+      {/if}
+    </div>
 </div>
diff --git a/packages/bridge-ui/src/components/Loader.svelte b/packages/bridge-ui/src/components/Loader.svelte
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM1.39211 7C1.39211 10.0972 3.90285 12.6079 7 12.6079C10.0972 12.6079 12.6079 10.0972 12.6079 7C12.6079 3.90285 10.0972 1.39211 7 1.39211C3.90285 1.39211 1.39211 3.90285 1.39211 7Z" fill="#B20F89"/>
+  <path d="M14 7C14 8.1941 13.6945 9.36835 13.1127 10.4111C12.5308 11.4538 11.6918 12.3304 10.6756 12.9574C9.65935 13.5844 8.49961 13.941 7.30665 13.9933C6.1137 14.0456 4.9272 13.7919 3.85998 13.2562L4.48444 12.012C5.33942 12.4411 6.28996 12.6444 7.24567 12.6025C8.20138 12.5606 9.13048 12.2749 9.94461 11.7726C10.7587 11.2703 11.4309 10.5681 11.897 9.73271C12.3632 8.89735 12.6079 7.95663 12.6079 7H14Z" fill="#FC0FC0"/>
+  </svg>
+
diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { chains } from "../domain/chain";
+  import Loader from "./icons/Loader.svelte";
+  import TransactionsIcon from "./icons/Transactions.svelte";
+
+  export let id: number;
+  export let name: string;
+  export let data: string;
+  export let status: number;
+  export let chainID: number;
+
+  // TODO: uncomment this when fromChainID is available
+  // export let fromChainID: number;
+  let fromChainID: number = chainID == 167001 ? 31336 : 167001;
+
+  let fromChain = chains[fromChainID];
+  console.log(chainID);
+  let toChain = chains[chainID];
+
+  let amount = 0.001;
+
+  let isPending = status === 0;
+</script>
+
+<div class="p-2">
+  <div class="flex items-center justify-between text-xs">
+    <div class="flex items-center">
+      <svelte:component this={fromChain.icon} height={18} width={18} />
+      <span class="ml-2">From {fromChain.name}</span>
+    </div>
+    <div class="flex items-center">
+      <svelte:component this={toChain.icon} height={18} width={18} />
+      <span class="ml-2">To {toChain.name}</span>
+    </div>
+  </div>
+  <div class="px-1 py-2 flex items-center justify-between">
+    {amount} ETH
+
+    {#if isPending}
+    <div class="animate-spin">
+      <Loader />
+    </div>
+    {:else}
+      <TransactionsIcon />
+    {/if}
+  </div>
+</div>
diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { BridgeTransaction } from "../domain/transactions";
+  import ArrowLeft from "./icons/ArrowLeft.svelte";
+  import Transaction from './Transaction.svelte';
+
+  export let showTransactions = false;
+
+  export let transactions: BridgeTransaction[] = [];
+
+  const testTransactions = [
+    {
+      id: 1,
+      name: "bla",
+      chainID: 31336,
+      status: 0,
+      data: 'xyz',
+    },
+    {
+      id: 2,
+      name: "bla",
+      chainID: 167001,
+      status: 1,
+      data: 'xyz',
+    },
+  ]
+</script>
+
+<div>
+  <div class="px-2 py-4 flex items-center border-b border-b-dark-5" on:click={() => showTransactions = false}>
+    <ArrowLeft />
+    <span class="text-sm ml-2">Transactions</span>
+  </div>
+  {#each testTransactions as transaction}
+    <Transaction {...transaction} />
+  {/each}
+</div>
diff --git a/packages/bridge-ui/src/components/icons/ArrowLeft.svelte b/packages/bridge-ui/src/components/icons/ArrowLeft.svelte
@@ -0,0 +1,4 @@
+<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.90906 0.265207C4.50324 -0.109399 3.87058 -0.0840962 3.49597 0.321722L0.265201 3.82168C-0.0883963 4.20474 -0.0884 4.79518 0.265194 5.17824L3.49597 8.67828C3.87057 9.08411 4.50323 9.10941 4.90905 8.73481C5.31487 8.36021 5.34018 7.72755 4.96558 7.32173L3.28397 5.49997L13 5.49997C13.5523 5.49997 14 5.05225 14 4.49997C14 3.94768 13.5523 3.49997 13 3.49997L3.284 3.49997L4.96557 1.67829C5.34018 1.27247 5.31487 0.639813 4.90906 0.265207Z" fill="white"/>
+  </svg>
+
diff --git a/packages/bridge-ui/src/components/icons/Copy.svelte b/packages/bridge-ui/src/components/icons/Copy.svelte
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.0769 11H11.9231C11.4133 11 11 11.4133 11 11.9231V16.0769C11 16.5867 11.4133 17 11.9231 17H16.0769C16.5867 17 17 16.5867 17 16.0769V11.9231C17 11.4133 16.5867 11 16.0769 11Z" stroke="#F3F3F3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.38462 13H7.92308C7.67826 13 7.44347 12.9027 7.27036 12.7296C7.09725 12.5565 7 12.3217 7 12.0769V7.92308C7 7.67826 7.09725 7.44347 7.27036 7.27036C7.44347 7.09725 7.67826 7 7.92308 7H12.0769C12.3217 7 12.5565 7.09725 12.7296 7.27036C12.9027 7.44347 13 7.67826 13 7.92308V8.38462" stroke="#F3F3F3" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+
diff --git a/packages/bridge-ui/src/components/icons/Disconnect.svelte b/packages/bridge-ui/src/components/icons/Disconnect.svelte
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.5361 9C16.2352 9.73743 16.7113 10.6769 16.904 11.6996C17.0968 12.7223 16.9977 13.7823 16.6192 14.7456C16.2408 15.7089 15.5999 16.5323 14.7777 17.1116C13.9555 17.6908 12.9888 18 12 18C11.0112 18 10.0445 17.6908 9.22232 17.1116C8.40011 16.5323 7.75925 15.7089 7.38076 14.7456C7.00227 13.7823 6.90316 12.7223 7.09596 11.6996C7.28875 10.6769 7.76479 9.73743 8.46389 9" stroke="#F3F3F3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 7V12" stroke="#F3F3F3" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+
diff --git a/packages/bridge-ui/src/components/icons/Transactions.svelte b/packages/bridge-ui/src/components/icons/Transactions.svelte
@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.375 10.2499C8.20924 10.2499 8.05027 10.3157 7.93306 10.4329C7.81585 10.5501 7.75 10.7091 7.75 10.8749V16.3749C7.75 16.5406 7.81585 16.6996 7.93306 16.8168C8.05027 16.934 8.20924 16.9999 8.375 16.9999H13.875C14.0408 16.9999 14.1997 16.934 14.3169 16.8168C14.4342 16.6996 14.5 16.5406 14.5 16.3749V13.3749C14.5 13.1677 14.6679 12.9999 14.875 12.9999C15.0821 12.9999 15.25 13.1677 15.25 13.3749V16.3749C15.25 16.7395 15.1051 17.0893 14.8473 17.3471C14.5894 17.605 14.2397 17.7499 13.875 17.7499H8.375C8.01033 17.7499 7.66059 17.605 7.40273 17.3471C7.14487 17.0893 7 16.7395 7 16.3749V10.8749C7 10.5102 7.14487 10.1604 7.40273 9.90258C7.66059 9.64472 8.01033 9.49985 8.375 9.49985H11.375C11.5821 9.49985 11.75 9.66775 11.75 9.87485C11.75 10.082 11.5821 10.2499 11.375 10.2499H8.375Z" fill="#F9FAFB"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13 8.375C13 8.16789 13.1679 8 13.375 8H16.375C16.5821 8 16.75 8.16789 16.75 8.375V11.375C16.75 11.5821 16.5821 11.75 16.375 11.75C16.1679 11.75 16 11.5821 16 11.375V8.75H13.375C13.1679 8.75 13 8.58211 13 8.375Z" fill="#F9FAFB"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6401 8.10983C16.7866 8.25628 16.7866 8.49372 16.6401 8.64017L11.1401 14.1402C10.9937 14.2866 10.7563 14.2866 10.6098 14.1402C10.4634 13.9937 10.4634 13.7563 10.6098 13.6098L16.1098 8.10983C16.2563 7.96339 16.4937 7.96339 16.6401 8.10983Z" fill="#F9FAFB"/>
+  </svg>
+