move price calculation method to utils

src/lib/state/network.svelte.ts

@@ -26,6 +26,7 @@ import {
 
 import { tokens } from '../../routes/[network]/api/tokens/tokens';
 import { calculateValue } from '$lib/utils';
+import { SampledUsage } from '$lib/types';
 
 export class NetworkState {
 	public chain: ChainDefinition;
@@ -42,18 +43,9 @@ export class NetworkState {
 	public resources?: Resources = $state();
 	public rexstate?: REXState = $state();
 	public powerupstate?: PowerUpState = $state();
-	public sampledUsage?: SampleUsage = $state();
+	public sampledUsage?: SampledUsage = $state();
 	public tokenmeta?: TokenMeta[] = $state();
 	public tokenstate?: DelphiOracleTypes.datapoints = $state();
-	public rexprice: Asset | undefined = $derived.by(() => {
-		if (this.rexstate && this.sampledUsage && this.chain.systemToken) {
-			return Asset.from(
-				this.rexstate.price_per(this.sampledUsage, 30000),
-				this.chain.systemToken.symbol
-			);
-		}
-		return undefined;
-	});
 	public tokenprice = $derived.by(() => {
 		return this.tokenstate ? Asset.fromUnits(this.tokenstate.median, '4,USD') : undefined;
 	});
@@ -121,7 +113,8 @@ export class NetworkState {
 		}
 
 		try {
-			this.sampledUsage = Serializer.objectify(json.sampleUsage);
+			console.log("#####", json.sampleUsage);
+			this.sampledUsage = SampledUsage.from(json.sampleUsage);
 		} catch (error) {
 			console.log('SampleUsage Parse', error);
 			console.log(json);

src/lib/types.ts

@@ -7,7 +7,8 @@ import {
 	Name,
 	PermissionLevel,
 	TimePointSec,
-	UInt64
+	UInt64,
+	UInt128
 } from '@wharfkit/antelope';
 
 import * as SystemContract from '$lib/wharf/contracts/system';
@@ -49,3 +50,10 @@ export interface LightAPIBalanceResponse {
 	account_name: string;
 	balances: LightAPIBalanceRow[];
 }
+
+@Struct.type('sampledusage')
+export class SampledUsage extends Struct {
+	@Struct.field(API.v1.AccountObject) declare account: API.v1.AccountObject;
+    @Struct.field(UInt128) declare cpu: UInt128;
+    @Struct.field(UInt128) declare net: UInt128;
+}

src/routes/[network]/(account)/resources/components/forms/powerup.svelte

@@ -5,15 +5,15 @@
 	import Stack from '$lib/components/layout/stack.svelte';
 	import Transaction from '$lib/components/transaction.svelte';
 
-	import { Asset, Checksum256 } from '@wharfkit/antelope';
+	import { Checksum256 } from '@wharfkit/antelope';
 
 	import { RentState } from './state.svelte';
 	import { RentType, ResourceType } from '../../types';
+	import { getPowerupPrice, getPowerupFrac } from '../../utils';
 
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import type { NetworkState } from '$lib/state/network.svelte';
 	import { getContext } from 'svelte';
-	import Error from '../../../../../+error.svelte';
 
 	const context = getContext<UnicoveContext>('state');
 	interface Props {
@@ -34,25 +34,19 @@
 				context.network.sampledUsage &&
 				context.network.chain.systemToken
 			) {
-				if (resourceType === ResourceType.CPU) {
-					rentState.frac = context.network.powerupstate.cpu.frac_by_ms(
-						context.network.sampledUsage,
-						Number(rentState.amount)
-					);
-					rentState.pricePerUnit = Asset.from(
-						context.network.powerupstate?.cpu.price_per_ms(context.network.sampledUsage, 1),
-						context.network.chain.systemToken?.symbol
-					);
-				} else {
-					rentState.frac = context.network.powerupstate.net.frac_by_kb(
-						context.network.sampledUsage,
-						Number(rentState.amount)
-					);
-					rentState.pricePerUnit = Asset.from(
-						context.network.powerupstate?.net.price_per_kb(context.network.sampledUsage, 1),
-						context.network.chain.systemToken?.symbol
-					);
-				}
+				rentState.frac = getPowerupFrac(
+					resourceType,
+					context.network.powerupstate,
+					context.network.sampledUsage,
+					Number(rentState.amount)
+				);
+
+				rentState.pricePerUnit = getPowerupPrice(
+					resourceType,
+					context.network.powerupstate,
+					context.network.sampledUsage,
+					context.network.chain.systemToken.symbol
+				);
 			}
 			rentState.balance = context.account.balance ? context.account.balance.liquid : undefined;
 		} else {

src/routes/[network]/(account)/resources/components/forms/rex.svelte

@@ -9,6 +9,7 @@
 
 	import { RentState } from './state.svelte';
 	import { RentType, ResourceType } from '../../types';
+	import { getRexPrice } from '../../utils';
 
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import type { NetworkState } from '$lib/state/network.svelte';
@@ -23,7 +24,18 @@
 				rentState.receiver = context.account.name;
 			}
 			rentState.balance = context.account.balance ? context.account.balance.liquid : undefined;
-			rentState.pricePerUnit = context.network.rexprice;
+			if (
+				context.network.rexstate &&
+				context.network.sampledUsage &&
+				context.network.chain.systemToken
+			) {
+				rentState.pricePerUnit = getRexPrice(
+					resourceType,
+					context.network.rexstate,
+					context.network.sampledUsage,
+					context.network.chain.systemToken.symbol
+				);
+			}
 		} else {
 			rentState.reset();
 		}

src/routes/[network]/(account)/resources/components/forms/staking.svelte

@@ -9,6 +9,7 @@
 
 	import { RentState } from './state.svelte';
 	import { RentType, ResourceType } from '../../types';
+	import { getStakingPrice } from '../../utils';
 
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import type { NetworkState } from '$lib/state/network.svelte';
@@ -29,27 +30,11 @@
 				rentState.receiver = context.account.name;
 			}
 			rentState.balance = context.account.balance ? context.account.balance.liquid : undefined;
-
-			switch (resourceType) {
-				case ResourceType.CPU: {
-					rentState.pricePerUnit = Asset.fromUnits(
-						context.network.sampledUsage.account.cpu_weight.dividing(
-							context.network.sampledUsage.account.cpu_limit.max
-						),
-						context.network.chain.systemToken.symbol
-					);
-					break;
-				}
-				case ResourceType.NET: {
-					rentState.pricePerUnit = Asset.fromUnits(
-						context.network.sampledUsage.account.net_weight.dividing(
-							context.network.sampledUsage.account.net_limit.max
-						),
-						context.network.chain.systemToken.symbol
-					);
-					break;
-				}
-			}
+			rentState.pricePerUnit = getStakingPrice(
+				resourceType,
+				context.network.sampledUsage,
+				context.network.chain.systemToken.symbol
+			);
 		} else {
 			rentState.reset();
 		}
