From ad39811bca59ba913c7f93ece8b7e71a838a3118 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Tue, 6 Feb 2024 13:49:39 -0700
Subject: [PATCH 1/3] feat(tauri/ui): shorten hashes in list views

---
 .../src/lib/components/HashShortened.svelte   | 27 +++++++++++++++++++
 .../src/lib/components/TableOrders.svelte     |  6 +++--
 tauri-app/src/lib/stores/toasts.ts            | 10 ++++++-
 tauri-app/src/lib/utils/hash.ts               |  4 +++
 tauri-app/src/routes/vaults/+page.svelte      |  8 +++---
 5 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 tauri-app/src/lib/components/HashShortened.svelte
 create mode 100644 tauri-app/src/lib/utils/hash.ts

diff --git a/tauri-app/src/lib/components/HashShortened.svelte b/tauri-app/src/lib/components/HashShortened.svelte
new file mode 100644
index 000000000..e38844474
--- /dev/null
+++ b/tauri-app/src/lib/components/HashShortened.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { toasts } from "$lib/stores/toasts";
+  import { Tooltip } from 'flowbite-svelte';
+  import { WalletOutline, FingerprintOutline } from "flowbite-svelte-icons";
+  import { HashType } from "$lib/utils/hash";
+
+  export let value: string;
+  export let type: HashType | undefined = undefined;
+  export let chars = 6;
+
+  $: id = `hash-${value}`;
+
+  function copy() {
+    navigator.clipboard.writeText(value);
+    toasts.success("Copied to clipboard");
+  }
+</script>
+
+<button type="button" {id} class="inline-block flex justify-start items-center space-x-2" on:click|stopPropagation={copy}>
+  {#if type === HashType.Wallet }
+    <WalletOutline size="sm" />
+  {:else if type == HashType.Identifier }
+    <FingerprintOutline size="sm" />
+  {/if}
+  <div>{value.slice(0, chars)}...{value.slice(-1 * chars)}</div>
+</button>
+<Tooltip triggeredBy={`#${id}`}>{value}</Tooltip>
\ No newline at end of file
diff --git a/tauri-app/src/lib/components/TableOrders.svelte b/tauri-app/src/lib/components/TableOrders.svelte
index 6571a57be..18aeca9e7 100644
--- a/tauri-app/src/lib/components/TableOrders.svelte
+++ b/tauri-app/src/lib/components/TableOrders.svelte
@@ -20,6 +20,8 @@
   import type { PaginatedCachedStore } from '$lib/stores/paginatedStore';
   import type { Order } from '$lib/typeshare/ordersList';
   import ButtonLoading from './ButtonLoading.svelte';
+  import HashShortened from './HashShortened.svelte';
+  import { HashType } from '$lib/utils/hash';
 
   export let ordersList: PaginatedCachedStore<Order>;
 </script>
@@ -47,8 +49,8 @@
               <Badge color="yellow">Inactive</Badge>
             {/if}
           </TableBodyCell>
-          <TableBodyCell tdClass="break-all px-4 py-2">{order.id}</TableBodyCell>
-          <TableBodyCell tdClass="break-all px-4 py-2">{order.owner.id}</TableBodyCell>
+          <TableBodyCell tdClass="break-all px-4 py-2"><HashShortened type={HashType.Identifier} value={order.id} /></TableBodyCell>
+          <TableBodyCell tdClass="break-all px-4 py-2"><HashShortened type={HashType.Wallet} value={order.owner.id} /></TableBodyCell>
           <TableBodyCell tdClass="break-word px-4 py-2">
             {formatTimestampSecondsAsLocal(BigInt(order.timestamp))}
           </TableBodyCell>
diff --git a/tauri-app/src/lib/stores/toasts.ts b/tauri-app/src/lib/stores/toasts.ts
index f1f898ab1..72076739a 100644
--- a/tauri-app/src/lib/stores/toasts.ts
+++ b/tauri-app/src/lib/stores/toasts.ts
@@ -37,10 +37,18 @@ function useToastsStore(autohideMs = 5000) {
     });
   }
 
