Staking changes

.github/workflows/check.yml

@@ -24,4 +24,3 @@ jobs:
       - uses: oven-sh/setup-bun@v2
       - run: bun install
       - run: bunx tsc --noemit
-

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

@@ -22,7 +22,8 @@ const defaultDataSources = {
 	get_account: undefined,
 	light_account: [],
 	delegated: [],
-	rex: undefined
+	rex: undefined,
+	rexfund: undefined
 };
 
 export class AccountState {
@@ -80,7 +81,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,
@@ -187,13 +189,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.supports('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,32 +6,25 @@
 	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';
-	import { StakeState } from './state.svelte';
+	import { StakeManager } from './manager.svelte';
 
 	const context = getContext<UnicoveContext>('state');
 	const { data } = $props();
 
-	let stakeState: StakeState = $state(new StakeState(data.network));
+	let manager: StakeManager = $state(new StakeManager(data.network));
 
 	$effect(() => {
-		stakeState.sync(data.network, context.account, context.wharf);
+		manager.sync(data.network, context.account, context.wharf);
 	});
 </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>
-{:else if stakeState.error}
+{#if manager.txid}
+	<Transaction network={data.network} transactionId={manager.txid} />
+{:else if manager.error}
 	<div>
 		<h2 class="h2">Transaction Error</h2>
 		<p>There was an error submitting your transaction.</p>
@@ -44,28 +37,28 @@
 				<Switcher>
 					<AssetInput
 						autofocus
-						bind:this={stakeState.input}
-						bind:min={stakeState.minValue}
-						bind:max={stakeState.maxValue}
-						bind:value={stakeState.assetValue}
-						bind:valid={stakeState.assetValid}
-						bind:validPrecision={stakeState.assetValidPrecision}
-						bind:validMinimum={stakeState.assetValidMinimum}
-						bind:validMaximum={stakeState.assetValidMaximum}
+						bind:this={manager.input}
+						bind:min={manager.minValue}
+						bind:max={manager.maxValue}
+						bind:value={manager.assetValue}
+						bind:valid={manager.assetValid}
+						bind:validPrecision={manager.assetValidPrecision}
+						bind:validMinimum={manager.assetValidMinimum}
+						bind:validMaximum={manager.assetValidMaximum}
 					/>
 					<Button
-						disabled={!stakeState.assetValid}
-						onclick={() => stakeState.transact()}
+						disabled={!manager.assetValid}
+						onclick={() => manager.transact()}
 						variant="secondary"
 						class="text-skyBlue-500">Stake</Button
 					>
 				</Switcher>
 
-				{#if !stakeState.assetValid}
-					{#if !stakeState.assetValidPrecision}
+				{#if !manager.assetValid}
+					{#if !manager.assetValidPrecision}
 						<p class="text-red-500">Invalid number, too many decimal places.</p>
 					{/if}
-					{#if !stakeState.assetValidMaximum}
+					{#if !manager.assetValidMaximum}
 						<p class="text-red-500">Amount exceeds available balance.</p>
 					{/if}
 				{/if}
@@ -74,9 +67,9 @@
 					<button
 						class="text-skyBlue-500 hover:text-skyBlue-400"
 						onclick={() => {
-							stakeState.setMaxValue();
+							manager.setMaxValue();
 						}}
-						type="button">Available: {stakeState.stakable}</button
+						type="button">Available: {manager.stakable}</button
 					>
 				</Label>
 			</Stack>
@@ -88,11 +81,11 @@
 						<p class="caption">Minimum lockup</p>
 						<p>21 Days</p>
 						<p class="caption">~APY</p>
-						<p>{stakeState.apy}%</p>
+						<p>{manager.apy}%</p>
 						<p class="caption">You will stake</p>
-						<p>{stakeState.assetValid ? stakeState.assetValue : ''}</p>
+						<p>{manager.assetValid ? manager.assetValue : ''}</p>
 						<p class="caption">Estimated Yield(per year)</p>
-						<p>{stakeState.assetValid ? stakeState.estimateYield : ''}</p>
+						<p>{manager.assetValid ? manager.estimateYield : ''}</p>
 					</div>
 				</Stack>
 			</Card>

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

@@ -6,7 +6,7 @@ import AssetInput from '$lib/components/input/asset.svelte';
 
 import { defaultQuantity, getStakableBalance, getAPY } from '../utils';
 
-export class StakeState {
+export class StakeManager {
 	public input: AssetInput | undefined = $state();
 	public network: NetworkState | undefined = $state();
 	public account: AccountState | undefined = $state();
@@ -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]
 			});