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

package/dist/__mocks__/stores.js

@@ -1,113 +1,130 @@
-import { writable } from 'svelte/store';
-import settingsFixture from '../__fixtures__/settings-12-11-24.json';
-import {} from '@wagmi/core';
-import { mockWeb3Config } from './mockWeb3Config';
-const mockSettingsWritable = writable(settingsFixture);
-const mockActiveSubgraphsWritable = writable({});
-const mockAccountsWritable = writable({});
-const mockActiveAccountsItemsWritable = writable({});
-const mockActiveOrderStatusWritable = writable(undefined);
-const mockOrderHashWritable = writable('');
+import { writable } from "svelte/store";
+import {} from "@wagmi/core";
+import { mockWeb3Config } from "./mockWeb3Config";
+if (import.meta.vitest) {
+    vi.mock(import("@rainlanguage/raindex"), async (importOriginal) => {
+        const actual = await importOriginal();
+        return {
+            ...actual,
+        };
+    });
+}
+const initialPageState = {
+    data: {
+        dotrain: "some dotrain content",
+        deployment: { key: "deploy-key", name: "", description: "" },
+        orderDetail: {},
+    },
+    url: new URL("http://localhost:3000/deploy"),
+    params: {},
+    form: {},
+    status: 200,
+    error: null,
+    route: {
+        id: null,
+    },
+};
+const mockPageWritable = writable(initialPageState);
+const mockShowInactiveOrdersWritable = writable(true);
+const mockOrderHashWritable = writable("");
 const mockHideZeroBalanceVaultsWritable = writable(false);
-const mockActiveNetworkRefWritable = writable('');
-const mockActiveOrderbookRefWritable = writable('');
+const mockHideInactiveOrdersVaultsWritable = writable(false);
+const mockActiveNetworkRefWritable = writable("");
+const mockActiveRaindexRefWritable = writable("");
 const mockActiveAccountsWritable = writable({});
-const mockSubgraphUrlWritable = writable('');
-const mockWalletAddressMatchesOrBlankWritable = writable(() => false);
-const mockSignerAddressWritable = writable('');
+const mockSubgraphUrlWritable = writable("");
 const mockChainIdWritable = writable(0);
-const mockConnectedWritable = writable(false);
+const mockConnectedWritable = writable(true);
 const mockWagmiConfigWritable = writable(mockWeb3Config);
-const mockShowMyItemsOnlyWritable = writable(false);
-const mockPageWritable = writable();
-export const mockWalletAddressMatchesOrBlankStore = {
-    subscribe: mockWalletAddressMatchesOrBlankWritable.subscribe,
-    set: mockWalletAddressMatchesOrBlankWritable.set,
-    mockSetSubscribeValue: (value) => mockWalletAddressMatchesOrBlankWritable.set(value)
-};
-export const mockSettingsStore = {
-    subscribe: mockSettingsWritable.subscribe,
-    set: mockSettingsWritable.set,
-    mockSetSubscribeValue: (value) => mockSettingsWritable.set(value)
-};
-export const mockActiveSubgraphsStore = {
-    subscribe: mockActiveSubgraphsWritable.subscribe,
-    set: mockActiveSubgraphsWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveSubgraphsWritable.set(value)
-};
-export const mockAccountsStore = {
-    subscribe: mockAccountsWritable.subscribe
-};
-export const mockActiveAccountsItemsStore = {
-    subscribe: mockActiveAccountsItemsWritable.subscribe,
-    set: mockActiveAccountsItemsWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveAccountsItemsWritable.set(value)
-};
-export const mockActiveOrderStatusStore = {
-    subscribe: mockActiveOrderStatusWritable.subscribe,
-    set: mockActiveOrderStatusWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveOrderStatusWritable.set(value)
+const mockSelectedChainIdsWritable = writable([]);
+const mockActiveTokensWritable = writable([]);
+const mockActiveRaindexAddressesWritable = writable([]);
+const mockOwnerFilterWritable = writable("");
+export const mockShowInactiveOrdersStore = {
+    subscribe: mockShowInactiveOrdersWritable.subscribe,
+    set: mockShowInactiveOrdersWritable.set,
+    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),
 };
 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)
