@rainlanguage/ui-components 0.0.1-alpha.24 → 0.0.1-alpha.240

package/dist/components/detail/TanstackOrderQuote.svelte

@@ -1,9 +1,9 @@
-<script generics="T">import { invalidateIdQuery } from "../../queries/queryClient";
+<script>import { useToasts } from "../../providers/toasts/useToasts";
+import { invalidateTanstackQueries } from "../../queries/queryClient";
 import Refresh from "../icon/Refresh.svelte";
 import EditableSpan from "../EditableSpan.svelte";
-import { getOrderQuote } from "@rainlanguage/orderbook/quote";
 import { QKEY_ORDER_QUOTE } from "../../queries/keys";
-import { formatUnits, hexToNumber, isHex } from "viem";
+import { hexToNumber, isHex } from "viem";
 import { createQuery, useQueryClient } from "@tanstack/svelte-query";
 import {
   Table,
@@ -11,24 +11,52 @@ import {
   TableBodyCell,
   TableBodyRow,
   TableHead,
-  TableHeadCell,
-  Tooltip
+  TableHeadCell
 } from "flowbite-svelte";
-import { BugOutline, PauseSolid, PlaySolid } from "flowbite-svelte-icons";
-export let id;
+import { BugOutline, ClipboardOutline, PauseSolid, PlaySolid } from "flowbite-svelte-icons";
+import Tooltip from "../Tooltip.svelte";
 export let order;
-export let rpcUrl;
-export let orderbookAddress;
 export let handleQuoteDebugModal = void 0;
 let enabled = true;
 const queryClient = useQueryClient();
+const { errToast, addToast } = useToasts();
 const refreshQuotes = async () => {
-  await invalidateIdQuery(queryClient, id);
+  try {
+    await invalidateTanstackQueries(queryClient, [order.id, QKEY_ORDER_QUOTE + order.id]);
+  } catch {
+    errToast("Failed to refresh");
+  }
+};
+const copyQuoteError = async (error) => {
+  if (!error) {
+    errToast("No quote error to copy");
+    return;
+  }
+  try {
+    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+      throw new Error("Clipboard API unavailable");
+    }
+    await navigator.clipboard.writeText(error);
+    addToast({
+      message: "Copied quote error",
+      type: "success",
+      color: "green"
+    });
+  } catch (copyError) {
+    errToast(
+      "Failed to copy quote error",
+      copyError instanceof Error ? copyError.message : void 0
+    );
+  }
 };
 $: orderQuoteQuery = createQuery({
-  queryKey: [id, QKEY_ORDER_QUOTE + id],
-  queryFn: () => getOrderQuote([order], rpcUrl),
-  enabled: !!id && enabled
+  queryKey: [order.id, QKEY_ORDER_QUOTE + order.id],
+  queryFn: async () => {
+    const result = await order.getQuotes(blockNumber);
+    if (result.error) throw new Error(result.error.msg);
+    return result.value;
+  },
+  enabled: !!order.id && enabled
 });
 let blockNumber;
 $: orderModalArg = order;
@@ -36,7 +64,7 @@ $: orderModalArg = order;
 
 <div class="mt-4">
 	<div class="mb-4 flex items-center justify-between">
-		<h2 class="text-lg font-semibold">Order Quotes</h2>
+		<h2 class="text-lg font-semibold">Order quotes</h2>
 		<div class="flex items-center gap-x-1">
 			{#if $orderQuoteQuery.data && $orderQuoteQuery.data.length > 0 && isHex($orderQuoteQuery.data[0].blockNumber)}
 				<EditableSpan
@@ -46,24 +74,33 @@ $: orderModalArg = order;
 						enabled = false;
 					}}
 					on:blur={({ detail: { value } }) => {
-						blockNumber = parseInt(value);
+						blockNumber = BigInt(value);
 						refreshQuotes();
 					}}
 				/>
 			{/if}
 			<span></span>
 			<Refresh
+				data-testid="refresh-button"
 				class="h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
