Skip to content

Commit

Permalink
fix according to review
Browse files Browse the repository at this point in the history
  • Loading branch information
@ttwishing
ttwishing committed Oct 16, 2024
1 parent 15bff10 commit 3d72bd3
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 145 deletions.
13 changes: 13 additions & 0 deletions src/lib/components/elements/asset.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script lang="ts">
import type { Asset } from '@wharfkit/antelope';
import type { HTMLAttributes } from 'svelte/elements';
interface AssetProps extends HTMLAttributes<HTMLSpanElement> {
value?: Asset;
fallback?: string;
}
let { class: className = '', value, fallback = '0', ...props }: AssetProps = $props();
</script>

<span class={className} {...props}>{value?.value || fallback}</span>
43 changes: 18 additions & 25 deletions src/lib/state/client/account.svelte.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export class AccountState {
public loaded: boolean = $state(false);

public balance = $derived.by(() =>
this.network ? getBalance(this.network, this.sources, this.ram) : undefined
this.network ? getBalance(this.network, this.sources) : undefined
);
public balances = $derived.by(() =>
this.network
Expand All @@ -52,7 +52,9 @@ export class AccountState {
public ram = $derived.by(() => (this.account ? this.account.resource('ram') : undefined));
public permissions = $derived.by(() => (this.account ? this.account.permissions : undefined));
public value = $derived.by(() => {
return this.network && this.balance ? getAccountValue(this.network, this.balance) : undefined;
return this.network && this.balance && this.ram
? getAccountValue(this.network, this.balance, this.ram)
: undefined;
});

constructor(network: NetworkState, name: NameType, fetchOverride?: typeof fetch) {
Expand Down Expand Up @@ -116,7 +118,11 @@ export interface AccountValue {
total: Asset;
}

export function getAccountValue(network: NetworkState, balance: Balance): AccountValue {
export function getAccountValue(
network: NetworkState,
balance: Balance,
ramResources: Resource
): AccountValue {
const delegated = Asset.from('0.0000 USD');
const liquid = Asset.from('0.0000 USD');
const ram = Asset.from('0.0000 USD');
Expand All @@ -128,12 +134,13 @@ export function getAccountValue(network: NetworkState, balance: Balance): Accoun
liquid.units.add(calculateValue(balance.liquid, network.tokenprice).units);
staked.units.add(calculateValue(balance.staked, network.tokenprice).units);
total.units.add(calculateValue(balance.total, network.tokenprice).units);
}

if (network.ramprice?.usd) {
const ramValue = calculateValue(balance.ram, network.ramprice.usd);
ram.units.add(ramValue.units);
total.units.add(ramValue.units);
if (network.ramprice) {
const ramAsset = Asset.from(`${ramResources.max.dividing(1000)} RAM`);
const ramValue = calculateValue(ramAsset, network.ramprice.eos);
const ramUsdValue = calculateValue(ramValue, network.tokenprice);
ram.units.add(ramUsdValue.units);
total.units.add(ramUsdValue.units);
}
}

return {
Expand All @@ -149,15 +156,10 @@ export interface Balance {
delegated: Asset;
liquid: Asset;
staked: Asset;
ram: Asset;
total: Asset;
}

export function getBalance(
network: NetworkState,
sources: DataSources,
ramResources?: Resource
): Balance {
export function getBalance(network: NetworkState, sources: DataSources): Balance {
if (!network) {
throw new Error('Network not initialized');
}
Expand All @@ -168,11 +170,10 @@ export function getBalance(
const delegated = Asset.fromUnits(0, network.config.symbol);
const liquid = Asset.fromUnits(0, network.config.symbol);
const staked = Asset.fromUnits(0, network.config.symbol);
const ram = Asset.fromUnits(0, network.config.symbol);
const total = Asset.fromUnits(0, network.config.symbol);

if (!sources.get_account) {
return { delegated, liquid, staked, ram, total };
return { delegated, liquid, staked, total };
}

// Add the core balance if it exists on the account
Expand Down Expand Up @@ -204,17 +205,9 @@ export function getBalance(
}
}

if (ramResources && network.ramprice) {
const asset = Asset.from(`${ramResources.max.dividing(1000)} RAM`);
const ramValue = calculateValue(asset, network.ramprice.eos);
ram.units.add(ramValue.units);
total.units.add(ramValue.units);
}

return {
delegated,
liquid,
ram,
staked,
total
};
Expand Down
181 changes: 75 additions & 106 deletions src/routes/[network]/(explorer)/account/[name]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import Stack from '$lib/components/layout/stack.svelte';
import CircleProgress from '$lib/components/circleprogress.svelte';
import Grid from '$lib/components/layout/grid.svelte';
import AssetText from '$lib/components/elements/asset.svelte';
import { Asset } from '@wharfkit/antelope';
import type { Resource } from '@wharfkit/account';
Expand Down Expand Up @@ -34,88 +35,86 @@
</script>

{#if data.account}
<Switcher threshold="30rem" 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 data.network.tokenmeta && data.network.tokenmeta.length}
<img class="h-6 w-6" src={data.network.tokenmeta[0].logo} alt="LOGO" />
{/if}
<Stack class="my-4 gap-2">
<Switcher threshold="30rem" 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 data.network.tokenmeta && data.network.tokenmeta.length}
<img class="h-6 w-6" src={data.network.tokenmeta[0].logo} alt="LOGO" />
{/if}
</div>
<Stack>
<p>Total {data.account.balance?.total.symbol.name || ''} Balance</p>
<AssetText class="h3" value={data.account.balance?.total}></AssetText>
</Stack>
</div>
<Stack>
<p>Total {data.account.balance?.total.symbol.name || ''} Balance</p>
<h3 class="h3">{data.account.balance?.total.value || 0}</h3>
</Stack>
</div>
</Card>
</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>
<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 {data.account.value?.total.symbol.name || ''} Balance</p>
<p>
<AssetText class="h3" value={data.account.value?.total} />
{#if data.network?.tokenprice && data.network.chain.systemToken}
<span class="text-base">
(${data.network.tokenprice.value}/{data.network.chain.systemToken.symbol.name})
</span>
{/if}
</p>
</Stack>
</div>
<Stack>
<p>Total {data.account.value?.total.symbol.name || ''} Balance</p>
<h3 class="h3">
{data.account.value?.total.value || 0}

{#if data.network?.tokenprice && data.network.chain.systemToken}
<span class="text-base">
(${data.network.tokenprice.value}/{data.network.chain.systemToken.symbol.name})
</span>
{/if}
</h3>
</Stack>
</div>
</Card>
</Switcher>
</Card>
</Switcher>

{#if data.account.balance}
<table class="table-styles">
<thead>
<tr>
<th>Token</th>
<th>Amount</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{#snippet row(name: string, asset: Asset, usdValue?: Asset)}
{#if data.account.balance}
<table class="table-styles">
<thead>
<tr>
<td>
{name}
</td>
<td>
{asset.value.toFixed(asset.symbol.precision)}
{asset.symbol.name}
</td>
<td>
{#if usdValue && usdValue.value}
{usdValue.value.toFixed(usdValue.symbol.precision)} {usdValue.symbol.name}
{/if}
</td>
<th>Token</th>
<th>Amount</th>
<th>Value</th>
</tr>
{/snippet}
{#if data.account.balance.liquid}
{@render row('Available', data.account.balance.liquid, data.account.value?.liquid)}
{/if}
{#if data.account.balance.ram}
{@render row('Ram', data.account.balance.ram, data.account.value?.ram)}
{/if}
{#if data.account.balance.delegated}
{@render row('Staked', data.account.balance.delegated, data.account.value?.delegated)}
{/if}
{#if data.account.balance.staked}
{@render row('REX', data.account.balance.staked, data.account.value?.staked)}
{/if}
</tbody>
</table>
{/if}
</thead>
<tbody>
{#snippet row(name: string, asset: Asset, usdValue?: Asset)}
<tr>
<td>
{name}
</td>
<td>
{asset.value.toFixed(asset.symbol.precision)}
{asset.symbol.name}
</td>
<td>
{#if usdValue && usdValue.value}
{usdValue.value.toFixed(usdValue.symbol.precision)} {usdValue.symbol.name}
{/if}
</td>
</tr>
{/snippet}
{#if data.account.balance.liquid}
{@render row('Available', data.account.balance.liquid, data.account.value?.liquid)}
{/if}
{#if data.account.balance.delegated}
{@render row('Staked', data.account.balance.delegated, data.account.value?.delegated)}
{/if}
{#if data.account.balance.staked}
{@render row('REX', data.account.balance.staked, data.account.value?.staked)}
{/if}
</tbody>
</table>
{/if}
</Stack>

{#if data.network.tokenprice && data.network.chain.systemToken}
<Stack class="mt-4 gap-2">
<Stack class="my-4 gap-2">
<h3 class="h3">Token Price</h3>
<Card class="mt-4">
<Card>
<p>
${data.network.tokenprice.value}/{data.network.chain.systemToken.symbol.name}
</p>
Expand All @@ -124,7 +123,7 @@
{/if}

{#if data.network.ramprice}
<Stack class="mt-4">
<Stack class="my-4 gap-2">
<h3 class="h3">RAM Price</h3>
<Card>
<p>
Expand Down Expand Up @@ -157,8 +156,8 @@
</Card>
{/snippet}

<Stack class="mt-4">
<h3 class="h3 p">Resources</h3>
<Stack class="my-4 gap-2">
<h3 class="h3">Resources</h3>

<Grid itemWidth="270px">
{#if data.account.ram}
Expand All @@ -174,33 +173,3 @@
</Stack>
{/if}
{/if}

<br />
<br />
<br />
{#if data.account}
<div class="space-y-4">
<h3 class="h3">Account Value</h3>
<Code>{JSON.stringify(data.account.value, null, 2)}</Code>
<h3 class="h3">System Token Balance</h3>
<Code>{JSON.stringify(data.account.balance, null, 2)}</Code>
<h3 class="h3">Token Price</h3>
{#if data.account.network}
<Code>{JSON.stringify(data.account.network.tokenprice, null, 2)}</Code>
{/if}
<h3 class="h3">RAM Balance</h3>
<Code>{JSON.stringify(data.account.ram, null, 2)}</Code>
{#if data.account.network}
<h3 class="h3">RAM Prices</h3>
<Code>{JSON.stringify(data.account.network.ramprice, null, 2)}</Code>
{/if}
<h3 class="h3">Balances</h3>
<Code>{JSON.stringify(data.account.balances, null, 2)}</Code>
</div>
{/if}

{#if data.account}
<hr />
<Code>{JSON.stringify(data.account.network, null, 2)}</Code>
<Code>{JSON.stringify(data.account, null, 2)}</Code>
{/if}
19 changes: 6 additions & 13 deletions src/routes/[network]/(explorer)/account/[name]/activity/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,22 @@
<th>Date</th>
<th>Action</th>
<th>Data</th>
<th></th>
</tr>
</thead>
<tbody>
{#each data.activityActions as action}
<tr>
<td>
{String(action.id).substring(0, 7)}
<a href="/{data.network}/transaction/{action.id}">{String(action.id).substring(0, 7)}</a>
</td>
<td>
{action.timestamp.toDate().toLocaleDateString(undefined, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
})}
</td>
<td>
Expand All @@ -34,14 +35,6 @@
<td>
{JSON.stringify(action.data, null, 2)}
</td>
<td class="text-right">
<div class="flex">
<Button variant="pill" href="/{data.network}/transaction/{action.id}">detail</Button>
<Button variant="pill" href="/{data.network}/transaction/{action.id}/{action.seq}"
>seq</Button
>
</div>
</td>
</tr>
{/each}
</tbody>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/[network]/(explorer)/account/[name]/balances/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</div>
</td>
<td>
{balance.asset.value.toFixed(balance.asset.symbol.precision)}
{balance.asset.quantity}
</td>
</tr>
{/each}
Expand Down

0 comments on commit 3d72bd3

Please sign in to comment.