From addd2a25c086f8ef83ffcf34515e8c90cba4bd86 Mon Sep 17 00:00:00 2001 From: Matt Gabrenya Date: Wed, 7 Feb 2024 19:39:01 -0700 Subject: [PATCH 1/5] refactor(tauri/ui): generic table component --- tauri-app/src/lib/components/AppTable.svelte | 47 ++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 tauri-app/src/lib/components/AppTable.svelte diff --git a/tauri-app/src/lib/components/AppTable.svelte b/tauri-app/src/lib/components/AppTable.svelte new file mode 100644 index 000000000..dc018b74e --- /dev/null +++ b/tauri-app/src/lib/components/AppTable.svelte @@ -0,0 +1,47 @@ + + +{#if $listStore.currentPage.length === 0} +
No {itemName}s found
+{:else} + + + + + + {#each $listStore.currentPage as item} + { dispatch('clickRow', {item}) }}> + + + {/each} + +
+ + {#if enableCsvExport} +
+ listStore.exportCsv()} loading={$listStore.isExporting}> + + Export to CSV + + +
+ {/if} +{/if} \ No newline at end of file From 8002dc88df4d8ddd7ebce11cc4e145f84752ebf0 Mon Sep 17 00:00:00 2001 From: Matt Gabrenya Date: Wed, 7 Feb 2024 19:49:40 -0700 Subject: [PATCH 2/5] refactor(tauri/ui): use generic table for all tables --- tauri-app/src/lib/components/AppTable.svelte | 4 +- .../src/lib/components/TableOrders.svelte | 112 +++++++----------- tauri-app/src/routes/vaults/+page.svelte | 91 ++++++-------- tauri-app/src/routes/vaults/[id]/+page.svelte | 75 +++++------- 4 files changed, 110 insertions(+), 172 deletions(-) diff --git a/tauri-app/src/lib/components/AppTable.svelte b/tauri-app/src/lib/components/AppTable.svelte index dc018b74e..5ef38040c 100644 --- a/tauri-app/src/lib/components/AppTable.svelte +++ b/tauri-app/src/lib/components/AppTable.svelte @@ -14,13 +14,13 @@ const dispatch = createEventDispatcher(); export let listStore: PaginatedCachedStore; - export let itemName: string = "Item" + export let emptyMessage: string = "None found" export let rowHoverable = true; export let enableCsvExport = true; {#if $listStore.currentPage.length === 0} -
No {itemName}s found
+
{emptyMessage}
{:else} diff --git a/tauri-app/src/lib/components/TableOrders.svelte b/tauri-app/src/lib/components/TableOrders.svelte index cf5c06ea5..e11881f8a 100644 --- a/tauri-app/src/lib/components/TableOrders.svelte +++ b/tauri-app/src/lib/components/TableOrders.svelte @@ -1,87 +1,67 @@ -{#if $ordersList.currentPage.length === 0} -
No Orders found
-{:else} -
- - Active - Order ID - Owner - Created At - Input Token(s) - Output Token(s) - - - - {#each $ordersList.currentPage as order} - goto(`/orders/${order.id}`)}> - - {#if order.order_active} - Active - {:else} - Inactive - {/if} - - - - - {formatTimestampSecondsAsLocal(BigInt(order.timestamp))} - - - {order.valid_inputs?.map((t) => t.token.symbol)} - - - {order.valid_outputs?.map((t) => t.token.symbol)} - - - {#if $walletAddressMatchesOrBlank(order.owner.id) && order.order_active} - - {/if} - - {#if $walletAddressMatchesOrBlank(order.owner.id) && order.order_active} - - {e.stopPropagation(); orderRemove(order.id);}}>Remove - - {/if} - - {/each} - -
+ { goto(`/orders/${e.detail.item.id}`); }}> + + Active + Order ID + Owner + Created At + Input Token(s) + Output Token(s) + + -
- ordersList.exportCsv()} loading={$ordersList.isExporting}> - - Export to CSV - - -
-{/if} \ No newline at end of file + + + {#if item.order_active} + Active + {:else} + Inactive + {/if} + + + + + {formatTimestampSecondsAsLocal(BigInt(item.timestamp))} + + + {item.valid_inputs?.map((t) => t.token.symbol)} + + + {item.valid_outputs?.map((t) => t.token.symbol)} + + + {#if $walletAddressMatchesOrBlank(item.owner.id) && item.order_active} + + {/if} + + {#if $walletAddressMatchesOrBlank(item.owner.id) && item.order_active} + + {e.stopPropagation(); orderRemove(item.id);}}>Remove + + {/if} + + diff --git a/tauri-app/src/routes/vaults/+page.svelte b/tauri-app/src/routes/vaults/+page.svelte index a3f7913d9..a25aec9e2 100644 --- a/tauri-app/src/routes/vaults/+page.svelte +++ b/tauri-app/src/routes/vaults/+page.svelte @@ -4,27 +4,22 @@ Button, Dropdown, DropdownItem, - Table, - TableBody, TableBodyCell, - TableBodyRow, - TableHead, TableHeadCell, } from 'flowbite-svelte'; import { goto } from '$app/navigation'; import { vaultsList } from '$lib/stores/vaultsList'; import PageHeader from '$lib/components/PageHeader.svelte'; - import { DotsVerticalOutline, FileCsvOutline } from 'flowbite-svelte-icons'; + import { DotsVerticalOutline } from 'flowbite-svelte-icons'; import { walletAddressMatchesOrBlank } from '$lib/stores/settings'; import ModalVaultWithdraw from '$lib/components/ModalVaultWithdraw.svelte'; import ModalVaultDeposit from '$lib/components/ModalVaultDeposit.svelte'; import ModalVaultDepositGeneric from '$lib/components/ModalVaultDepositGeneric.svelte'; import type { TokenVault } from '$lib/typeshare/vaultsList'; - import ButtonsPagination from '$lib/components/ButtonsPagination.svelte'; - import ButtonLoading from '$lib/components/ButtonLoading.svelte'; import Hash from '$lib/components/Hash.svelte'; import { HashType } from '$lib/utils/hash'; import { bigintStringToHex } from '$lib/utils/hex'; + import AppTable from '$lib/components/AppTable.svelte'; let showDepositModal = false; let showWithdrawModal = false; @@ -33,60 +28,44 @@ let withdrawModalVault: TokenVault; redirectIfSettingsNotDefined(); - vaultsList.fetchFirst(); -{#if $vaultsList.currentPage.length === 0} -
No Vaults found
-{:else} - - - Vault ID - Owner - Token - Balance - - - - {#each $vaultsList.currentPage as vault} - {goto(`/vaults/${vault.id}`)}}> - {bigintStringToHex(vault.vault_id)} - - {vault.token.name} - - {vault.balance_display} - {vault.token.symbol} - - - {#if $walletAddressMatchesOrBlank(vault.owner.id)} - - {/if} - - {#if $walletAddressMatchesOrBlank(vault.owner.id)} - - {e.stopPropagation(); depositModalVault=vault; showDepositModal = true;}}>Deposit - {e.stopPropagation(); withdrawModalVault=vault; showWithdrawModal = true;}}>Withdraw - - {/if} - - {/each} - -
+ { goto(`/vaults/${e.detail.item.id}`); }}> + + Vault ID + Owner + Token + Balance + + -
- vaultsList.exportCsv()} loading={$vaultsList.isExporting}> - - Export to CSV - - -
+ + {bigintStringToHex(item.vault_id)} + + {item.token.name} + + {item.balance_display} + {item.token.symbol} + + + {#if $walletAddressMatchesOrBlank(item.owner.id)} + + {/if} + + {#if $walletAddressMatchesOrBlank(item.owner.id)} + + {e.stopPropagation(); depositModalVault=item; showDepositModal = true;}}>Deposit + {e.stopPropagation(); withdrawModalVault=item; showWithdrawModal = true;}}>Withdraw + + {/if} - - -{/if} + + + + diff --git a/tauri-app/src/routes/vaults/[id]/+page.svelte b/tauri-app/src/routes/vaults/[id]/+page.svelte index d1e93b6fe..99e314295 100644 --- a/tauri-app/src/routes/vaults/[id]/+page.svelte +++ b/tauri-app/src/routes/vaults/[id]/+page.svelte @@ -3,11 +3,7 @@ Heading, Button, Card, - Table, - TableHead, TableHeadCell, - TableBody, - TableBodyRow, TableBodyCell, } from 'flowbite-svelte'; import { vaultDetail } from '$lib/stores/vaultDetail'; @@ -19,11 +15,9 @@ 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'; import Hash from '$lib/components/Hash.svelte'; import { HashType } from '$lib/utils/hash'; + import AppTable from '$lib/components/AppTable.svelte'; let showDepositModal = false; let showWithdrawModal = false; @@ -98,48 +92,33 @@
Deposits & Withdrawals - {#if $vaultListBalanceChanges.currentPage.length === 0} -
No deposits or withdrawals found
- {:else} - - - Date - Sender - Transaction Hash - Balance Change - Type - - - {#each $vaultListBalanceChanges.currentPage as vaultBalanceChange} - - - {formatTimestampSecondsAsLocal(BigInt(vaultBalanceChange.content.timestamp))} - - - - - - - - - {vaultBalanceChange.type === 'Withdraw' ? '-' : ''}{vaultBalanceChange.content.amount_display} {vaultBalanceChange.content.token_vault.token.symbol} - - - {vaultBalanceChange.type} - - - {/each} - -
+ + + Date + Sender + Transaction Hash + Balance Change + Type + -
- vaultListBalanceChanges.exportCsv()} loading={$vaultListBalanceChanges.isExporting}> - - Export to CSV - - -
- {/if} + + + {formatTimestampSecondsAsLocal(BigInt(item.content.timestamp))} + + + + + + + + + {item.type === 'Withdraw' ? '-' : ''}{item.content.amount_display} {item.content.token_vault.token.symbol} + + + {item.type} + + +
From facfdfaeb670222446051fb8cce50bad5efb2da1 Mon Sep 17 00:00:00 2001 From: Matt Gabrenya Date: Wed, 7 Feb 2024 19:50:01 -0700 Subject: [PATCH 3/5] fix(tauri/ui): not properly displaying vault id as hex --- tauri-app/src/lib/components/ModalVaultDeposit.svelte | 4 ++-- tauri-app/src/lib/components/ModalVaultWithdraw.svelte | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tauri-app/src/lib/components/ModalVaultDeposit.svelte b/tauri-app/src/lib/components/ModalVaultDeposit.svelte index 255abfc41..e1dc0d8c3 100644 --- a/tauri-app/src/lib/components/ModalVaultDeposit.svelte +++ b/tauri-app/src/lib/components/ModalVaultDeposit.svelte @@ -4,7 +4,7 @@ import type { TokenVault as TokenVaultListItem } from '$lib/typeshare/vaultsList'; import InputTokenAmount from '$lib/components/InputTokenAmount.svelte'; import { vaultDeposit } from '$lib/utils/vaultDeposit'; - import { toHex } from 'viem'; + import { bigintStringToHex } from '$lib/utils/hex'; import ButtonLoading from '$lib/components/ButtonLoading.svelte'; export let open = false; @@ -35,7 +35,7 @@ Vault ID

- {toHex(vault.vault_id)} + {bigintStringToHex(vault.vault_id)}

diff --git a/tauri-app/src/lib/components/ModalVaultWithdraw.svelte b/tauri-app/src/lib/components/ModalVaultWithdraw.svelte index 2fc5cdef9..09d0e25d0 100644 --- a/tauri-app/src/lib/components/ModalVaultWithdraw.svelte +++ b/tauri-app/src/lib/components/ModalVaultWithdraw.svelte @@ -4,7 +4,7 @@ import type { TokenVault as TokenVaultListItem } from '$lib/typeshare/vaultsList'; import InputTokenAmount from '$lib/components/InputTokenAmount.svelte'; import { vaultWithdraw } from '$lib/utils/vaultWithdraw'; - import { toHex } from 'viem'; + import { bigintStringToHex } from '$lib/utils/hex'; import ButtonLoading from '$lib/components/ButtonLoading.svelte'; export let open = false; @@ -37,7 +37,7 @@ Vault ID

- {toHex(vault.vault_id)} + {bigintStringToHex(vault.vault_id)}

From de65244b35ae8160a91a80bd6ad9f55ea8ffef02 Mon Sep 17 00:00:00 2001 From: Matt Gabrenya Date: Wed, 7 Feb 2024 20:44:18 -0700 Subject: [PATCH 4/5] fix(tauri/ui): avoid lint error --- tauri-app/src/lib/components/AppTable.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tauri-app/src/lib/components/AppTable.svelte b/tauri-app/src/lib/components/AppTable.svelte index 5ef38040c..e75b87b2c 100644 --- a/tauri-app/src/lib/components/AppTable.svelte +++ b/tauri-app/src/lib/components/AppTable.svelte @@ -1,4 +1,5 @@ -