+  function success(text: string) {
+    add({
+      message_type: ToastMessageType.Success,
+      text
+    });
+  }
+
   return {
     subscribe: toasts.subscribe,
     add,
-    error
+    error,
+    success
   }
 }
 
diff --git a/tauri-app/src/lib/utils/hash.ts b/tauri-app/src/lib/utils/hash.ts
new file mode 100644
index 000000000..aae9ffdaf
--- /dev/null
+++ b/tauri-app/src/lib/utils/hash.ts
@@ -0,0 +1,4 @@
+export enum HashType {
+  Identifier,
+  Wallet,
+}
\ No newline at end of file
diff --git a/tauri-app/src/routes/vaults/+page.svelte b/tauri-app/src/routes/vaults/+page.svelte
index b72bbdf86..2aa2db50e 100644
--- a/tauri-app/src/routes/vaults/+page.svelte
+++ b/tauri-app/src/routes/vaults/+page.svelte
@@ -23,6 +23,8 @@
   import type { TokenVault } from '$lib/typeshare/vaultsList';
   import ButtonsPagination from '$lib/components/ButtonsPagination.svelte';
   import ButtonLoading from '$lib/components/ButtonLoading.svelte';
+  import HashShortened from '$lib/components/HashShortened.svelte';
+  import { HashType } from '$lib/utils/hash';
 
   let showDepositModal = false;
   let showWithdrawModal = false;
