Merge pull request #178 from rainlanguage/2024-02-03-gui-vault-balanc…

…e-changes

2024 02 03 gui vault balance changes

crates/subgraph/src/types/vault_balance_change.rs

@@ -4,6 +4,7 @@ use typeshare::typeshare;
 
 #[typeshare]
 #[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(tag = "type", content = "content")]
 pub enum VaultBalanceChange {
     Deposit(VaultDeposit),
     Withdraw(VaultWithdraw),

flake.nix

@@ -24,6 +24,9 @@
               mkdir -p tauri-app/src/lib/typeshare;
               typeshare crates/subgraph/src/types/vault_detail.rs --lang=typescript --output-file=tauri-app/src/lib/typeshare/vaultDetail.ts;
               typeshare crates/subgraph/src/types/vaults_list.rs --lang=typescript --output-file=tauri-app/src/lib/typeshare/vaultsList.ts;
+              typeshare crates/subgraph/src/types/vault_list_balance_changes.rs --lang=typescript --output-file=tauri-app/src/lib/typeshare/vaultListBalanceChanges.ts;
+              typeshare crates/subgraph/src/types/vault_balance_change.rs --lang=typescript --output-file=/tmp/vaultBalanceChange.ts;
+              cat /tmp/vaultBalanceChange.ts >> tauri-app/src/lib/typeshare/vaultListBalanceChanges.ts;
               typeshare crates/subgraph/src/types/order_detail.rs --lang=typescript --output-file=tauri-app/src/lib/typeshare/orderDetail.ts;
               typeshare crates/subgraph/src/types/orders_list.rs --lang=typescript --output-file=tauri-app/src/lib/typeshare/ordersList.ts;
               typeshare crates/subgraph/src/types/orders_list_for_vault.rs --lang=typescript --output-file=tauri-app/src/lib/typeshare/ordersListForVault.ts;

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

@@ -7,7 +7,7 @@ use rain_orderbook_common::{
     withdraw::WithdrawArgs,
 };
 use rain_orderbook_subgraph_client::{
-    types::{flattened::TokenVaultFlattened, vault_detail, vaults_list},
+    types::{flattened::{TokenVaultFlattened, VaultBalanceChangeFlattened}, vault_balance_change::VaultBalanceChange, vault_detail, vaults_list},
     WriteCsv,
     PaginationArgs,
 };
@@ -44,6 +44,38 @@ pub async fn vaults_list_write_csv(
     Ok(())
 }
 
+#[tauri::command]
+pub async fn vault_list_balance_changes(
+    id: String,
+    subgraph_args: SubgraphArgs,
+    pagination_args: PaginationArgs,
+) -> CommandResult<Vec<VaultBalanceChange>> {
+    let data = subgraph_args
+        .to_subgraph_client()
+        .await?
+        .vault_list_balance_changes(id.into(), pagination_args)
+        .await?;
+    Ok(data)
+}
+
+#[tauri::command]
+pub async fn vault_list_balance_changes_write_csv(
+    id: String,
+    path: PathBuf,
+    subgraph_args: SubgraphArgs,
+    pagination_args: PaginationArgs,
+) -> CommandResult<()> {
+    let data = subgraph_args
+        .to_subgraph_client()
+        .await?
+        .vault_list_balance_changes(id.into(), pagination_args)
+        .await?;
+    let data_flattened: Vec<VaultBalanceChangeFlattened> = data.into_iter().map(|o| o.into()).collect();
+    data_flattened.write_csv(path)?;
+
+    Ok(())
+}
+
 #[tauri::command]
 pub async fn vault_detail(
     id: String,

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

@@ -10,7 +10,8 @@ use commands::chain::get_chainid;
 use commands::fork::fork_parse;
 use commands::order::{order_detail, order_remove, orders_list, orders_list_write_csv};
 use commands::vault::{
-    vault_deposit, vault_detail, vault_withdraw, vaults_list, vaults_list_write_csv,
+    vault_deposit, vault_detail, vault_list_balance_changes, vault_list_balance_changes_write_csv,
+    vault_withdraw, vaults_list, vaults_list_write_csv,
 };
 use commands::wallet::get_address_from_ledger;
 
@@ -19,6 +20,8 @@ fn main() {
         .invoke_handler(tauri::generate_handler![
             vaults_list,
             vaults_list_write_csv,
+            vault_list_balance_changes,
+            vault_list_balance_changes_write_csv,
             vault_detail,
             vault_deposit,
             vault_withdraw,

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

@@ -6,6 +6,6 @@ import { usePaginatedCachedStore } from '$lib/stores/paginatedStore';
 
 export const ordersList = usePaginatedCachedStore<Order>(
   'ordersList',
-  (page, pageSize = 10) => invoke("orders_list", {subgraphArgs: { url: get(subgraphUrl)}, paginationArgs: { page, page_size: pageSize } }),
+  (page) => invoke("orders_list", {subgraphArgs: { url: get(subgraphUrl)}, paginationArgs: { page, page_size: 10 } }),
   (path) => invoke("orders_list_write_csv", { path, subgraphArgs: { url: get(subgraphUrl)}, paginationArgs: { page: 1, page_size: 1000 } })
 );

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

@@ -8,7 +8,7 @@ type Unsubscriber = () => void;
 
 export interface PaginatedCachedStore<T> {
     subscribe: ( subscriber: Subscriber<Page<T>>, invalidate?: Invalidator<Page<T>>) => Unsubscriber,
-    fetchPage: (page?: number, pageSize?: number) => Promise<void>;
+    fetchPage: (page?: number) => Promise<void>;
     fetchPrev: () => Promise<void>;
     fetchNext: () => Promise<void>;
     exportCsv: () => void;
@@ -26,7 +26,7 @@ export interface AllPages<T> {
   [pageIndex: number]: Array<T>
 }
 
-export function usePaginatedCachedStore<T>(key: string, fetchPageHandler: (page: number, pageSize: number) => Promise<Array<T>>, writeCsvHandler:  (path: string) => Promise<void>) {
+export function usePaginatedCachedStore<T>(key: string, fetchPageHandler: (page: number) => Promise<Array<T>>, writeCsvHandler:  (path: string) => Promise<void>) {
   const allPages = writable<AllPages<T>>(localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : []);
   const pageIndex = writable(1);
   const isFetching = writable(false);
@@ -50,10 +50,9 @@ export function usePaginatedCachedStore<T>(key: string, fetchPageHandler: (page:
     isExporting: $isExporting
   }));
 
-  async function fetchPage(page: number = 1, pageSize: number = 10) {
-    const res: Array<T> = await fetchPageHandler(page, pageSize);
+  async function fetchPage(page: number = 1) {
+    const res: Array<T> = await fetchPageHandler(page);
     if(res.length === 0) {
-      toasts.error("No results found");
       throw Error("No results found");
     }
 
@@ -63,7 +62,7 @@ export function usePaginatedCachedStore<T>(key: string, fetchPageHandler: (page:
     });
   }
 
-  async function swrvPage(newPage: number) {
+  async function swrvPage(newPage: number, displayError: boolean = false) {
     if(newPage <= 0) return;
     if(get(isFetching)) return;
 
@@ -74,15 +73,21 @@ export function usePaginatedCachedStore<T>(key: string, fetchPageHandler: (page:
         await promise;
         pageIndex.set(newPage);
       // eslint-disable-next-line no-empty
-      } catch(e) {}
+      } catch(e) {
+        if(displayError) {
+          toasts.error((e as Error).message);
+        }
+      }
     } else {
       pageIndex.set(newPage);
     }
     isFetching.set(false);
   }
 
-  const fetchPrev = () => swrvPage(get(pageIndex) - 1);
-  const fetchNext = () => swrvPage(get(pageIndex) + 1);
+  const fetchPrev = () => swrvPage(get(pageIndex) - 1, true);
+  const fetchNext = () => swrvPage(get(pageIndex) + 1, true);
+  const fetchFirst = () => swrvPage(1);
+
 
   async function exportCsv() {
     isExporting.set(true);
@@ -107,6 +112,7 @@ export function usePaginatedCachedStore<T>(key: string, fetchPageHandler: (page:
 
   return {
     subscribe,
+    fetchFirst,
     fetchPage,
     fetchPrev,
     fetchNext,

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

@@ -0,0 +1,12 @@
+import { get } from 'svelte/store';
+import { invoke } from '@tauri-apps/api';
+import { subgraphUrl } from '$lib/stores/settings';
+import { usePaginatedCachedStore } from './paginatedStore';
+import type { VaultBalanceChange } from '$lib/typeshare/vaultListBalanceChanges';
+
+
+export const useVaultListBalanceChanges = (id: string) =>  usePaginatedCachedStore<VaultBalanceChange>(
+  `vaultListBalanceChanges-${id}`,
+  (page) => invoke("vault_list_balance_changes", {subgraphArgs: { url: get(subgraphUrl)}, id, paginationArgs: { page, page_size: 10 } }),
+  (path) => invoke("vault_list_balance_changes_write_csv", {path, subgraphArgs: { url: get(subgraphUrl)}, id, paginationArgs: { page: 1, page_size: 1000 } })
+);

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

@@ -7,6 +7,6 @@ import { usePaginatedCachedStore } from './paginatedStore';
 
 export const vaultsList = usePaginatedCachedStore<TokenVault>(
   'vaultsList',
-  (page, pageSize = 10) => invoke("vaults_list", {subgraphArgs: { url: get(subgraphUrl)}, paginationArgs: { page, page_size: pageSize } }),
+  (page) => invoke("vaults_list", {subgraphArgs: { url: get(subgraphUrl)}, paginationArgs: { page, page_size: 10 } }),
   (path) => invoke("vaults_list_write_csv", {path, subgraphArgs: { url: get(subgraphUrl)}, paginationArgs: { page: 1, page_size: 1000 } })
 );

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

@@ -1 +1,5 @@
+import { toHex } from "viem";
+
 export const HEX_INPUT_REGEX = /^(0x)?([0-9a-f]+)?$/;
+
+export const bigintStringToHex = (val: string) => toHex(BigInt(val));

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

@@ -8,7 +8,7 @@
   import TableOrders from '$lib/components/TableOrders.svelte';
 
   redirectIfSettingsNotDefined();
-  ordersList.fetchPage(1);
+  ordersList.fetchFirst();
 </script>
 
 <PageHeader title="Orders">

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

@@ -13,7 +13,6 @@
   } from 'flowbite-svelte';
   import { goto } from '$app/navigation';
   import { vaultsList } from '$lib/stores/vaultsList';
-  import { toHex } from 'viem';
   import PageHeader from '$lib/components/PageHeader.svelte';
   import { DotsVerticalOutline, FileCsvOutline } from 'flowbite-svelte-icons';
   import { walletAddressMatchesOrBlank } from '$lib/stores/settings';
@@ -23,6 +22,7 @@
   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';
 
   let showDepositModal = false;
   let showWithdrawModal = false;
@@ -31,7 +31,7 @@
   let withdrawModalVault: TokenVault;
 
   redirectIfSettingsNotDefined();
-  vaultsList.fetchPage(1);
+  vaultsList.fetchFirst();
 </script>
 
 <PageHeader title="Vaults" />
@@ -50,7 +50,7 @@
     <TableBody>
       {#each $vaultsList.currentPage as vault}
         <TableBodyRow on:click={() => {goto(`/vaults/${vault.id}`)}}>
-          <TableBodyCell tdClass="break-all px-4 py-2">{toHex(vault.vault_id)}</TableBodyCell>
+          <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">

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

@@ -14,10 +14,14 @@
   import ModalVaultDeposit from '$lib/components/ModalVaultDeposit.svelte';
   import ModalVaultWithdraw from '$lib/components/ModalVaultWithdraw.svelte';
   import { walletAddressMatchesOrBlank } from '$lib/stores/settings';
-  import { toHex } from 'viem';
   import { formatTimestampSecondsAsLocal } from '$lib/utils/time';
   import PageHeader from '$lib/components/PageHeader.svelte';
   import { page } from '$app/stores';
+  import { useVaultListBalanceChanges } from '$lib/stores/vaultListBalanceChanges';
+  import { bigintStringToHex } from '$lib/utils/hex';
+  import ButtonLoading from '$lib/components/ButtonLoading.svelte';
+  import { FileCsvOutline } from 'flowbite-svelte-icons';
+  import ButtonsPagination  from '$lib/components/ButtonsPagination.svelte';
 
   let showDepositModal = false;
   let showWithdrawModal = false;
@@ -31,6 +35,9 @@
   function toggleWithdrawModal() {
     showWithdrawModal = !showWithdrawModal;
   }
+
+  const vaultListBalanceChanges = useVaultListBalanceChanges($page.params.id);
+  vaultListBalanceChanges.fetchFirst();
 </script>
 
 <PageHeader title="Vault">
@@ -52,7 +59,7 @@
           Vault ID
         </h5>
         <p class="break-all font-normal leading-tight text-gray-700 dark:text-gray-400">
-          {toHex(vault.vault_id)}
+          {bigintStringToHex(vault.vault_id)}
         </p>
       </div>
 
@@ -87,62 +94,49 @@
 
     <div class="max-w-screen-xl space-y-12">
       <div class="w-full">
-        <Heading tag="h4" class="mb-2">Withdrawals</Heading>
-
-        {#if !vault.vault.withdraws || vault.vault.withdraws.length === 0}
-          <div class="my-4 text-center text-gray-900 dark:text-white">No withdrawals found</div>
-        {:else}
-          <Table divClass="mx-8 cursor-pointer" hoverable={true}>
-            <TableHead>
-              <TableHeadCell>Sender</TableHeadCell>
-              <TableHeadCell>Requested Amount</TableHeadCell>
-              <TableHeadCell>Amount</TableHeadCell>
-            </TableHead>
-            <TableBody>
-              {#each vault.vault.withdraws as withdraw}
-                <TableBodyRow>
-                  <TableBodyCell tdClass="break-all px-4 py-2">{withdraw.sender.id}</TableBodyCell>
-                  <TableBodyCell tdClass="break-word p-2"
-                    >{withdraw.requested_amount_display}</TableBodyCell
-                  >
-                  <TableBodyCell tdClass="break-word p-2">{withdraw.amount_display}</TableBodyCell>
-                </TableBodyRow>
-              {/each}
-            </TableBody>
-          </Table>
-        {/if}
-      </div>
-
-      <div class="w-full">
-        <Heading tag="h4" class="mb-2">Deposits</Heading>
+        <Heading tag="h4" class="mb-2">Deposits & Withdrawals</Heading>
 
-        {#if !vault.vault.deposits || vault.vault.deposits.length === 0}
-          <div class="my-4 text-center text-gray-900 dark:text-white">No deposits found</div>
+        {#if $vaultListBalanceChanges.currentPage.length === 0}
+          <div class="my-4 text-center text-gray-900 dark:text-white">No deposits or withdrawals found</div>
         {:else}
-          <Table divClass="cursor-pointer" hoverable={true}>
+          <Table divClass="cursor-pointer">
             <TableHead>
               <TableHeadCell>Date</TableHeadCell>
               <TableHeadCell>Sender</TableHeadCell>
-
-              <TableHeadCell>Amount</TableHeadCell>
+              <TableHeadCell>Transaction Hash</TableHeadCell>
+              <TableHeadCell>Balance Change</TableHeadCell>
+              <TableHeadCell>Type</TableHeadCell>
             </TableHead>
             <TableBody>
-              {#each vault.vault.deposits as deposit}
-                <TableBodyRow>
-                  <TableBodyCell tdClass="px-4 py-2">
-                    {formatTimestampSecondsAsLocal(BigInt(deposit.timestamp))}
-                  </TableBodyCell>
-                  <TableBodyCell tdClass="break-all py-2 text-xs space-y-1">
-                    {deposit.sender.id}
-                  </TableBodyCell>
-                  <TableBodyCell tdClass="break-word p-2 text-right"
-                    >{deposit.amount_display}
-                    {vault.token.symbol}</TableBodyCell
-                  >
-                </TableBodyRow>
+              {#each $vaultListBalanceChanges.currentPage as vaultBalanceChange}
+                  <TableBodyRow>
+                    <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>
+                    <TableBodyCell tdClass="break-all py-2 text-xs space-y-1">
+                      {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}
+                    </TableBodyCell>
+                    <TableBodyCell tdClass="break-word p-2 text-right">
+                      {vaultBalanceChange.type}
+                    </TableBodyCell>
+                  </TableBodyRow>
               {/each}
             </TableBody>
           </Table>
+
+          <div class="flex justify-between mt-2">
+            <ButtonLoading size="xs" color="blue" on:click={() => vaultListBalanceChanges.exportCsv()} loading={$vaultListBalanceChanges.isExporting}>
+              <FileCsvOutline class="w-4 h-4 mr-2"/>
+              Export to CSV
+            </ButtonLoading>
+            <ButtonsPagination index={$vaultListBalanceChanges.index} on:previous={vaultListBalanceChanges.fetchPrev} on:next={vaultListBalanceChanges.fetchNext} loading={$vaultListBalanceChanges.isFetching} />
+          </div>
         {/if}
       </div>
     </div>

typeshare.toml

@@ -1,6 +1,6 @@
 [typescript.type_mappings]
 "Id" = "string"
-"BigInt" = "bigint"
+"BigInt" = "string"
 "BigDecimal" = "string"
 "Bytes" = "string"
 "Uuid" = "string"