From 6183ae4c4fc331953c42491881bcd3da687cb756 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Mon, 29 Jan 2024 15:30:06 -0700
Subject: [PATCH 1/4] feat(tauri/ui): link to vault detail page from order
 detail page

---
 crates/subgraph/queries/order.graphql         | 10 ++++++++
 crates/subgraph/src/types/order.rs            |  7 ++++++
 .../src/lib/components/ButtonVaultLink.svelte | 16 +++++++++++++
 tauri-app/src/lib/utils/address.ts            |  8 +++++++
 tauri-app/src/routes/orders/[id]/+page.svelte | 23 +++++++++++--------
 5 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 tauri-app/src/lib/components/ButtonVaultLink.svelte
 create mode 100644 tauri-app/src/lib/utils/address.ts

diff --git a/crates/subgraph/queries/order.graphql b/crates/subgraph/queries/order.graphql
index 18fac545a..f47bd4555 100644
--- a/crates/subgraph/queries/order.graphql
+++ b/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
diff --git a/crates/subgraph/src/types/order.rs b/crates/subgraph/src/types/order.rs
index 9ad0a12da..e4952fb39 100644
--- a/crates/subgraph/src/types/order.rs
+++ b/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")]
diff --git a/tauri-app/src/lib/components/ButtonVaultLink.svelte b/tauri-app/src/lib/components/ButtonVaultLink.svelte
new file mode 100644
index 000000000..a45a06641
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/tauri-app/src/lib/utils/address.ts b/tauri-app/src/lib/utils/address.ts
new file mode 100644
index 000000000..60330faca
--- /dev/null
+++ b/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)}`;
+}
diff --git a/tauri-app/src/routes/orders/[id]/+page.svelte b/tauri-app/src/routes/orders/[id]/+page.svelte
index 2d3040f10..bc64f35a0 100644
--- a/tauri-app/src/routes/orders/[id]/+page.svelte
+++ b/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

From bae7b8c4d168d1e7607043e6b93e6b395eb257c5 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Mon, 29 Jan 2024 16:25:36 -0700
Subject: [PATCH 2/4] feat(tauri/ui): replace 'All Orders' and 'All Vaults'
 buttons with generic back button

---
 tauri-app/src/lib/components/ButtonBack.svelte | 8 ++++++++
 tauri-app/src/routes/orders/[id]/+page.svelte  | 8 +++-----
 tauri-app/src/routes/vaults/[id]/+page.svelte  | 6 ++----
 3 files changed, 13 insertions(+), 9 deletions(-)
 create mode 100644 tauri-app/src/lib/components/ButtonBack.svelte

diff --git a/tauri-app/src/lib/components/ButtonBack.svelte b/tauri-app/src/lib/components/ButtonBack.svelte
new file mode 100644
index 000000000..149e471be
--- /dev/null
+++ b/tauri-app/src/lib/components/ButtonBack.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Button } from "flowbite-svelte";
+  import ArrowLeftSolid from "flowbite-svelte-icons/ArrowLeftSolid.svelte";
+</script>
+
+<Button outline size="xs" class="w-32" color="primary" on:click={() => history.back()}>
+  <ArrowLeftSolid size="xs" /><span class="ml-2">Back</span>
+</Button>
\ 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 bc64f35a0..4eb8d1a8f 100644
--- a/tauri-app/src/routes/orders/[id]/+page.svelte
+++ b/tauri-app/src/routes/orders/[id]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Button, Card } from 'flowbite-svelte';
-  import ArrowLeftSolid from 'flowbite-svelte-icons/ArrowLeftSolid.svelte';
+  import { Card } from 'flowbite-svelte';
   import { orderDetail } from '$lib/stores/orderDetail';
   import { walletAddressMatchesOrBlank } from '$lib/stores/settings';
   import ButtonLoading from '$lib/components/ButtonLoading.svelte';
@@ -8,6 +7,7 @@
   import BadgeActive from '$lib/components/BadgeActive.svelte';
   import { formatTimestampSecondsAsLocal } from '$lib/utils/time';
   import ButtonVaultLink from '$lib/components/ButtonVaultLink.svelte';
+  import ButtonBack from '$lib/components/ButtonBack.svelte';
 
   export let data: { id: string };
   let showRemoveModal = false;
@@ -18,9 +18,7 @@
 
 <div class="flex w-full">
   <div class="flex-1">
-    <Button outline size="xs" class="w-32" color="primary" href="/orders">
-      <ArrowLeftSolid size="xs" /><span class="ml-2">All Orders</span>
-    </Button>
+    <ButtonBack />
   </div>
   <h1 class="flex-0 mb-8 text-4xl font-bold text-gray-900 dark:text-white">Order</h1>
   <div class="flex-1"></div>
diff --git a/tauri-app/src/routes/vaults/[id]/+page.svelte b/tauri-app/src/routes/vaults/[id]/+page.svelte
index 11b6dc362..1f1a72682 100644
--- a/tauri-app/src/routes/vaults/[id]/+page.svelte
+++ b/tauri-app/src/routes/vaults/[id]/+page.svelte
@@ -10,13 +10,13 @@
     TableBodyRow,
     TableBodyCell,
   } from 'flowbite-svelte';
-  import ArrowLeftSolid from 'flowbite-svelte-icons/ArrowLeftSolid.svelte';
   import { vaultDetail } from '$lib/stores/vaultDetail';
   import ModalVaultDeposit from '$lib/components/ModalVaultDeposit.svelte';
   import ModalVaultWithdraw from '$lib/components/ModalVaultWithdraw.svelte';
   import { walletAddress } from '$lib/stores/settings';
   import { toHex } from 'viem';
   import { formatTimestampSecondsAsLocal } from '$lib/utils/time';
+  import ButtonBack from '$lib/components/ButtonBack.svelte';
 
   export let data: { id: string };
   let showDepositModal = false;
@@ -35,9 +35,7 @@
 
 <div class="flex w-full">
   <div class="flex-1">
-    <Button outline size="xs" class="w-32" color="primary" href="/vaults">
-      <ArrowLeftSolid size="xs" /><span class="ml-2">All Vaults</span>
-    </Button>
+    <ButtonBack />
   </div>
   <h1 class="flex-0 mb-8 text-4xl font-bold text-gray-900 dark:text-white">Vault</h1>
   <div class="flex-1"></div>

From 5fdfcbbd7649a1fca297a333e82e5439ea236a7f Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Mon, 29 Jan 2024 17:30:21 -0700
Subject: [PATCH 3/4] fix: tests

---
 crates/subgraph/src/types/order_traits.rs | 12 +++++++++++-
 crates/subgraph/tests/order_test.rs       | 10 ++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/crates/subgraph/src/types/order_traits.rs b/crates/subgraph/src/types/order_traits.rs
index 8a8479998..64e27d819 100644
--- a/crates/subgraph/src/types/order_traits.rs
+++ b/crates/subgraph/src/types/order_traits.rs
@@ -58,7 +58,7 @@ impl TryInto<OrderV2> for OrderDetail {
 #[cfg(test)]
 mod tests {
     use super::*;
-    use crate::types::order::{Account, BigInt, Bytes, Erc20, Io, RainMetaV1, TokenVault};
+    use crate::types::order::{Account, BigInt, Bytes, Erc20, Io, RainMetaV1, TokenVault, Vault};
 
     #[test]
     fn test_try_into_call() {
@@ -78,6 +78,11 @@ mod tests {
                 token_vault: TokenVault {
                     id: "".into(),
                     vault_id: BigInt("1".into()),
+                    vault: Vault {
+                        owner: Account {
+                            id: Bytes("".into())
+                        }
+                    },
                     token: Erc20 {
                         id: cynic::Id::new("0x0000000000000000000000000000000000000005"),
                         name: "".into(),
@@ -90,6 +95,11 @@ mod tests {
                 token_vault: TokenVault {
                     id: "".into(),
                     vault_id: BigInt("2".into()),
+                    vault: Vault {
+                        owner: Account {
+                            id: Bytes("".into())
+                        }
+                    },
                     token: Erc20 {
                         id: cynic::Id::new("0x0000000000000000000000000000000000000006"),
                         name: "".into(),
diff --git a/crates/subgraph/tests/order_test.rs b/crates/subgraph/tests/order_test.rs
index 989acc206..a18a68a46 100644
--- a/crates/subgraph/tests/order_test.rs
+++ b/crates/subgraph/tests/order_test.rs
@@ -25,6 +25,11 @@ fn orders_query_gql_output() {
       tokenVault {
         id
         vaultId
+        vault {
+          owner {
+            id
+          }
+        }
         token {
           id
           name
@@ -37,6 +42,11 @@ fn orders_query_gql_output() {
       tokenVault {
         id
         vaultId
+        vault {
+          owner {
+            id
+          }
+        }
         token {
           id
           name

From c8f42a05ebf8535df91e84daf44b05b860998c3f Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Mon, 29 Jan 2024 17:31:36 -0700
Subject: [PATCH 4/4] chore: fmt

---
 crates/subgraph/src/types/order_traits.rs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/crates/subgraph/src/types/order_traits.rs b/crates/subgraph/src/types/order_traits.rs
index 64e27d819..8c49ab8dd 100644
--- a/crates/subgraph/src/types/order_traits.rs
+++ b/crates/subgraph/src/types/order_traits.rs
@@ -80,8 +80,8 @@ mod tests {
                     vault_id: BigInt("1".into()),
                     vault: Vault {
                         owner: Account {
-                            id: Bytes("".into())
-                        }
+                            id: Bytes("".into()),
+                        },
                     },
                     token: Erc20 {
                         id: cynic::Id::new("0x0000000000000000000000000000000000000005"),
@@ -97,8 +97,8 @@ mod tests {
                     vault_id: BigInt("2".into()),
                     vault: Vault {
                         owner: Account {
-                            id: Bytes("".into())
-                        }
+                            id: Bytes("".into()),
+                        },
                     },
                     token: Erc20 {
                         id: cynic::Id::new("0x0000000000000000000000000000000000000006"),