Merge pull request #328 from greymass/localize

Localize

src/lib/components/accountswitch.svelte

@@ -4,6 +4,7 @@
 	import { createDialog, melt } from '@melt-ui/svelte';
 	import { Session, type SerializedSession } from '@wharfkit/session';
 	import { chainLogos } from '@wharfkit/common';
+	import * as m from '$lib/paraglide/messages';
 
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import type { NetworkState } from '$lib/state/network.svelte';
@@ -102,7 +103,7 @@
 			>
 		</div>
 	{:else}
-		<span class="pointer-events-none z-10 px-4 py-2">Connect Wallet</span>
+		<span class="pointer-events-none z-10 px-4 py-2">{m.common_connect_wallet()}</span>
 	{/if}
 </button>
 
@@ -145,7 +146,7 @@
 
 			<section id="accounts" class="flex flex-1 flex-col gap-3 pt-2">
 				<header class="flex items-center justify-between text-xl font-semibold">
-					<span>My Accounts</span>
+					<span>{m.common_my_accounts()}</span>
 					<button
 						onclick={addSession}
 						class="grid size-12 place-items-center rounded-lg hover:bg-mineShaft-950"
@@ -198,7 +199,7 @@
 							</li>
 						{/each}
 					{:else}
-						<p>No active sessions</p>
+						<p>{m.common_no_active_sessions()}</p>
 					{/if}
 				</ul>
 			</section>

src/lib/components/breakdown/breakdown.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { Stack } from '$lib/components/layout';
 	import type { Snippet } from 'svelte';
+	import * as m from '$lib/paraglide/messages';
+
 	interface Props {
 		children: Snippet;
 		isCurrentUser?: boolean;
@@ -9,7 +11,7 @@
 </script>
 
 <Stack class="gap-2 @container">
-	<h5 class="h5">Breakdown</h5>
+	<h5 class="h5">{m.common_breakdown()}</h5>
 	{#if props.isCurrentUser}
 		<div class="grid grid-cols-3 gap-0">
 			{@render props.children()}

src/lib/components/button/copy.svelte

@@ -6,6 +6,7 @@
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
 	import { cn } from '$lib/utils';
+	import * as m from '$lib/paraglide/messages';
 
 	const context = getContext<UnicoveContext>('state');
 
@@ -43,7 +44,7 @@
 				'peer absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 focus-visible:outline-none',
 				buttonSize
 			)}
-			aria-label="Copy"
+			aria-label={m.common_copy()}
 		>
 			<!-- Button is done this way with absolute positioning so we can maintain a decent hit slop on mobile without affecting layout -->
 		</button>
@@ -53,7 +54,7 @@
 				in:fly={{ x: -20, easing: quartOut, duration: 100 }}
 				out:fade={{ easing: quadIn, duration: 200 }}
 				class="absolute inset-y-0 left-full translate-x-2 select-none text-nowrap text-xs text-skyBlue-400"
-				>Copied!</span
+				>{m.common_copied_result()}</span
 			>
 		{/if}
 	</div>

src/lib/components/card/accountbalance.svelte

@@ -6,6 +6,7 @@
 	import Button from '$lib/components/button/button.svelte';
 	import Chip from '$lib/components/chip.svelte';
 	import AssetText from '$lib/components/elements/asset.svelte';
+	import * as m from '$lib/paraglide/messages';
 
 	const context = getContext<UnicoveContext>('state');
 
@@ -17,18 +18,18 @@
 		title?: string;
 	}
 
-	const { cta, title = 'Account Balance' }: Props = $props();
+	const { cta, title = m.common_account_balance() }: Props = $props();
 </script>
 
 <Card {title}>
 	<Stack>
 		<Stack class="gap-2">
