Next Release

package.json

@@ -63,6 +63,7 @@
 		"@wharfkit/session": "^1.4.0",
 		"@wharfkit/transact-plugin-resource-provider": "^1.1.1",
 		"@wharfkit/wallet-plugin-anchor": "^1.4.0",
+		"@wharfkit/wallet-plugin-cleos": "^1.2.0",
 		"@wharfkit/wallet-plugin-metamask": "^1.1.1",
 		"@wharfkit/wallet-plugin-privatekey": "^1.1.0",
 		"@wharfkit/wallet-plugin-scatter": "^1.5.1",

src/lib/components/button/button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { cn } from '$lib/utils';
 	import { emptyMeltElement, melt, type AnyMeltElement } from '@melt-ui/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes, HTMLLinkAttributes } from 'svelte/elements';
@@ -7,7 +8,7 @@
 
 	interface ButtonProps extends HTMLAttributes {
 		href?: string;
-		variant?: 'primary' | 'secondary' | 'pill' | 'outline';
+		variant?: 'primary' | 'secondary' | 'pill';
 		disabled?: boolean;
 		active?: boolean;
 		blank?: boolean;
@@ -22,6 +23,7 @@
 		onclick,
 		variant = 'primary',
 		active,
+		class: className,
 		disabled = false,
 		...props
 	}: ButtonProps = $props();
@@ -41,37 +43,33 @@
 				}
 			: {}
 	);
+
+	const primaryStyles =
+		'relative inline-flex h-12 grow items-center justify-center text-nowrap rounded-lg bg-skyBlue-700 px-8 text-center text-base font-medium text-skyBlue-50 transition-all focus:outline-transparent focus-visible:outline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-solar-500 hover:active:bg-skyBlue-800 disabled:cursor-not-allowed disabled:bg-mineShaft-900 disabled:text-white/60 disabled:opacity-30 disabled:hover:bg-mineShaft-900 [@media(any-hover:hover)]:hover:bg-skyBlue-600';
+
+	const secondaryStyles =
+		'relative flex h-12 grow items-center justify-center text-nowrap rounded-lg px-8 text-center text-base font-medium text-skyBlue-400 ring-2 ring-inset ring-mineShaft-600 transition-all hover:ring-transparent focus-visible:outline-none focus-visible:ring-solar-500 hover:active:bg-mineShaft-950 hover:active:ring-mineShaft-900 disabled:cursor-not-allowed disabled:text-mineShaft-400 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:ring-mineShaft-600 disabled:active:ring-mineShaft-600 [@media(any-hover:hover)]:hover:bg-mineShaft-900';
+
+	const pillStyles =
+		'relative inline-flex h-10 items-center justify-center text-nowrap rounded-full border-2 border-transparent px-5 text-center text-base font-medium leading-4 transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-solar-500 hover:active:bg-mineShaft-950 aria-[current]:border-mineShaft-200/30 [@media(any-hover:hover)]:hover:bg-mineShaft-900 [@media(any-hover:hover)]:hover:text-mineShaft-100';
+
+	let styles = {
+		primary: primaryStyles,
+		secondary: secondaryStyles,
+		pill: pillStyles
+	};
 </script>
 
 <svelte:element
 	this={tag}
 	use:melt={$meltElement}
-	data-variant={variant}
-	class={props.class || ''}
+	class={cn(styles[variant], className)}
 	role={ariaRole}
 	aria-current={ariaCurrent}
 	{disabled}
 	{onclick}
 	{...props}
 	{...linkProps}
 >
-	<span>{@render props.children()}</span>
+	<span class="pointer-events-none relative text-inherit">{@render props.children()}</span>
 </svelte:element>