-};
-export const mockSignerAddressStore = {
-    subscribe: mockSignerAddressWritable.subscribe,
-    set: mockSignerAddressWritable.set,
-    mockSetSubscribeValue: (value) => mockSignerAddressWritable.set(value),
-    update: mockSignerAddressWritable.update
+    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 mockShowMyItemsOnlyStore = {
-    subscribe: mockShowMyItemsOnlyWritable.subscribe,
-    set: mockShowMyItemsOnlyWritable.set,
-    mockSetSubscribeValue: (value) => mockShowMyItemsOnlyWritable.set(value)
+export const mockSelectedChainIdsStore = {
+    subscribe: mockSelectedChainIdsWritable.subscribe,
+    set: mockSelectedChainIdsWritable.set,
+    mockSetSubscribeValue: (value) => mockSelectedChainIdsWritable.set(value),
 };
 export const mockPageStore = {
     subscribe: mockPageWritable.subscribe,
     set: mockPageWritable.set,
-    mockSetSubscribeValue: (value) => mockPageWritable.set(value)
+    mockSetSubscribeValue: (newValue) => {
+        mockPageWritable.update((currentValue) => ({
+            ...currentValue,
+            ...newValue,
+        }));
+    },
+    reset: () => mockPageWritable.set(initialPageState),
+};
+export const mockActiveTokensStore = {
+    subscribe: mockActiveTokensWritable.subscribe,
+    set: mockActiveTokensWritable.set,
+    mockSetSubscribeValue: (value) => mockActiveTokensWritable.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),
 };

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/ButtonLoading.svelte

@@ -5,7 +5,7 @@ export let disabled = false;
 
 <Button disabled={loading || disabled} {...$$props} on:click>
 	{#if loading}
-		<Spinner class="mr-2 h-4 w-4" color="white" />
+		<Spinner data-testid="spinner" class="mr-2 h-4 w-4" color="white" />
 	{/if}
 	<slot />
 </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

@@ -1,8 +1,8 @@
-<script>import { bigintStringToHex } from "../utils/hex";
-import { Tooltip } from "flowbite-svelte";
-import { formatUnits } from "viem";
+<script>import { toHex } from "viem";
+import Tooltip from "./Tooltip.svelte";
 export let tokenVault;
-export let subgraphName;
+export let chainId;
+export let raindexAddress;
 </script>
 
 <div
@@ -10,17 +10,18 @@ export let subgraphName;
 	data-testid="vault-link"
 >
 	<div class="flex flex-col items-start gap-y-2">
-		<Tooltip triggeredBy="#token-info" class="z-[99] w-96">
-			ID: <span class="font-mono">{bigintStringToHex(tokenVault.vaultId)}</span>
+		<Tooltip triggeredBy={`#token-info-${tokenVault.vaultId}`}>
+			ID: <span class="font-mono">{toHex(tokenVault.vaultId)}</span>
 		</Tooltip>
-		<a href={`/vaults/${subgraphName}-${tokenVault.id}`} id="token-info">
+		<a
+			href={`/vaults/${chainId}-${raindexAddress}-${tokenVault.id}`}
+			id={`token-info-${tokenVault.vaultId}`}
+			class="text-blue-500 hover:underline"
+		>
 			{tokenVault.token.name} ({tokenVault.token.symbol})
 		</a>
 		<span class="text-sm text-gray-500 dark:text-gray-400">
-			Balance: {formatUnits(
-				BigInt(tokenVault.balance),
-				parseInt(tokenVault.token.decimals || '18')
-			)}
+			Balance: {tokenVault.formattedBalance}
 		</span>
 	</div>
 	<div>

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

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

package/dist/components/CheckboxInactiveOrdersVault.svelte

@@ -0,0 +1,20 @@
+<script>import { Checkbox, Label } from "flowbite-svelte";
+export let hideInactiveOrdersVaults;
+function handleHideInactiveOrdersVaultsChange() {
+  $hideInactiveOrdersVaults = !$hideInactiveOrdersVaults;
+}
+</script>
+
+<div data-testid="inactive-orders-vault-checkbox" class="flex items-center gap-x-2">
+	<Label
+		for="hide-inactive-orders-vaults"
+		class="cursor-pointer whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-300"
+	>
+		Hide vaults without active orders
+	</Label>
+	<Checkbox
+		id="hide-inactive-orders-vaults"
+		checked={$hideInactiveOrdersVaults}
+		on:change={handleHideInactiveOrdersVaultsChange}
+	/>
+</div>

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

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

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

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { Writable } from 'svelte/store';
+import type { AppStoresInterface } from '../types/appStores';
 declare const __propDef: {
     props: {
-        hideZeroBalanceVaults: Writable<boolean>;
+        hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeMirrorDotrain.svelte

@@ -6,6 +6,7 @@ export let disabled = false;
 export let styles = {};
 export let rainlangExtension;
 export let codeMirrorTheme;
+export let onTextChange;
 </script>
 
 <div data-testid="codemirror-dotrain">
@@ -22,6 +23,9 @@ export let codeMirrorTheme;
 			},
 			...styles
 		}}
+		on:change={(e) => {
+			onTextChange(e.detail);
+		}}
 		on:ready={(e) => {
 			openLintPanel(e.detail);
 		}}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         styles?: {};
         rainlangExtension: RawRainlangExtension;
         codeMirrorTheme: any;
+        onTextChange: (text: string) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeMirrorRainlang.svelte

@@ -1,17 +1,28 @@
-<script>import { extendOrder } from "@rainlanguage/orderbook/js_api";
-import CodeMirror from "svelte-codemirror-editor";
+<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 = {};
-$: extendedOrder = order ? extendOrder(order) : void 0;
+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 || extendedOrder?.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 || extendedOrder.rainlang}
+		{value}
 		extensions={[RainlangLR]}
 		theme={codeMirrorTheme}
 		readonly={codeMirrorDisabled}
