Merge pull request #184 from greymass/design-pass

Design and content pass

src/app.css

@@ -60,7 +60,7 @@
 		@apply flex flex-wrap gap-4;
 	}
 
-	.layout-switcher>* {
+	.layout-switcher > * {
 		flex-grow: 1;
 		flex-basis: calc((var(--switcher-threshold) - 100%) * 999);
 	}

src/lib/components/elements/asset.svelte

@@ -2,6 +2,8 @@
 	import type { Asset } from '@wharfkit/antelope';
 	import type { HTMLAttributes } from 'svelte/elements';
 
+	import { languageTag } from '$lib/paraglide/runtime.js';
+
 	interface AssetProps extends HTMLAttributes<HTMLSpanElement> {
 		value?: Asset;
 		variant?: 'value' | 'quantity' | 'full';
@@ -20,9 +22,9 @@
 <span class={className} {...props}>
 	{#if variant === 'full'}
 		{value ? `${value.quantity} ${value.symbol.name}` : fallback}
-	{:else if variant === 'quantity'}
-		{value?.quantity || fallback}
 	{:else}
-		{value?.value || fallback}
+		{Number(value?.value || fallback).toLocaleString(languageTag(), {
+			minimumFractionDigits: value?.symbol.precision
+		})}
 	{/if}
 </span>

src/lib/components/navigation/sidemenu.svelte

@@ -37,6 +37,7 @@
 
 		const items = [
 			{ href: `/${network}`, text: network.chain.name },
+			{ href: `/${network}/send`, text: 'Send' },
 			...features,
 			{ href: `/${network}/settings`, text: 'Settings' }
 		];
@@ -57,7 +58,9 @@
 	let options = $derived(
 		destinations.map((destination) => ({
 			...destination,
-			active: rootPathname && destination.href.includes(rootPathname)
+			active:
+				(rootPathname && destination.href.includes(rootPathname)) ||
+				(!rootPathname && destination.href === `/${network}`)
 		}))
 	);
 </script>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Card, Stack, Switcher } from '$lib/components/layout';
 	import Button from '$lib/components/button/button.svelte';
+	import AssetText from '$lib/components/elements/asset.svelte';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { Asset } from '@wharfkit/antelope';
 	import { getContext } from 'svelte';
@@ -30,10 +31,14 @@
 	<Switcher threshold="40rem" class="items-start justify-center">
 		<Card class="gap-5">
 			<Stack class="gap-0">
-				<p class="caption">Currently Staked - {apy}% APY</p>
-				<p class="h3">{staked}</p>
+				<p class="caption">
+					Staked Balance - {apy}% APY
+				</p>
+				<p class="h3">
+					<AssetText value={staked} />
+				</p>
 				<p class="mt-1.5 self-start rounded bg-shark-800/60 px-2">
-					${usdValue}
+					$<AssetText value={usdValue} />
 				</p>
 			</Stack>
 			<Switcher threshold="20rem">

src/routes/[network]/(account)/(staking)/staking/stake/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Card, Stack, Switcher } from '$lib/components/layout';
 	import AssetInput from '$lib/components/input/asset.svelte';
+	import AssetText from '$lib/components/elements/asset.svelte';
 	import Button from '$lib/components/button/button.svelte';
 	import Label from '$lib/components/input/label.svelte';
 	import Transaction from '$lib/components/transaction.svelte';
@@ -67,7 +68,7 @@
 						onclick={() => {
 							manager.setMaxValue();
 						}}
-						type="button">Available: {manager.stakable}</button
+						type="button">Available: <AssetText value={manager.stakable} /></button
 					>
 				</Label>
 			</Stack>
@@ -81,9 +82,9 @@
 						<p class="caption">~APY</p>
 						<p>{manager.apy}%</p>
 						<p class="caption">You will stake</p>
-						<p>{manager.assetValue}</p>
+						<p><AssetText value={manager.assetValue} /></p>
 						<p class="caption">Estimated Yield(per year)</p>
-						<p>{manager.estimateYield}</p>
+						<p><AssetText value={manager.estimateYield} /></p>
 					</div>
 				</Stack>
 			</Card>

src/routes/[network]/(account)/(staking)/staking/unstake/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Card, Stack, Switcher } from '$lib/components/layout';
 	import AssetInput from '$lib/components/input/asset.svelte';
+	import AssetText from '$lib/components/elements/asset.svelte';
 	import Button from '$lib/components/button/button.svelte';
 	import Label from '$lib/components/input/label.svelte';
 	import Transaction from '$lib/components/transaction.svelte';
@@ -68,7 +69,7 @@
 						onclick={() => {
 							manager.setMaxValue();
 						}}
-						type="button">Available: {manager.unstakable}</button
+						type="button">Available: <AssetText value={manager.unstakable} /></button
 					>
 				</Label>
 			</Stack>
@@ -78,7 +79,7 @@
 				<Stack class="gap-0">
 					<div class="grid grid-cols-2 gap-2">
 						<p class="caption">In 21 days you can claim</p>
-						<p>{manager.assetValue}</p>
+						<p><AssetText value={manager.assetValue} /></p>
 						<p class="caption">Lockup</p>
 						<p>21 Days</p>
 					</div>

src/routes/[network]/(account)/(staking)/staking/unstaking.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import AssetText from '$lib/components/elements/asset.svelte';
 	import { Card } from '$lib/components/layout';
 	import Button from '$lib/components/button/button.svelte';
 	import type { UnstakingRecord } from './utils';