@@ -141,12 +126,9 @@
 			</p>
 		{/if}
 		{#if rentState.pricePerUnit}
-			<p>
-				Price:
-				{(Number(rentState.pricePerUnit.value) * 1000).toFixed(
-					rentState.pricePerUnit.symbol.precision
-				)}
-			</p>
+		<p>
+			Price:{rentState.pricePerUnit}
+		</p>
 		{/if}
 
 		{#if rentState.error}

src/routes/[network]/(account)/resources/components/state/prices.svelte

@@ -7,7 +7,7 @@
 	import { getContext } from 'svelte';
 
 	import { ResourceType } from '../../types';
-	import { getName, getUnit } from '../../utils';
+	import { getName, getUnit, getPowerupPrice, getRexPrice, getStakingPrice } from '../../utils';
 
 	interface Props {
 		resource: ResourceType;
@@ -27,10 +27,29 @@
 	let stakingPrice: Asset | undefined = $state();
 
 	$effect(() => {
-		if (context.network) {
-			powerupPrice = context.network.powerupprice;
-			rexPrice = context.network.rexprice;
-			stakingPrice = context.network.stakingprice;
+		if (
+			context.network &&
+			context.network.powerupstate &&
+			context.network.sampledUsage &&
+			context.network.chain.systemToken
+		) {
+			powerupPrice = getPowerupPrice(
+				resource,
+				context.network.powerupstate,
+				context.network.sampledUsage,
+				context.network.chain.systemToken.symbol
+			);
+			rexPrice = getRexPrice(
+				resource,
+				context.network.rexstate,
+				context.network.sampledUsage,
+				context.network.chain.systemToken.symbol
+			);
+			stakingPrice = getStakingPrice(
+				resource,
+				context.network.sampledUsage,
+				context.network.chain.systemToken.symbol
+			);
 		} else {
 			powerupPrice = undefined;
 			rexPrice = undefined;
@@ -87,7 +106,7 @@
 				<div>Staking</div>
 				<div>
 					{#if stakingPrice}
-						{(Number(stakingPrice.value) * 1000).toFixed(stakingPrice.symbol.precision)}
+						{stakingPrice.value.toFixed(stakingPrice.symbol.precision)}
 					{/if}
 				</div>
 				<div>

src/routes/[network]/(account)/resources/utils.ts

@@ -1,4 +1,7 @@
 import { ResourceType } from './types';
+import { PowerUpState } from '@wharfkit/resources';
+import type { REXState, SampleUsage } from '@wharfkit/resources';
+import { Asset } from '@wharfkit/antelope';
 
 export const calSize = (available: number) => {
 	let size = 0;
@@ -41,3 +44,79 @@ export const getUnit = (resourceType: ResourceType) => {
 			return 'ms';
 	}
 };
+
+export const getPowerupPrice = (resourceType: ResourceType,
+	powerupstate: PowerUpState,
+	sampleUsage: SampleUsage,
+	systemTokenSymbol: Asset.Symbol) => {
+	switch (resourceType) {
+		case ResourceType.NET:
+			const netPrice = powerupstate.net.price_per_kb(sampleUsage, 1)
+			return Asset.from(netPrice, systemTokenSymbol);
+		case ResourceType.CPU:
+			const cpuPrice = powerupstate.cpu.price_per_ms(sampleUsage, 1)
+			return Asset.from(cpuPrice, systemTokenSymbol);
+		default:
+			throw new Error(`unsupport resource type: ${resourceType}`);
+	}
+};
+
+export const getRexPrice = (resourceType: ResourceType,
+	rexState: REXState,
+	sampledUsage: SampleUsage,
+	systemTokenSymbol: Asset.Symbol) => {
+	switch (resourceType) {
+		case ResourceType.NET:
+			const netPrice = rexState.price_per(sampledUsage, 30000);
+			return Asset.from(netPrice, systemTokenSymbol);
+		case ResourceType.CPU:
+			const cpuPrice = rexState.price_per(sampledUsage, 30000);
+			return Asset.from(cpuPrice, systemTokenSymbol);
+		default:
+			throw new Error(`unsupport resource type: ${resourceType}`);
+	}
+};
+
+export const getStakingPrice = (resourceType: ResourceType,
+	sampledUsage: SampleUsage,
+	systemTokenSymbol: Asset.Symbol) => {
+	const { account } = sampledUsage;
+	switch (resourceType) {
+		case ResourceType.NET:
+			const pricePerKb = account.net_weight
+				.multiplying(1000)
+				.dividing(
+					account.net_limit.max
+				);
+			return Asset.fromUnits(pricePerKb, systemTokenSymbol);
+		case ResourceType.CPU:
+			const pricePerMs = account.cpu_weight
+				.multiplying(1000)
+				.dividing(
+					account.cpu_limit.max
+				);
+			return Asset.fromUnits(pricePerMs, systemTokenSymbol);
+		default:
+			throw new Error(`unsupport resource type: ${resourceType}`);
+	}
+};
+
+export const getPowerupFrac = (resourceType: ResourceType,
+	powerupstate: PowerUpState,
+	sampledUsage: SampleUsage,
+	amount: number) => {
+	switch (resourceType) {
+		case ResourceType.NET:
+			return powerupstate.net.frac_by_kb(
+				sampledUsage,
+				amount
+			);
+		case ResourceType.CPU:
+			return powerupstate.cpu.frac_by_ms(
+				sampledUsage,
+				amount
+			);
+		default:
+			throw new Error(`unsupport resource type: ${resourceType}`);
+	}
+};

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

@@ -10,8 +10,6 @@
 <div class="space-y-4">
 	<h3 class="h3">RAM Prices</h3>
 	<Code>{JSON.stringify(data.network.ramprice, null, 2)}</Code>
-	<h3 class="h3">Rent Via REX Prices</h3>
-	<Code>{JSON.stringify(data.network.rexprice, null, 2)}</Code>
 
 	{#if data.account}
 		<h3 class="h3">RAM</h3>