Merge pull request #185 from rainlanguage/2024-02-06-gui-shortened-ha…

…shes

feat(tauri/ui): shorten hashes in list views

tauri-app/src/lib/components/Hash.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { toasts } from "$lib/stores/toasts";
+  import { Tooltip } from 'flowbite-svelte';
+  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 shorten = true;
+  export let sliceLen = 5;
+
+  $: id = shorten ? `hash-${value}` : undefined;
+  $: displayValue = value && shorten ? `${value.slice(0, sliceLen)}...${value.slice(-1 * sliceLen)}` : 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" />
+  {:else if type === HashType.Transaction}
+    <ClipboardListOutline size="sm" />
+  {/if}
+  <div>{displayValue}</div>
+</button>
+
+{#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}

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 Hash from './Hash.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"><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>

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
   }
 }
 

tauri-app/src/lib/utils/hash.ts

@@ -0,0 +1,5 @@
+export enum HashType {
+  Identifier,
+  Wallet,
+  Transaction,
+}

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>
 

tauri-app/src/routes/vaults/+page.svelte

@@ -22,7 +22,9 @@
   import type { TokenVault } from '$lib/typeshare/vaultsList';
   import ButtonsPagination from '$lib/components/ButtonsPagination.svelte';
   import ButtonLoading from '$lib/components/ButtonLoading.svelte';
-    import { bigintStringToHex } from '$lib/utils/hex';
+  import Hash from '$lib/components/Hash.svelte';
+  import { HashType } from '$lib/utils/hash';
+  import { bigintStringToHex } from '$lib/utils/hex';
 
   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">{bigintStringToHex(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"><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}
             {vault.token.symbol}
           </TableBodyCell>

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;
@@ -68,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>
 
@@ -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}