@@ -26,7 +27,7 @@
 			{#each records as record}
 				{#if !record.savings}
 					<tr>
-						<td>{record.balance}</td>
+						<td><AssetText value={record.balance} /></td>
 						<td class="text-right">
 							{record.date
 								? record.date.toLocaleDateString(undefined, {

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

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export interface SignupStep {
 		title: string;
 		path: string;

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

@@ -9,6 +9,7 @@
 
 	const currentEnvironment = detectEnvironment();
 	const currentWalletType = walletTypes[currentEnvironment];
+	const WalletComponent = currentWalletType.icon;
 	const currentWalletTypePath = `/${data.network}/signup/wallets/${currentWalletType.type}`;
 	const recommendedWallet = currentWalletType.wallets[0];
 </script>
@@ -28,10 +29,7 @@
 hover:bg-mineShaft-950 focus-visible:outline focus-visible:outline-transparent focus-visible:ring-2 focus-visible:ring-solar-500"
 	>
 		<div class="rounded-full bg-mineShaft-900/60 p-3">
-			<svelte:component
-				this={currentWalletType.icon}
-				class="size-6 group-hover:stroke-skyBlue-500 "
-			/>
+			<WalletComponent class="size-6 group-hover:stroke-skyBlue-500 " />
 		</div>
 		<div class="space-y-1">
 			<h4 class="text-xl font-semibold">

src/routes/[network]/(account)/signup/wallets/+page.svelte

@@ -8,13 +8,14 @@
 </script>
 
 {#snippet walletButton(wallet: WalletType)}
+	{@const WalletIcon = wallet.icon}
 	<a
 		href="/{data.network}/signup/wallets/{wallet.type}"
 		class="group grid grid-cols-[auto_1fr_auto] items-center gap-4 rounded-2xl border border-white/20 p-4
 hover:bg-mineShaft-950 focus-visible:outline focus-visible:outline-transparent focus-visible:ring-2 focus-visible:ring-solar-500"
 	>
 		<div class="rounded-full bg-mineShaft-900/60 p-3">
-			<svelte:component this={wallet.icon} class="size-6 group-hover:stroke-skyBlue-500 " />
+			<WalletIcon class="size-6 group-hover:stroke-skyBlue-500 " />
 		</div>
 		<div class="space-y-1">
 			<h4 class="text-xl font-semibold">

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

@@ -1,6 +1,5 @@
 <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';
 

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

@@ -44,7 +44,7 @@
 						{/if}
 					</div>
 					<Stack class="gap-2">
-						<p>Total {data.account.balance?.total.symbol.name || ''} Balance</p>
+						<p>{data.account.balance?.total.symbol.name || ''} Balance</p>
 						<AssetText class="h3" value={data.account.balance?.total} />
 					</Stack>
 				</div>
@@ -56,7 +56,7 @@
 						<span class="text-3xl font-light">$</span>
 					</div>
 					<Stack class="gap-2">
-						<p>Total {data.account.value?.total.symbol.name || ''} Balance</p>
+						<p>{data.account.value?.total.symbol.name || ''} Value</p>
 						<AssetText class="h3" value={data.account.value?.total} />
 					</Stack>
 				</div>
@@ -79,23 +79,27 @@
 								{name}
 							</td>
 							<td>
-								<AssetText value={asset} variant="full" />
+								<AssetText value={asset} />
 							</td>
 							<td>
 								{#if usdValue && usdValue.value}
-									<AssetText value={usdValue} variant="full" />
+									<AssetText value={usdValue} />
 								{/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)}
+						{@render row('Staked', data.account.balance.staked, data.account.value?.staked)}
+					{/if}
+					{#if data.account.balance.delegated}
+						{@render row(
+							'Delegated',
+							data.account.balance.delegated,
+							data.account.value?.delegated
+						)}
 					{/if}
 				</tbody>
 			</table>

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

@@ -26,7 +26,7 @@
 						</div>
 					</td>
 					<td>
-						<AssetText value={balance.asset} variant="quantity" />
+						<AssetText value={balance.asset} />
 					</td>
 				</tr>
 			{/each}

src/routes/[network]/(explorer)/contract/[contract]/actions/[action]/[[data]]/fields.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Self from './fields.svelte';
 	import Checkbox from '$lib/components/input/checkbox.svelte';
 	import Label from '$lib/components/input/label.svelte';
 	import Textinput from '$lib/components/input/text.svelte';
@@ -26,7 +27,7 @@
 	{#each fields as field}
 		{@const subfields = deriveFields(field.type)}
 		{#if subfields.length > 0}
-			<svelte:self {abi} codePath={[...codePath, field.name]} fields={subfields} {state} />
+			<Self {abi} codePath={[...codePath, field.name]} fields={subfields} {state} />
 		{:else}
 			{@const fieldName = [...codePath, field.name].join('->')}
 			<fieldset class="grid gap-2">

src/routes/[network]/api/metrics/marketprice/ram/+server.ts

@@ -5,6 +5,7 @@ import { Asset } from '@wharfkit/antelope';
 import { API_EOS_METRICS } from '$env/static/private';
 import { getChainDefinitionFromParams } from '$lib/state/network.svelte';
 import type { ChainDefinition } from '@wharfkit/common';
+import { getCacheHeaders } from '$lib/utils';
 
 interface HistoricalPrice {
 	date: Date;
@@ -36,7 +37,9 @@ export const GET: RequestHandler = async ({ params }) => {
 				new Date(b.date).getTime() - new Date(a.date).getTime()
 		);
 
-		return json(historicalPrices);
+		return json(historicalPrices, {
+			headers: getCacheHeaders(30)
+		});
 	} catch (error) {
 		console.error('Error fetching historical RAM prices:', error);
 		return json({ error: 'Failed to fetch RAM price history' }, { status: 500 });