-			<h4 class="text-muted text-base leading-none">Available</h4>
+			<h4 class="text-muted text-base leading-none">{m.common_available()}</h4>
 			<p class="text-xl font-semibold leading-none text-white">
 				{#if context.account}
 					<AssetText variant="full" value={context.account?.balance?.liquid} />
 				{:else}
-					Not logged in
+					{m.common_not_logged_in()}
 				{/if}
 			</p>
 			{#if context.account?.value?.liquid}

src/lib/components/chart/barchart.svelte

@@ -3,6 +3,7 @@
 	import { Chart } from 'chart.js';
 	import 'chart.js/auto';
 	import { Card } from '$lib/components/layout';
+	import * as m from '$lib/paraglide/messages';
 
 	interface Props {
 		data: { x: number; y: number; y1?: number }[];
@@ -74,13 +75,13 @@
 		<div class="flex gap-4">
 			<div class="flex items-center gap-1">
 				<div class="size-4 rounded bg-[#00ED97]"></div>
-				<span class="text-[#00ED97]">Staked</span>
+				<span class="text-[#00ED97]">{m.common_staked()}</span>
 			</div>
 			<div class="flex items-center gap-1">
 				<div class="size-4 rounded bg-[#B2FAE0]"></div>
-				<span class="text-[#B2FAE0]">Yield</span>
+				<span class="text-[#B2FAE0]">{m.common_yield()}</span>
 			</div>
 		</div>
-		<span class="text-shark-200/70">Today</span>
+		<span class="text-shark-200/70">{m.common_today()}</span>
 	</div>
 </Card>

src/lib/components/chart/tokendistribution.svelte

@@ -2,18 +2,19 @@
 	import type { AccountValue } from '$lib/state/client/account.svelte';
 	import { cn, percentString } from '$lib/utils';
 	import { Card } from '../layout';
+	import * as m from '$lib/paraglide/messages';
 
 	interface Props {
 		data?: AccountValue;
 	}
 	let { data }: Props = $props();
 
 	const distributionMap = {
-		delegated: { label: 'Delegated', color: 'bg-mineShaft-300' },
-		liquid: { label: 'Available', color: 'bg-green-400' },
+		delegated: { label: m.common_delegated(), color: 'bg-mineShaft-300' },
+		liquid: { label: m.common_available(), color: 'bg-green-400' },
 		ram: { label: 'RAM', color: 'bg-solar-400' },
-		staked: { label: 'Staked', color: 'bg-skyBlue-400' },
-		unstaked: { label: 'Unstaked', color: 'bg-skyBlue-400' }
+		staked: { label: m.common_staked(), color: 'bg-skyBlue-400' },
+		unstaked: { label: m.common_unstaked(), color: 'bg-skyBlue-400' }
 	};
 
 	type DistributionItem = {
@@ -39,7 +40,7 @@
 	const displayThreshold = 0.0001;
 </script>
 
-<Card id="distribution" title="Distribution">
+<Card id="distribution" title={m.common_distribution()}>
 	{#if distribution}
 		<div id="distribution-container" class="flex gap-1">
 			{#each distribution as item}

src/lib/components/elements/unstaking.svelte

@@ -7,6 +7,7 @@
 	import Button from '$lib/components/button/button.svelte';
 	import type { UnstakingRecord } from '$lib/utils/staking';
 	import { languageTag } from '$lib/paraglide/runtime';
+	import * as m from '$lib/paraglide/messages';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		href?: string;
@@ -17,16 +18,15 @@
 </script>
 
 {#if records.filter((r) => !r.savings).length > 0}
-	<Card {...props} title="Unstaking" class="auto-rows-max">
+	<Card {...props} title={m.common_unstaking()} class="auto-rows-max">
 		<p>
-			The tokens currently being unstaked are listed below with the date they become available.
-			These balances will continue to earn rewards until they are withdrawn.
+			{m.unstaking_description()}
 		</p>
 		<table class="table-styles mt-4">
 			<thead class="border-b-2 border-shark-100/10">
 				<tr class="caption font-medium">
-					<th class="text-left">Amount</th>
-					<th class="text-right">Date available</th>
+					<th class="text-left">{m.common_amount()}</th>
+					<th class="text-right">{m.common_date_available()}</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -44,7 +44,7 @@
 			</tbody>
 		</table>
 		{#if href}
-			<Button {href} variant="secondary">Withdraw</Button>
+			<Button {href} variant="secondary">{m.common_withdraw()}</Button>
 		{/if}
 	</Card>
 {/if}

src/lib/components/navigation/sidemenu.svelte

@@ -6,6 +6,8 @@
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import type { NetworkState } from '$lib/state/network.svelte';
 
+	import * as m from '$lib/paraglide/messages';
+
 	const context = getContext<UnicoveContext>('state');
 
 	interface Props {
@@ -26,13 +28,13 @@
 			// 	text: network.chain.name,
 			// 	active: pathname[2] === String(network) && !pathname[3]
 			// },
-			{ href: `/${network}/send`, text: 'Send', active: pathname[3] === 'send' }
+			{ href: `/${network}/send`, text: m.common_send(), active: pathname[3] === 'send' }
 		];
 
 		if (network.supports('staking')) {
 			items.push({
 				href: `/${network}/staking`,
-				text: 'Staking',
+				text: m.common_staking(),
 				active: pathname[3] === 'staking'
 			});
 		}
@@ -44,7 +46,7 @@
 		if (context.settings.data.advancedMode) {
 			items.push({
 				href: `/${network}/resources`,
-				text: 'Resources',
+				text: m.common_resources(),
 				active: pathname[3] === 'resources'
 			});
 		}
@@ -60,14 +62,14 @@
 		if (context.account) {
 			items.splice(0, 0, {
 				href: `/${network}/account/${context.account.name}`,
-				text: 'My Account',
+				text: m.common_my_account(),
 				active: pathname[3] === 'account' && pathname[4] === String(context.account.name)
 			});
 		}
 
 		items.push({
 			href: `/${network}/settings`,
-			text: 'Settings',
+			text: m.common_settings(),
 			active: pathname[3] === 'settings'
 		});
 

src/lib/components/networkswitch.svelte

@@ -11,6 +11,7 @@
 	import { goto } from '$app/navigation';
 	import { languageTag } from '$lib/paraglide/runtime';
 	import type { NetworkState } from '$lib/state/network.svelte';
+	import * as m from '$lib/paraglide/messages';
 
 	interface Props {
 		currentNetwork: NetworkState;
@@ -84,7 +85,7 @@
 
 		{#if context.settings.data.advancedMode}
 			<div class="font-regular m-0 flex items-center gap-1 pr-1 text-base text-zinc-400">
-				<span use:melt={$label}>Change network</span>
+				<span use:melt={$label}>{m.change_network()}</span>
 				<ChevronDown
 					data-open={$open}
 					class="size-4 transition-transform duration-100 data-[open=true]:rotate-180"

src/lib/components/select/select.svelte

@@ -3,6 +3,7 @@
 	import type { ChangeFn } from '@melt-ui/svelte/internal/helpers';
 	import { SelectTrigger, SelectMenu, SelectItem } from './elements';
 	import type { ExtendedSelectOption, SelectOptionVariant } from './types';
+	import * as m from '$lib/paraglide/messages';
 
 	interface Props {
 		options: ExtendedSelectOption[];
@@ -69,7 +70,7 @@
 	{#if selectedOption.image && typeof selectedOption.image === 'string'}
 		<img src={selectedOption.image} alt={selectedOption.label} class="mr-2 size-5 object-contain" />
 	{/if}
-	{$selectedLabel || 'Select an option'}
+	{$selectedLabel || m.common_select_an_option()}
 </SelectTrigger>
 
 {#if $open}

src/lib/components/select/token.svelte

@@ -3,6 +3,7 @@
 	import { createSelect, type SelectOption } from '@melt-ui/svelte';
 	import { SelectTrigger, SelectMenu, SelectItem } from './elements';
 	import { writable } from 'svelte/store';
+	import * as m from '$lib/paraglide/messages';
 
 	interface TokenSelectOption extends SelectOption<number> {
 		image?: string;
@@ -107,7 +108,7 @@
 	{#if selectedTokenImage}
 		<img src={selectedTokenImage} alt={$selectedLabel} class="mr-2 size-5 object-contain" />
 	{/if}
-	{$selectedLabel || 'Select an option'}
+	{$selectedLabel || m.common_select_an_option()}
 </SelectTrigger>
 
 {#if $open}

src/lib/components/transactionSummary.svelte

@@ -3,6 +3,7 @@
 	import type { Checksum256 } from '@wharfkit/antelope';
 	import Transaction from './elements/transaction.svelte';
 	import CircleCheckBig from 'lucide-svelte/icons/circle-check-big';
+	import * as m from '$lib/paraglide/messages';
 
 	interface Props {
 		transactionId?: Checksum256 | string;
@@ -22,23 +23,23 @@
 			<picture class="size-24">
 				<CircleCheckBig class="size-full text-green-300" />
 			</picture>
-			<h2 class="h3">Transaction Complete</h2>
+			<h2 class="h3">{m.common_transaction_complete()}</h2>
 		</div>
 		<!-- <h3 class="h3">{transaction.status}</h3> -->
 		<table class="table-styles">
 			<tbody>
 				<tr>
-					<td>Status</td>
+					<td>{m.common_status()}</td>
 					<td class="text-right">{transaction.status}</td>
 				</tr>
 				<tr>
-					<td>Transaction ID</td>
+					<td>{m.common_trx_id()}</td>
 					<td class="text-right"><Transaction id={transaction.transaction?.id} /> </td>
 				</tr>
 			</tbody>
 		</table>
 	{:else}
-		<h2 class="h2">Transaction Not Found</h2>
-		<p>The transaction with ID {transactionId} could not be found.</p>
+		<h2 class="h2">{m.common_trx_not_found()}</h2>
+		<p>{m.common_trx_not_found_description({ transactionId: String(transactionId) })}</p>
 	{/if}
 </div>