@rainlanguage/ui-components 0.0.1-alpha.13 → 0.0.1-alpha.15

package/dist/components/deployment/DeploymentSteps.svelte

@@ -1,13 +1,11 @@
 <script>import { Alert } from "flowbite-svelte";
 import TokenIOSection from "./TokenIOSection.svelte";
 import DepositsSection from "./DepositsSection.svelte";
-import SelectTokensSection from "./SelectTokensSection.svelte";
 import ComposedRainlangModal from "./ComposedRainlangModal.svelte";
 import FieldDefinitionsSection from "./FieldDefinitionsSection.svelte";
 import {} from "@rainlanguage/orderbook/js_api";
 import WalletConnect from "../wallet/WalletConnect.svelte";
 import {
-  DotrainOrderGui
 } from "@rainlanguage/orderbook/js_api";
 import { fade } from "svelte/transition";
 import { Button, Toggle, Spinner } from "flowbite-svelte";
@@ -18,11 +16,13 @@ import { handleShareChoices } from "../../services/handleShareChoices";
 import { getDeploymentTransactionArgs } from "./getDeploymentTransactionArgs";
 import { DeploymentStepsError, DeploymentStepsErrorCode } from "../../errors";
 import { onMount } from "svelte";
+import SelectToken from "./SelectToken.svelte";
+import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
+import { useGui } from "../../hooks/useGui";
 export let settings;
 export let dotrain;
 export let deployment;
 export let strategyDetail;
-export let gui;
 export let handleDeployModal;
 export let handleDisclaimerModal;
 let allDepositFields = [];
@@ -33,6 +33,7 @@ let allTokensSelected = false;
 let showAdvancedOptions = false;
 let checkingDeployment = false;
 let allTokenInfos = [];
+const gui = useGui();
 const selectTokens = gui.getSelectTokens();
 const networkKey = gui.getNetworkKey();
 const subgraphUrl = $settings?.subgraphs?.[networkKey] ?? "";
