From f04f389e3b2e06b1bf5b38b6cd22765d31ebae0e Mon Sep 17 00:00:00 2001
From: highonhopium <jks.hardy@gmail.com>
Date: Sat, 15 Feb 2025 19:58:02 +0000
Subject: [PATCH] updates

---
 .../deployment/DeploymentSteps.svelte         | 83 ++++++++++++++-----
 .../deployment/DisclaimerModal.svelte         | 67 +++------------
 .../components/wallet/WalletConnect.svelte    |  5 +-
 .../webapp/src/lib/components/Sidebar.svelte  |  4 +-
 4 files changed, 77 insertions(+), 82 deletions(-)

diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
index 13829a325..fad9102b8 100644
--- a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+	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 { type ConfigSource } from '../../typeshare/config';
-
 	import WalletConnect from '../wallet/WalletConnect.svelte';
 	import {
 		DotrainOrderGui,
@@ -16,7 +16,7 @@
 		type SelectTokens
 	} from '@rainlanguage/orderbook/js_api';
 	import { fade } from 'svelte/transition';
-	import { Button, Toggle } from 'flowbite-svelte';
+	import { Button, Toggle, Spinner } from 'flowbite-svelte';
 	import { type Config } from '@wagmi/core';
 	import { type Writable } from 'svelte/store';
 	import type { AppKit } from '@reown/appkit';
@@ -27,7 +27,8 @@
 	import DisclaimerModal from './DisclaimerModal.svelte';
 	import type { ComponentProps } from 'svelte';
 	import type { DeploymentArgs } from '$lib/types/transaction';
