From 26463a3aec9a851e1a8167a98baaf332759253b3 Mon Sep 17 00:00:00 2001
From: apporc <appleorchard2000@gmail.com>
Date: Tue, 10 Sep 2024 21:41:16 +0800
Subject: [PATCH] Staking: Use Table component

---
 .../(account)/(staking)/staking/+page.svelte  | 35 +------------
 .../(staking)/staking/unstaking.svelte        | 51 +++++++++++++++++++
 .../(staking)/staking/withdraw/+page.svelte   | 31 +----------
 3 files changed, 55 insertions(+), 62 deletions(-)
 create mode 100644 src/routes/[network]/(account)/(staking)/staking/unstaking.svelte

diff --git a/src/routes/[network]/(account)/(staking)/staking/+page.svelte b/src/routes/[network]/(account)/(staking)/staking/+page.svelte
index 8cd019fb..b6fa544e 100644
--- a/src/routes/[network]/(account)/(staking)/staking/+page.svelte
+++ b/src/routes/[network]/(account)/(staking)/staking/+page.svelte
@@ -9,6 +9,7 @@
 
 	import type { UnstakingRecord, WithdrawableBalance } from './utils';
 	import { getStakedBalance, getUnstakingBalances, getAPY } from './utils';
+	import UnstakingBalances from './unstaking.svelte';
 
 	const context = getContext<UnicoveContext>('state');
 	const { data } = $props();
@@ -46,39 +47,7 @@
 				>
 			</Switcher>
 		</Card>
-
-		<Card title="Unstaking Balances">
-			<table class="table-auto">
-				<thead class="border-b-2 border-shark-100/10">
-					<tr class="caption font-medium">
-						<th class="p-4 text-left">Amount</th>
-						<th class="p-4 text-right">Date available</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each unstaking as record}
-						{#if !record.savings}
-							<tr>
-								<td class="p-4">{record.balance}</td>
-								<td class="p-4 text-right"
-									>{record.date
-										? record.date.toLocaleDateString(undefined, {
-												weekday: 'long',
-												year: 'numeric',
-												month: 'long',
-												day: 'numeric'
-											})
-										: '--'}
-								</td></tr
-							>
-						{/if}
-					{/each}
-				</tbody>
-			</table>
-			<Button href="/{networkName}/staking/withdraw" variant="secondary" class="text-skyBlue-500"
-				>Withdraw</Button
-			>
-		</Card>
+		<UnstakingBalances href="/{networkName}/staking/withdraw" records={unstaking} />
 	</Switcher>
 	<Card class="gap-5">
 		<Stack class="gap-0">
diff --git a/src/routes/[network]/(account)/(staking)/staking/unstaking.svelte b/src/routes/[network]/(account)/(staking)/staking/unstaking.svelte
new file mode 100644
index 00000000..baf281eb
--- /dev/null
+++ b/src/routes/[network]/(account)/(staking)/staking/unstaking.svelte
@@ -0,0 +1,51 @@
+<!-- Unstaking balances table. -->
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { Card } from '$lib/components/layout';
+	import Button from '$lib/components/button/button.svelte';
+	import * as Table from '$lib/components/table';
+
+	import type { UnstakingRecord } from './utils';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		href?: string;
+		records?: Array<UnstakingRecord>;
+	}
+
+	const { href, records, ...props }: Props = $props();
+</script>
+
+<Card title="Unstaking Balances" {...props}>
+	<Table.Root class="table-auto">
+		<Table.Head class="border-b-2 border-shark-100/10">
+			<Table.Row class="caption font-medium">
+				<Table.Header class="text-left">Amount</Table.Header>
+				<Table.Header class="text-right">Date available</Table.Header>
+			</Table.Row>
+		</Table.Head>
+		<Table.Body>
+			{#each records as record}
+				{#if !record.savings}
+					<Table.Row>
+						<Table.Cell>{record.balance}</Table.Cell>
+						<Table.Cell class="text-right">
+							{record.date
+								? record.date.toLocaleDateString(undefined, {
+										weekday: 'long',
+										year: 'numeric',
+										month: 'long',
+										day: 'numeric'
+									})
+								: '--'}
+						</Table.Cell>
+					</Table.Row>
+				{/if}
+			{/each}
+		</Table.Body>
+	</Table.Root>
+	{#if href}
+		<Button {href} variant="secondary" class="text-skyBlue-500">Withdraw</Button>
+	{/if}
+</Card>
diff --git a/src/routes/[network]/(account)/(staking)/staking/withdraw/+page.svelte b/src/routes/[network]/(account)/(staking)/staking/withdraw/+page.svelte
index bef21c35..f63c7c2a 100644
--- a/src/routes/[network]/(account)/(staking)/staking/withdraw/+page.svelte
+++ b/src/routes/[network]/(account)/(staking)/staking/withdraw/+page.svelte
@@ -13,6 +13,7 @@
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
 	import { WithdrawState } from './state.svelte';
+	import UnstakingBalances from '../unstaking.svelte';
 
 	const context = getContext<UnicoveContext>('state');
 	const { data } = $props();
@@ -43,35 +44,7 @@
 			>
 		</Switcher>
 		<Switcher>
-			<Card title="Unstaking Balances">
-				<table class="table-auto">
-					<thead class="border-b-2 border-shark-100/10">
-						<tr class="caption font-medium">
-							<th class="p-4 text-left">Amount</th>
-							<th class="p-4 text-right">Date available</th>
-						</tr>
-					</thead>
-					<tbody>
-						{#each withdrawState.unstaking as record}
-							{#if !record.savings}
-								<tr>
-									<td class="p-4">{record.balance}</td>
-									<td class="p-4 text-right"
-										>{record.date
-											? record.date.toLocaleDateString(undefined, {
-													weekday: 'long',
-													year: 'numeric',
-													month: 'long',
-													day: 'numeric'
-												})
-											: '--'}
-									</td></tr
-								>
-							{/if}
-						{/each}
-					</tbody>
-				</table>
-			</Card>
+			<UnstakingBalances records={withdrawState.unstaking} />
 		</Switcher>
 	</Stack>
 {/if}