From 8b130ed8390c2ab0e97b896028a1a24704ee1505 Mon Sep 17 00:00:00 2001
From: Maxime Laforet <me@macx.im>
Date: Mon, 27 Nov 2023 22:36:51 +0000
Subject: [PATCH] feat: UX/UI enhancements for Transaction history page (#294)

* feat: UX/UI enhancements for Transaction history page

* chore: cleaning
---
 .../dashboard/shared/TxsHistoryTable.svelte   | 145 ++++++++++++++
 src/lib/components/shared/ArrowUpRight.svelte |   6 +-
 src/lib/components/transactions/Paging.svelte | 130 +++++++------
 src/routes/transactions/+page.svelte          | 183 ++++++------------
 4 files changed, 270 insertions(+), 194 deletions(-)
 create mode 100644 src/lib/components/dashboard/shared/TxsHistoryTable.svelte

diff --git a/src/lib/components/dashboard/shared/TxsHistoryTable.svelte b/src/lib/components/dashboard/shared/TxsHistoryTable.svelte
new file mode 100644
index 00000000..992f7d24
--- /dev/null
+++ b/src/lib/components/dashboard/shared/TxsHistoryTable.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+
+  import { page } from '$app/stores';
+  import { COMMS_ERROR, explorerTxUrl } from '$lib/utils.js'
+  import { truncate, explorerBtcTxUrl } from '$lib/utils'
+  import { findSbtcEventByBitcoinAddress, findSbtcEventsByPage } from '$lib/bridge_api'
+  import { fmtNumber, type SbtcClarityEvent } from 'sbtc-bridge-lib'
+  import { satsToBitcoin } from '$lib/utils'
+  import ArrowUpRight from '$lib/components/shared/ArrowUpRight.svelte';
+  import Paging from '$lib/components/transactions/Paging.svelte';
+  import { sbtcConfig } from '$stores/stores';
+  import { CONFIG } from '$lib/config';
+
+  // fetch/hydrate data from local storage
+  let inited = false;
+  let sbtcEvents:{ results: Array<SbtcClarityEvent>, events:number}
+  let errorReason:string|undefined;
+  let myDepositsFilter:boolean;
+  const limit = 20;
+  let numPages = 0;
+
+  const getReclaimUrl = (pegin:any) => {
+    return '/transactions/' + pegin.bitcoinTxid.payload.value.split('x')[1]
+  }
+
+  const getType = (eventType:string|undefined) => {
+    return (eventType === 'mint') ? 'deposit' : 'withdrawal'
+  }
+
+  const getAddress = (event:any) => {
+    const type = getType(event.payloadData.eventType)
+    if (event.payloadData.eventType === 'mint') {
+      return event.recipient
+    }
+  }
+
+  const toggleMine = async () => {
+    sbtcEvents.results = []
+    sbtcEvents.events = 0
+    myDepositsFilter = !myDepositsFilter
+    if (!myDepositsFilter) await fetchPageCheck(0)
+    else fetchMine()
+  }
+
+  const fetchMine = async () => {
+    const mySbtcEvents = await findSbtcEventByBitcoinAddress($sbtcConfig.keySets[CONFIG.VITE_NETWORK].cardinal)
+    sbtcEvents.results = mySbtcEvents
+    sbtcEvents.events = mySbtcEvents.length
+  }
+
+  const fetchPage = async (evt:any) => {
+    await fetchPageCheck(evt.detail.page)
+  }
+
+  const fetchPageCheck = async (mypage:number) => {
+    if (mypage < 0) mypage = 0
+    if (mypage > numPages) mypage = numPages
+    sbtcEvents = await findSbtcEventsByPage(mypage, limit)
+    const resid = ((sbtcEvents.events % limit) > 0) ? 1 : 0;
+    numPages = Math.floor(sbtcEvents.events / limit) + resid;
+  }
+
+  onMount(async () => {
+    try {
+      let mypage = 0;
+      if ($page.url.searchParams.has('page')) {
+        mypage = Number($page.url.searchParams.get('page')) - 1
+      }
+      await fetchPageCheck(mypage)
+      inited = true;
+    } catch (err) {
+      errorReason = COMMS_ERROR;
+    }
+  })
+</script>
+
+
+<Table>
+  <TableHead class="!dark:bg-transparent !bg-transparent !text-base !text-white !normal-case border-b border-white">
+    <TableHeadCell class="!px-0 !font-normal">Amount (BTC)</TableHeadCell>
+    <TableHeadCell class="!px-0 !font-normal">Address</TableHeadCell>
+    <TableHeadCell class="!px-0 !font-normal">Type</TableHeadCell>
+    <TableHeadCell class="!px-0 !font-normal">Height</TableHeadCell>
+    <TableHeadCell class="!px-0 !font-normal !text-right">Actions</TableHeadCell>
+  </TableHead>
+  <TableBody>
+    {#each sbtcEvents.results as event}
+      <TableBodyRow class="!dark:bg-transparent !bg-transparent !border-transparent">
+        <TableBodyCell class="!px-0 !py-2 !font-extralight">{satsToBitcoin(event.payloadData.amountSats)}</TableBodyCell>
+        <TableBodyCell class="!px-0 !py-2 !font-extralight">
+          <div class="flex items-center">
+            <a class="" href={explorerBtcTxUrl(event.bitcoinTxid.payload.value.split('x')[1])} target="_blank" rel="noreferrer">{truncate(event.payloadData.spendingAddress, 5)}</a>
+            <div class="ms-3">
+              <ArrowUpRight class="h-6 w-6 text-white" target={explorerBtcTxUrl(event.bitcoinTxid.payload.value.split('x')[1])} />
+            </div>
+          </div>
+        </TableBodyCell>
+        <TableBodyCell class="!px-0 !py-2 !font-extralight">
+          <div class="flex items-center">
+            {#if getType(event.payloadData.eventType) === 'deposit'}
+              <span class="border px-3 py-1 rounded-2xl text-yellow-400 border-yellow-400">
+                {getType(event.payloadData.eventType)}
+              </span>
+            {:else}
+              <span class="border px-3 py-1 rounded-2xl text-blue-400 border-blue-400">
+                {getType(event.payloadData.eventType)}
+              </span>
+            {/if}
+            <div class="ms-3">
+              <ArrowUpRight class="h-6 w-6 text-white" target={explorerTxUrl(event.txid)} />
+            </div>
+          </div>
+        </TableBodyCell>
+        <TableBodyCell class="!px-0 !py-2 !font-extralight">{fmtNumber(event.payloadData.burnBlockHeight)}</TableBodyCell>
+        <TableBodyCell class="!px-0 !py-2 !font-extralight !text-right">
+          <a
+            type="button"
+            class="text-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50 hover:underline"
+            href={getReclaimUrl(event)}
+          >
+            View details
+          </a>
+        </TableBodyCell>
+      </TableBodyRow>
+    {/each}
+  </TableBody>
+</Table>
+
+<div class="py-6 border-t border-white flex items-center justify-between mt-6">
+  <div>
+    <p class="text-sm font-extralight">
+      Showing
+      <span class="font-normal">1</span>
+      to
+      <span class="font-normal">10</span>
+      of
+      <span class="font-normal">97</span>
+      results
+    </p>
+  </div>
+  <Paging on:fetch_page={fetchPage} {numPages} totalEvents={(sbtcEvents) ? sbtcEvents.events : 0} limit={20}/>
+</div>
+
diff --git a/src/lib/components/shared/ArrowUpRight.svelte b/src/lib/components/shared/ArrowUpRight.svelte
index 2df58677..4356a860 100644
--- a/src/lib/components/shared/ArrowUpRight.svelte
+++ b/src/lib/components/shared/ArrowUpRight.svelte
@@ -8,7 +8,7 @@ let anchorClass = clazz + ' rounded-md bg-black flex items-center justify-center
 </script>
 
 <div class="ml-auto flex items-center">
-    <a title="Show in Explorer" href={target} class={anchorClass} target="_blank" >
-      <Icon src="{ArrowUpRight}" mini {clazz} aria-hidden="true" />
-    </a>
+  <a role="button" title="Show in Explorer" href={target} class={anchorClass} target="_blank" >
+    <Icon src="{ArrowUpRight}" mini {clazz} aria-hidden="true" />
+  </a>
 </div>
diff --git a/src/lib/components/transactions/Paging.svelte b/src/lib/components/transactions/Paging.svelte
index 31a9304f..5be33c67 100644
--- a/src/lib/components/transactions/Paging.svelte
+++ b/src/lib/components/transactions/Paging.svelte
@@ -1,78 +1,80 @@
 <script lang="ts">
 	import { afterNavigate, goto } from '$app/navigation';
-import { page } from '$app/stores';
-import { Pagination } from 'flowbite-svelte';
-import { ChevronLeftOutline, ChevronRightOutline, ListMusicOutline } from 'flowbite-svelte-icons';
-import { createEventDispatcher, onMount } from "svelte";
+  import { page } from '$app/stores';
+  import { Pagination } from 'flowbite-svelte';
+  import { ChevronLeftOutline, ChevronRightOutline } from 'flowbite-svelte-icons';
+  import { createEventDispatcher, onMount } from "svelte";
 
-const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-export let totalEvents:number;
-export let limit:number;
-export let numPages:number;
-let inited = false;
+  export let totalEvents:number;
+  export let limit:number;
+  export let numPages:number;
+  let inited = false;
 
-let pages:Array<{name:string, href:string, active:boolean}> = [];
+  let pages:Array<{name:string, href:string, active:boolean}> = [];
 
-$: activeUrl = $page.url.searchParams.get('page');
+  $: activeUrl = $page.url.searchParams.get('page');
 
-$: {
-  pages.forEach((page) => {
-    let splitUrl = page.href.split('?');
-    let queryString = splitUrl.slice(1).join('?');
-    const hrefParams = new URLSearchParams(queryString);
-    let hrefValue = hrefParams.get('page');
-    if (hrefValue === activeUrl) {
-      page.active = true;
-    } else {
-      page.active = false;
-    }
-  });
-  pages = pages;
-}
+  $: {
+    pages.forEach((page) => {
+      let splitUrl = page.href.split('?');
+      let queryString = splitUrl.slice(1).join('?');
+      const hrefParams = new URLSearchParams(queryString);
+      let hrefValue = hrefParams.get('page');
+      if (hrefValue === activeUrl) {
+        page.active = true;
+      } else {
+        page.active = false;
+      }
+    });
+    pages = pages;
+  }
 
-const previous = () => {
-  const current = ($page.url.searchParams.has('page')) ? Number($page.url.searchParams.get('page')) : 1;
-  if (current <= 1) return
-  goto('/transactions?page=' + (current - 1))
-};
-const next = () => {
-  const current = ($page.url.searchParams.has('page')) ? Number($page.url.searchParams.get('page')) : 0;
-  if (current >= numPages) return
-  goto('/transactions?page=' + (current + 1))
-};
-afterNavigate((nav) => {
-  const mypage = ($page.url.searchParams.size === 0) ? 0 : Number($page.url.searchParams.get('page'))
-  dispatch("fetch_page", { page: mypage - 1 });
-})
+  const previous = () => {
+    const current = ($page.url.searchParams.has('page')) ? Number($page.url.searchParams.get('page')) : 1;
+    if (current <= 1) return
+    goto('/transactions?page=' + (current - 1))
+  };
+  const next = () => {
+    const current = ($page.url.searchParams.has('page')) ? Number($page.url.searchParams.get('page')) : 0;
+    if (current >= numPages) return
+    goto('/transactions?page=' + (current + 1))
+  };
+  afterNavigate((nav) => {
+    const mypage = ($page.url.searchParams.size === 0) ? 0 : Number($page.url.searchParams.get('page'))
+    dispatch("fetch_page", { page: mypage - 1 });
+  })
 
-onMount(async () => {
-  let active = false;
-  for (let i=0; i < numPages; i++) {
-    let name = Number(i+1)
-    if ((i === 0 && ($page.url.searchParams.size === 0))) active = true
-    else if ((i+1) === Number($page.url.searchParams.get('page'))) active = true
-    pages.push({name: String(name), href: '/transactions?page=' + (i+1), active})
-    active = false;
-  }
-  inited = true;
-})
+  onMount(async () => {
+    let active = false;
+    for (let i=0; i < numPages; i++) {
+      let name = Number(i+1)
+      if ((i === 0 && ($page.url.searchParams.size === 0))) active = true
+      else if ((i+1) === Number($page.url.searchParams.get('page'))) active = true
+      pages.push({name: String(name), href: '/transactions?page=' + (i+1), active})
+      active = false;
+    }
+    inited = true;
+  })
 
 </script>
 
 {#if totalEvents > 0 && inited}
-<div class="">
-  <div class="">
-    <Pagination {pages} on:previous={previous} on:next={next} icon>
-      <svelte:fragment slot="prev">
-        <span class="sr-only">Previous</span>
-        <ChevronLeftOutline class="w-2.5 h-2.5" />
-      </svelte:fragment>
-      <svelte:fragment slot="next">
-        <span class="sr-only">Next</span>
-        <ChevronRightOutline class="w-2.5 h-2.5" />
-      </svelte:fragment>
-    </Pagination>
-  </div>
-</div>
+  <Pagination
+    {pages}
+    on:previous={previous}
+    on:next={next}
+    normalClass="!bg-gray-1000 !dark:bg-gray-1000 !border-[0.5px] !border-gray-700 !hover:bg-gray-800 !dark:hover:bg-gray-800"
+    activeClass="!dark:gray-700 !bg-primary-500/10 !border-[0.5px] !border-gray-700 !dark:bg-primary-500/10 !text-primary-500"
+  >
+    <svelte:fragment slot="prev">
+      <span class="sr-only">Previous</span>
+      <ChevronLeftOutline class="w-2.5 h-2.5" />
+    </svelte:fragment>
+    <svelte:fragment slot="next">
+      <span class="sr-only">Next</span>
+      <ChevronRightOutline class="w-2.5 h-2.5" />
+    </svelte:fragment>
+  </Pagination>
 {/if}
diff --git a/src/routes/transactions/+page.svelte b/src/routes/transactions/+page.svelte
index b37dec21..e45a2c09 100644
--- a/src/routes/transactions/+page.svelte
+++ b/src/routes/transactions/+page.svelte
@@ -1,79 +1,53 @@
 <script lang="ts">
-import { onMount } from 'svelte';
-import { page } from '$app/stores';
-import { COMMS_ERROR, explorerTxUrl } from '$lib/utils.js'
-import { truncate, explorerBtcTxUrl } from '$lib/utils'
-import { findSbtcEventByBitcoinAddress, findSbtcEventByStacksAddress, findSbtcEventsByPage } from '$lib/bridge_api'
-import { fmtNumber, type SbtcClarityEvent } from 'sbtc-bridge-lib'
-import { goto } from '$app/navigation'
-import { satsToBitcoin } from '$lib/utils'
-import ArrowUpRight from '$lib/components/shared/ArrowUpRight.svelte';
-import Paging from '$lib/components/transactions/Paging.svelte';
-import { Toggle } from 'flowbite-svelte'
-	import { sbtcConfig } from '$stores/stores';
-	import { CONFIG } from '$lib/config';
+  import { onMount } from 'svelte';
+  import { Skeleton, Tabs, TabItem, } from 'flowbite-svelte';
 
-// fetch/hydrate data from local storage
-let inited = false;
-let sbtcEvents:{ results: Array<SbtcClarityEvent>, events:number}
-let errorReason:string|undefined;
-let myDepositsFilter:boolean;
-const limit = 20;
-let numPages = 0;
+  import { page } from '$app/stores';
+  import { COMMS_ERROR, explorerTxUrl } from '$lib/utils.js'
+  import { truncate, explorerBtcTxUrl } from '$lib/utils'
+  import { findSbtcEventByBitcoinAddress, findSbtcEventsByPage } from '$lib/bridge_api'
+  import { type SbtcClarityEvent } from 'sbtc-bridge-lib'
+  import { sbtcConfig } from '$stores/stores';
+  import { CONFIG } from '$lib/config';
 
-const getReclaimUrl = (pegin:any) => {
-    goto('/transactions/' + pegin.bitcoinTxid.payload.value.split('x')[1])
-}
+  // fetch/hydrate data from local storage
+  let inited = false;
+  let sbtcEvents:{ results: Array<SbtcClarityEvent>, events:number}
+  let errorReason:string|undefined;
+  let myDepositsFilter:boolean = false;
+  const limit = 20;
+  let numPages = 0;
 
-const getType = (eventType:string|undefined) => {
-    return (eventType === 'mint') ? 'deposit' : 'withdrawal'
-}
-
-const getAddress = (event:any) => {
-    const type = getType(event.payloadData.eventType)
-    if (event.payloadData.eventType === 'mint') {
-        return event.recipient
-    }
-}
-
-const toggleMine = async () => {
-    sbtcEvents.results = []
-    sbtcEvents.events = 0
-    myDepositsFilter = !myDepositsFilter
-    if (!myDepositsFilter) await fetchPageCheck(0)
-    else fetchMine()
-}
-
-const fetchMine = async () => {
+  const fetchMine = async () => {
     const mySbtcEvents = await findSbtcEventByBitcoinAddress($sbtcConfig.keySets[CONFIG.VITE_NETWORK].cardinal)
     sbtcEvents.results = mySbtcEvents
     sbtcEvents.events = mySbtcEvents.length
-}
+  }
 
-const fetchPage = async (evt:any) => {
+  const fetchPage = async (evt:any) => {
     await fetchPageCheck(evt.detail.page)
-}
+  }
 
-const fetchPageCheck = async (mypage:number) => {
+  const fetchPageCheck = async (mypage:number) => {
     if (mypage < 0) mypage = 0
     if (mypage > numPages) mypage = numPages
     sbtcEvents = await findSbtcEventsByPage(mypage, limit)
     const resid = ((sbtcEvents.events % limit) > 0) ? 1 : 0;
     numPages = Math.floor(sbtcEvents.events / limit) + resid;
-}
+  }
 
-onMount(async () => {
+  onMount(async () => {
     try {
-        let mypage = 0;
-        if ($page.url.searchParams.has('page')) {
-            mypage = Number($page.url.searchParams.get('page')) - 1
-        }
-        await fetchPageCheck(mypage)
-        inited = true;
+      let mypage = 0;
+      if ($page.url.searchParams.has('page')) {
+        mypage = Number($page.url.searchParams.get('page')) - 1
+      }
+      await fetchPageCheck(mypage)
+      inited = true;
     } catch (err) {
-        errorReason = COMMS_ERROR;
+      errorReason = COMMS_ERROR;
     }
-})
+  })
 </script>
 
 <svelte:head>
@@ -82,78 +56,33 @@ onMount(async () => {
 </svelte:head>
 
 <div class="py-6 mx-auto max-w-7xl md:px-6">
-    <div class="flex flex-col w-full my-8">
-      <div class="flex flex-col w-full border-[0.5px] border-gray-700 rounded-lg p-6 sm:p-10 overflow-hidden bg-gray-1000">
-      <div class="p-5">
-        <div class=""><span class="text-4xl font-medium">Transaction History</span></div>
-        {#if inited}
-        <div class="my-5">
-            <div class="mb-5 flex justify-between">
-                <div class=""><span class="text-2xl font-normal">{(sbtcEvents) ? sbtcEvents.events : ''} Deposits & withdrawals</span></div>
-                <div class="flex gap-x-5">
-                    {#if !myDepositsFilter}<div class="text-1xl font-normal"><Paging on:fetch_page={fetchPage} {numPages} totalEvents={(sbtcEvents) ? sbtcEvents.events : 0} limit={20}/></div>{/if}
-                    <div class="bg-gray-1000 flex gap-2 align-top">
-                        <Toggle class=" text-white" checked={myDepositsFilter} on:click={() => toggleMine()} ></Toggle>
-                        {#if myDepositsFilter}
-                        <span class="text-warning-500 font-medium ms-[-10px] mt-[5px]">my txs</span>
-                        {:else}
-                        <span class="text-white font-medium ms-[-10px] mt-[5px]">all txs</span>
-                        {/if}
-                    </div>
-                </div>
+  <div class="flex flex-col w-full my-8">
+    <div class="flex flex-col w-full border-[0.5px] border-gray-700 rounded-lg p-6 sm:p-10 overflow-hidden bg-gray-1000">
+      <div class="text-4xl font-medium">Transaction History</div>
+      {#if inited}
+        <Tabs style="underline" contentClass="py-4">
+          <TabItem open={true} title="All transactions">
+            <div class="bg-white/5 rounded-md p-4 border border-gray-900">
+              <!-- Insert TxsHistoryTable table with all txs  -->
             </div>
-            <div class="w-full">
-                <div class="table-auto">
-                    <div class="w-full">
-                      <div class="grid grid-cols-5 gap-2 border-b mb-3 pb-3 flex-nowrap font-normal justify-evenly content-start">
-                        <div>Height</div>
-                        <div class="hidden:sm flex w-1/5 break-words">Address</div>
-                        <div>Amount</div>
-                        <!--<div class="hidden lg:flex">To</div>-->
-                        <div>Type</div>
-                        <div class="text-end">Actions</div>
-                      </div>
-                    </div>
-                    <div>
-                    {#each sbtcEvents.results as event}
-                    <div class="w-full grid grid-cols-5 justify-evenly my-4 text-sm font-extralight text-gray-300">
-                        <div class="flex w-1/5">{fmtNumber(event.payloadData.burnBlockHeight)}</div>
-                        <div class="hidden:sm flex w-1/5 break-words">
-                            <div class="grow"><a class="" href={explorerBtcTxUrl(event.bitcoinTxid.payload.value.split('x')[1])} target="_blank" rel="noreferrer">{truncate(event.payloadData.spendingAddress, 5)}</a></div>
-                            <div class="ms-3"><ArrowUpRight class="h-4 w-4 text-white" target={explorerBtcTxUrl(event.bitcoinTxid.payload.value.split('x')[1])} /></div>
-                        </div>
-                        <div class=" w-1/5">{satsToBitcoin(event.payloadData.amountSats)}</div>
-                        <!--<div class="hidden lg:flex ">
-                            <div class="grow"><a href={explorerBtcAddressUrl(getTo(pegin))} target="_blank" rel="noreferrer">{truncate(pegin.commitTxScript?.address)}</a></div>
-                            <div class="-translate-x-[20px]"><ArrowUpRight class="h-4 w-4 text-white" target={explorerBtcAddressUrl(getTo(pegin))} /></div>
-                        </div>-->
-                        <div class="flex w-1/5">
-                            <div class="sm:pe-2 md:pe-5">
-                                <!--
-                                {#if pegin.status === 1}<span class="status status-1">pending</span>
-                                {:else if pegin.status === 2}<span class="status status-2">committed</span>
-                                {:else if pegin.status === 3}<span class="status status-3">reclaimed</span>
-                                {:else if pegin.status === 4}<span class="status status-4">revealed</span>
-                                {:else}{pegin.status}
-                                {/if}
-                                -->
-                                {getType(event.payloadData.eventType)}
-                            </div>
-                            <div class="text-right">
-                                <ArrowUpRight class="h-4 w-4 text-white" target={explorerTxUrl(event.txid)} />
-                            </div>
-                        </div>
-                        <div class="text-end whitespace-nowrap"><a class="text-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50 hover:underline" href="/" on:click|preventDefault={() => getReclaimUrl(event)}>View details</a></div>
-                    </div>
-                    {/each}
-                    </div>
-                </div>
-                
+          </TabItem>
+          <TabItem open={!true} title="Your transactions">
+            <div class="bg-white/5 rounded-md p-4 border border-gray-900">
+              <!-- Insert TxsHistoryTable table with logged user txs  -->
             </div>
-        </div>
-        {/if}
+          </TabItem>
+        </Tabs>
+      {:else}
+        <Tabs style="underline" contentClass="mt-8">
+          <TabItem open={true} title="All transactions">
+            <Skeleton size="md" />
+          </TabItem>
+          <TabItem title="Your transactions">
+            <Skeleton size="md" />
+          </TabItem>
+        </Tabs>
+      {/if}
     </div>
-</div>
-</div>
+  </div>
 </div>