Skip to content

Commit

Permalink
add balances page
Browse files Browse the repository at this point in the history
  • Loading branch information
ttwishing committed Oct 7, 2024
1 parent b58e86c commit cc95983
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 12 deletions.
27 changes: 16 additions & 11 deletions src/routes/[network]/(account)/account/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,14 @@
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';
const { data, children } = $props();
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);
Expand All @@ -15,22 +21,21 @@
];
});
let currentTab = $derived($page.url.pathname.split('/').slice(2)[3]);
// Derive the active state of each destination
let currentTab = $derived($page.url.pathname.split('/').pop() || 'overview');
let options = $derived(
tabOptions.map((option) => ({
...option,
active: option.href.split('/').slice(2)[2] === currentTab
active: (option.href.split('/').pop() || 'overview') === currentTab
}))
);
const subtitle = $derived(context.account?.name ? String(context.account.name) : '');
</script>

<header class="layout-stack gap-6">
<Stack class="gap-2">
<h1 class="h2 leading-none text-neutral-200/60">Account</h1>
</Stack>
<Stack class="gap-6">
<Pageheader title="Account" {subtitle} />

<PillGroup {options} class="mb-6" />
</header>

{@render children()}
{@render children()}
</Stack>
77 changes: 76 additions & 1 deletion src/routes/[network]/(account)/account/balances/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,79 @@
<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>

<div>Blances</div>
<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]">$</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>
43 changes: 43 additions & 0 deletions src/routes/[network]/(account)/account/components/tokens.svelte
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit cc95983

Please sign in to comment.