Merge pull request #335 from greymass/kurt-resources-locale

Localized Resources pages

messages/en.json

@@ -32,6 +32,7 @@
 	"common_available": "Available",
 	"common_back": "Back",
 	"common_balance": "Balance",
+	"common_balance_available": "Balance available",
 	"common_block_id": "Block ID",
 	"common_block_next": "Next Block",
 	"common_block_number": "Block Number",
@@ -102,6 +103,7 @@
 	"common_refund_tokens": "Claim previously delegated {token} tokens",
 	"common_refunding": "Refunding",
 	"common_required": "Required",
+	"common_resouce_amount": "Amount of {resource}",
 	"common_resources": "Resources",
 	"common_resources_action": "Manage CPU/NET",
 	"common_restart": "Restart",
@@ -156,6 +158,7 @@
 	"common_unstake_tokens": "Unstake {token} tokens",
 	"common_unstaked": "Unstaked",
 	"common_unstaking": "Unstaking",
+	"common_usable_for": "Usable for",
 	"common_used": "Used",
 	"common_value": "Value",
 	"common_value_with_amount": "Value: {amount}",
@@ -317,6 +320,19 @@
 	"ram_sale_value": "Amount of RAM to sell:",
 	"ram_to_purchase": "RAM to be bought",
 	"ram_to_sell": "RAM to be sold",
+	"resources_metadata_overview_description": "An overview of the multiple network resources usable on the {network} Network providing access to manage resources using an compatible wallet.",
+	"resources_network_subtitle": "Manage CPU, NET, and RAM resources on the {network} Network.",
+	"resources_network_title": "{network} Network Resources",
+	"resources_rent_confirm": "Confirm Rent",
+	"resources_rent_confirm_with_cost": "Rent for {cost}",
+	"resources_rent_for_self": "Rent Resources for my account",
+	"resources_rent_receiving_placeholder": "Enter the account name",
+	"resources_rent_with_powerup": "Rent resources with PowerUp",
+	"resources_rent_with_rex": "Rent resources with REX",
+	"resources_rent_with_stake": "Stake {symbolName} for resources",
+	"resources_usable_time_24h": "24 Hours",
+	"resources_usable_time_30days": "30 Days",
+	"resources_usable_time_until_unstaked": "Until Unstaked",
 	"search_result_description_buyram": "Purchase RAM",
 	"search_result_description_clear": "Clear search history",
 	"search_result_description_ram": "Market Overview",

src/lib/components/elements/resourceCard.svelte

@@ -3,6 +3,7 @@
 	import CpuIcon from 'lucide-svelte/icons/cpu';
 	import Wifi from 'lucide-svelte/icons/wifi';
 	import HardDrive from 'lucide-svelte/icons/hard-drive';