-
-<style lang="postcss">
-	[data-variant='primary'] {
-		@apply relative inline-flex h-12 grow items-center justify-center text-nowrap rounded-lg bg-skyBlue-700 px-8 text-center text-base font-medium text-skyBlue-50 transition-all focus:outline-transparent focus-visible:outline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-solar-500 hover:active:bg-skyBlue-800 disabled:cursor-not-allowed disabled:bg-mineShaft-900 disabled:text-white/60 disabled:opacity-30 disabled:hover:bg-mineShaft-900 [@media(any-hover:hover)]:hover:bg-skyBlue-600;
-	}
-
-	[data-variant='secondary'] {
-		@apply relative flex h-12 grow items-center justify-center text-nowrap rounded-lg px-8 text-center text-base font-medium text-skyBlue-400 ring-2 ring-inset ring-mineShaft-600 transition-all hover:ring-transparent focus-visible:outline-none focus-visible:ring-solar-500 hover:active:bg-mineShaft-950 hover:active:ring-mineShaft-900 disabled:cursor-not-allowed disabled:text-mineShaft-400 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:ring-mineShaft-600 disabled:active:ring-mineShaft-600 [@media(any-hover:hover)]:hover:bg-mineShaft-900;
-	}
-
-	[data-variant='pill'] {
-		@apply relative inline-flex h-10 items-center justify-center text-nowrap rounded-full border-2 border-transparent px-5 text-center text-base font-medium leading-4 transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-solar-500 hover:active:bg-mineShaft-950 aria-[current]:border-mineShaft-200/30 [@media(any-hover:hover)]:hover:bg-mineShaft-900 [@media(any-hover:hover)]:hover:text-mineShaft-100;
-	}
-
-	span {
-		@apply pointer-events-none relative text-inherit;
-	}
-</style>

src/lib/components/descriptionlist/dd.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	let props = $props();
+</script>
+
+<dd class="grow text-balance break-all text-right tabular-nums">{@render props.children()}</dd>

src/lib/components/descriptionlist/dl.svelte