@@ -23,12 +34,9 @@ $: extendedOrder = order ? extendOrder(order) : void 0;
 			},
 			...codeMirrorStyles
 		}}
+		on:change={(e) => {
+			value = e.detail;
+		}}
+		on:blur={handleBlur}
 	/>
-{:else if !extendedOrder?.rainlang && !rainlangText}
-	<div
-		class="w-full tracking-tight text-gray-900 dark:text-white"
-		data-testid="rainlang-not-included"
-	>
-		Rain source not included in order meta
-	</div>
 {/if}

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

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

package/dist/components/EditableSpan.svelte

@@ -1,15 +1,10 @@
 <script>import { createEventDispatcher } from "svelte";
+import { PenSolid } from "flowbite-svelte-icons";
 export let displayValue;
-let focussed = false;
 let textContent;
 let editableSpan;
 let dispatch = createEventDispatcher();
-const inputFocussed = () => {
-  focussed = true;
-  dispatch("focus");
-};
 const inputBlurred = () => {
-  focussed = false;
   displayValue = textContent;
   dispatch("blur", { value: textContent });
 };
@@ -20,27 +15,21 @@ const handleKeyDown = (event) => {
 };
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	data-testid="editableSpanWrapper"
-	on:click={inputFocussed}
-	class="flex gap-x-1 border-b-2 border-dotted text-sm text-gray-400 dark:text-gray-400"
+	class="flex items-center gap-x-1 border-b-2 border-dotted text-sm text-gray-400 dark:text-gray-400"
 >
+	<PenSolid class="h-3 w-3 cursor-pointer" />
 	<span>Block:</span>
 	<div class="relative">
 		<span
 			data-testid="editableSpan"
-			class="absolute"
-			class:opacity-0={!focussed}
 			bind:this={editableSpan}
 			bind:textContent
 			contenteditable="true"
 			on:keydown={handleKeyDown}
 			on:blur={inputBlurred}>{displayValue}</span
 		>
-		<span data-testid="displayElement" class="pointer-events-none" class:opacity-0={focussed}
-			>{displayValue}</span
-		>
 	</div>
 </div>

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

@@ -4,7 +4,6 @@ declare const __propDef: {
         displayValue: string;
     };
     events: {
-        focus: CustomEvent<any>;
         blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/Hash.svelte

@@ -7,7 +7,8 @@
 })(HashType || {});
 </script>
 
-<script>import { Tooltip } from "flowbite-svelte";
+<script>import Tooltip from "./Tooltip.svelte";
+import Sensitive from "./Sensitive.svelte";
 import {
   WalletOutline,
   FingerprintOutline,
@@ -54,13 +55,13 @@ function copy(e) {
 	{:else if type === HashType.Address}
 		<ClipboardOutline size="sm" />
 	{/if}
-	<div>{displayValue}</div>
+	<Sensitive><div>{displayValue}</div></Sensitive>
 </button>
 
 {#if showCopiedMessage}
 	<div
 		out:fade
-		class="fixed rounded bg-green-500 px-2 py-1 text-xs text-white shadow"
+		class="fixed rounded bg-green-500 px-2 py-1 text-xs text-white"
 		style="top: {cursorY + 10}px; left: {cursorX + 10}px"
 	>
 		Copied to clipboard
@@ -68,7 +69,7 @@ function copy(e) {
 {/if}
 
 {#if shorten}
-	<Tooltip triggeredBy={`#${id}`} class="z-20 whitespace-normal">
+	<Tooltip triggeredBy={`#${id}`}>
 		<div class="flex items-center justify-start space-x-2">
 			{#if type === HashType.Wallet}
 				<WalletOutline size="sm" />
@@ -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}

package/dist/components/License.svelte

@@ -2,19 +2,20 @@
 	import { Heading, Text, BlockQuote } from '@rainlanguage/ui-components';
 	import Markdown from 'svelte-markdown';
 	import { onMount } from 'svelte';
+	import { LICENSE_URL } from '../consts';
 
 	let source = '';
 
 	onMount(async () => {
 		try {
-			const response = await fetch(
-				'https://raw.githubusercontent.com/rainlanguage/decentralicense/refs/heads/master/README.md'
-			);
+			const response = await fetch(LICENSE_URL);
 			if (response.ok) {
 				source = await response.text();
+			} else {
+				source = `Failed to fetch license: HTTP ${response.status}`;
 			}
 		} catch {
-			source = '';
+			source = 'Failed to fetch license.';
 		}
 	});
 </script>