@@ -191,7 +192,15 @@ const areAllTokensSelected = async () => {
 				{/if}
 
 				{#if selectTokens && selectTokens.length > 0}
-					<SelectTokensSection {gui} {selectTokens} {onSelectTokenSelect} />
+					<div class="flex w-full flex-col gap-4">
+						<DeploymentSectionHeader
+							title="Select Tokens"
+							description="Select the tokens that you want to use in your order."
+						/>
+						{#each selectTokens as token}
+							<SelectToken {token} {onSelectTokenSelect} {gui} />
+						{/each}
+					</div>
 				{/if}
 
 				{#if allTokensSelected || selectTokens?.length === 0}

package/dist/components/deployment/DeploymentSteps.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { type ConfigSource } from '@rainlanguage/orderbook/js_api';
-import { DotrainOrderGui, type NameAndDescriptionCfg } from '@rainlanguage/orderbook/js_api';
+import { type NameAndDescriptionCfg } from '@rainlanguage/orderbook/js_api';
 import { type Config } from '@wagmi/core';
 import { type Writable } from 'svelte/store';
 import type { AppKit } from '@reown/appkit';
@@ -15,7 +15,6 @@ declare const __propDef: {
             description: string;
         };
         strategyDetail: NameAndDescriptionCfg;
-        gui: DotrainOrderGui;
         handleDeployModal: (args: DeployModalProps) => void;
         handleDisclaimerModal: (args: DisclaimerModalProps) => void;
         wagmiConfig: Writable<Config | undefined>;

package/dist/errors/DeploymentStepsError.d.ts

@@ -1,5 +1,6 @@
 export declare enum DeploymentStepsErrorCode {
-    NO_GUI = "Error loading GUI",
+    NO_GUI_PROVIDER = "No GUI provider found.",
+    NO_GUI = "Error loading GUI.",
     NO_STRATEGY = "No valid strategy exists at this URL",
     NO_SELECT_TOKENS = "Error loading tokens",
     NO_TOKEN_INFO = "Error loading token information",

package/dist/errors/DeploymentStepsError.js

@@ -1,7 +1,8 @@
 import { writable } from 'svelte/store';
 export var DeploymentStepsErrorCode;
 (function (DeploymentStepsErrorCode) {
-    DeploymentStepsErrorCode["NO_GUI"] = "Error loading GUI";
+    DeploymentStepsErrorCode["NO_GUI_PROVIDER"] = "No GUI provider found.";
+    DeploymentStepsErrorCode["NO_GUI"] = "Error loading GUI.";
     DeploymentStepsErrorCode["NO_STRATEGY"] = "No valid strategy exists at this URL";
     DeploymentStepsErrorCode["NO_SELECT_TOKENS"] = "Error loading tokens";
     DeploymentStepsErrorCode["NO_TOKEN_INFO"] = "Error loading token information";

package/dist/hooks/useGui.d.ts

@@ -0,0 +1,3 @@
+import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+export declare const GUI_CONTEXT_KEY = "gui-context";
+export declare function useGui(): DotrainOrderGui;

package/dist/hooks/useGui.js

@@ -0,0 +1,11 @@
+import { getContext } from 'svelte';
+import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+import { DeploymentStepsError, DeploymentStepsErrorCode } from '../errors/DeploymentStepsError';
+export const GUI_CONTEXT_KEY = 'gui-context';
+export function useGui() {
+    const gui = getContext(GUI_CONTEXT_KEY);
+    if (!gui) {
+        DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_GUI_PROVIDER);
+    }
+    return gui;
+}

package/dist/index.d.ts

@@ -87,3 +87,5 @@ export { default as transactionStore } from './stores/transactionStore';
 export { mockTransactionStore } from './__mocks__/mockTransactionStore';
 export { default as logoLight } from './assets/logo-light.svg';
 export { default as logoDark } from './assets/logo-dark.svg';
+export { useGui } from './hooks/useGui';
+export { default as GuiProvider } from './providers/GuiProvider.svelte';

package/dist/index.js

@@ -87,3 +87,7 @@ export { mockTransactionStore } from './__mocks__/mockTransactionStore';
 // Assets
 export { default as logoLight } from './assets/logo-light.svg';
 export { default as logoDark } from './assets/logo-dark.svg';
+// Hooks
+export { useGui } from './hooks/useGui';
+// Providers
+export { default as GuiProvider } from './providers/GuiProvider.svelte';

package/dist/providers/GuiProvider.svelte

@@ -0,0 +1,8 @@
+<script>import { setContext } from "svelte";
+import { DotrainOrderGui } from "@rainlanguage/orderbook/js_api";
+import { GUI_CONTEXT_KEY } from "../hooks/useGui";
+export let gui;
+setContext(GUI_CONTEXT_KEY, gui);
+</script>
+
+<slot />

package/dist/providers/GuiProvider.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+declare const __propDef: {
+    props: {
+        gui: DotrainOrderGui;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type GuiProviderProps = typeof __propDef.props;
+export type GuiProviderEvents = typeof __propDef.events;
+export type GuiProviderSlots = typeof __propDef.slots;
+export default class GuiProvider extends SvelteComponent<GuiProviderProps, GuiProviderEvents, GuiProviderSlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.13",
+	"version": "0.0.1-alpha.15",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -53,7 +53,7 @@
 		"@fontsource/dm-sans": "^5.0.18",
 		"@imask/svelte": "^7.3.0",
 		"@observablehq/plot": "^0.6.13",
-		"@rainlanguage/orderbook": "0.0.1-alpha.13",
+		"@rainlanguage/orderbook": "0.0.1-alpha.15",
 		"@reown/appkit": "^1.6.4",
 		"@reown/appkit-adapter-wagmi": "^1.6.4",
 		"@sentry/sveltekit": "^7.107.0",

package/dist/components/deployment/SelectTokensSection.svelte

@@ -1,17 +0,0 @@
-<script>import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
-import SelectToken from "./SelectToken.svelte";
-import { DotrainOrderGui } from "@rainlanguage/orderbook/js_api";
-export let gui;
-export let selectTokens;
-export let onSelectTokenSelect;
-</script>
-
-<div class="flex w-full flex-col gap-4">
-	<DeploymentSectionHeader
-		title="Select Tokens"
-		description="Select the tokens that you want to use in your order."
-	/>
-	{#each selectTokens as token}
-		<SelectToken {token} bind:gui {onSelectTokenSelect} />
-	{/each}
-</div>

package/dist/components/deployment/SelectTokensSection.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { DotrainOrderGui, type SelectTokens } from '@rainlanguage/orderbook/js_api';
-declare const __propDef: {
-    props: {
-        gui: DotrainOrderGui;
-        selectTokens: SelectTokens;
-        onSelectTokenSelect: () => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SelectTokensSectionProps = typeof __propDef.props;
-export type SelectTokensSectionEvents = typeof __propDef.events;
-export type SelectTokensSectionSlots = typeof __propDef.slots;
-export default class SelectTokensSection extends SvelteComponent<SelectTokensSectionProps, SelectTokensSectionEvents, SelectTokensSectionSlots> {
-}
-export {};