Staking changes

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

@@ -21,7 +21,8 @@ const defaultDataSources = {
 	get_account: undefined,
 	light_account: [],
 	delegated: [],
-	rex: undefined
+	rex: undefined,
+	rexfund: undefined
 };
 
 export class AccountState {
@@ -79,7 +80,8 @@ export class AccountState {
 			get_account: json.account_data,
 			light_account: json.balances,
 			delegated: json.delegated,
-			rex: json.rex
+			rex: json.rex,
+			rexfund: json.rexfund
 		};
 		this.account = new Account({
 			client: this.network.client,
@@ -192,13 +194,19 @@ export function getBalance(network: NetworkState, sources: DataSources): Balance
 		total.units.add(delegatedTokens.units);
 	}
 
-	// Add any staked (REX) tokens to total balance based on current value
-	if (sources.rex) {
-		if (network.config.features.rex && network.rexstate) {
-			const rex = network.rexToToken(sources.rex.rex_balance);
-			// const rex = convertRexToToken(sources.rex.rex_balance, network.rexstate);
-			staked.units.add(rex.units);
-			total.units.add(rex.units);
+	if (network.config.features.rex) {
+		// Add any staked (REX) tokens to total balance based on current value
+		if (sources.rex) {
+			if (network.rexstate) {
+				const rex = network.rexToToken(sources.rex.rex_balance);
+				staked.units.add(rex.units);
+				total.units.add(rex.units);
+			}
+		}
+		// Add rex fund to total balance based on current value
+		if (sources.rexfund && sources.rexfund.balance) {
+			staked.units.add(sources.rexfund.balance.units);
+			total.units.add(sources.rexfund.balance.units);
 		}
 	}
 

src/lib/types.ts

@@ -36,6 +36,7 @@ export interface DataSources {
 	light_account: LightAPIBalanceResponse[];
 	delegated: SystemContract.Types.delegated_bandwidth[];
 	rex?: SystemContract.Types.rex_balance;
+	rexfund?: SystemContract.Types.rex_fund;
 }
 
 export interface LightAPIBalanceRow {

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

@@ -34,10 +34,8 @@
 
 <Box>
 	<Stack>
-		<Cluster class="justify-between ">
-			<PageHeader title="Staking" />
-			<PillGroup {options} class="mb-6" />
-		</Cluster>
+        <PageHeader title="Staking" />
+        <PillGroup {options} class="mb-6" />
 	</Stack>
 
 	{@render children()}

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

@@ -9,6 +9,7 @@
 
 	import type { UnstakingRecord, WithdrawableBalance } from './utils';
 	import { getStakedBalance, getUnstakingBalances, getAPY } from './utils';
+	import UnstakingBalances from './unstaking.svelte';
 
 	const context = getContext<UnicoveContext>('state');
 	const { data } = $props();
@@ -46,39 +47,7 @@
 				>
 			</Switcher>
 		</Card>
-
-		<Card title="Unstaking Balances">
-			<table class="table-auto">
-				<thead class="border-b-2 border-shark-100/10">
-					<tr class="caption font-medium">
-						<th class="p-4 text-left">Amount</th>
-						<th class="p-4 text-right">Date available</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each unstaking as record}
-						{#if !record.savings}
-							<tr>
-								<td class="p-4">{record.balance}</td>
-								<td class="p-4 text-right"
-									>{record.date
-										? record.date.toLocaleDateString(undefined, {
-												weekday: 'long',
-												year: 'numeric',
-												month: 'long',
-												day: 'numeric'
-											})
-										: '--'}
-								</td></tr
-							>
-						{/if}
-					{/each}
-				</tbody>
-			</table>
-			<Button href="/{networkName}/staking/withdraw" variant="secondary" class="text-skyBlue-500"
-				>Withdraw</Button
-			>
-		</Card>
+		<UnstakingBalances href="/{networkName}/staking/withdraw" records={unstaking} />
 	</Switcher>
 	<Card class="gap-5">
 		<Stack class="gap-0">

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

@@ -6,6 +6,7 @@
 	import AssetInput from '$lib/components/input/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';
 	import * as m from '$lib/paraglide/messages.js';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext, untrack } from 'svelte';
@@ -22,15 +23,7 @@
 </script>
 
 {#if stakeState.txid}
-	<div class="space-y-4">
-		<h2 class="h2">Transaction Complete</h2>
-		<h3 class="h3">success</h3>
-		<p>
-			<a href="/{data.network}/transaction/{stakeState.txid}">
-				{stakeState.txid}
-			</a>
-		</p>
-	</div>
+	<Transaction network={data.network} transactionId={stakeState.txid} />
 {:else if stakeState.error}
 	<div>
 		<h2 class="h2">Transaction Error</h2>

src/routes/[network]/(account)/(staking)/staking/stake/state.svelte.ts

@@ -25,14 +25,14 @@ export class StakeState {
 	public txid: string = $state('');
 
 	public stakable: Asset = $derived(
-		this.account && this.network ? getStakableBalance(this.network!, this.account) : defaultQuantity
+		this.account && this.network ? getStakableBalance(this.network, this.account) : defaultQuantity
 	);
-	public apy: string = $derived(getAPY(this.network));
+	public apy: string = $derived(this.network ? getAPY(this.network) : '0');
 	public estimateYield: Asset = $derived(
 		this.network
 			? Asset.from(
 					(this.assetValue.value * parseFloat(this.apy)) / 100,
-					this.network!.chain.systemToken!.symbol
+					this.network.chain.systemToken!.symbol
 				)
 			: defaultQuantity
 	);
@@ -42,7 +42,7 @@ export class StakeState {
 	}
 
 	get zeroValue() {
-		return Asset.from(0, this.network!.chain.systemToken!.symbol);
+		return this.network ? Asset.from(0, this.network.chain.systemToken!.symbol) : defaultQuantity;
 	}
 
 	sync(network: NetworkState, account: AccountState, wharf: WharfState) {
@@ -61,33 +61,39 @@ export class StakeState {
 			this.txid = '';
 		}
 
-		if (this.assetValue.symbol !== this.network!.chain.systemToken!.symbol) {
+		if (this.network && this.assetValue.symbol !== this.network.chain.systemToken!.symbol) {
 			this.input?.set(this.zeroValue);
 		}
 		if (wharf !== this.wharf) {
 			this.wharf = wharf;
 		}
 
-		this.minValue = Asset.fromUnits(1, this.network!.chain.systemToken!.symbol).value;
-		this.maxValue = this.account ? getStakableBalance(this.network!, this.account).value : 0;
+		if (this.network) {
+			this.minValue = Asset.fromUnits(1, this.network.chain.systemToken!.symbol).value;
+			this.maxValue = this.account ? getStakableBalance(this.network, this.account).value : 0;
+		}
 	}
 
 	setMaxValue() {
 		this.input?.set(this.stakable);
 	}
 
 	async transact() {
-		const deposit = this.network!.contracts.system.action('deposit', {
-			owner: this.account!.name!,
-			amount: this.assetValue!
-		});
-		const buyrex = this.network!.contracts.system.action('buyrex', {
-			from: this.account!.name!,
-			amount: this.assetValue!
-		});
-
 		try {
-			const result = await this.wharf!.transact({
+			if (!this.network || !this.account || !this.account.name || !this.wharf || !this.assetValue) {
+				throw new Error("Can't sign, data not ready");
+			}
+
+			const deposit = this.network.contracts.system.action('deposit', {
+				owner: this.account.name,
+				amount: this.assetValue
+			});
+			const buyrex = this.network.contracts.system.action('buyrex', {
+				from: this.account.name,
+				amount: this.assetValue
+			});
+
+			const result = await this.wharf.transact({
 				actions: [deposit, buyrex]
 			});
 

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

@@ -6,6 +6,7 @@
 	import AssetInput from '$lib/components/input/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';
 	import * as m from '$lib/paraglide/messages.js';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
@@ -22,15 +23,7 @@
 </script>
 
 {#if unstakeState.txid}
-	<div class="space-y-4">
-		<h2 class="h2">Transaction Complete</h2>
-		<h3 class="h3">success</h3>
-		<p>
-			<a href="/{data.network}/transaction/{unstakeState.txid}">
-				{unstakeState.txid}
-			</a>
-		</p>
-	</div>
+	<Transaction network={data.network} transactionId={unstakeState.txid} />
 {:else if unstakeState.error}
 	<div>
 		<h2 class="h2">Transaction Error</h2>

src/routes/[network]/(account)/(staking)/staking/unstake/state.svelte.ts

@@ -4,7 +4,8 @@ import type { NetworkState } from '$lib/state/network.svelte';
 import type { WharfState } from '$lib/state/client/wharf.svelte';
 import AssetInput from '$lib/components/input/asset.svelte';
 
-import { defaultQuantity, getUnstakableBalance } from '../utils';
+import type { UnstakingRecord } from '../utils';
+import { defaultQuantity, getUnstakableBalance, getUnstakingBalances } from '../utils';
 
 export class UnstakeState {
 	public input: AssetInput | undefined = $state();
@@ -24,16 +25,21 @@ export class UnstakeState {
 	public error: string = $state('');
 	public txid: string = $state('');
 
+	public unstaking: Array<UnstakingRecord> = $derived(
+		this.account && this.network ? getUnstakingBalances(this.network, this.account) : []
+	);
 	public unstakable: Asset = $derived(
-		this.account ? getUnstakableBalance(this.network!, this.account) : defaultQuantity
+		this.account && this.network
+			? getUnstakableBalance(this.network, this.account, this.unstaking)
+			: defaultQuantity
 	);
 
 	constructor(network: NetworkState) {
 		this.network = network;
 	}
 
 	get zeroValue() {
-		return Asset.from(0, this.network!.chain.systemToken!.symbol);
+		return this.network ? Asset.from(0, this.network.chain.systemToken!.symbol) : defaultQuantity;
 	}
 
 	sync(network: NetworkState, account: AccountState, wharf: WharfState) {
@@ -52,29 +58,34 @@ export class UnstakeState {
 			this.txid = '';
 		}
 
-		if (this.assetValue.symbol !== this.network!.chain.systemToken!.symbol) {
+		if (this.network && this.assetValue.symbol !== this.network.chain.systemToken!.symbol) {
 			this.input?.set(this.zeroValue);
 		}
 		if (wharf !== this.wharf) {
 			this.wharf = wharf;
 		}
 
-		this.minValue = Asset.fromUnits(1, this.network!.chain.systemToken!.symbol).value;
-		this.maxValue = this.account ? getUnstakableBalance(this.network!, this.account).value : 0;
+		if (this.network) {
+			this.minValue = Asset.fromUnits(1, this.network.chain.systemToken!.symbol).value;
+			this.maxValue = this.unstakable.value;
+		}
 	}
 
 	setMaxValue() {
 		this.input?.set(this.unstakable);
 	}
 
 	async transact() {
-		const mvfrsavings = this.network!.contracts.system.action('mvfrsavings', {
-			owner: this.account!.name!,
-			rex: this.network!.tokenToRex(this.assetValue!)
-		});
-
 		try {
-			const result = await this.wharf!.transact({
+			if (!this.network || !this.account || !this.account.name || !this.assetValue || !this.wharf) {
+				throw new Error("Can't sign, data not ready");
+			}
+			const mvfrsavings = this.network.contracts.system.action('mvfrsavings', {
+				owner: this.account.name,
+				rex: this.network.tokenToRex(this.assetValue)
+			});
+
+			const result = await this.wharf.transact({
 				actions: [mvfrsavings]
 			});
 

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

@@ -0,0 +1,51 @@
+<!-- Unstaking balances table. -->
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { Card } from '$lib/components/layout';
+	import Button from '$lib/components/button/button.svelte';
+	import * as Table from '$lib/components/table';
+
+	import type { UnstakingRecord } from './utils';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		href?: string;
+		records?: Array<UnstakingRecord>;
+	}
+
+	const { href, records, ...props }: Props = $props();
+</script>
+
+<Card title="Unstaking Balances" {...props}>
+	<Table.Root class="table-auto">
+		<Table.Head class="border-b-2 border-shark-100/10">
+			<Table.Row class="caption font-medium">
+				<Table.Header class="text-left">Amount</Table.Header>
+				<Table.Header class="text-right">Date available</Table.Header>
+			</Table.Row>
+		</Table.Head>
+		<Table.Body>
+			{#each records as record}
+				{#if !record.savings}
+					<Table.Row>
+						<Table.Cell>{record.balance}</Table.Cell>
+						<Table.Cell class="text-right">
+							{record.date
+								? record.date.toLocaleDateString(undefined, {
+										weekday: 'long',
+										year: 'numeric',
+										month: 'long',
+										day: 'numeric'
+									})
+								: '--'}
+						</Table.Cell>
+					</Table.Row>
+				{/if}
+			{/each}
+		</Table.Body>
+	</Table.Root>
+	{#if href}
+		<Button {href} variant="secondary" class="text-skyBlue-500">Withdraw</Button>
+	{/if}
+</Card>