@rainlanguage/ui-components 0.0.1-alpha.237 → 0.0.1-alpha.239

package/README.md

@@ -1,8 +1,10 @@
 # create-svelte
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Everything you need to build a Svelte library, powered by
+[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+Read more about creating a library
+[in the docs](https://svelte.dev/docs/kit/packaging).
 
 ## Creating a project
 
@@ -18,7 +20,8 @@ npx sv create my-app
 
 ## Developing
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've created a project and installed dependencies with `npm install` (or
+`pnpm install` or `yarn`), start a development server:
 
 ```bash
 npm run dev
@@ -27,7 +30,8 @@ npm run dev
 npm run dev -- --open
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+Everything inside `src/lib` is part of your library, everything inside
+`src/routes` can be used as a showcase or preview app.
 
 ## Building
 
@@ -45,11 +49,15 @@ npm run build
 
 You can preview the production build with `npm run preview`.
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+> To deploy your app, you may need to install an
+> [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
 
 ## Publishing
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+Go into the `package.json` and give your package the desired name through the
+`"name"` option. Also consider adding a `"license"` field and point it to a
+`LICENSE` file which you can create from a template (one popular option is the
+[MIT license](https://opensource.org/license/mit/)).
 
 To publish your library to [npm](https://www.npmjs.com):
 

package/dist/__fixtures__/settings.yaml

@@ -1,4 +1,4 @@
-version: 2
+version: 6
 networks:
   flare:
     rpc: https://rpc.ankr.com/flare
@@ -37,26 +37,24 @@ networks:
     chain-id: 1
     currency: ETH
 subgraphs:
-  flare: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-flare/0.8/gn
-  base: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-base/0.9/gn
-  sepolia: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-sepolia/0.1/gn
-  polygon: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-polygon/0.1/gn
-  arbitrum: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-arbitrum/0.2/gn
-  matchain: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-polygon/0.1/gn
-  bsc: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-bsc/2024-10-14-63f4/gn
-  linea: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-linea/2024-10-14-12fc/gn
-  ethereum: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/metadata-mainnet/2024-10-25-2857/gn
+  flare: https://example.com/subgraphs/flare/gn
+  base: https://example.com/subgraphs/base/gn
+  sepolia: https://example.com/subgraphs/sepolia/gn
+  polygon: https://example.com/subgraphs/polygon/gn
+  arbitrum: https://example.com/subgraphs/arbitrum/gn
+  matchain: https://example.com/subgraphs/matchain/gn
+  bsc: https://example.com/subgraphs/bsc/gn
+  linea: https://example.com/subgraphs/linea/gn
+  ethereum: https://example.com/subgraphs/ethereum/gn
 metaboards:
-  flare: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-flare-0x893BBFB7/0.1/gn
-  base: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-base-0x59401C93/0.1/gn
-  sepolia: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-sepolia-0x77991674/0.1/gn
-  polygon: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-polygon/0.1/gn
-  arbitrum: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-arbitrum/0.1/gn
-  matchain: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-polygon/0.1/gn
-  bsc: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-bsc/0.1/gn
-  linea: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-linea-0xed7d6156/1.0.0/gn
-  ethereum: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/metadata-mainnet/2024-10-25-2857/gn
-orderbooks:
+  flare: https://example.com/metaboards/flare/gn
+  base: https://example.com/metaboards/base/gn
+  sepolia: https://example.com/metaboards/sepolia/gn
+  arbitrum: https://example.com/metaboards/arbitrum/gn
+  bsc: https://example.com/metaboards/bsc/gn
+  linea: https://example.com/metaboards/linea/gn
+  ethereum: https://example.com/metaboards/ethereum/gn
+raindexes:
   flare:
     address: 0xCEe8Cd002F151A536394E564b84076c41bBBcD4d
     network: flare

package/dist/__mocks__/MockCodeMirrorEditor.svelte

@@ -0,0 +1,17 @@
+<script>import { createEventDispatcher } from "svelte";
+export let value = void 0;
+const dispatch = createEventDispatcher();
+</script>
+
+<!-- Test double for `svelte-codemirror-editor`: renders all props as attributes
+(like the shared MockComponent) and additionally forwards a native blur on the
+element as the component-level `blur` event that CodeMirrorRainlang listens for. -->
+<div
+	data-testid="mock-component"
+	{...$$props}
+	tabindex="0"
+	role="textbox"
+	on:blur={() => dispatch('blur')}
+>
+	{value}
+</div>

package/dist/__mocks__/MockCodeMirrorEditor.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | undefined;
+    };
+    events: {
+        blur: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type MockCodeMirrorEditorProps = typeof __propDef.props;
+export type MockCodeMirrorEditorEvents = typeof __propDef.events;
+export type MockCodeMirrorEditorSlots = typeof __propDef.slots;
+export default class MockCodeMirrorEditor extends SvelteComponent<MockCodeMirrorEditorProps, MockCodeMirrorEditorEvents, MockCodeMirrorEditorSlots> {
+}
+export {};

package/dist/__mocks__/MockComponent.js

@@ -1,2 +1,2 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 export const props = writable();

package/dist/__mocks__/MockComponent.svelte

@@ -1,7 +1,11 @@
-<script>import { props } from "./MockComponent";
-$: $props = $$props;
+<script>import { afterUpdate } from "svelte";
+import { props } from "./MockComponent";
+export let testid = "mock-component";
+afterUpdate(() => {
+  props.set($$restProps);
+});
 </script>
 
-<div data-testid="mock-component" {...$$props}>
+<div data-testid={testid} {...$$restProps}>
 	<slot />
 </div>

package/dist/__mocks__/MockComponent.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        testid?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/__mocks__/mockWeb3Config.d.ts

@@ -1,2 +1,2 @@
-import { type Config } from '@wagmi/core';
+import { type Config } from "@wagmi/core";
 export declare const mockWeb3Config: Config;

package/dist/__mocks__/mockWeb3Config.js

@@ -1,15 +1,18 @@
-import { createConfig, http, fallback } from '@wagmi/core';
-import { mock } from '@wagmi/connectors';
-import { polygonAmoy } from '@wagmi/core/chains';
+import { createConfig, http, fallback } from "@wagmi/core";
+import { mock } from "@wagmi/connectors";
+import { polygonAmoy } from "@wagmi/core/chains";
 export const mockWeb3Config = createConfig({
     multiInjectedProviderDiscovery: true,
     chains: [polygonAmoy],
     connectors: [
         mock({
-            accounts: ['0xf08bcbce72f62c95dcb7c07dcb5ed26acfcfbc11']
-        })
+            accounts: ["0xf08bcbce72f62c95dcb7c07dcb5ed26acfcfbc11"],
+        }),
     ],
     transports: {
-        [polygonAmoy.id]: fallback([http(), http('https://rpc-amoy.polygon.technology')])
-    }
+        [polygonAmoy.id]: fallback([
+            http(),
+            http("https://rpc-amoy.polygon.technology"),
+        ]),
+    },
 });

package/dist/__mocks__/queries.js

@@ -1,4 +1,4 @@
-import { QueryClient, createInfiniteQuery, createQuery } from '@tanstack/svelte-query';
+import { QueryClient, createInfiniteQuery, createQuery, } from "@tanstack/svelte-query";
 // A helper function to create a resolvable mock query.
 // This gives us more control over when each query resolves.
 export const createResolvableMockQuery = (queryFn) => {
@@ -35,13 +35,13 @@ export const createResolvableInfiniteQuery = (_queryFn, getNextPageParam = (_las
             return queryFn(pageParam);
         },
         initialPageParam: 0,
-        getNextPageParam
+        getNextPageParam,
     }, new QueryClient({
         defaultOptions: {
             queries: {
-                staleTime: Infinity
-            }
-        }
+                staleTime: Infinity,
+            },
+        },
     }));
     return { query, resolve, refetch };
 };
@@ -52,13 +52,13 @@ export const createResolvableQuery = (_queryFn) => {
         queryKey: [],
         queryFn: () => {
             return queryFn();
-        }
+        },
     }, new QueryClient({
         defaultOptions: {
             queries: {
-                staleTime: Infinity
-            }
-        }
+                staleTime: Infinity,
+            },
+        },
     }));
     return { query, resolve };
 };

package/dist/__mocks__/stores.d.ts

@@ -1,5 +1,5 @@
-import type { Address } from '@rainlanguage/orderbook';
-import { type Config } from '@wagmi/core';
+import type { Address } from "@rainlanguage/raindex";
+import { type Config } from "@wagmi/core";
 type MockDeployment = {
     key: string;
     name?: string;
@@ -43,7 +43,7 @@ export declare const mockActiveNetworkRefStore: {
     set: (this: void, value: string) => void;
     mockSetSubscribeValue: (value: string) => void;
 };
-export declare const mockActiveOrderbookRefStore: {
+export declare const mockActiveRaindexRefStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined) => import("svelte/store").Unsubscriber;
     set: (this: void, value: string) => void;
     mockSetSubscribeValue: (value: string) => void;
@@ -91,7 +91,7 @@ export declare const mockActiveTokensStore: {
     set: (this: void, value: string[]) => void;
     mockSetSubscribeValue: (value: string[]) => void;
 };
-export declare const mockActiveOrderbookAddressesStore: {
+export declare const mockActiveRaindexAddressesStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined) => import("svelte/store").Unsubscriber;
     set: (this: void, value: string[]) => void;
     mockSetSubscribeValue: (value: string[]) => void;

package/dist/__mocks__/stores.js

@@ -1,106 +1,106 @@
-import { writable } from 'svelte/store';
-import {} from '@wagmi/core';
-import { mockWeb3Config } from './mockWeb3Config';
+import { writable } from "svelte/store";
+import {} from "@wagmi/core";
+import { mockWeb3Config } from "./mockWeb3Config";
 if (import.meta.vitest) {
-    vi.mock(import('@rainlanguage/orderbook'), async (importOriginal) => {
+    vi.mock(import("@rainlanguage/raindex"), async (importOriginal) => {
         const actual = await importOriginal();
         return {
-            ...actual
+            ...actual,
         };
     });
 }
 const initialPageState = {
     data: {
-        dotrain: 'some dotrain content',
-        deployment: { key: 'deploy-key', name: '', description: '' },
-        orderDetail: {}
+        dotrain: "some dotrain content",
+        deployment: { key: "deploy-key", name: "", description: "" },
+        orderDetail: {},
     },
-    url: new URL('http://localhost:3000/deploy'),
+    url: new URL("http://localhost:3000/deploy"),
     params: {},
     form: {},
     status: 200,
     error: null,
     route: {
-        id: null
-    }
+        id: null,
+    },
 };
 const mockPageWritable = writable(initialPageState);
 const mockShowInactiveOrdersWritable = writable(true);
-const mockOrderHashWritable = writable('');
+const mockOrderHashWritable = writable("");
 const mockHideZeroBalanceVaultsWritable = writable(false);
 const mockHideInactiveOrdersVaultsWritable = writable(false);
-const mockActiveNetworkRefWritable = writable('');
-const mockActiveOrderbookRefWritable = writable('');
+const mockActiveNetworkRefWritable = writable("");
+const mockActiveRaindexRefWritable = writable("");
 const mockActiveAccountsWritable = writable({});
-const mockSubgraphUrlWritable = writable('');
+const mockSubgraphUrlWritable = writable("");
 const mockChainIdWritable = writable(0);
 const mockConnectedWritable = writable(true);
 const mockWagmiConfigWritable = writable(mockWeb3Config);
 const mockSelectedChainIdsWritable = writable([]);
 const mockActiveTokensWritable = writable([]);
-const mockActiveOrderbookAddressesWritable = writable([]);
-const mockOwnerFilterWritable = writable('');
+const mockActiveRaindexAddressesWritable = writable([]);
+const mockOwnerFilterWritable = writable("");
 export const mockShowInactiveOrdersStore = {
     subscribe: mockShowInactiveOrdersWritable.subscribe,
     set: mockShowInactiveOrdersWritable.set,
-    mockSetSubscribeValue: (value) => mockShowInactiveOrdersWritable.set(value)
+    mockSetSubscribeValue: (value) => mockShowInactiveOrdersWritable.set(value),
 };
 export const mockOrderHashStore = {
     subscribe: mockOrderHashWritable.subscribe,
     set: mockOrderHashWritable.set,
-    mockSetSubscribeValue: (value) => mockOrderHashWritable.set(value)
+    mockSetSubscribeValue: (value) => mockOrderHashWritable.set(value),
 };
 export const mockHideZeroBalanceVaultsStore = {
     subscribe: mockHideZeroBalanceVaultsWritable.subscribe,
     set: mockHideZeroBalanceVaultsWritable.set,
-    mockSetSubscribeValue: (value) => mockHideZeroBalanceVaultsWritable.set(value)
+    mockSetSubscribeValue: (value) => mockHideZeroBalanceVaultsWritable.set(value),
 };
 export const mockHideInactiveOrdersVaultsStore = {
     subscribe: mockHideInactiveOrdersVaultsWritable.subscribe,
     set: mockHideInactiveOrdersVaultsWritable.set,
-    mockSetSubscribeValue: (value) => mockHideInactiveOrdersVaultsWritable.set(value)
+    mockSetSubscribeValue: (value) => mockHideInactiveOrdersVaultsWritable.set(value),
 };
 export const mockActiveNetworkRefStore = {
     subscribe: mockActiveNetworkRefWritable.subscribe,
     set: mockActiveNetworkRefWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveNetworkRefWritable.set(value)
+    mockSetSubscribeValue: (value) => mockActiveNetworkRefWritable.set(value),
 };
-export const mockActiveOrderbookRefStore = {
-    subscribe: mockActiveOrderbookRefWritable.subscribe,
-    set: mockActiveOrderbookRefWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveOrderbookRefWritable.set(value)
+export const mockActiveRaindexRefStore = {
+    subscribe: mockActiveRaindexRefWritable.subscribe,
+    set: mockActiveRaindexRefWritable.set,
+    mockSetSubscribeValue: (value) => mockActiveRaindexRefWritable.set(value),
 };
 export const mockActiveAccountsStore = {
     subscribe: mockActiveAccountsWritable.subscribe,
     set: mockActiveAccountsWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveAccountsWritable.set(value)
+    mockSetSubscribeValue: (value) => mockActiveAccountsWritable.set(value),
 };
 export const mockSubgraphUrlStore = {
     subscribe: mockSubgraphUrlWritable.subscribe,
     set: mockSubgraphUrlWritable.set,
-    mockSetSubscribeValue: (value) => mockSubgraphUrlWritable.set(value)
+    mockSetSubscribeValue: (value) => mockSubgraphUrlWritable.set(value),
 };
 export const mockChainIdStore = {
     subscribe: mockChainIdWritable.subscribe,
     set: mockChainIdWritable.set,
-    mockSetSubscribeValue: (value) => mockChainIdWritable.set(value)
+    mockSetSubscribeValue: (value) => mockChainIdWritable.set(value),
 };
 export const mockConnectedStore = {
     subscribe: mockConnectedWritable.subscribe,
     set: mockConnectedWritable.set,
     update: mockConnectedWritable.update,
-    mockSetSubscribeValue: (value) => mockConnectedWritable.set(value)
+    mockSetSubscribeValue: (value) => mockConnectedWritable.set(value),
 };
 export const mockWagmiConfigStore = {
     subscribe: mockWagmiConfigWritable.subscribe,
     set: mockWagmiConfigWritable.set,
     update: mockWagmiConfigWritable.update,
-    mockSetSubscribeValue: (value) => mockWagmiConfigWritable.set(value)
+    mockSetSubscribeValue: (value) => mockWagmiConfigWritable.set(value),
 };
 export const mockSelectedChainIdsStore = {
     subscribe: mockSelectedChainIdsWritable.subscribe,
     set: mockSelectedChainIdsWritable.set,
-    mockSetSubscribeValue: (value) => mockSelectedChainIdsWritable.set(value)
+    mockSetSubscribeValue: (value) => mockSelectedChainIdsWritable.set(value),
 };
 export const mockPageStore = {
     subscribe: mockPageWritable.subscribe,
@@ -108,23 +108,23 @@ export const mockPageStore = {
     mockSetSubscribeValue: (newValue) => {
         mockPageWritable.update((currentValue) => ({
             ...currentValue,
-            ...newValue
+            ...newValue,
         }));
     },
-    reset: () => mockPageWritable.set(initialPageState)
+    reset: () => mockPageWritable.set(initialPageState),
 };
 export const mockActiveTokensStore = {
     subscribe: mockActiveTokensWritable.subscribe,
     set: mockActiveTokensWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveTokensWritable.set(value)
+    mockSetSubscribeValue: (value) => mockActiveTokensWritable.set(value),
 };
-export const mockActiveOrderbookAddressesStore = {
-    subscribe: mockActiveOrderbookAddressesWritable.subscribe,
-    set: mockActiveOrderbookAddressesWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveOrderbookAddressesWritable.set(value)
+export const mockActiveRaindexAddressesStore = {
+    subscribe: mockActiveRaindexAddressesWritable.subscribe,
+    set: mockActiveRaindexAddressesWritable.set,
+    mockSetSubscribeValue: (value) => mockActiveRaindexAddressesWritable.set(value),
 };
 export const mockOwnerFilterStore = {
     subscribe: mockOwnerFilterWritable.subscribe,
     set: mockOwnerFilterWritable.set,
-    mockSetSubscribeValue: (value) => mockOwnerFilterWritable.set(value)
+    mockSetSubscribeValue: (value) => mockOwnerFilterWritable.set(value),
 };

package/dist/app.css

@@ -1,3 +1,3 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

package/dist/components/ButtonDarkMode.svelte

@@ -9,6 +9,12 @@ function toggle(e) {
 }
 </script>
 
-<button type="button" on:click={toggle}>
+<button
+	type="button"
+	title="Toggle dark mode"
+	aria-label="Toggle dark mode"
+	data-testid="dark-mode-toggle"
+	on:click={toggle}
+>
 	<DarkMode />
 </button>

package/dist/components/ButtonScrub.svelte

@@ -0,0 +1,22 @@
+<script>import { EyeOutline, EyeSlashOutline } from "flowbite-svelte-icons";
+import { scrub as scrubStore } from "../storesGeneric/scrub";
+export let scrub = scrubStore;
+function toggle() {
+  scrub.update((value) => !value);
+}
+</script>
+
+<button
+	type="button"
+	on:click={toggle}
+	data-testid="scrub-toggle"
+	aria-pressed={$scrub}
+	title={$scrub ? 'Show addresses and hashes' : 'Hide addresses and hashes for screenshots'}
+	class="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+>
+	{#if $scrub}
+		<EyeSlashOutline />
+	{:else}
+		<EyeOutline />
+	{/if}
+</button>

package/dist/components/ButtonScrub.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        /**
+             * Eyeball toggle for the global "scrub" mode. Sits next to the dark-mode
+             * button in the sidebar. Clicking it masks/unmasks every address and
+             * transaction hash in the GUI for safe screenshotting.
+             *
+             * The store is injectable for testing; it defaults to the global scrub store.
+             */ scrub?: Writable<boolean>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ButtonScrubProps = typeof __propDef.props;
+export type ButtonScrubEvents = typeof __propDef.events;
+export type ButtonScrubSlots = typeof __propDef.slots;
+export default class ButtonScrub extends SvelteComponent<ButtonScrubProps, ButtonScrubEvents, ButtonScrubSlots> {
+}
+export {};

package/dist/components/ButtonVaultLink.svelte

@@ -2,7 +2,7 @@
 import Tooltip from "./Tooltip.svelte";
 export let tokenVault;
 export let chainId;
-export let orderbookAddress;
+export let raindexAddress;
 </script>
 
 <div
@@ -14,8 +14,9 @@ export let orderbookAddress;
 			ID: <span class="font-mono">{toHex(tokenVault.vaultId)}</span>
 		</Tooltip>
 		<a
-			href={`/vaults/${chainId}-${orderbookAddress}-${tokenVault.id}`}
+			href={`/vaults/${chainId}-${raindexAddress}-${tokenVault.id}`}
 			id={`token-info-${tokenVault.vaultId}`}
+			class="text-blue-500 hover:underline"
 		>
 			{tokenVault.token.name} ({tokenVault.token.symbol})
 		</a>

package/dist/components/ButtonVaultLink.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { Address, RaindexVault } from '@rainlanguage/orderbook';
+import type { Address, RaindexVault } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         tokenVault: RaindexVault;
         chainId: number;
-        orderbookAddress: Address;
+        raindexAddress: Address;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeMirrorRainlang.svelte

@@ -1,15 +1,28 @@
 <script>import CodeMirror from "svelte-codemirror-editor";
 import { RainlangLR } from "codemirror-rainlang";
+import { stripTrailingWhitespace } from "../utils/stripTrailingWhitespace";
 export let order = void 0;
 export let rainlangText = void 0;
 export let codeMirrorTheme;
 export let codeMirrorDisabled = true;
 export let codeMirrorStyles = {};
+export let onSave = void 0;
+let value;
+$: value = rainlangText ?? order?.rainlang;
+function handleBlur() {
+  if (value === void 0) return;
+  const stripped = stripTrailingWhitespace(value);
+  value = stripped;
+  rainlangText = stripped;
+  onSave?.(stripped);
+}
 </script>
 
-{#if rainlangText || order?.rainlang}
+<!-- Render the editor whenever a source value is present, including an empty
+string left by stripping whitespace-only input on blur. -->
+{#if value != null}
 	<CodeMirror
-		value={rainlangText || order?.rainlang}
+		{value}
 		extensions={[RainlangLR]}
 		theme={codeMirrorTheme}
 		readonly={codeMirrorDisabled}
@@ -21,5 +34,9 @@ export let codeMirrorStyles = {};
 			},
 			...codeMirrorStyles
 		}}
+		on:change={(e) => {
+			value = e.detail;
+		}}
+		on:blur={handleBlur}
 	/>
 {/if}

package/dist/components/CodeMirrorRainlang.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RaindexOrder } from '@rainlanguage/orderbook';
+import type { RaindexOrder } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         order?: RaindexOrder | undefined;
@@ -7,6 +7,7 @@ declare const __propDef: {
         codeMirrorTheme: any;
         codeMirrorDisabled?: boolean;
         codeMirrorStyles?: {};
+        onSave?: ((text: string) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Hash.svelte

@@ -8,6 +8,7 @@
 </script>
 
 <script>import Tooltip from "./Tooltip.svelte";
+import Sensitive from "./Sensitive.svelte";
 import {
   WalletOutline,
   FingerprintOutline,
@@ -54,7 +55,7 @@ function copy(e) {
 	{:else if type === HashType.Address}
 		<ClipboardOutline size="sm" />
 	{/if}
-	<div>{displayValue}</div>
+	<Sensitive><div>{displayValue}</div></Sensitive>
 </button>
 
 {#if showCopiedMessage}
@@ -79,7 +80,7 @@ function copy(e) {
 			{:else if type === HashType.Address}
 				<ClipboardOutline size="sm" />
 			{/if}
-			<div>{value}</div>
+			<Sensitive><div>{value}</div></Sensitive>
 		</div>
 	</Tooltip>
 {/if}