add accounts page

src/lib/components/navigation/sidemenu.svelte

@@ -34,12 +34,15 @@
 		];
 
 		if (context.account) {
+			items.splice(1, 0, {
+				href: `/${network}/accounts/${context.account.name}`,
+				text: 'My Account'
+			});
 			items.splice(1, 0, {
 				href: `/${network}/account/${context.account.name}`,
 				text: 'My Account'
 			});
 		}
-
 		return items;
 	});
 

src/routes/[network]/(account)/accounts/[name]/+layout.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Stack } from '$lib/components/layout';
+	import PillGroup from '$lib/components/navigation/pillgroup.svelte';
+	import Pageheader from '$lib/components/pageheader.svelte';
+
+	import type { UnicoveContext } from '$lib/state/client.svelte';
+	import { getContext } from 'svelte';
+
+	const context = getContext<UnicoveContext>('state');
+
+	const { data, children } = $props();
+
+	const tabOptions = $derived.by(() => {
+		const network = String(data.network);
+		const account = String(context.account?.name);
+		return [
+			{ href: `/${network}/accounts/${account}`, text: 'Overview' },
+			{ href: `/${network}/accounts/${account}/activity`, text: 'Activity' },
+			{ href: `/${network}/accounts/${account}/balances`, text: 'Balances' },
+			{ href: `/${network}/accounts/${account}/chaindata`, text: 'Data' }
+		];
+	});
+
+	let currentTab = $derived($page.url.pathname.split('/').pop() || 'overview');
+	let options = $derived(
+		tabOptions.map((option) => ({
+			...option,
+			active: (option.href.split('/').pop() || 'overview') === currentTab
+		}))
+	);
+
+	const subtitle = $derived(context.account?.name ? String(context.account.name) : '');
+</script>
+
+<Stack class="gap-6">
+	<Pageheader title="Account" {subtitle} />
+
+	<PillGroup {options} class="mb-6" />
+
+	{@render children()}
+</Stack>

src/routes/[network]/(account)/accounts/[name]/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Overview</div>

src/routes/[network]/(account)/accounts/[name]/activity/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Activity</div>

src/routes/[network]/(account)/accounts/[name]/balances/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import type { UnicoveContext } from '$lib/state/client.svelte';
+	import Stack from '$lib/components/layout/stack.svelte';
+	import Button from '$lib/components/button/button.svelte';
+	import TokenTable from '../components/tokens.svelte';
+	import { TokenBalance } from '@wharfkit/session';
+	import Switcher from '$lib/components/layout/switcher.svelte';
+	import Card from '$lib/components/layout/box/card.svelte';
+	import { Asset } from '@wharfkit/antelope';
+	import type { TokenMeta } from '@wharfkit/common';
+
+	const { data } = $props();
+	const context = getContext<UnicoveContext>('state');
+
+	let totalTokenValue: Asset | undefined = $state();
+	let totalUsdValue: Asset | undefined = $state();
+	let systemTokenMeta: TokenMeta | undefined = $state();
+
+	let tokenBalances: TokenBalance[] = $state([]);
+
+	$effect(() => {
+		totalTokenValue = context.account?.balance?.total || undefined;
+		totalUsdValue = context.account?.value?.total || undefined;
+
+		if (context.account?.balances) {
+			tokenBalances = context.account.balances;
+		} else {
+			tokenBalances = [];
+		}
+
+		let systemTokenBlanace: TokenBalance | undefined = undefined;
+		if (totalTokenValue) {
+			systemTokenBlanace = tokenBalances.find((item) =>
+				item.asset.symbol.equals(totalTokenValue!.symbol)
+			);
+		}
+		systemTokenMeta = systemTokenBlanace?.metadata;
+	});
+
+	const network = $derived(String(data.network));
+</script>
+
+<Stack>
+	<Switcher threshold="40rem" class="items-start justify-center">
+		<Card>
+			<div class="flex items-center gap-5">
+				<div class="flex h-14 w-14 items-center justify-center rounded-full bg-[#303338]">
+					{#if systemTokenMeta}
+						<img class="h-6 w-6" src={systemTokenMeta.logo} alt="LOGO" />
+					{/if}
+				</div>
+				<Stack>
+					<p>Total {totalTokenValue?.symbol.name} Balance</p>
+					<h3>{totalTokenValue?.value}</h3>
+				</Stack>
+			</div>
+		</Card>
+
+		<Card>
+			<div class="flex items-center gap-5">
+				<div class="flex h-14 w-14 items-center justify-center rounded-full bg-[#303338]">
+					<span class="text-3xl font-light">$</span>
+				</div>
+				<Stack>
+					<p>Total {totalUsdValue?.symbol.name} Balance</p>
+					<h3>{totalUsdValue?.value}</h3>
+				</Stack>
+			</div>
+		</Card>
+	</Switcher>
+	<TokenTable {tokenBalances}>
+		{#snippet transferIntent(data: TokenBalance)}
+			<div class="flex flex-col">
+				<Button class="text-blue-400" variant="pill" href="/{network}/send?quantity={data.asset}"
+					>Send</Button
+				>
+			</div>
+		{/snippet}
+	</TokenTable>
+</Stack>

src/routes/[network]/(account)/accounts/[name]/chaindata/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Data</div>

src/routes/[network]/(account)/accounts/[name]/components/tokens.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { TokenBalance } from '@wharfkit/common';
+	import type { Snippet } from 'svelte';
+	interface Props {
+		transferIntent?: Snippet<[TokenBalance]>;
+		tokenBalances: TokenBalance[];
+	}
+	const { transferIntent, tokenBalances }: Props = $props();
+</script>
+
+<div class="flex flex-col text-base font-medium">
+	<div class="flex items-center justify-end gap-4 p-2">
+		<div class="flex flex-1">Token</div>
+		<div class="flex flex-1 justify-end">Amount</div>
+		<div class="flex flex-1 justify-end"></div>
+	</div>
+	<div>
+		{#snippet row(name: string, balance: TokenBalance, transferable: boolean = false)}
+			<div class="flex items-center justify-end gap-4 p-2 border-b border-white/20 last:border-0 odd:bg-black/10">
+				<div class="flex flex-1 gap-2">
+					<div class="flex h-5 w-5 items-center justify-center rounded-full bg-black">
+						{#if balance.metadata?.logo}
+							<img class="h-4 w-4" src={balance.metadata?.logo} alt="LOGO" />
+						{/if}
+					</div>
+					<span>{name}</span>
+				</div>
+				<div class="flex flex-1 justify-end">
+					{balance.asset.value}
+				</div>
+				<div class="flex flex-1 justify-end">
+					{#if transferable && transferIntent}
+						{@render transferIntent(balance)}
+					{/if}
+				</div>
+			</div>
+		{/snippet}
+
+		{#each tokenBalances as item}
+			{@render row(item.asset.symbol.name, item, true)}
+		{/each}
+	</div>
+</div>