Use new number component for resources

greymass · Feb 22, 2025 · cb1136e · cb1136e
1 parent 999c6b0
commit cb1136e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/src/lib/components/elements/cpunetresource.svelte b/src/lib/components/elements/cpunetresource.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
+	import type { Int } from '@wharfkit/antelope';
 	import ResourceCard from './resourceCard.svelte';
 
 	interface Props {
-		cpuAvailable: number;
-		netAvailable: number;
-		precision?: number;
+		cpuAvailable: Int;
+		netAvailable: Int;
 	}
 
-	const { cpuAvailable, netAvailable, precision = 2 }: Props = $props();
+	const { cpuAvailable, netAvailable }: Props = $props();
 </script>
 
 <div class="flex gap-px *:flex-1 *:bg-mineShaft-900/70 *:p-4 *:pb-2">
 	<div class="rounded-l-lg">
-		<ResourceCard type="cpu" value={cpuAvailable.toFixed(precision)} />
+		<ResourceCard type="cpu" value={cpuAvailable} />
 	</div>
 	<div class="rounded-r-lg">
-		<ResourceCard type="net" value={netAvailable.toFixed(precision)} />
+		<ResourceCard type="net" value={netAvailable} />
 	</div>
 </div>
diff --git a/src/lib/components/elements/ramresource.svelte b/src/lib/components/elements/ramresource.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { cn } from '$lib/utils';
+	import type { Int } from '@wharfkit/antelope';
 
+	import { cn } from '$lib/utils';
 	import ResourceCard from './resourceCard.svelte';
 
 	interface Props {
-		ramAvailable: number;
-		precision?: number;
+		ramAvailable: Int;
 		class?: string;
 	}
 
-	const { ramAvailable, precision = 2, ...props }: Props = $props();
+	const { ramAvailable, ...props }: Props = $props();
 </script>
 
 <div class={cn('rounded-xl bg-mineShaft-900/70 p-4 pb-2', props.class)}>
-	<ResourceCard type="ram" value={ramAvailable.toFixed(precision)} />
+	<ResourceCard type="ram" value={ramAvailable} />
 </div>
diff --git a/src/lib/components/elements/resourceCard.svelte b/src/lib/components/elements/resourceCard.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+	import type { Int } from '@wharfkit/antelope';
 	import { type Icon } from 'lucide-svelte';
 	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';
+	import NumberFormat from '$lib/components/elements/number.svelte';
 
 	interface Props {
 		type: keyof typeof resourceMap;
-		value: string;
+		value: Int;
 		vertical?: boolean;
 	}
 
@@ -53,7 +56,10 @@
 	</h3>
 
 	<p class="*:block">
-		<span class="font-semibold text-white">{props.value} {unit}</span>
+		<span class="font-semibold text-white">
+			<NumberFormat number={props.value} />
+			{unit}
+		</span>
 		<span>{m.common_available()}</span>
 	</p>
 </div>
diff --git a/src/routes/[network]/(explorer)/account/[name]/+page.svelte b/src/routes/[network]/(explorer)/account/[name]/+page.svelte
@@ -214,9 +214,9 @@
 		{#if context.settings.data.advancedMode}
 			<Card title={m.common_resources()}>
 				<div class="flex flex-wrap gap-12 *:flex-1">
-					<ResourceCard type="cpu" value={String(cpuAvailable)} vertical />
+					<ResourceCard type="cpu" value={cpuAvailable} vertical />
 
-					<ResourceCard type="net" value={String(netAvailable)} vertical />
+					<ResourceCard type="net" value={netAvailable} vertical />
 				</div>
 				{#if isCurrentUser}
 					<Button href={`/${data.network}/resources`} variant="secondary"