+	import * as m from '$lib/paraglide/messages';
 
 	interface Props {
 		type: keyof typeof resourceMap;
@@ -53,6 +54,6 @@
 
 	<p class="*:block">
 		<span class="font-semibold text-white">{props.value} {unit}</span>
-		<span>Available</span>
+		<span>{m.common_available()}</span>
 	</p>
 </div>

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

@@ -1,13 +1,21 @@
 import type { LayoutLoad } from './$types';
+import * as m from '$lib/paraglide/messages';
 
 export const load: LayoutLoad = async ({ parent }) => {
 	const { network } = await parent();
+	const title = m.resources_network_title({
+		network: network.chain.name
+	});
 	return {
-		title: `${network.chain.name} Network Resources`,
-		subtitle: `Manage CPU, NET, and RAM resources on the ${network.chain.name} Network.`,
+		title,
+		subtitle: m.resources_network_subtitle({
+			network: network.chain.name
+		}),
 		pageMetaTags: {
-			title: `${network.chain.name} Network Resources`,
-			description: `An overview of the multiple network resources usable on the ${network.chain.name} network providing access to manage resources using an compatible wallet.`
+			title,
+			description: m.resources_metadata_overview_description({
+				network: network.chain.name
+			})
 		}
 	};
 };

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

@@ -7,6 +7,7 @@
 	import RamResource from '$lib/components/elements/ramresource.svelte';
 	import AccountBalance from '$lib/components/card/accountbalance.svelte';
 	import { calAvailableSize } from '$lib/utils';
+	import * as m from '$lib/paraglide/messages';
 
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
@@ -79,21 +80,23 @@
 			/>
 			{#if data.network.supports('powerup')}
 				<Button variant="primary" href="/{network}/resources/powerup"
-					>Rent resources with PowerUp</Button
+					>{m.resources_rent_with_powerup()}</Button
 				>
 			{/if}
 			{#if data.network.supports('rentrex')}
-				<Button variant="primary" href="/{network}/resources/rex">Rent resources with REX</Button>
+				<Button variant="primary" href="/{network}/resources/rex"
+					>{m.resources_rent_with_rex()}</Button
+				>
 			{/if}
 			{#if data.network.supports('stakeresource')}
 				<Button variant="primary" href="/{network}/resources/stake"
-					>Stake {symbolName} for resources</Button
+					>{m.resources_rent_with_stake({ symbolName })}</Button
 				>
 			{/if}
 		</Stack>
 		<Stack>
 			<RamResource ramAvailable={ramAvailableSize} {precision} />
-			<Button variant="secondary" href="/{network}/ram">RAM Market</Button>
+			<Button variant="secondary" href="/{network}/ram">{m.common_ram_market()}</Button>
 		</Stack>
 		<AccountBalance />
 	</Stack>

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

@@ -17,6 +17,7 @@
 	import type { AccountState } from '$lib/state/client/account.svelte';
 	import type { PowerUpState } from '@wharfkit/resources';
 
+	import * as m from '$lib/paraglide/messages';
 	import { calAvailableSize, preventDefault } from '$lib/utils';
 	import { RentState } from './state.svelte';
 	import { getCpuAndNetPrice, getPowerupFrac, type RentType } from './utils';
@@ -34,9 +35,9 @@
 	const cpuAvailableSize = $derived(calAvailableSize(context.account?.cpu));
 	const netAvailableSize = $derived(calAvailableSize(context.account?.net));
 	const usableTime = $derived.by(() => {
-		if (rentType === 'POWERUP') return '24 Hours';
-		if (rentType === 'REX') return '30 Days';
-		return 'Until Unstaked';
+		if (rentType === 'POWERUP') return m.resources_usable_time_24h();
+		if (rentType === 'REX') return  m.resources_usable_time_30days();
+		return m.resources_usable_time_until_unstaked();
 	});
 
 	$effect(() => {
@@ -81,13 +82,13 @@
 	const rentState: RentState = $state(new RentState(network.chain, rentType));
 	const rentDetails = $derived.by(() => {
 		const details = [];
-		details.push({ title: 'Usable for', desc: usableTime });
+		details.push({ title: m.common_usable_for(), desc: usableTime });
 		details.push({
-			title: 'Balance available',
+			title: m.common_balance_available(),
 			desc: `${rentState.balance.quantity} ${rentState.balance.symbol.name}`
 		});
 		details.push({
-			title: 'Total cost',
+			title: m.common_total_cost(),
 			desc: `${rentState.cost.quantity} ${rentState.cost.symbol.name}`
 		});
 		return details;
@@ -137,7 +138,8 @@
 		<Stack class="py-4 sm:p-4 ">
 			<fieldset class="grid gap-4">
 				<Label for="cpuNumberInput"
-					>Amount of CPU {#if rentState.cpuPricePerMs}
+					>{m.common_resouce_amount({ resource: 'CPU' })}
+					{#if rentState.cpuPricePerMs}
 						(<AssetText variant="full" value={rentState.cpuPricePerMs} />/MS){/if}</Label
 				>
 				<NumberInput
@@ -151,7 +153,8 @@
 
 			<fieldset class="grid gap-4">
 				<Label for="netNumberInput"
-					>Amount of NET {#if rentState.netPricePerKb}
+					>{m.common_resouce_amount({ resource: 'NET' })}
+					{#if rentState.netPricePerKb}
 						(<AssetText variant="full" value={rentState.netPricePerKb} />/KB){/if}</Label
 				>
 				<NumberInput
@@ -165,18 +168,18 @@
 
 			<fieldset class="flex items-center gap-3">
 				<Checkbox id="rentForSelf" bind:checked={rentState.rentingForSelf} />
-				<Label for="rentForSelf">Rent Resources for my account</Label>
+				<Label for="rentForSelf">{m.resources_rent_for_self()}</Label>
 			</fieldset>
 
 			{#if !rentState.rentingForSelf}
 				<fieldset class="semi-bold grid gap-4">
-					<Label for="thirdReceiver">Receiving Account</Label>
+					<Label for="thirdReceiver">{m.send_receiving_account()}</Label>
 					<NameInput
 						id="thirdReceiver"
 						bind:this={receiverNameInput}
 						bind:value={rentState.thirdReceiver}
 						bind:valid={rentState.thirdReceiverValid}
-						placeholder="Enter the account name"
+						placeholder={m.resources_rent_receiving_placeholder()}
 					/>
 				</fieldset>
 			{/if}
@@ -186,9 +189,9 @@
 			{/if}
 			<Button type="submit" class="w-full" disabled={!rentState.valid}>
 				{#if rentState.cost.value}
-					Rent for {rentState.cost}
+					{m.resources_rent_confirm_with_cost({ cost: rentState.cost })}
 				{:else}
-					Confirm Rent
+					{m.resources_rent_confirm()}
 				{/if}
 			</Button>
 		</Stack>