feat(tauri/ui): link to vault detail page from order detail page

crates/subgraph/queries/order.graphql

@@ -15,6 +15,11 @@ query OrderQuery($id: ID!) {
       tokenVault {
         id
         vaultId
+        vault {
+          owner {
+            id
+          }
+        }
         token {
           id
           name
@@ -27,6 +32,11 @@ query OrderQuery($id: ID!) {
       tokenVault {
         id
         vaultId
+        vault {
+          owner {
+            id
+          }
+        }
         token {
           id
           name

crates/subgraph/src/types/order.rs

@@ -53,9 +53,16 @@ pub struct Io {
 pub struct TokenVault {
     pub id: cynic::Id,
     pub vault_id: BigInt,
+    pub vault: Vault,
     pub token: Erc20,
 }
 
+#[typeshare]
+#[derive(cynic::QueryFragment, Debug, Clone, Serialize)]
+pub struct Vault {
+    pub owner: Account,
+}
+
 #[typeshare]
 #[derive(cynic::QueryFragment, Debug, Clone, Serialize)]
 #[cynic(graphql_type = "ERC20")]

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import type { TokenVault } from "$lib/typeshare/order";
+    import { formatAddressShorthand } from "$lib/utils/address";
+    import { Button } from "flowbite-svelte";
+    import { toHex } from "viem";
+
+    export let tokenVault: TokenVault;
+</script>
+<Button color="alternative" size="sm" on:click={() => goto(`/vaults/${tokenVault.id}`)} class="max-w-64 px-2">
+  <div class="text-left w-full">
+    <div class="text-lg mb-2 font-bold">{tokenVault.token.name}</div>
+    <div class="mb-1 overflow-hidden text-ellipsis"><span class="font-bold">Vault ID</span> {toHex(tokenVault.vault_id)}</div>
+    <div><span class="mb-1 font-bold">Owner</span> {formatAddressShorthand(tokenVault.vault.owner.id)}</div>
+  </div>
+</Button>

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

@@ -0,0 +1,8 @@
+import { getAddress, isAddress } from "viem";
+
+export function formatAddressShorthand(address: string, size=4) {
+  if(!isAddress(address)) throw Error("Must be a valid address");
+  const cased = getAddress(address);
+
+  return `${cased.slice(0, size+2)}...${cased.slice(cased.length-size, cased.length)}`;
+}

tauri-app/src/routes/orders/[id]/+page.svelte

@@ -7,6 +7,7 @@
   import ModalOrderRemove from '$lib/components/ModalOrderRemove.svelte';
   import BadgeActive from '$lib/components/BadgeActive.svelte';
   import { formatTimestampSecondsAsLocal } from '$lib/utils/time';
+  import ButtonVaultLink from '$lib/components/ButtonVaultLink.svelte';
 
   export let data: { id: string };
   let showRemoveModal = false;
@@ -59,24 +60,28 @@
 
       <div class="mt-8">
         <h5 class="mb-2 w-full text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Input Token(s)
+          Input Vaults
         </h5>
-        <p class="break-all font-normal leading-tight text-gray-700 dark:text-gray-400">
-          {order.valid_inputs?.map((t) => t.token_vault.token.name)}
-        </p>
+        <div class="flex flex-wrap space-x-2 space-y-2">
+          {#each (order.valid_inputs || []) as t}
+            <ButtonVaultLink tokenVault={t.token_vault} />
+          {/each}
+        </div>
       </div>
 
       <div class="mt-8">
         <h5 class="mb-2 w-full text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Output Token(s)
+          Output Vaults
         </h5>
-        <p class="break-all font-normal leading-tight text-gray-700 dark:text-gray-400">
-          {order.valid_outputs?.map((t) => t.token_vault.token.name)}
-        </p>
+        <div class="flex flex-wrap space-x-2 space-y-2">
+          {#each (order.valid_outputs || []) as t}
+            <ButtonVaultLink tokenVault={t.token_vault} />
+          {/each}
+        </div>
       </div>
 
       {#if $walletAddressMatchesOrBlank(order.owner.id) && order.order_active}
-        <div class="pt-4">
+        <div class="mt-8">
           <div class="flex justify-center space-x-20">
             <ButtonLoading color="blue" size="xl" on:click={() => (showRemoveModal = true)}>
               Remove