Merge pull request #149 from rainlanguage/2024-01-29-gui-order-link-v…

…aults 2024 01 29 gui order link vaults
rainlanguage · Jan 31, 2024 · 0892d6e · 0892d6e
2 parents 72ec6a3 + c8f42a0
commit 0892d6e
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 19 deletions.
diff --git 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
@@ -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/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
@@ -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

diff --git a/tauri-app/src/lib/components/ButtonBack.svelte 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>
diff --git a/tauri-app/src/lib/components/ButtonVaultLink.svelte 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>
diff --git a/tauri-app/src/lib/utils/address.ts 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
@@ -1,12 +1,13 @@
 <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';
   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';
+  import ButtonBack from '$lib/components/ButtonBack.svelte';
 
   export let data: { id: string };
   let showRemoveModal = false;
@@ -17,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>
@@ -59,24 +58,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

diff --git 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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,11 @@ query OrderQuery($id: ID!) { @@
           tokenVault {
             id
             vaultId
+            vault {
+              owner {
+                id
+              }
+            }
             token {
               id
               name
@@ Expand All / @@ -27,6 +32,11 @@ query OrderQuery($id: ID!) { @@
           tokenVault {
             id
             vaultId
+            vault {
+              owner {
+                id
+              }
+            }
             token {
               id
               name
@@ Expand Down @@