diff --git a/crates/js_api/src/gui/mod.rs b/crates/js_api/src/gui/mod.rs
index d28888c0d..76f7d7170 100644
--- a/crates/js_api/src/gui/mod.rs
+++ b/crates/js_api/src/gui/mod.rs
@@ -173,6 +173,17 @@ impl DotrainOrderGui {
         );
         Ok(dotrain)
     }
+
+    #[wasm_bindgen(js_name = "getComposedRainlang")]
+    pub async fn get_composed_rainlang(&mut self) -> Result<String, GuiError> {
+        self.update_scenario_bindings()?;
+        let dotrain = self.generate_dotrain_text()?;
+        let dotrain_order = DotrainOrder::new(dotrain, None).await?;
+        let rainlang = dotrain_order
+            .compose_deployment_to_rainlang(self.selected_deployment.clone())
+            .await?;
+        Ok(rainlang)
+    }
 }
 
 #[derive(Error, Debug)]
diff --git a/packages/ui-components/src/__tests__/ComposedRainlangModal.test.ts b/packages/ui-components/src/__tests__/ComposedRainlangModal.test.ts
index 005a8cc25..96950dca5 100644
--- a/packages/ui-components/src/__tests__/ComposedRainlangModal.test.ts
+++ b/packages/ui-components/src/__tests__/ComposedRainlangModal.test.ts
@@ -1,24 +1,26 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, fireEvent, waitFor } from '@testing-library/svelte';
 import ComposedRainlangModal from '../lib/components/deployment/ComposedRainlangModal.svelte';
+import type { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
 
 vi.mock('svelte-codemirror-editor', async () => {
 	const mockCodeMirror = (await import('../lib/__mocks__/MockComponent.svelte')).default;
 	return { default: mockCodeMirror };
 });
 
-describe('ComposedRainlangModal', () => {
-	let composeRainlangMock: ReturnType<typeof vi.fn>;
+const mockGui = {
+	getComposedRainlang: vi.fn(() => Promise.resolve('mocked rainlang text'))
+} as unknown as DotrainOrderGui;
 
+describe('ComposedRainlangModal', () => {
 	beforeEach(() => {
-		composeRainlangMock = vi.fn(() => Promise.resolve('mocked rainlang text'));
 		vi.clearAllMocks();
 	});
 
 	it('should open modal and display rainlang text when button is clicked', async () => {
 		const { getByText, getByTestId } = render(ComposedRainlangModal, {
 			props: {
-				composeRainlang: composeRainlangMock,
+				gui: mockGui,
 				codeMirrorStyles: {}
 			}
 		});
@@ -27,7 +29,7 @@ describe('ComposedRainlangModal', () => {
 		await fireEvent.click(button);
 
 		await waitFor(() => {
-			expect(composeRainlangMock).toHaveBeenCalled();
+			expect(mockGui.getComposedRainlang).toHaveBeenCalled();
 			expect(getByTestId('modal')).toBeInTheDocument();
 		});
 	});
diff --git a/packages/ui-components/src/lib/components/deployment/ComposedRainlangModal.svelte b/packages/ui-components/src/lib/components/deployment/ComposedRainlangModal.svelte
index b1b66796e..04b443e27 100644
--- a/packages/ui-components/src/lib/components/deployment/ComposedRainlangModal.svelte
+++ b/packages/ui-components/src/lib/components/deployment/ComposedRainlangModal.svelte
@@ -3,15 +3,17 @@
 	import { RainlangLR } from 'codemirror-rainlang';
 	import { lightCodeMirrorTheme } from '../../utils/codeMirrorThemes';
 	import { Button, Modal } from 'flowbite-svelte';
+	import type { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
 
-	export let composeRainlang: () => Promise<string | undefined>;
+	export let gui: DotrainOrderGui;
 	export let codeMirrorStyles = {};
 
 	let rainlangText: string | null = null;
 	let open = false;
 
 	async function generateRainlang() {
-		const rainlang = await composeRainlang();
+		if (!gui) return;
+		const rainlang = await gui.getComposedRainlang();
 		if (rainlang) {
 			rainlangText = rainlang;
 			open = true;
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
index 5ff024ca7..c8e2454ba 100644
--- a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
@@ -14,7 +14,6 @@
 		type OrderIO,
 		type ApprovalCalldataResult,
 		type DepositAndAddOrderCalldataResult,
-		DotrainOrder,
 		type SelectTokens
 	} from '@rainlanguage/orderbook/js_api';
 	import { fade } from 'svelte/transition';
@@ -235,16 +234,6 @@
 			}
 		}
 	};
-
-	async function composeRainlang() {
-		if (!gui) return;
-		gui.updateScenarioBindings();
-		const deployment = gui.getCurrentDeployment();
-		const dotrain = gui.generateDotrainText();
-		const dotrainOrder = await DotrainOrder.create(dotrain);
-		const composedRainlang = await dotrainOrder.composeDeploymentToRainlang(deployment.key);
-		return composedRainlang;
-	}
 </script>
 
 <div>
@@ -290,7 +279,7 @@
 					<div class="flex gap-2">
 						{#if $wagmiConnected}
 							<Button size="lg" on:click={handleAddOrder}>Deploy Strategy</Button>
-							<ComposedRainlangModal {composeRainlang} />
+							<ComposedRainlangModal {gui} />
 						{:else}
 							<WalletConnect {appKitModal} connected={wagmiConnected} />
 						{/if}