@@ -3,8 +3,8 @@
 	import Dlrow from './dlrow.svelte';
 
 	type DescriptionItem = {
-		key: string;
-		value: string;
+		title: string;
+		description: string;
 	};
 
 	interface Props {
@@ -17,10 +17,8 @@
 
 <dl class="@container">
 	{#if props.items}
-		{#each props.items as item}
-			<Dlrow title={item.key}>
-				{item.value}
-			</Dlrow>
+		{#each props.items as { title, description }}
+			<Dlrow {title} {description} />
 		{/each}
 	{:else if props.children}
 		{@render props.children()}

src/lib/components/descriptionlist/dlrow.svelte

@@ -1,16 +1,29 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import DT from './dt.svelte';
+	import DD from './dd.svelte';
 
 	interface Props {
 		title: string;
-		children: Snippet;
+		description?: string;
+		children?: Snippet;
 	}
-	let { title, children }: Props = $props();
+
+	let { title = '', description, children }: Props = $props();
 </script>
 
 <div
 	class="flex flex-wrap items-center justify-between gap-x-4 border-b border-mineShaft-900 py-3 last:border-none @xs:flex-nowrap"
 >
-	<dt class="caption self-start text-nowrap">{title}</dt>
-	<dd class="grow text-balance break-all text-right tabular-nums">{@render children()}</dd>
+	<DT>{title}</DT>
+	<div
+		class="grow bg-red-500 before:content-['ERROR_Missing_DD_element_'] has-[dd]:bg-transparent has-[dd]:before:hidden"
+	>
+		{#if description}
+			<DD>{description}</DD>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
 </div>

src/lib/components/descriptionlist/dt.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	let props = $props();
+</script>
+
+<dt class="caption self-start text-nowrap">{@render props.children()}</dt>

src/lib/components/descriptionlist/index.ts

@@ -1,2 +1,4 @@
 export { default as DL } from './dl.svelte';
 export { default as DLRow } from './dlrow.svelte';
+export { default as DD } from './dd.svelte';
+export { default as DT } from './dt.svelte';

src/lib/components/elements/action.svelte

@@ -1,13 +1,39 @@
 <script lang="ts">
+	import { type Action } from '@wharfkit/antelope';
 	import Code from '../code.svelte';
+	import { DL, DLRow, DD } from '../descriptionlist';
+	import { Stack } from '../layout';
+	import Account from './account.svelte';
 
 	interface Props {
-		data: Record<string, unknown>;
+		action: Action;
 	}
 
-	let props: Props = $props();
+	let { action }: Props = $props();
+
+	// const arr = action.authorization.map((auth) => [Account, auth]);
+	// let test = [Account];
 </script>
 
-{#if props.data}
-	<Code>{JSON.stringify(props.data, null, 2)}</Code>
+{#if action}
+	<div class="grid grid-cols-2 items-start gap-6">
+		<Code>{JSON.stringify(action.data, null, 2)}</Code>
+		<Stack class="gap-2">
+			<h3 class="h4">{String(action.name)}</h3>
+			<DL>
+				<DLRow title="Contract">
+					<DD>
+						<Account name={action.account} contract />
+					</DD>
+				</DLRow>
+				<DLRow title="Authorization">
+					{#each action.authorization as auth}
+						<DD>
+							<Account name={auth.actor}>{auth}</Account>
+						</DD>
+					{/each}
+				</DLRow>
+			</DL>
+		</Stack>
+	</div>
 {/if}

src/lib/components/elements/asset.svelte

@@ -6,6 +6,7 @@
 	import { cn } from '$lib/utils';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
+	import Big from 'big.js';
 
 	const context = getContext<UnicoveContext>('state');
 
@@ -34,7 +35,10 @@
 	};
 
 	function formatAssetValue() {
-		return Intl.NumberFormat(locale, assetOptions).format(asset?.value || fallback);
+		// Use Big.js to accurately convert the string into a usable number
+		// Some precision may be lost in extreme circumstances
+		const number = Number(new Big(asset?.quantity || fallback));
+		return Intl.NumberFormat(locale, assetOptions).format(number);
 	}
 
 	function formatCurrencyValue() {

src/lib/components/elements/voteweight.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Asset, Float64 } from '@wharfkit/antelope';
+
+	import AssetText from '$lib/components/elements/asset.svelte';
+	import type { UnicoveContext } from '$lib/state/client.svelte';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		variant?: 'value' | 'full';
+		decay?: number; // Number of weeks for voter decay
+		weight: Float64; // Weight of vote
+	}
+
+	let { weight, decay = 52, ...props }: Props = $props();
+	let { network } = getContext<UnicoveContext>('state');
+	const precision = 10 ** network.chain.systemToken!.symbol.precision;
+
+	const tokens = $derived(
+		Asset.from(
+			Number(weight) / calcVoteWeight(decay) / precision,
+			network.chain.systemToken!.symbol
+		)
+	);
+
+	function calcVoteWeight(voteDecayPeriod: number) {
+		const timestamp = 946684800000;
+		const dates = (Date.now() - timestamp) / 1000;
+		const weight = Math.floor(dates / (86400 * 7)) / voteDecayPeriod;
+		return 2 ** weight;
+	}
+</script>
+
+<AssetText {...props} value={tokens} />

src/lib/state/client/account.svelte.ts

@@ -3,8 +3,11 @@ import {
 	APIClient,
 	Asset,
 	Checksum256,
+	Float64,
 	Int128,
+	Int64,
 	Name,
+	UInt128,
 	UInt64,
 	type NameType
 } from '@wharfkit/antelope';
@@ -26,6 +29,24 @@ const defaultDataSources = {
 	rexfund: undefined
 };
 
+interface VoterInfo {
+	isProxy: boolean;
+	proxyWeight: Float64;
+	proxy: Name;
+	weight: Float64;
+	votes: Name[];
+	staked: Int64;
+}
+
+const defaultVoteInfo: VoterInfo = {
+	isProxy: false,
+	proxy: Name.from(''),
+	proxyWeight: Float64.from(0),
+	weight: Float64.from(0),
+	votes: [],
+	staked: Int64.from(0)
+};
+
 export class AccountState {
 	public client?: APIClient = $state();
 	public fetch = $state(fetch);
@@ -62,6 +83,7 @@ export class AccountState {
 			? getAccountValue(this.network, this.balance, this.ram)
 			: undefined;
 	});
+	public voter: VoterInfo = $state(defaultVoteInfo);
 
 	constructor(network: NetworkState, name: NameType, fetchOverride?: typeof fetch) {
 		if (fetchOverride) {
@@ -94,6 +116,14 @@ export class AccountState {
 			client: this.network.client,
 			data: API.v1.AccountObject.from(json.account_data)
 		});
+		this.voter = {
+			isProxy: json.account_data.voter_info.is_proxy,
+			proxy: Name.from(json.account_data.voter_info.proxy),
+			proxyWeight: Float64.from(json.account_data.voter_info.proxied_vote_weight),
+			weight: Float64.from(json.account_data.voter_info.last_vote_weight),
+			votes: json.account_data.voter_info.producers.map((producer: string) => Name.from(producer)),
+			staked: Int64.from(json.account_data.voter_info.staked)
+		};
 		this.loaded = true;
 	}
 
@@ -111,7 +141,8 @@ export class AccountState {
 				cpu: this.cpu,
 				net: this.net,
 				ram: this.ram
-			}
+			},
+			voter: this.voter
 		};
 	}
 }