Merge pull request #137 from greymass/reworks

Reworks

src/lib/components/navigation/sidemenu.svelte

@@ -19,11 +19,11 @@
 	const destinations = $derived.by(() => {
 		const features = [];
 
-		if (network.config.features.staking) {
+		if (network.supports('staking')) {
 			features.push({ href: `/${network}/staking`, text: 'Staking' });
 		}
 
-		if (network.config.features.rammarket) {
+		if (network.supports('rammarket')) {
 			features.push({ href: `/${network}/ram`, text: 'RAM' });
 		}
 

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

@@ -16,6 +16,7 @@ import * as SystemContract from '$lib/wharf/contracts/system';
 import { type DataSources } from '$lib/types';
 import { chainMapper } from '$lib/wharf/chains';
 import { NetworkState } from '$lib/state/network.svelte';
+import { calculateValue } from '$lib/utils';
 
 const defaultDataSources = {
 	get_account: undefined,
@@ -107,12 +108,6 @@ export class AccountState {
 	}
 }
 
-export function calculateValue(balance: Asset, currency: Asset): Asset {
-	return Asset.from(
-		`${(currency.value * balance.value).toFixed(currency.symbol.precision)} ${currency.symbol.code}`
-	);
-}
-
 export interface AccountValue {
 	delegated: Asset;
 	liquid: Asset;
@@ -194,7 +189,7 @@ export function getBalance(network: NetworkState, sources: DataSources): Balance
 
 	// Add any staked (REX) tokens to total balance based on current value
 	if (sources.rex) {
-		if (network.config.features.rex && network.rexstate) {
+		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);

src/lib/state/network.svelte.ts

@@ -20,11 +20,12 @@ import {
 	chainConfigs,
 	chainMapper,
 	type ChainConfig,
-	type DefaultContracts
+	type DefaultContracts,
+	type FeatureType
 } from '$lib/wharf/chains';
 
-import { calculateValue } from './client/account.svelte';
 import { tokens } from '../../routes/[network]/api/tokens/tokens';
+import { calculateValue } from '$lib/utils';
 
 export class NetworkState {
 	public chain: ChainDefinition;
@@ -53,25 +54,6 @@ export class NetworkState {
 		}
 		return undefined;
 	});
-	public stakingprice: Asset | undefined = $derived.by(() => {
-		if (this.sampledUsage && this.chain.systemToken) {
-			const { account } = this.sampledUsage;
-			return Asset.fromUnits(
-				Number(account.cpu_weight) / Number(account.cpu_limit.max),
-				this.chain.systemToken.symbol
-			);
-		}
-		return undefined;
-	});
-	public powerupprice: Asset | undefined = $derived.by(() => {
-		if (this.sampledUsage && this.powerupstate && this.chain.systemToken) {
-			return Asset.from(
-				this.powerupstate.cpu.price_per_ms(this.sampledUsage, 1),
-				this.chain.systemToken.symbol
-			);
-		}
-		return undefined;
-	});
 	public tokenprice = $derived.by(() => {
 		return this.tokenstate ? Asset.fromUnits(this.tokenstate.median, '4,USD') : undefined;
 	});
@@ -98,7 +80,7 @@ export class NetworkState {
 			system: new SystemContract({ client: this.client })
 		};
 
-		if (this.config.features.delphioracle) {
+		if (this.supports('delphioracle')) {
 			this.contracts.delphioracle = new DelphiOracleContract({ client: this.client });
 		}
 	}
@@ -148,6 +130,8 @@ export class NetworkState {
 		this.loaded = true;
 	}
 
+	supports = (feature: FeatureType): boolean => this.config.features[feature];
+
 	tokenToRex = (token: AssetType) => {
 		if (!this.rexstate) {
 			throw new Error('REX state not initialized');

src/lib/utils.ts

@@ -1,6 +1,12 @@
-import type { ABI } from '@wharfkit/antelope';
+import { Asset, type ABI } from '@wharfkit/antelope';
 import yaml from 'yaml';
 
+export function calculateValue(balance: Asset, currency: Asset): Asset {
+	return Asset.from(
+		`${(currency.value * balance.value).toFixed(currency.symbol.precision)} ${currency.symbol.code}`
+	);
+}
+
 export function getCacheHeaders(ttl: number, irreversible: boolean = false) {
 	// Maintain a ttl cache by default
 	let browser = `public, max-age=${ttl}, s-max-age=${ttl}`;

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

@@ -1,4 +1,4 @@
-import { calculateValue } from '$lib/state/client/account.svelte';
+import { calculateValue } from '$lib/utils';
 import { Asset, Name, Serializer } from '@wharfkit/antelope';
 import { TokenBalance, TokenIdentifier, TokenMeta } from '@wharfkit/common';
 

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

@@ -13,7 +13,7 @@
 	<p>Loading current RAM price...</p>
 {/if}
 
-{#if data.network.config.features.timeseries}
+{#if data.network.supports('timeseries')}
 	{#if data.historicalPrices.length > 0}
 		<h3>Historical RAM Prices</h3>
 		<RamPriceHistory data={data.historicalPrices} />

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Code from '$lib/components/code.svelte';
 	import PageHeader from '$lib/components/pageheader.svelte';
 	import Grid from '$lib/components/layout/grid.svelte';
 	import Stack from '$lib/components/layout/stack.svelte';
@@ -11,7 +10,7 @@
 	import { getContext } from 'svelte';
 
 	import { ResourceType } from './types';
-	import { NetworkConfig, ResourceState } from './state.svelte';
+	import { ResourceState } from './state.svelte';
 
 	const { data } = $props();
 
@@ -21,11 +20,6 @@
 	const cpuState = $state(new ResourceState(ResourceType.CPU));
 	const netState = $state(new ResourceState(ResourceType.NET));
 
-	const networkConfig = $state(new NetworkConfig());
-	$effect(() => {
-		networkConfig.setConfig(context.network?.config);
-	});
-
 	$effect(() => {
 		ramState.setResource(context.account?.ram);
 		cpuState.setResource(context.account?.cpu);
@@ -39,26 +33,30 @@
 <Stack class="mt-10">
 	<Grid itemWidth="270px">
 		<ResourceWrapper resourceState={ramState}>
-			{#if networkConfig.hasBuyRAM}
+			{#if context.network?.supports('rammarket')}
 				<div class="flex flex-col">
-					<Button class="text-blue-400" variant="pill" href="/{network}/ram/buy">BUY</Button>
-					<Button class="text-blue-400" variant="pill" href="/{network}/ram/sell">SELL</Button>
+					<Button class="text-blue-400" variant="pill" href="/{network}/ram/buy/tokens">BUY</Button>
+					<Button class="text-blue-400" variant="pill" href="/{network}/ram/sell/tokens"
+						>SELL</Button
+					>
 				</div>
 			{/if}
 		</ResourceWrapper>
 		<ResourceWrapper resourceState={cpuState}>
-			{#if networkConfig.hasREX || networkConfig.hasPowerUp}
+			{#if context.network?.supports('rentrex') || context.network?.supports('powerup')}
 				<Button class="text-blue-400" variant="pill" href="/{network}/resources/cpu">RENT</Button>
-			{:else if networkConfig.hasStaking}
+			{/if}
+			{#if context.network?.supports('stakeresource')}
 				<Button class="text-blue-400" variant="pill" href="/{network}/resources/cpu/stake"
 					>STAKE</Button
 				>
 			{/if}
 		</ResourceWrapper>
 		<ResourceWrapper resourceState={netState}>
-			{#if networkConfig.hasREX || networkConfig.hasPowerUp}
+			{#if context.network?.supports('rentrex') || context.network?.supports('powerup')}
 				<Button class="text-blue-400" variant="pill" href="/{network}/resources/net">RENT</Button>
-			{:else if networkConfig.hasStaking}
+			{/if}
+			{#if context.network?.supports('stakeresource')}
 				<Button class="text-blue-400" variant="pill" href="/{network}/resources/net/stake"
 					>STAKE</Button
 				>

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

@@ -5,14 +5,15 @@
 	import Stack from '$lib/components/layout/stack.svelte';
 	import Transaction from '$lib/components/transaction.svelte';
 
-	import { Checksum256 } from '@wharfkit/antelope';
+	import { Asset, Checksum256 } from '@wharfkit/antelope';
 
 	import { RentState } from './state.svelte';
 	import { RentType, ResourceType } from '../../types';
 
 	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 {
@@ -28,21 +29,32 @@
 				rentState.payer = context.account.name;
 				rentState.receiver = context.account.name;
 			}
-			if (context.network.powerupstate && context.network.sampledUsage) {
+			if (
+				context.network.powerupstate &&
+				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.balance = context.account.balance ? context.account.balance.liquid : undefined;
-			rentState.pricePerUnit = context.network.powerupprice;
 		} else {
 			rentState.reset();
 		}

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

@@ -18,13 +18,38 @@
 	let quantityInput: AssetInput | undefined = $state();
 
 	$effect(() => {
-		if (context.account && context.network) {
+		if (
+			context.account &&
+			context.network &&
+			context.network.sampledUsage &&
+			context.network.chain.systemToken
+		) {
 			if (context.account.name) {
 				rentState.payer = context.account.name;
 				rentState.receiver = context.account.name;
 			}
 			rentState.balance = context.account.balance ? context.account.balance.liquid : undefined;
-			rentState.pricePerUnit = context.network.stakingprice;
+
+			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;
+				}
+			}
 		} else {
 			rentState.reset();
 		}

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

@@ -7,7 +7,6 @@
 	import { getContext } from 'svelte';
 
 	import { ResourceType } from '../../types';
-	import { NetworkConfig } from '../../state.svelte';
 	import { getName, getUnit } from '../../utils';
 
 	interface Props {
@@ -22,11 +21,6 @@
 	const resourceName = getName(resource);
 	const resourceUnit = getUnit(resource);
 
-	const networkConfig = $state(new NetworkConfig());
-	$effect(() => {
-		networkConfig.setConfig(context.network?.config);
-	});
-
 	const context = getContext<UnicoveContext>('state');
 	let powerupPrice: Asset | undefined = $state();
 	let rexPrice: Asset | undefined = $state();
@@ -54,7 +48,7 @@
 	</h4>
 
 	<Grid>
-		{#if networkConfig.hasPowerUp}
+		{#if context.network?.supports('powerup')}
 			<div class="flex flex-col items-center gap-2 rounded-2xl border-2 border-slate-300 p-4">
 				<div>Power up</div>
 				<div>
@@ -71,7 +65,7 @@
 				<Button variant="pill" class="text-blue-400" href={powerupLink}>Rent via PowerUp</Button>
 			</div>
 		{/if}
-		{#if networkConfig.hasREX}
+		{#if context.network?.supports('rentrex')}
 			<div class="flex flex-col items-center gap-2 rounded-2xl border-2 border-slate-300 p-4">
 				<div>REX</div>
 				<div>
@@ -88,7 +82,7 @@
 				<Button variant="pill" class="text-blue-400" href={rexLink}>Rent via REX</Button>
 			</div>
 		{/if}
-		{#if networkConfig.hasStaking}
+		{#if context.network?.supports('stakeresource')}
 			<div class="flex flex-col items-center gap-2 rounded-2xl border-2 border-slate-300 p-4">
 				<div>Staking</div>
 				<div>

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

@@ -1,29 +1,7 @@
-import type { ChainConfig } from '$lib/wharf/chains';
 import { Resource } from '@wharfkit/account';
 import { ResourceType } from './types';
 import { calSize, calUsagePer, getName, getUnit } from './utils';
 
-export class NetworkConfig {
-	public hasBuyRAM = $state(false);
-	public hasPowerUp = $state(false);
-	public hasREX = $state(false);
-	public hasStaking = $state(false);
-
-	setConfig(config: ChainConfig | undefined) {
-		if (config) {
-			this.hasBuyRAM = config.features.rammarket;
-			this.hasPowerUp = config.features.powerup;
-			this.hasREX = config.features.rentrex;
-			this.hasStaking = config.features.staking;
-		} else {
-			this.hasBuyRAM = false;
-			this.hasPowerUp = false;
-			this.hasREX = false;
-			this.hasStaking = false;
-		}
-	}
-}
-
 export class ResourceState {
 	private resourceType: ResourceType;
 	public name: string;

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

@@ -2,7 +2,7 @@
 	import { Asset, Int64 } from '@wharfkit/session';
 	import Card from '$lib/components/layout/box/card.svelte';
 	import RAM from '$lib/components/elements/ram.svelte';
-	import { calculateValue } from '$lib/state/client/account.svelte';
+	import { calculateValue } from '$lib/utils';
 
 	const { data } = $props();
 </script>

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

@@ -10,12 +10,8 @@
 <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 PowerUp Prices</h3>
-	<Code>{JSON.stringify(data.network.powerupprice, null, 2)}</Code>
 	<h3 class="h3">Rent Via REX Prices</h3>
 	<Code>{JSON.stringify(data.network.rexprice, null, 2)}</Code>
-	<h3 class="h3">Rent Via Stake Prices</h3>
-	<Code>{JSON.stringify(data.network.stakingprice, null, 2)}</Code>
 
 	{#if data.account}
 		<h3 class="h3">RAM</h3>

src/routes/[network]/api/account/[[name]]/+server.ts

@@ -70,7 +70,7 @@ async function loadBalances(
 	f: typeof fetch
 ): Promise<LightAPIBalanceRow[]> {
 	const balances = [];
-	if (network.config.features.lightapi) {
+	if (network.supports('lightapi')) {
 		const result = await f(`https://balances.unicove.com/api/balances/${network}/${account}`);
 		const json: LightAPIBalanceResponse = await result.json();
 		balances.push(...json.balances);