Merge branch 'dev' into apporc_staking

package.json

@@ -56,6 +56,9 @@
 		"@wharfkit/wallet-plugin-anchor": "^1.4.0",
 		"@wharfkit/wallet-plugin-metamask": "1.0.0-rc8",
 		"@wharfkit/wallet-plugin-privatekey": "^1.1.0",
+		"@wharfkit/wallet-plugin-scatter": "^1.5.1",
+		"@wharfkit/wallet-plugin-tokenpocket": "^1.5.1",
+		"@wharfkit/wallet-plugin-wombat": "^1.5.1",
 		"@wharfkit/web-renderer": "^1.4.1",
 		"big.js": "^6.2.1",
 		"chart.js": "^4.4.3",

src/lib/components/chart/rampricehistory.svelte

@@ -9,30 +9,29 @@
 	import { Card, Stack } from '$lib/components/layout';
 	import { Asset } from '@wharfkit/antelope';
 	import Select from '../select/select.svelte';
+	import type { ExtendedSelectOption } from '../select/types';
 
 	interface Props {
 		data: { date: Date; value: Asset }[];
-		debug?: boolean;
 	}
 
-	let { data, debug = true }: Props = $props();
+	let { data }: Props = $props();
 
 	let ctx: HTMLCanvasElement;
 	let chart: Chart<'line'>;
 
-	const range = [
+	const range: ExtendedSelectOption[] = [
 		{ label: '1D', value: 1 },
 		{ label: '1W', value: 7 },
 		{ label: '1M', value: 30 },
 		{ label: '1Y', value: 365 }
 	];
 
-	let selectedRange = $state(range[1]);
+	let selectedRange: ExtendedSelectOption = $state(range[1]);
 
 	let dataRange = $derived.by(() => {
 		const rangeEndDate = dayjs(data[0].date);
-		const rangeStartDate = rangeEndDate.subtract(selectedRange.value, 'day');
-		debug && $inspect({ rangeStartDate, rangeEndDate });
+		const rangeStartDate = rangeEndDate.subtract(Number(selectedRange.value), 'day');
 		return data.filter(({ date }) => dayjs(date).isAfter(rangeStartDate));
 	});
 
@@ -96,10 +95,6 @@
 					legend: {
 						display: false
 					}
-					// decimation: {
-					// 	enabled: true,
-					// 	algorithm: 'lttb'
-					// }
 				}
 			}
 		});
@@ -110,9 +105,6 @@
 		chart.data.datasets[0].data = values;
 		chart.update();
 	});
-
-	debug &&
-		$inspect({ dataRangeLength: dataRange.length, currentDate: currentPoint.date, percentChange });
 </script>
 
 <Card>

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/components/select/elements/index.ts

@@ -0,0 +1,3 @@
+export { default as SelectMenu } from './menu.svelte';
+export { default as SelectTrigger } from './trigger.svelte';
+export { default as SelectItem } from './item.svelte';

src/lib/components/select/elements/item.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { melt } from '@melt-ui/svelte';
+	import { Check } from 'lucide-svelte';
+	import type { Readable } from 'svelte/store';
+	import type { ExtendedSelectOption } from '../types';
+
+	interface Props {
+		variant?: 'pill' | 'form';
+		id: string;
+		// Upstream bug: https://github.com/melt-ui/melt-ui/issues/974
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		option: any;
+		item: ExtendedSelectOption;
+		isSelected: Readable<(value: unknown) => boolean>;
+	}
+
+	const { option, isSelected, ...props }: Props = $props();
+</script>
+
+<div
+	class="
+	relative
+	grid
+	cursor-pointer
+	grid-cols-[16px_1fr]
+	items-center
+	gap-2
+	rounded-xl
+	px-2
+	py-1
+	font-medium
+	hover:bg-solar-500
+	hover:text-black/95
+	focus:z-10
+	focus:text-solar-950
+	data-[variant=form]:rounded-sm
+	data-[variant=pill]:rounded-xl
+	data-[highlighted=true]:bg-solar-500
+	data-[highlighted=true]:text-solar-950
+	data-[disabled]:opacity-50
+	"
+	data-variant={props.variant}
+	use:melt={$option(props.item)}
+>
+	{#if props.item.image && typeof props.item.image === 'string'}
+		<img src={props.item.image} alt={props.item.label} class="mr-2 size-4 object-contain" />
+	{:else}
+		<div class="check">
+			<Check class="size-4 {$isSelected(props.item.value) ? 'block' : 'hidden'}" />
+		</div>
+	{/if}
+	{props.item.label}
+</div>

src/lib/components/select/elements/menu.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { type AnyMeltElement, melt } from '@melt-ui/svelte';
+	import { type Snippet } from 'svelte';
+	import type { Readable } from 'svelte/store';
+	import { fade } from 'svelte/transition';
+	interface Props {
+		variant: 'pill' | 'form';
+		id: string;
+		children: Snippet;
+		open: Readable<boolean>;
+		menu: AnyMeltElement;
+	}
+
+	const { menu, ...props }: Props = $props();
+</script>
+
+{#if props.open}
+	<div
+		class="
+		z-10
+		flex
+		max-h-[300px]
+		flex-col
+		overflow-y-auto
+		border-2
+		border-mineShaft-600
+		bg-shark-950
+		py-1
+		shadow
+		focus:!ring-0
+		data-[variant=form]:rounded-lg
+		data-[variant=pill]:rounded-2xl
+		data-[variant=form]:px-2
+		data-[variant=form]:py-2
+		data-[variant=pill]:px-1
+		data-[variant=pill]:py-1
+		"
+		data-variant={props.variant}
+		use:melt={$menu}
+		transition:fade={{ duration: 100 }}
+		id={props.id + '-menu'}
+	>
+		{@render props.children()}
+	</div>
+{/if}

src/lib/components/select/elements/trigger.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { type AnyMeltElement, melt } from '@melt-ui/svelte';
+	import { ChevronDown } from 'lucide-svelte';
+	import { type Snippet } from 'svelte';
+	import { type Readable } from 'svelte/store';
+
+	interface Props {
+		variant?: 'pill' | 'form';
+		id: string;
+		children: Snippet;
+		open: Readable<boolean>;
+		trigger: AnyMeltElement;
+	}
+
+	const { trigger, open, ...props }: Props = $props();
+</script>
+
+<button
+	class="
+	flex
+	items-center
+	justify-between
+	gap-2
+	border-2
+	border-mineShaft-600
+	bg-transparent
+	pl-4
+	pr-3
+	font-medium
+	transition-opacity
+	hover:opacity-90
+	focus:outline-2
+	focus:outline-solar-500
+	focus-visible:border-transparent
+	focus-visible:outline
+	data-[variant=pill]:h-10
+	data-[variant=form]:rounded-lg
+	data-[variant=pill]:rounded-full
+	data-[variant=form]:py-4
+	"
+	data-variant={props.variant}
+	use:melt={$trigger}
+	aria-label="{props.id}-label"
+	id={props.id}
+>
+	<div class="flex items-center">
+		{@render props.children()}
+	</div>
+	<ChevronDown
+		data-open={$open}
+		class="size-5 transition-transform duration-100 data-[open=true]:rotate-180"
+	/>
+</button>