@@ -51,9 +53,9 @@
       {#each $vaultsList.currentPage as vault}
         <TableBodyRow on:click={() => {goto(`/vaults/${vault.id}`)}}>
           <TableBodyCell tdClass="break-all px-4 py-2">{toHex(vault.vault_id)}</TableBodyCell>
-          <TableBodyCell tdClass="break-all px-4 py-2">{vault.owner.id}</TableBodyCell>
-          <TableBodyCell tdClass="break-word p-2">{vault.token.name}</TableBodyCell>
-          <TableBodyCell tdClass="break-all p-2">
+          <TableBodyCell tdClass="break-all px-4 py-2 min-w-48"><HashShortened type={HashType.Wallet} value={vault.owner.id} /></TableBodyCell>
+          <TableBodyCell tdClass="break-word p-2 min-w-48">{vault.token.name}</TableBodyCell>
+          <TableBodyCell tdClass="break-all p-2 min-w-48">
             {vault.balance_display}
             {vault.token.symbol}
           </TableBodyCell>

From b91fdb2eff3361e0cf5efaf0f7da53200838a2dc Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Tue, 6 Feb 2024 14:06:29 -0700
Subject: [PATCH 2/3] feat(tauri/ui): transaction hash type, use for deposits &
 withdraws table

---
 .../{HashShortened.svelte => Hash.svelte}       | 17 ++++++++++++-----
 tauri-app/src/lib/components/TableOrders.svelte |  6 +++---
 tauri-app/src/lib/utils/hash.ts                 |  1 +
 tauri-app/src/routes/vaults/+page.svelte        |  4 ++--
 tauri-app/src/routes/vaults/[id]/+page.svelte   | 10 ++++++----
 5 files changed, 24 insertions(+), 14 deletions(-)
 rename tauri-app/src/lib/components/{HashShortened.svelte => Hash.svelte} (56%)

diff --git a/tauri-app/src/lib/components/HashShortened.svelte b/tauri-app/src/lib/components/Hash.svelte
similarity index 56%
rename from tauri-app/src/lib/components/HashShortened.svelte
rename to tauri-app/src/lib/components/Hash.svelte
index e38844474..f8ab6e139 100644
--- a/tauri-app/src/lib/components/HashShortened.svelte
+++ b/tauri-app/src/lib/components/Hash.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
   import { toasts } from "$lib/stores/toasts";
   import { Tooltip } from 'flowbite-svelte';
-  import { WalletOutline, FingerprintOutline } from "flowbite-svelte-icons";
+  import { WalletOutline, FingerprintOutline, ClipboardListOutline } from "flowbite-svelte-icons";
   import { HashType } from "$lib/utils/hash";
 
   export let value: string;
   export let type: HashType | undefined = undefined;
-  export let chars = 6;
+  export let short = true;
+  export let sliceLen = 5;
 
   $: id = `hash-${value}`;
+  $: displayValue = value && short ? `${value.slice(0, sliceLen)}...${value.slice(-1 * sliceLen)}` : value;
 
   function copy() {
     navigator.clipboard.writeText(value);
@@ -19,9 +21,14 @@
 <button type="button" {id} class="inline-block flex justify-start items-center space-x-2" on:click|stopPropagation={copy}>
   {#if type === HashType.Wallet }
     <WalletOutline size="sm" />
-  {:else if type == HashType.Identifier }
+  {:else if type === HashType.Identifier }
     <FingerprintOutline size="sm" />
+  {:else if type === HashType.Transaction}
+    <ClipboardListOutline size="sm" />
   {/if}
-  <div>{value.slice(0, chars)}...{value.slice(-1 * chars)}</div>
+  <div>{displayValue}</div>
 </button>
-<Tooltip triggeredBy={`#${id}`}>{value}</Tooltip>
\ No newline at end of file
+
+{#if short}
+  <Tooltip triggeredBy={`#${id}`}>{value}</Tooltip>
+{/if}
\ No newline at end of file
diff --git a/tauri-app/src/lib/components/TableOrders.svelte b/tauri-app/src/lib/components/TableOrders.svelte
index 18aeca9e7..ac1df2180 100644
--- a/tauri-app/src/lib/components/TableOrders.svelte
+++ b/tauri-app/src/lib/components/TableOrders.svelte
@@ -20,7 +20,7 @@
   import type { PaginatedCachedStore } from '$lib/stores/paginatedStore';
   import type { Order } from '$lib/typeshare/ordersList';
   import ButtonLoading from './ButtonLoading.svelte';
-  import HashShortened from './HashShortened.svelte';
+  import Hash from './Hash.svelte';
   import { HashType } from '$lib/utils/hash';
 
   export let ordersList: PaginatedCachedStore<Order>;
@@ -49,8 +49,8 @@
               <Badge color="yellow">Inactive</Badge>
             {/if}
           </TableBodyCell>
-          <TableBodyCell tdClass="break-all px-4 py-2"><HashShortened type={HashType.Identifier} value={order.id} /></TableBodyCell>
-          <TableBodyCell tdClass="break-all px-4 py-2"><HashShortened type={HashType.Wallet} value={order.owner.id} /></TableBodyCell>
+          <TableBodyCell tdClass="break-all px-4 py-2"><Hash type={HashType.Identifier} value={order.id} /></TableBodyCell>
+          <TableBodyCell tdClass="break-all px-4 py-2"><Hash type={HashType.Wallet} value={order.owner.id} /></TableBodyCell>
           <TableBodyCell tdClass="break-word px-4 py-2">
             {formatTimestampSecondsAsLocal(BigInt(order.timestamp))}
           </TableBodyCell>
diff --git a/tauri-app/src/lib/utils/hash.ts b/tauri-app/src/lib/utils/hash.ts
index aae9ffdaf..28621c1fb 100644
--- a/tauri-app/src/lib/utils/hash.ts
+++ b/tauri-app/src/lib/utils/hash.ts
@@ -1,4 +1,5 @@
 export enum HashType {
   Identifier,
   Wallet,
+  Transaction,
 }
\ No newline at end of file
diff --git a/tauri-app/src/routes/vaults/+page.svelte b/tauri-app/src/routes/vaults/+page.svelte
index d3e262085..bd75beb94 100644
--- a/tauri-app/src/routes/vaults/+page.svelte
+++ b/tauri-app/src/routes/vaults/+page.svelte
@@ -22,7 +22,7 @@
   import type { TokenVault } from '$lib/typeshare/vaultsList';
   import ButtonsPagination from '$lib/components/ButtonsPagination.svelte';
   import ButtonLoading from '$lib/components/ButtonLoading.svelte';
-  import HashShortened from '$lib/components/HashShortened.svelte';
+  import Hash from '$lib/components/Hash.svelte';
   import { HashType } from '$lib/utils/hash';
   import { bigintStringToHex } from '$lib/utils/hex';
 
@@ -53,7 +53,7 @@
       {#each $vaultsList.currentPage as vault}
         <TableBodyRow on:click={() => {goto(`/vaults/${vault.id}`)}}>
           <TableBodyCell tdClass="break-all px-4 py-2">{bigintStringToHex(vault.vault_id)}</TableBodyCell>
-          <TableBodyCell tdClass="break-all px-4 py-2 min-w-48"><HashShortened type={HashType.Wallet} value={vault.owner.id} /></TableBodyCell>
+          <TableBodyCell tdClass="break-all px-4 py-2 min-w-48"><Hash type={HashType.Wallet} value={vault.owner.id} /></TableBodyCell>
           <TableBodyCell tdClass="break-word p-2 min-w-48">{vault.token.name}</TableBodyCell>
           <TableBodyCell tdClass="break-all p-2 min-w-48">
             {vault.balance_display}
diff --git a/tauri-app/src/routes/vaults/[id]/+page.svelte b/tauri-app/src/routes/vaults/[id]/+page.svelte
index ab14586de..0bf6acf29 100644
--- a/tauri-app/src/routes/vaults/[id]/+page.svelte
+++ b/tauri-app/src/routes/vaults/[id]/+page.svelte
@@ -22,6 +22,8 @@
   import ButtonLoading from '$lib/components/ButtonLoading.svelte';
   import { FileCsvOutline } from 'flowbite-svelte-icons';
   import ButtonsPagination  from '$lib/components/ButtonsPagination.svelte';
+  import Hash from '$lib/components/Hash.svelte';
+  import { HashType } from '$lib/utils/hash';
 
   let showDepositModal = false;
   let showWithdrawModal = false;
@@ -113,11 +115,11 @@
                     <TableBodyCell tdClass="px-4 py-2">
                       {formatTimestampSecondsAsLocal(BigInt(vaultBalanceChange.content.timestamp))}
                     </TableBodyCell>
-                    <TableBodyCell tdClass="break-all py-2 text-xs space-y-1">
-                      {vaultBalanceChange.content.sender.id}
+                    <TableBodyCell tdClass="break-all py-2 min-w-48">
+                      <Hash type={HashType.Wallet} value={vaultBalanceChange.content.sender.id} />
                     </TableBodyCell>
-                    <TableBodyCell tdClass="break-all py-2 text-xs space-y-1">
-                      {vaultBalanceChange.content.transaction.id}
+                    <TableBodyCell tdClass="break-all py-2 min-w-48">
+                      <Hash type={HashType.Transaction} value={vaultBalanceChange.content.transaction.id} />
                     </TableBodyCell>
                     <TableBodyCell tdClass="break-word p-2 text-right">
                       {vaultBalanceChange.type === 'Withdraw' ? '-' : ''}{vaultBalanceChange.content.amount_display} {vaultBalanceChange.content.token_vault.token.symbol}

From 25b40b71f5cce44163ddb8c741bc2740dd4911b1 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Tue, 6 Feb 2024 14:31:16 -0700
Subject: [PATCH 3/3] feat(tauri/ui): display non-shortened hash on Vault
 Detail, Order Detial pages

---
 tauri-app/src/lib/components/Hash.svelte      | 19 ++++++++++++++-----
 tauri-app/src/routes/orders/[id]/+page.svelte |  8 +++++---
 tauri-app/src/routes/vaults/[id]/+page.svelte |  2 +-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/tauri-app/src/lib/components/Hash.svelte b/tauri-app/src/lib/components/Hash.svelte
index f8ab6e139..e4b140dd2 100644
--- a/tauri-app/src/lib/components/Hash.svelte
+++ b/tauri-app/src/lib/components/Hash.svelte
@@ -6,11 +6,11 @@
 
   export let value: string;
   export let type: HashType | undefined = undefined;
-  export let short = true;
+  export let shorten = true;
   export let sliceLen = 5;
 
-  $: id = `hash-${value}`;
-  $: displayValue = value && short ? `${value.slice(0, sliceLen)}...${value.slice(-1 * sliceLen)}` : value;
+  $: id = shorten ? `hash-${value}` : undefined;
+  $: displayValue = value && shorten ? `${value.slice(0, sliceLen)}...${value.slice(-1 * sliceLen)}` : value;
 
   function copy() {
     navigator.clipboard.writeText(value);
@@ -29,6 +29,15 @@
   <div>{displayValue}</div>
 </button>
 
-{#if short}
-  <Tooltip triggeredBy={`#${id}`}>{value}</Tooltip>
+{#if shorten}
+  <Tooltip triggeredBy={`#${id}`} class="inline-block flex justify-start items-center space-x-2">
+    {#if type === HashType.Wallet }
+      <WalletOutline size="sm" />
+    {:else if type === HashType.Identifier }
+      <FingerprintOutline size="sm" />
+    {:else if type === HashType.Transaction}
+      <ClipboardListOutline size="sm" />
+    {/if}
+    <div>{value}</div>
+  </Tooltip>
 {/if}
\ No newline at end of file
diff --git a/tauri-app/src/routes/orders/[id]/+page.svelte b/tauri-app/src/routes/orders/[id]/+page.svelte
index 519195dc0..a6455da1d 100644
--- a/tauri-app/src/routes/orders/[id]/+page.svelte
+++ b/tauri-app/src/routes/orders/[id]/+page.svelte
@@ -9,6 +9,8 @@
   import { orderRemove } from '$lib/utils/orderRemove';
   import PageHeader from '$lib/components/PageHeader.svelte';
   import { page } from '$app/stores';
+  import Hash from '$lib/components/Hash.svelte';
+  import { HashType } from '$lib/utils/hash';
 
   let isSubmitting = false;
 
@@ -40,14 +42,14 @@
   <div class="text-center text-gray-900 dark:text-white">Order not found</div>
 {:else}
   <div class="flex w-full flex-wrap justify-evenly space-y-12 xl:space-x-8 2xl:space-y-0">
-    <Card class="relative" size="lg">
+    <Card class="relative" size="xl">
       <BadgeActive active={order.order_active} class="absolute right-5 top-5"/>
       <div class="mt-4">
         <h5 class="mb-2 w-full text-xl font-bold tracking-tight text-gray-900 dark:text-white">
           Order ID
         </h5>
         <p class="break-all font-normal leading-tight text-gray-700 dark:text-gray-400">
-          {order.id}
+          <Hash type={HashType.Identifier} shorten={false} value={order.id} />
         </p>
       </div>
 
@@ -56,7 +58,7 @@
           Owner Address
         </h5>
         <p class="break-all font-normal leading-tight text-gray-700 dark:text-gray-400">
-          {order.owner.id}
+          <Hash type={HashType.Wallet} shorten={false} value={order.owner.id} />
         </p>
       </div>
 
diff --git a/tauri-app/src/routes/vaults/[id]/+page.svelte b/tauri-app/src/routes/vaults/[id]/+page.svelte
index 0bf6acf29..d1e93b6fe 100644
--- a/tauri-app/src/routes/vaults/[id]/+page.svelte
+++ b/tauri-app/src/routes/vaults/[id]/+page.svelte
@@ -70,7 +70,7 @@
           Owner Address
         </h5>
         <p class="break-all font-normal leading-tight text-gray-700 dark:text-gray-400">
-          {vault.owner.id}
+          <Hash type={HashType.Wallet} shorten={false} value={vault.owner.id} />
         </p>
       </div>