+				title="Refresh quotes"
+				ariaLabel="Refresh quotes"
 				on:click={refreshQuotes}
 				spin={$orderQuoteQuery.isLoading || $orderQuoteQuery.isFetching}
 			/>
 			<PauseSolid
+				data-testid="pause-refresh-button"
+				title="Pause auto-refresh"
+				ariaLabel="Pause auto-refresh"
 				class={`ml-2 h-8 w-3 cursor-pointer text-gray-400 dark:text-gray-400 ${!enabled ? 'hidden' : ''}`}
 				on:click={() => {
 					enabled = false;
 				}}
 			/>
 			<PlaySolid
+				data-testid="resume-refresh-button"
+				title="Resume auto-refresh"
+				ariaLabel="Resume auto-refresh"
 				on:click={() => {
 					enabled = true;
 					blockNumber = undefined;
@@ -85,37 +122,55 @@ $: orderModalArg = order;
 
 		<TableBody>
 			{#if $orderQuoteQuery.data && $orderQuoteQuery.data.length > 0}
-				{#each $orderQuoteQuery.data as item}
+				{#each $orderQuoteQuery.data as item, index}
 					{#if item.success && item.data}
 						<TableBodyRow data-testid="bodyRow">
 							<TableBodyCell>{item.pair.pairName}</TableBodyCell>
-							<TableBodyCell>{formatUnits(BigInt(item.data.maxOutput), 18)}</TableBodyCell>
-							<TableBodyCell
-								>{formatUnits(BigInt(item.data.ratio), 18)}
-								<span class="text-gray-400"
-									>({BigInt(item.data.ratio) > 0n
-										? formatUnits(10n ** 36n / BigInt(item.data.ratio), 18)
-										: '0'})</span
-								></TableBodyCell
-							>
-							<TableBodyCell
-								>{formatUnits(
-									BigInt(item.data.maxOutput) * BigInt(item.data.ratio),
-									36
-								)}</TableBodyCell
-							>
+							<TableBodyCell>
+								<span id={`max-output-${index}`} class="block max-w-[150px] truncate"
+									>{item.data.formattedMaxOutput}</span
+								>
+								<Tooltip triggeredBy={`#max-output-${index}`}>
+									{item.data.formattedMaxOutput}
+								</Tooltip>
+								{#if item.data.formattedMaxOutputAsPercentOfVault}
+									<span
+										data-testid={`max-output-percent-${index}`}
+										class="block max-w-[150px] truncate text-xs text-gray-400"
+										>{item.data.formattedMaxOutputAsPercentOfVault}% of vault</span
+									>
+								{/if}
+							</TableBodyCell>
+							<TableBodyCell>
+								<span id={`ratio-${index}`} class="block max-w-[200px] truncate"
+									>{item.data.formattedRatio}
+									<span class="text-gray-400">({item.data.formattedInverseRatio})</span></span
+								>
+								<Tooltip triggeredBy={`#ratio-${index}`}>
+									{item.data.formattedRatio} ({item.data.formattedInverseRatio})
+								</Tooltip>
+							</TableBodyCell>
+							<TableBodyCell>
+								<span id={`max-input-${index}`} class="block max-w-[150px] truncate"
+									>{item.data.formattedMaxInput}</span
+								>
+								<Tooltip triggeredBy={`#max-input-${index}`}>
+									{item.data.formattedMaxInput}
+								</Tooltip>
+							</TableBodyCell>
 							<TableBodyCell>
 								{#if handleQuoteDebugModal}
 									<button
+										data-testid="debug-quote-button"
+										title="Debug quote"
+										aria-label="Debug quote"
 										on:click={() =>
 											handleQuoteDebugModal(
 												orderModalArg,
-												rpcUrl || '',
-												orderbookAddress || '',
 												item.pair.inputIndex,
 												item.pair.outputIndex,
 												item.pair.pairName,
-												$orderQuoteQuery.data[0].blockNumber
+												BigInt($orderQuoteQuery.data[0].blockNumber)
 											)}
 									>
 										<BugOutline size="sm" color="grey" />
@@ -126,31 +181,44 @@ $: orderModalArg = order;
 					{:else if !item.success && item.error}
 						<TableBodyRow>
 							<TableBodyCell>{item.pair.pairName}</TableBodyCell>
-							<TableBodyCell colspan="2" class="flex flex-col justify-start text-gray-400">
-								<Tooltip triggeredBy="#quote-error">
+							<TableBodyCell colspan="3" class="text-sm text-red-500 dark:text-red-400">
+								<Tooltip
+									triggeredBy={`#quote-error-${index}`}
+									customClass="max-w-sm whitespace-pre-wrap break-words"
+								>
 									{item.error}
 								</Tooltip>
-								<div
-									id="quote-error"
-									class="overflow-x cursor-pointer self-start border-dotted border-red-500"
-								>
-									Error fetching quote
+								<div class="flex items-start gap-2">
+									<button
+										type="button"
+										class="mt-0.5 rounded border border-transparent p-1 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100"
+										title="Copy quote error"
+										aria-label="Copy quote error"
+										on:click={() => copyQuoteError(item.error)}
+									>
+										<ClipboardOutline size="sm" />
+									</button>
+									<div
+										id={`quote-error-${index}`}
+										class="max-w-xl cursor-pointer self-start truncate border-dotted border-red-500 pr-2"
+									>
+										{item.error}
+									</div>
 								</div>
 							</TableBodyCell>
-							<TableBodyCell />
-							<TableBodyCell />
 							<TableBodyCell>
 								{#if handleQuoteDebugModal}
 									<button
+										data-testid="debug-quote-error-button"
+										title="Debug quote"
+										aria-label="Debug quote"
 										on:click={() =>
 											handleQuoteDebugModal(
 												order,
-												rpcUrl || '',
-												orderbookAddress || '',
 												item.pair.inputIndex,
 												item.pair.outputIndex,
 												item.pair.pairName,
-												$orderQuoteQuery.data[0].blockNumber
+												BigInt($orderQuoteQuery.data[0].blockNumber)
 											)}
 									>
 										<BugOutline size="sm" color="grey" />

package/dist/components/detail/TanstackOrderQuote.svelte.d.ts

@@ -1,22 +1,20 @@
 import { SvelteComponent } from "svelte";
-import type { Hex } from 'viem';
-import type { SgOrder } from '@rainlanguage/orderbook/js_api';
-declare class __sveltets_Render<T> {
-    props(): {
-        id: string;
-        order: SgOrder;
-        rpcUrl: string;
-        orderbookAddress: Hex;
-        handleQuoteDebugModal?: ((order: SgOrder, rpcUrl: string, orderbookAddress: Hex, inputIndex: number, outputIndex: number, pairName: string, blockNumber?: number) => void) | undefined;
+import type { RaindexOrder } from '@rainlanguage/raindex';
+declare const __propDef: {
+    props: {
+        order: RaindexOrder;
+        handleQuoteDebugModal?: undefined | ((order: RaindexOrder, inputIndex: number, outputIndex: number, pairName: string, blockNumber?: bigint) => void);
     };
-    events(): {} & {
+    events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {};
-}
-export type TanstackOrderQuoteProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TanstackOrderQuoteEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TanstackOrderQuoteSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TanstackOrderQuote<T> extends SvelteComponent<TanstackOrderQuoteProps<T>, TanstackOrderQuoteEvents<T>, TanstackOrderQuoteSlots<T>> {
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TanstackOrderQuoteProps = typeof __propDef.props;
+export type TanstackOrderQuoteEvents = typeof __propDef.events;
+export type TanstackOrderQuoteSlots = typeof __propDef.slots;
+export default class TanstackOrderQuote extends SvelteComponent<TanstackOrderQuoteProps, TanstackOrderQuoteEvents, TanstackOrderQuoteSlots> {
 }
 export {};

package/dist/components/detail/VaultDetail.svelte

@@ -1,58 +1,56 @@
-<script>import { Button } from "flowbite-svelte";
-import { bigintStringToHex } from "../../utils/hex";
-import Hash, { HashType } from "../Hash.svelte";
+<script>import Hash, { HashType } from "../Hash.svelte";
 import VaultBalanceChangesTable from "../tables/VaultBalanceChangesTable.svelte";
-import VaultBalanceChart from "../charts/VaultBalanceChart.svelte";
 import TanstackPageContentDetail from "./TanstackPageContentDetail.svelte";
 import CardProperty from "../CardProperty.svelte";
 import { QKEY_VAULT } from "../../queries/keys";
-import { getVault } from "@rainlanguage/orderbook/js_api";
-import { formatUnits } from "viem";
+import { RaindexClient } from "@rainlanguage/raindex";
+import { toHex } from "viem";
 import { createQuery } from "@tanstack/svelte-query";
 import { onDestroy } from "svelte";
 import { useQueryClient } from "@tanstack/svelte-query";
-import { ArrowDownOutline, ArrowUpOutline } from "flowbite-svelte-icons";
 import OrderOrVaultHash from "../OrderOrVaultHash.svelte";
-import DepositOrWithdrawButtons from "./DepositOrWithdrawButtons.svelte";
 import Refresh from "../icon/Refresh.svelte";
-import { invalidateIdQuery } from "../../queries/queryClient";
-export let handleDepositOrWithdrawModal = void 0;
+import { invalidateTanstackQueries } from "../../queries/queryClient";
+import { useAccount } from "../../providers/wallet/useAccount";
+import { Button } from "flowbite-svelte";
+import {
+  ArrowDownToBracketOutline,
+  ArrowUpFromBracketOutline,
+  WalletOutline
+} from "flowbite-svelte-icons";
+import { getExplorerLink } from "../../services/getExplorerLink";
+import { useToasts } from "../../providers/toasts/useToasts";
+import { useRaindexClient } from "../../hooks/useRaindexClient";
 export let id;
-export let network;
-export let walletAddressMatchesOrBlank = void 0;
-export let handleDepositModal = void 0;
-export let handleWithdrawModal = void 0;
-export let lightweightChartsTheme = void 0;
-export let activeNetworkRef;
-export let activeOrderbookRef;
-export let settings;
-export let wagmiConfig = void 0;
-export let signerAddress = void 0;
-const subgraphUrl = $settings?.subgraphs?.[network] || "";
-const chainId = $settings?.networks?.[network]?.["chain-id"] || 0;
-const rpcUrl = $settings?.networks?.[network]?.["rpc"] || "";
+export let raindexAddress;
+export let chainId;
+export let onDeposit;
+export let onWithdraw;
 const queryClient = useQueryClient();
+const { matchesAccount } = useAccount();
+const { errToast } = useToasts();
+const raindexClient = useRaindexClient();
 $: vaultDetailQuery = createQuery({
   queryKey: [id, QKEY_VAULT + id],
-  queryFn: () => {
-    return getVault(subgraphUrl || "", id);
-  },
-  enabled: !!subgraphUrl
+  queryFn: async () => {
+    const result = await raindexClient.getVault(chainId, raindexAddress, id);
+    if (result.error) throw new Error(result.error.readableMsg);
+    return result.value;
+  }
 });
-const updateActiveNetworkAndOrderbook = (subgraphName) => {
-  activeNetworkRef.set(subgraphName);
-  activeOrderbookRef.set(subgraphName);
-};
 const interval = setInterval(async () => {
-  await queryClient.invalidateQueries({
-    queryKey: [id],
-    refetchType: "active",
-    exact: false
-  });
+  invalidateTanstackQueries(queryClient, [id, QKEY_VAULT + id]);
 }, 5e3);
 onDestroy(() => {
   clearInterval(interval);
 });
+const handleRefresh = async () => {
+  try {
+    await invalidateTanstackQueries(queryClient, [id, QKEY_VAULT + id]);
+  } catch {
+    errToast("Failed to refresh");
+  }
+};
 </script>
 
 <TanstackPageContentDetail query={vaultDetailQuery} emptyMessage="Vault not found">
@@ -64,32 +62,34 @@ onDestroy(() => {
 			{data.token.name}
 		</div>
 		<div class="flex items-center gap-2">
-			{#if $wagmiConfig && handleDepositOrWithdrawModal && $signerAddress === data.owner}
-				<DepositOrWithdrawButtons
-					vault={data}
-					{chainId}
-					{rpcUrl}
-					query={vaultDetailQuery}
-					{handleDepositOrWithdrawModal}
-					{subgraphUrl}
-				/>
-			{:else if handleDepositModal && handleWithdrawModal && $walletAddressMatchesOrBlank?.(data.owner)}
+			{#if matchesAccount(data.owner)}
 				<Button
-					data-testid="vaultDetailDepositButton"
-					color="dark"
-					on:click={() => handleDepositModal(data, $vaultDetailQuery.refetch)}
-					><ArrowDownOutline size="xs" class="mr-2" />Deposit</Button
+					color="light"
+					size="xs"
+					data-testid="deposit-button"
+					title="Deposit to vault"
+					aria-label="Deposit to vault"
+					on:click={() => onDeposit(raindexClient, data)}
 				>
+					<ArrowDownToBracketOutline size="xs" />
+				</Button>
 				<Button
-					data-testid="vaultDetailWithdrawButton"
-					color="dark"
-					on:click={() => handleWithdrawModal(data, $vaultDetailQuery.refetch)}
-					><ArrowUpOutline size="xs" class="mr-2" />Withdraw</Button
+					color="light"
+					size="xs"
+					data-testid="withdraw-button"
+					title="Withdraw from vault"
+					aria-label="Withdraw from vault"
+					on:click={() => onWithdraw(raindexClient, data)}
 				>
+					<ArrowUpFromBracketOutline size="xs" />
+				</Button>
 			{/if}
 
 			<Refresh
-				on:click={async () => await invalidateIdQuery(queryClient, id)}
+				testId="top-refresh"
+				title="Refresh vault"
+				ariaLabel="Refresh vault"
+				on:click={handleRefresh}
 				spin={$vaultDetailQuery.isLoading || $vaultDetailQuery.isFetching}
 			/>
 		</div>
@@ -97,20 +97,33 @@ onDestroy(() => {
 	<svelte:fragment slot="card" let:data>
 		<CardProperty data-testid="vaultDetailVaultId">
 			<svelte:fragment slot="key">Vault ID</svelte:fragment>
-			<svelte:fragment slot="value">{bigintStringToHex(data.vaultId)}</svelte:fragment>
+			<svelte:fragment slot="value">{toHex(data.vaultId)}</svelte:fragment>
 		</CardProperty>
 
-		<CardProperty data-testid="vaultDetailOrderbookAddress">
-			<svelte:fragment slot="key">Orderbook</svelte:fragment>
+		<CardProperty data-testid="vaultDetailRaindexAddress">
+			<svelte:fragment slot="key">Raindex</svelte:fragment>
 			<svelte:fragment slot="value">
-				<Hash type={HashType.Identifier} value={data.orderbook.id} />
+				<Hash type={HashType.Identifier} value={data.raindex} />
 			</svelte:fragment>
 		</CardProperty>
 
 		<CardProperty data-testid="vaultDetailOwnerAddress">
-			<svelte:fragment slot="key">Owner Address</svelte:fragment>
+			<svelte:fragment slot="key">Owner address</svelte:fragment>
 			<svelte:fragment slot="value">
-				<Hash type={HashType.Wallet} value={data.owner} />
+				{@const explorerLink = getExplorerLink(data.owner, chainId, 'address')}
+				{#if explorerLink}
+					<a
+						href={explorerLink}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="flex items-center justify-start space-x-2 text-left text-blue-500 hover:underline"
+					>
+						<WalletOutline size="sm" />
+						<span>{data.owner}</span>
+					</a>
+				{:else}
+					<Hash type={HashType.Wallet} value={data.owner} />
+				{/if}
 			</svelte:fragment>
 		</CardProperty>
 
@@ -124,8 +137,7 @@ onDestroy(() => {
 		<CardProperty data-testid="vaultDetailBalance">
 			<svelte:fragment slot="key">Balance</svelte:fragment>
 			<svelte:fragment slot="value"
-				>{formatUnits(BigInt(data.balance), Number(data.token.decimals ?? 0))}
-				{data.token.symbol}</svelte:fragment
+				>{`${data.formattedBalance} ${data.token.symbol}`}</svelte:fragment
 			>
 		</CardProperty>
 
@@ -135,12 +147,7 @@ onDestroy(() => {
 				<p data-testid="vaultDetailOrdersAsInput" class="flex flex-wrap justify-start">
 					{#if data.ordersAsInput && data.ordersAsInput.length > 0}
 						{#each data.ordersAsInput as order}
-							<OrderOrVaultHash
-								type="orders"
-								orderOrVault={order}
-								{network}
-								{updateActiveNetworkAndOrderbook}
-							/>
+							<OrderOrVaultHash type="orders" orderOrVault={order} {chainId} {raindexAddress} />
 						{/each}
 					{:else}
 						None
@@ -152,15 +159,10 @@ onDestroy(() => {
 		<CardProperty>
 			<svelte:fragment slot="key">Orders as output</svelte:fragment>
 			<svelte:fragment slot="value">
-				<p data-testid="vaulDetailOrdersAsOutput" class="flex flex-wrap justify-start">
+				<p data-testid="vaultDetailOrdersAsOutput" class="flex flex-wrap justify-start">
 					{#if data.ordersAsOutput && data.ordersAsOutput.length > 0}
 						{#each data.ordersAsOutput as order}
-							<OrderOrVaultHash
-								type="orders"
-								orderOrVault={order}
-								{network}
-								{updateActiveNetworkAndOrderbook}
-							/>
+							<OrderOrVaultHash type="orders" orderOrVault={order} {chainId} {raindexAddress} />
 						{/each}
 					{:else}
 						None
@@ -170,9 +172,10 @@ onDestroy(() => {
 		</CardProperty>
 	</svelte:fragment>
 
-	<svelte:fragment slot="chart" let:data>
-		<VaultBalanceChart vault={data} {subgraphUrl} {lightweightChartsTheme} {id} />
+	<svelte:fragment slot="chart">
+		<!-- TODO: Issue #1989: VaultBalanceChart temporarily disabled -->
+		<!-- <VaultBalanceChart /> -->
 	</svelte:fragment>
 
-	<svelte:fragment slot="below"><VaultBalanceChangesTable {id} {subgraphUrl} /></svelte:fragment>
+	<svelte:fragment slot="below" let:data><VaultBalanceChangesTable vault={data} /></svelte:fragment>
 </TanstackPageContentDetail>

package/dist/components/detail/VaultDetail.svelte.d.ts

@@ -1,24 +1,18 @@
 import { SvelteComponent } from "svelte";
-import type { ChartTheme } from '../../utils/lightweightChartsThemes';
-import type { Readable, Writable } from 'svelte/store';
-import type { SgVault } from '@rainlanguage/orderbook/js_api';
-import type { AppStoresInterface } from '../../types/appStores';
-import type { Config } from 'wagmi';
-import type { DepositOrWithdrawModalProps } from '../../types/modal';
+import { RaindexClient, type Address, type Hex, type RaindexVault } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
-        handleDepositOrWithdrawModal?: ((args: DepositOrWithdrawModalProps) => void) | undefined;
-        id: string;
-        network: string;
-        walletAddressMatchesOrBlank?: Readable<(otherAddress: string) => boolean> | undefined;
-        handleDepositModal?: ((vault: SgVault, onDeposit: () => void) => void) | undefined;
-        handleWithdrawModal?: ((vault: SgVault, onWithdraw: () => void) => void) | undefined;
-        lightweightChartsTheme?: Readable<ChartTheme> | undefined;
-        activeNetworkRef: AppStoresInterface["activeNetworkRef"];
-        activeOrderbookRef: AppStoresInterface["activeOrderbookRef"];
-        settings: any;
-        wagmiConfig?: Writable<Config> | undefined;
-        signerAddress?: Writable<string | null> | undefined;
+        id: Hex;
+        raindexAddress: Address;
+        chainId: number;
+        /**
+             * Required callback function when deposit action is triggered for a vault
+             * @param vault The vault to deposit into
+             */ onDeposit: (raindexClient: RaindexClient, vault: RaindexVault) => void;
+        /**
+             * Required callback function when withdraw action is triggered for a vault
+             * @param vault The vault to withdraw from
+             */ onWithdraw: (raindexClient: RaindexClient, vault: RaindexVault) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/dropdown/DropdownActiveNetworks.svelte

@@ -0,0 +1,44 @@
+<script>import DropdownCheckbox from "./DropdownCheckbox.svelte";
+import { getNetworkName } from "../../utils/getNetworkName";
+import { useRaindexClient } from "../../hooks/useRaindexClient";
+const raindexClient = useRaindexClient();
+export let selectedChainIds;
+let dropdownOptions = {};
+$: {
+  const uniqueChainIds = raindexClient.getUniqueChainIds();
+  if (uniqueChainIds.error) {
+    dropdownOptions = {};
+  } else {
+    dropdownOptions = Object.fromEntries(
+      uniqueChainIds.value.map((chainId) => [
+        String(chainId),
+        getNetworkName(chainId) ?? `Chain ${chainId}`
+      ])
+    );
+  }
+}
+function handleStatusChange(event) {
+  const chainIds = Object.keys(event.detail).map(Number);
+  selectedChainIds.set(chainIds);
+}
+let value = {};
+$: {
+  value = Object.fromEntries(
+    $selectedChainIds.map((chainId) => [
+      String(chainId),
+      getNetworkName(chainId) ?? `Chain ${chainId}`
+    ])
+  );
+}
+</script>
+
+<div data-testid="subgraphs-dropdown">
+	<DropdownCheckbox
+		options={dropdownOptions}
+		on:change={handleStatusChange}
+		label="Networks"
+		showAllLabel={false}
+		onlyTitle={true}
+		{value}
+	/>
+</div>

package/dist/components/dropdown/DropdownActiveNetworks.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { AppStoresInterface } from '../../types/appStores';
+declare const __propDef: {
+    props: {
+        selectedChainIds: AppStoresInterface["selectedChainIds"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DropdownActiveNetworksProps = typeof __propDef.props;
+export type DropdownActiveNetworksEvents = typeof __propDef.events;
+export type DropdownActiveNetworksSlots = typeof __propDef.slots;
+export default class DropdownActiveNetworks extends SvelteComponent<DropdownActiveNetworksProps, DropdownActiveNetworksEvents, DropdownActiveNetworksSlots> {
+}
+export {};

package/dist/components/dropdown/DropdownCheckbox.svelte

@@ -31,8 +31,8 @@ function toggleItem(key) {
 }
 </script>
 
-<Label>{label}</Label>
-<div>
+<div class="flex flex-col items-center gap-2">
+	<Label>{label}</Label>
 	<Button
 		color="alternative"
 		class="flex w-full justify-between overflow-hidden pl-2 pr-0 text-left"
@@ -66,9 +66,9 @@ function toggleItem(key) {
 				checked={key in value}
 			>
 				<div class="ml-2">
-					<div class="text-sm font-medium">{key}</div>
+					<div class="text-sm font-medium">{optionValue}</div>
 					{#if !onlyTitle}
-						<div class="text-xs text-gray-500">{optionValue}</div>
+						<div class="text-xs text-gray-500">{key}</div>
 					{/if}
 				</div>
 			</Checkbox>