Merge pull request #138 from rainlanguage/2024-01-27-gui-orders-list

2024 01 27 gui orders list

crates/subgraph/src/types/orders.rs

@@ -1,4 +1,5 @@
 use crate::schema;
+use serde::Serialize;
 use typeshare::typeshare;
 
 #[typeshare]
@@ -10,7 +11,7 @@ pub struct OrdersQuery {
 }
 
 #[typeshare]
-#[derive(cynic::QueryFragment, Debug)]
+#[derive(cynic::QueryFragment, Debug, Clone, Serialize)]
 pub struct Order {
     pub id: cynic::Id,
     pub timestamp: BigInt,
@@ -29,13 +30,13 @@ pub struct Order {
 }
 
 #[typeshare]
-#[derive(cynic::QueryFragment, Debug)]
+#[derive(cynic::QueryFragment, Debug, Clone, Serialize)]
 pub struct Transaction {
     pub id: cynic::Id,
 }
 
 #[typeshare]
-#[derive(cynic::QueryFragment, Debug, Clone)]
+#[derive(cynic::QueryFragment, Debug, Clone, Serialize)]
 #[cynic(graphql_type = "IO")]
 pub struct Io {
     pub token: Erc20,
@@ -44,19 +45,19 @@ pub struct Io {
 }
 
 #[typeshare]
-#[derive(cynic::QueryFragment, Debug, Clone)]
+#[derive(cynic::QueryFragment, Debug, Clone, Serialize)]
 pub struct Vault {
     pub id: cynic::Id,
 }
 
 #[typeshare]
-#[derive(cynic::QueryFragment, Debug, Clone)]
+#[derive(cynic::QueryFragment, Debug, Clone, Serialize)]
 pub struct TokenVault {
     pub balance: BigInt,
 }
 
 #[typeshare]
-#[derive(cynic::QueryFragment, Debug, Clone)]
+#[derive(cynic::QueryFragment, Debug, Clone, Serialize)]
 #[cynic(graphql_type = "ERC20")]
 pub struct Erc20 {
     pub id: cynic::Id,
@@ -65,7 +66,7 @@ pub struct Erc20 {
 }
 
 #[typeshare]
-#[derive(cynic::QueryFragment, Debug)]
+#[derive(cynic::QueryFragment, Debug, Clone, Serialize)]
 pub struct Account {
     pub id: Bytes,
 }

tauri-app/src-tauri/src/commands/mod.rs

@@ -1,3 +1,4 @@
 pub mod chain;
 pub mod vault;
 pub mod wallet;
+pub mod order;

tauri-app/src-tauri/src/commands/order.rs

@@ -0,0 +1,17 @@
+use rain_orderbook_common::{
+    subgraph::SubgraphArgs
+};
+use rain_orderbook_subgraph_queries::types::{
+    orders::Order as OrdersListItem,
+};
+
+#[tauri::command]
+pub async fn orders_list(subgraph_args: SubgraphArgs) -> Result<Vec<OrdersListItem>, String> {
+    subgraph_args
+        .to_subgraph_client()
+        .await
+        .map_err(|_| String::from("Subgraph URL is invalid"))?
+        .orders()
+        .await
+        .map_err(|e| e.to_string())
+}

tauri-app/src-tauri/src/main.rs

@@ -7,6 +7,7 @@ pub mod transaction_status;
 mod commands;
 use commands::chain::get_chainid;
 use commands::vault::{vault_deposit, vault_detail, vault_withdraw, vaults_list};
+use commands::order::{orders_list};
 use commands::wallet::get_address_from_ledger;
 
 fn main() {
@@ -16,6 +17,7 @@ fn main() {
             vault_detail,
             vault_deposit,
             vault_withdraw,
+            orders_list,
             get_address_from_ledger,
             get_chainid
         ])

tauri-app/src/lib/stores/ordersList.ts

@@ -0,0 +1,30 @@
+import { get, writable } from 'svelte/store';
+import type { Order as OrdersListItem } from '$lib/typeshare/orders';
+import { invoke } from '@tauri-apps/api';
+import { subgraphUrl } from './settings';
+
+function useOrdersListStore() {
+  const STORAGE_KEY = "orders.ordersList";
+
+  const { subscribe, set } = writable<Array<OrdersListItem>>(localStorage.getItem(STORAGE_KEY) ? JSON.parse(localStorage.getItem(STORAGE_KEY) as string) : []);
+
+  subscribe(value => {
+    if(value) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+    } else {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify([]));
+    }
+  });
+
+  async function refetch() {
+    const res: Array<OrdersListItem> = await invoke("orders_list", {subgraphArgs: { url: get(subgraphUrl)} });
+    set(res);
+  }
+
+  return {
+    subscribe,
+    refetch
+  }
+}
+
+export const ordersList = useOrdersListStore();

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

@@ -1,8 +1,90 @@
 <script lang="ts">
-  import { Heading } from 'flowbite-svelte';
   import { redirectIfSettingsNotDefined } from '$lib/utils/redirect';
+  import {
+    Button,
+    Table,
+    TableBody,
+    TableBodyCell,
+    TableBodyRow,
+    TableHead,
+    TableHeadCell,
+    Badge,
+  } from 'flowbite-svelte';
+  import { goto } from '$app/navigation';
+  import { ordersList } from '$lib/stores/ordersList';
+  import dayjs from 'dayjs';
+  import utc from 'dayjs/plugin/utc';
+  import bigIntSupport from 'dayjs/plugin/bigIntSupport';
+  dayjs.extend(utc);
+  dayjs.extend(bigIntSupport);
+
+  let showDepositModal = false;
+  let showWithdrawModal = false;
+
+  function gotoOrder(id: string) {
+    goto(`/orders/${id}`);
+  }
+
+  function toggleDepositModal() {
+    showDepositModal = !showDepositModal;
+  }
+  function toggleWithdrawModal() {
+    showWithdrawModal = !showWithdrawModal;
+  }
 
   redirectIfSettingsNotDefined();
+  ordersList.refetch();
 </script>
 
-<Heading tag="h1" class="text-center text-4xl font-bold">Orders</Heading>
+<div class="flex w-full">
+  <div class="flex-1"></div>
+  <h1 class="flex-0 mb-8 text-4xl font-bold text-gray-900 dark:text-white">Orders</h1>
+  <div class="flex-1">
+    <div class="flex justify-end space-x-2">
+      <Button color="green" size="xs" on:click={toggleDepositModal}>Add</Button>
+      <Button color="blue" size="xs" on:click={toggleWithdrawModal}>Remove</Button>
+    </div>
+  </div>
+</div>
+
+{#if $ordersList.length === 0}
+  <div class="text-center text-gray-900 dark:text-white">No Orders found</div>
+{:else}
+  <Table divClass="cursor-pointer" hoverable={true}>
+    <TableHead>
+      <TableHeadCell>Active</TableHeadCell>
+      <TableHeadCell>Order ID</TableHeadCell>
+      <TableHeadCell>Owner</TableHeadCell>
+      <TableHeadCell>Added At</TableHeadCell>
+      <TableHeadCell>Input Token(s)</TableHeadCell>
+      <TableHeadCell>Output Token(s)</TableHeadCell>
+    </TableHead>
+    <TableBody>
+      {#each $ordersList as order}
+        <TableBodyRow on:click={() => gotoOrder(order.id)}>
+          <TableBodyCell tdClass="px-4 py-2">
+            {#if order.order_active}
+              <Badge color="green">Active</Badge>
+            {:else}
+              <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-word px-4 py-2">
+            {dayjs(BigInt(order.timestamp) * BigInt('1000'))
+              .utc(true)
+              .local()
+              .format('DD/MM/YYYY h:mm A')}
+          </TableBodyCell>
+          <TableBodyCell tdClass="break-word p-2">
+            {order.valid_inputs?.map((t) => t.token.symbol)}
+          </TableBodyCell>
+          <TableBodyCell tdClass="break-word p-2">
+            {order.valid_outputs?.map((t) => t.token.symbol)}
+          </TableBodyCell>
+        </TableBodyRow>
+      {/each}
+    </TableBody>
+  </Table>
+{/if}