-
+	import { getDeploymentTransactionArgs } from './getDeploymentTransactionArgs';
+	import type { HandleAddOrderResult } from './getDeploymentTransactionArgs';
 	enum DeploymentStepErrors {
 		NO_GUI = 'Error loading GUI',
 		NO_STRATEGY = 'No valid strategy exists at this URL',
@@ -47,7 +48,7 @@
 	export let deployment: GuiDeployment;
 
 	export let handleDeployModal: (args: DeploymentArgs) => void;
-	export let handleDisclaimerModal: (args: ComponentProps<DisclaimerModal>) => void;
+	export let handleDisclaimerModal: (args: Omit<ComponentProps<DisclaimerModal>, 'open'>) => void;
 	export let handleUpdateGuiState: (gui: DotrainOrderGui) => void;
 
 	let selectTokens: SelectTokens | null = null;
@@ -57,6 +58,7 @@
 	let allTokensSelected: boolean = false;
 	let showAdvancedOptions: boolean = false;
 	let gui: DotrainOrderGui | null = null;
+	let checkingDeployment: boolean = false;
 	let error: DeploymentStepErrors | null = null;
 	let errorDetails: string | null = null;
 	let networkKey: string | null = null;
@@ -186,6 +188,9 @@
 	}
 
 	async function handleDeployButtonClick() {
+		error = null;
+		errorDetails = null;
+
 		if (!gui) {
 			error = DeploymentStepErrors.NO_GUI;
 			return;
@@ -199,13 +204,34 @@
 			return;
 		}
 
-		handleDisclaimerModal({
-			gui,
-			allTokenOutputs,
-			wagmiConfig,
-			subgraphUrl,
-			handleDeployModal
-		});
+		let result: HandleAddOrderResult | null = null;
+
+		checkingDeployment = true;
+
+		try {
+			result = await getDeploymentTransactionArgs(gui, $wagmiConfig, allTokenOutputs);
+		} catch (e) {
+			checkingDeployment = false;
+			error = DeploymentStepErrors.ADD_ORDER_FAILED;
+			errorDetails = e instanceof Error ? e.message : 'Unknown error';
+		}
+
+		if (!result) {
+			checkingDeployment = false;
+			error = DeploymentStepErrors.ADD_ORDER_FAILED;
+			return;
+		}
+
+		checkingDeployment = false;
+
+		const onAccept = () => {
+			handleDeployModal({
+				...result,
+				subgraphUrl: subgraphUrl
+			});
+		};
+
+		handleDisclaimerModal({ onAccept });
 	}
 
 	const areAllTokensSelected = async () => {
@@ -270,23 +296,36 @@
 						<TokenIOSection bind:allTokenInputs bind:allTokenOutputs {gui} {handleUpdateGuiState} />
 					{/if}
 
-					<div class="flex gap-2">
-						{#if $wagmiConnected}
-							<Button size="lg" on:click={handleDeployButtonClick}>Deploy Strategy</Button>
-							<ComposedRainlangModal {gui} />
-						{:else}
-							<WalletConnect {appKitModal} connected={wagmiConnected} />
-						{/if}
-						<ShareChoicesButton handleShareChoices={_handleShareChoices} />
-
-						<div class="flex flex-col">
+					{#if error || errorDetails}
+						<Alert color="red">
 							{#if error}
 								<p class="text-red-500">{error}</p>
 							{/if}
 							{#if errorDetails}
 								<p class="text-red-500">{errorDetails}</p>
 							{/if}
-						</div>
+						</Alert>
+					{/if}
+
+					<div class="flex items-start justify-start gap-2">
+						{#if $wagmiConnected}
+							<Button
+								size="lg"
+								on:click={handleDeployButtonClick}
+								class="bg-gradient-to-br from-blue-600 to-violet-600"
+							>
+								{#if checkingDeployment}
+									<Spinner size="4" color="white" />
+									<span class="ml-2">Checking deployment...</span>
+								{:else}
+									Deploy Strategy
+								{/if}
+							</Button>
+						{:else}
+							<WalletConnect {appKitModal} connected={wagmiConnected} />
+						{/if}
+						<ComposedRainlangModal {gui} />
+						<ShareChoicesButton handleShareChoices={_handleShareChoices} />
 					</div>
 				{/if}
 			</div>
diff --git a/packages/ui-components/src/lib/components/deployment/DisclaimerModal.svelte b/packages/ui-components/src/lib/components/deployment/DisclaimerModal.svelte
index c3df99998..6f5d0e250 100644
--- a/packages/ui-components/src/lib/components/deployment/DisclaimerModal.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DisclaimerModal.svelte
@@ -1,52 +1,17 @@
 <script lang="ts">
 	import { Alert, Modal, Button } from 'flowbite-svelte';
 	import { ExclamationCircleSolid } from 'flowbite-svelte-icons';
-	import { getDeploymentTransactionArgs } from './getDeploymentTransactionArgs';
-	import type { Config } from 'wagmi';
-	import type { Writable } from 'svelte/store';
-	import type { DotrainOrderGui, OrderIO } from '@rainlanguage/orderbook/js_api';
-	import type { DeploymentArgs } from '@rainlanguage/ui-components';
-	import type { HandleAddOrderResult } from './getDeploymentTransactionArgs';
 	export let open: boolean = false;
-	export let gui: DotrainOrderGui;
-	export let allTokenOutputs: OrderIO[];
-	export let wagmiConfig: Writable<Config | undefined>;
-	export let subgraphUrl: string;
-	export let handleDeployModal: (args: DeploymentArgs) => void;
-	let result: HandleAddOrderResult | null = null;
-
-	let error: string | null = null;
-	let errorDetails: string | null = null;
-	let deployButtonText: 'Loading...' | 'Deploy' | 'Error' = 'Loading...';
-
-	const handleOpenModal = async () => {
-		try {
-			result = await getDeploymentTransactionArgs(gui, $wagmiConfig, allTokenOutputs);
-			deployButtonText = 'Deploy';
-		} catch (e) {
-			deployButtonText = 'Error';
-			error = 'Error getting deployment transaction data:';
-			errorDetails = e instanceof Error ? e.message : 'Unknown error';
-		}
-	};
-
-	$: if (open === true) {
-		handleOpenModal();
-	}
+	export let onAccept: () => void;
 
 	async function handleAcceptDisclaimer() {
-		if (!result) {
-			error = 'No result found';
-			return;
-		} else {
-			open = false;
-			handleDeployModal({ ...result, subgraphUrl: subgraphUrl });
-		}
+		open = false;
+		onAccept();
 	}
 </script>
 
-<Modal bind:open>
-	<div class="flex flex-col items-start gap-y-4">
+<Modal bind:open class="dark:border dark:border-gray-700 dark:bg-gray-900">
+	<div class="flex flex-col items-start gap-y-8 p-4">
 		<div class="space-y-4">
 			<Alert color="red" class="text-base">
 				<div class="flex items-center justify-center">
@@ -56,7 +21,7 @@
 					</span>
 				</div>
 			</Alert>
-			<ul class="list-outside list-disc space-y-2 text-gray-700">
+			<ul class="list-outside list-disc space-y-2">
 				<li class="ml-4">
 					This front end is provided as a tool to interact with the Raindex smart contracts.
 				</li>
@@ -74,25 +39,13 @@
 				<li class="ml-4">Do not invest unless you are prepared to lose all funds.</li>
 			</ul>
 		</div>
-		<div class="flex gap-2">
+		<div class="flex justify-center gap-2">
 			<Button
 				size="lg"
-				class="w-32"
-				color="green"
-				disabled={!result}
-				on:click={handleAcceptDisclaimer}
+				class="w-32 bg-gradient-to-br from-blue-600 to-violet-600"
+				on:click={handleAcceptDisclaimer}>Deploy</Button
 			>
-				{deployButtonText}
-			</Button>
-			<Button size="lg" class="w-32" color="red" on:click={() => (open = false)}>Cancel</Button>
-		</div>
-		<div class="flex flex-col">
-			{#if error}
-				<span class="ml-2 text-red-500">{error}</span>
-			{/if}
-			{#if errorDetails}
-				<span class="ml-2 text-red-500">{errorDetails}</span>
-			{/if}
+			<Button size="lg" class="w-32" color="light" on:click={() => (open = false)}>Cancel</Button>
 		</div>
 	</div>
 </Modal>
diff --git a/packages/ui-components/src/lib/components/wallet/WalletConnect.svelte b/packages/ui-components/src/lib/components/wallet/WalletConnect.svelte
index b222936e3..8e2f5896e 100644
--- a/packages/ui-components/src/lib/components/wallet/WalletConnect.svelte
+++ b/packages/ui-components/src/lib/components/wallet/WalletConnect.svelte
@@ -3,8 +3,10 @@
 	import { CheckCircleOutline } from 'flowbite-svelte-icons';
 	import type { Writable } from 'svelte/store';
 	import type { AppKit } from '@reown/appkit';
+	import { twMerge } from 'tailwind-merge';
 	export let appKitModal: Writable<AppKit>;
 	export let connected: Writable<boolean>;
+	export let classes: string = '';
 	function handleClick() {
 		$appKitModal.open();
 	}
@@ -13,7 +15,8 @@
 <Button
 	data-testid="wallet-connect"
 	on:click={handleClick}
-	class="flex w-full border border-gray-700 px-2 md:px-4 dark:border-gray-200 "
+	size="lg"
+	class={twMerge('flex border border-gray-700 px-2 md:px-4 dark:border-gray-200', classes)}
 	color={$connected ? 'alternative' : 'primary'}
 >
 	{#if $connected}
diff --git a/packages/webapp/src/lib/components/Sidebar.svelte b/packages/webapp/src/lib/components/Sidebar.svelte
index b40e5eb80..d3bab927e 100644
--- a/packages/webapp/src/lib/components/Sidebar.svelte
+++ b/packages/webapp/src/lib/components/Sidebar.svelte
@@ -65,7 +65,7 @@
 		{#if !sideBarHidden}
 			<CloseButton
 				data-testid="close-button"
-				class="absolute right-3 top-2 z-20 flex size-8 items-center border dark:border-gray-700 lg:hidden"
+				class="absolute right-3 top-2 z-20 flex size-8 items-center border lg:hidden dark:border-gray-700"
 				on:click={() => (sideBarHidden = true)}
 			/>
 		{/if}
@@ -104,7 +104,7 @@
 				</SidebarItem>
 			</SidebarGroup>
 			<SidebarGroup border ulClass="list-none">
-				<WalletConnect {appKitModal} {connected} />
+				<WalletConnect {appKitModal} {connected} classes="w-full" />
 			</SidebarGroup>
 			<SidebarGroup border ulClass="list-none">
 				<SidebarItem