From d81c9a360392d71fad13d0118889feaad22683c3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 6 Sep 2025 07:11:52 +0000
Subject: [PATCH 1/5] Initial plan


From f36c32f89158acac3164cc1421c9df17e48eca31 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 6 Sep 2025 07:58:31 +0000
Subject: [PATCH 2/5] Implement unified token selection modal with custom
 address support

Co-authored-by: hardyjosh <1190022+hardyjosh@users.noreply.github.com>
---
 .../components/deployment/SelectToken.svelte  |  82 +-----------
 .../deployment/TokenSelectionModal.svelte     | 122 +++++++++++++++++-
 2 files changed, 118 insertions(+), 86 deletions(-)

diff --git a/packages/ui-components/src/lib/components/deployment/SelectToken.svelte b/packages/ui-components/src/lib/components/deployment/SelectToken.svelte
index 068f9faabe..f1fab6ef72 100644
--- a/packages/ui-components/src/lib/components/deployment/SelectToken.svelte
+++ b/packages/ui-components/src/lib/components/deployment/SelectToken.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { Input } from 'flowbite-svelte';
 	import type { GuiSelectTokensCfg, TokenInfo } from '@rainlanguage/orderbook';
 	import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
 	import { Spinner } from 'flowbite-svelte';
 	import { onMount } from 'svelte';
 	import { useGui } from '$lib/hooks/useGui';
-	import ButtonSelectOption from './ButtonSelectOption.svelte';
 	import TokenSelectionModal from './TokenSelectionModal.svelte';
 	import TokenBalanceComponent from './TokenBalance.svelte';
 	import type { TokenBalance } from '$lib/types/tokenBalance';
@@ -14,11 +12,9 @@
 	export let onSelectTokenSelect: (key: string) => void;
 	export let tokenBalances: Map<string, TokenBalance> = new Map();
 
-	let inputValue: string | null = null;
 	let tokenInfo: TokenInfo | null = null;
 	let error = '';
 	let checking = false;
-	let selectionMode: 'dropdown' | 'custom' = 'dropdown';
 	let selectedToken: TokenInfo | null = null;
 
 	const gui = useGui();
@@ -31,7 +27,7 @@
 			}
 			tokenInfo = result.value;
 			if (result.value.address) {
-				inputValue = result.value.address;
+				selectedToken = result.value;
 				onSelectTokenSelect(token.key);
 			}
 		} catch {
@@ -39,26 +35,8 @@
 		}
 	});
 
-	$: if (tokenInfo?.address && inputValue === null) {
-		inputValue = tokenInfo.address;
-	}
-
-	function setMode(mode: 'dropdown' | 'custom') {
-		selectionMode = mode;
-		error = '';
-
-		if (mode === 'custom') {
-			selectedToken = null;
-			tokenInfo = null;
-			inputValue = '';
-			error = '';
-			clearTokenSelection();
-		}
-	}
-
 	function handleTokenSelect(token: TokenInfo) {
 		selectedToken = token;
-		inputValue = token.address;
 		saveTokenSelection(token.address);
 	}
 
@@ -77,11 +55,6 @@
 		}
 	}
 
-	function clearTokenSelection() {
-		gui.unsetSelectToken(token.key);
-		onSelectTokenSelect(token.key);
-	}
-
 	async function getInfoForSelectedToken() {
 		error = '';
 		try {
@@ -90,32 +63,12 @@
 				throw new Error(result.error.msg);
 			}
 			tokenInfo = result.value;
+			selectedToken = result.value;
 			error = '';
 		} catch {
 			return (error = 'No token exists at this address.');
 		}
 	}
-
-	async function handleInput(event: Event) {
-		const currentTarget = event.currentTarget;
-		if (currentTarget instanceof HTMLInputElement) {
-			inputValue = currentTarget.value;
-
-			if (tokenInfo && tokenInfo.address.toLowerCase() !== inputValue.toLowerCase()) {
-				tokenInfo = null;
-				selectedToken = null;
-			}
-
-			if (!inputValue) {
-				error = '';
-				tokenInfo = null;
-				selectedToken = null;
-				return;
-			}
-
-			saveTokenSelection(inputValue);
-		}
-	}
 </script>
 
 <div class="token-selection-container flex w-full flex-col gap-4">
@@ -136,36 +89,7 @@
 		{/if}
 	</div>
 
-	<div class="selection-mode flex gap-2">
-		<ButtonSelectOption
-			active={selectionMode === 'dropdown'}
-			buttonText="Select from list"
-			clickHandler={() => setMode('dropdown')}
-			dataTestId="dropdown-mode-button"
-		/>
-		<ButtonSelectOption
-			active={selectionMode === 'custom'}
-			buttonText="Custom address"
-			clickHandler={() => setMode('custom')}
-			dataTestId="custom-mode-button"
-		/>
-	</div>
-
-	{#if selectionMode === 'dropdown'}
-		<TokenSelectionModal {selectedToken} onSelect={handleTokenSelect} />
-	{/if}
-
-	{#if selectionMode === 'custom'}
-		<div class="custom-input">
-			<Input
-				type="text"
-				size="lg"
-				placeholder="Enter token address (0x...)"
-				bind:value={inputValue}
-				on:input={handleInput}
-			/>
-		</div>
-	{/if}
+	<TokenSelectionModal {selectedToken} onSelect={handleTokenSelect} />
 
 	<div class="token-status">
 		{#if checking}
diff --git a/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte b/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte
index 91cd2c2d30..336d9453dd 100644
--- a/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte
+++ b/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Input, Button, Modal } from 'flowbite-svelte';
-	import { SearchOutline, CheckCircleSolid, ChevronDownSolid } from 'flowbite-svelte-icons';
+	import { SearchOutline, CheckCircleSolid, ChevronDownSolid, ExclamationTriangleSolid } from 'flowbite-svelte-icons';
 	import type { TokenInfo } from '@rainlanguage/orderbook';
 	import { useGui } from '$lib/hooks/useGui';
 	import { onMount, tick } from 'svelte';
@@ -12,11 +12,16 @@
 	let searchQuery = '';
 	let tokens: TokenInfo[] = [];
 	let isSearching = false;
+	let customToken: TokenInfo | null = null;
+	let customTokenError = '';
+	let isValidatingCustomToken = false;
 
 	const gui = useGui();
 
 	async function loadTokens(search?: string) {
 		isSearching = true;
+		customToken = null;
+		customTokenError = '';
 
 		const result = await gui.getAllTokens(search);
 		if (result.error) {
@@ -28,10 +33,69 @@
 		isSearching = false;
 	}
 
-	function handleSearch(event: Event) {
+	function isValidAddress(address: string): boolean {
+		return /^0x[a-fA-F0-9]{40}$/.test(address);
+	}
+
+	async function validateCustomToken(address: string) {
+		if (!isValidAddress(address)) {
+			customTokenError = 'Invalid address format';
+			return;
+		}
+
+		isValidatingCustomToken = true;
+		customTokenError = '';
+		customToken = null;
+
+		try {
+			// Create a temporary token key for validation
+			const tempKey = 'temp-validation-token';
+			
+			// Try to set the token which will validate and fetch info
+			await gui.setSelectToken(tempKey, address);
+			
+			// Get the token info
+			const result = await gui.getTokenInfo(tempKey);
+			if (result.error) {
+				throw new Error(result.error.msg);
+			}
+
+			// Create custom token info
+			const tokenInfo = result.value;
+			customToken = {
+				key: tempKey,
+				address: tokenInfo.address,
+				decimals: tokenInfo.decimals,
+				name: tokenInfo.name,
+				symbol: tokenInfo.symbol
+			};
+
+			// Clean up - unset the temporary token
+			await gui.unsetSelectToken(tempKey);
+		} catch (error) {
+			customTokenError = (error as Error).message || 'Invalid token address';
+			customToken = null;
+		} finally {
+			isValidatingCustomToken = false;
+		}
+	}
+
+	async function handleSearch(event: Event) {
 		const target = event.target as HTMLInputElement;
 		searchQuery = target.value;
-		loadTokens(searchQuery || undefined);
+		
+		// Check if the input looks like an address
+		if (isValidAddress(searchQuery)) {
+			// Load normal tokens first
+			await loadTokens();
+			// Then validate the custom address
+			await validateCustomToken(searchQuery);
+		} else {
+			// Normal search
+			customToken = null;
+			customTokenError = '';
+			await loadTokens(searchQuery || undefined);
+		}
 	}
 
 	onMount(() => loadTokens());
@@ -56,6 +120,11 @@
 				input.focus();
 			}
 		});
+		// Reset search state when modal opens
+		searchQuery = '';
+		customToken = null;
+		customTokenError = '';
+		loadTokens();
 	}
 </script>
 
@@ -83,7 +152,7 @@
 				</div>
 				<Input
 					type="text"
-					placeholder="Search tokens..."
+					placeholder="Search tokens or enter address (0x...)"
 					bind:value={searchQuery}
 					on:input={handleSearch}
 					class="token-search-input pl-10"
@@ -91,11 +160,50 @@
 			</div>
 
 			<div class="token-list max-h-80 overflow-y-auto">
-				{#if isSearching}
+				{#if isSearching || isValidatingCustomToken}
 					<div class="p-4 text-center text-gray-500 dark:text-gray-400">
-						<p>Searching tokens...</p>
+						<p>{isValidatingCustomToken ? 'Validating token...' : 'Searching tokens...'}</p>
 					</div>
 				{:else}
+					<!-- Custom token result (if found) -->
+					{#if customToken}
+						<div
+							class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 bg-yellow-50 border-l-4 border-l-yellow-500 dark:bg-yellow-900/20 dark:border-gray-600"
+							on:click={() => handleTokenSelect(customToken)}
+							on:keydown={(e) => e.key === 'Enter' && handleTokenSelect(customToken)}
+							role="button"
+							tabindex="0"
+						>
+							<div class="token-info flex-grow">
+								<div class="token-name font-medium text-gray-900 dark:text-white">
+									{customToken.name}
+								</div>
+								<div class="token-details flex gap-2 text-sm text-gray-500 dark:text-gray-400">
+									<span class="symbol font-medium">{customToken.symbol}</span>
+									<span class="address">{formatAddress(customToken.address)}</span>
+								</div>
+								<div class="flex items-center gap-1 mt-1">
+									<ExclamationTriangleSolid class="h-3 w-3 text-yellow-600" />
+									<span class="text-xs text-yellow-700 dark:text-yellow-400">Custom token (not in list)</span>
+								</div>
+							</div>
+							{#if selectedToken?.address === customToken.address}
+								<CheckCircleSolid class="selected-icon h-5 w-5 text-green-500" />
+							{/if}
+						</div>
+					{/if}
+
+					<!-- Custom token error -->
+					{#if customTokenError}
+						<div class="p-3 bg-red-50 border-l-4 border-l-red-500 dark:bg-red-900/20">
+							<div class="flex items-center gap-2 text-red-700 dark:text-red-400">
+								<ExclamationTriangleSolid class="h-4 w-4" />
+								<span class="text-sm">{customTokenError}</span>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Regular token list -->
 					{#each tokens as token (token.address)}
 						<div
 							class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 last:border-b-0 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700"
@@ -123,7 +231,7 @@
 						</div>
 					{/each}
 
-					{#if tokens.length === 0}
+					{#if tokens.length === 0 && !customToken && !customTokenError && !isValidAddress(searchQuery)}
 						<div class="no-results p-4 text-center text-gray-500 dark:text-gray-400">
 							<p>No tokens found matching your search.</p>
 							<button

From 653331d026b3ffa5ce44d2e4c6899c35fba44216 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 6 Sep 2025 08:02:20 +0000
Subject: [PATCH 3/5] Fix syntax errors and TypeScript issues in token
 selection components

Co-authored-by: hardyjosh <1190022+hardyjosh@users.noreply.github.com>
---
 .../components/deployment/TokenSelectionModal.svelte   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte b/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte
index 336d9453dd..2ddd97509e 100644
--- a/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte
+++ b/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Input, Button, Modal } from 'flowbite-svelte';
-	import { SearchOutline, CheckCircleSolid, ChevronDownSolid, ExclamationTriangleSolid } from 'flowbite-svelte-icons';
+	import { SearchOutline, CheckCircleSolid, ChevronDownSolid, ExclamationCircleSolid } from 'flowbite-svelte-icons';
 	import type { TokenInfo } from '@rainlanguage/orderbook';
 	import { useGui } from '$lib/hooks/useGui';
 	import { onMount, tick } from 'svelte';
@@ -169,8 +169,8 @@
 					{#if customToken}
 						<div
 							class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 bg-yellow-50 border-l-4 border-l-yellow-500 dark:bg-yellow-900/20 dark:border-gray-600"
-							on:click={() => handleTokenSelect(customToken)}
-							on:keydown={(e) => e.key === 'Enter' && handleTokenSelect(customToken)}
+							on:click={() => customToken && handleTokenSelect(customToken)}
+							on:keydown={(e) => e.key === 'Enter' && customToken && handleTokenSelect(customToken)}
 							role="button"
 							tabindex="0"
 						>
@@ -183,7 +183,7 @@
 									<span class="address">{formatAddress(customToken.address)}</span>
 								</div>
 								<div class="flex items-center gap-1 mt-1">
-									<ExclamationTriangleSolid class="h-3 w-3 text-yellow-600" />
+									<ExclamationCircleSolid class="h-3 w-3 text-yellow-600" />
 									<span class="text-xs text-yellow-700 dark:text-yellow-400">Custom token (not in list)</span>
 								</div>
 							</div>
@@ -197,7 +197,7 @@
 					{#if customTokenError}
 						<div class="p-3 bg-red-50 border-l-4 border-l-red-500 dark:bg-red-900/20">
 							<div class="flex items-center gap-2 text-red-700 dark:text-red-400">
-								<ExclamationTriangleSolid class="h-4 w-4" />
+								<ExclamationCircleSolid class="h-4 w-4" />
 								<span class="text-sm">{customTokenError}</span>
 							</div>
 						</div>

From 96c6c6ca33c75b8f9a1b217c4d686b560b030ea3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 6 Sep 2025 08:05:53 +0000
Subject: [PATCH 4/5] Update tests for unified token selection modal
 functionality

Co-authored-by: hardyjosh <1190022+hardyjosh@users.noreply.github.com>
---
 .../src/__tests__/SelectToken.test.ts         | 188 ++++--------------
 .../src/__tests__/TokenSelectionModal.test.ts | 114 ++++++++++-
 2 files changed, 144 insertions(+), 158 deletions(-)

diff --git a/packages/ui-components/src/__tests__/SelectToken.test.ts b/packages/ui-components/src/__tests__/SelectToken.test.ts
index 1b010f0f09..7e22c0ce00 100644
--- a/packages/ui-components/src/__tests__/SelectToken.test.ts
+++ b/packages/ui-components/src/__tests__/SelectToken.test.ts
@@ -78,7 +78,7 @@ describe('SelectToken', () => {
 		expect(getByText('Select a token...')).toBeInTheDocument();
 	});
 
-	it('calls setSelectToken and updates token info when input changes', async () => {
+	it('calls setSelectToken when token is selected from modal', async () => {
 		const user = userEvent.setup();
 		const mockGuiWithNoToken = {
 			...mockGui,
@@ -87,25 +87,29 @@ describe('SelectToken', () => {
 
 		(useGui as Mock).mockReturnValue(mockGuiWithNoToken);
 
-		const { getByTestId, getByRole } = render(SelectToken, {
+		const { getByText } = render(SelectToken, {
 			...mockProps
 		});
 
-		const customButton = getByTestId('custom-mode-button');
-		await user.click(customButton);
+		// Click the token selection button to open modal
+		const selectButton = getByText('Select a token...');
+		await user.click(selectButton);
 
-		const input = getByRole('textbox');
+		// Wait for modal to load tokens and then select one
+		await waitFor(() => {
+			expect(getByText('Test Token 1')).toBeInTheDocument();
+		});
 
-		await userEvent.clear(input);
-		await user.paste('0x456');
+		const firstToken = getByText('Test Token 1');
+		await user.click(firstToken);
 
 		await waitFor(() => {
-			expect(mockGuiWithNoToken.setSelectToken).toHaveBeenCalledWith('input', '0x456');
+			expect(mockGuiWithNoToken.setSelectToken).toHaveBeenCalledWith('input', '0x1234567890123456789012345678901234567890');
 		});
 		expect(mockStateUpdateCallback).toHaveBeenCalledTimes(1);
 	});
 
-	it('shows error message for invalid address, and removes the selectToken', async () => {
+	it('shows error message for invalid token selection', async () => {
 		const user = userEvent.setup();
 		const mockGuiWithError = {
 			...mockGui,
@@ -118,178 +122,54 @@ describe('SelectToken', () => {
 			...mockProps
 		});
 
-		const customButton = screen.getByTestId('custom-mode-button');
-		await user.click(customButton);
+		// Click the token selection button to open modal
+		const selectButton = screen.getByText('Select a token...');
+		await user.click(selectButton);
 
-		const input = screen.getByRole('textbox');
-		await userEvent.clear(input);
-		await user.paste('invalid');
+		// Wait for modal to load tokens and then select one
 		await waitFor(() => {
-			expect(screen.getByTestId('error')).toBeInTheDocument();
-		});
-	});
-
-	it('replaces the token and triggers state update twice if the token is already set', async () => {
-		const mockGuiWithTokenSet = {
-			...mockGui,
-			isSelectTokenSet: vi.fn().mockResolvedValue(true)
-		} as unknown as DotrainOrderGui;
-
-		(useGui as Mock).mockReturnValue(mockGuiWithTokenSet);
-
-		const user = userEvent.setup();
-
-		const { getByRole, getByTestId } = render(SelectToken, {
-			...mockProps
+			expect(screen.getByText('Test Token 1')).toBeInTheDocument();
 		});
 
-		const customButton = getByTestId('custom-mode-button');
-		await user.click(customButton);
+		const firstToken = screen.getByText('Test Token 1');
+		await user.click(firstToken);
 
-		const input = getByRole('textbox');
-		await userEvent.clear(input);
-		await user.paste('invalid');
 		await waitFor(() => {
-			expect(mockGuiWithTokenSet.setSelectToken).toHaveBeenCalled();
-			expect(mockStateUpdateCallback).toHaveBeenCalledTimes(1);
+			expect(screen.getByTestId('error')).toBeInTheDocument();
 		});
 	});
 
-	it('calls onSelectTokenSelect after input changes', async () => {
+	it('calls onSelectTokenSelect after token selection', async () => {
 		const user = userEvent.setup();
-		const { getByRole, getByTestId } = render(SelectToken, mockProps);
+		const { getByText } = render(SelectToken, mockProps);
 
-		const customButton = getByTestId('custom-mode-button');
-		await user.click(customButton);
+		// Click the token selection button to open modal
+		const selectButton = getByText('Select a token...');
+		await user.click(selectButton);
 
-		const input = getByRole('textbox');
+		// Wait for modal to load tokens and then select one
+		await waitFor(() => {
+			expect(getByText('Test Token 1')).toBeInTheDocument();
+		});
 
-		await userEvent.clear(input);
-		await user.paste('0x456');
+		const firstToken = getByText('Test Token 1');
+		await user.click(firstToken);
 
 		await waitFor(() => {
 			expect(mockProps.onSelectTokenSelect).toHaveBeenCalled();
 		});
 	});
 
-	describe('Dropdown Mode', () => {
+	describe('Token Selection', () => {
 		beforeEach(() => {
 			(useGui as Mock).mockReturnValue(mockGui);
 		});
 
-		it('shows dropdown and custom mode buttons when tokens are available', () => {
-			render(SelectToken, mockProps);
-
-			expect(screen.getByTestId('dropdown-mode-button')).toBeInTheDocument();
-			expect(screen.getByTestId('custom-mode-button')).toBeInTheDocument();
-		});
-
-		it('shows dropdown mode as active by default', () => {
-			render(SelectToken, mockProps);
-
-			const dropdownButton = screen.getByTestId('dropdown-mode-button');
-			const customButton = screen.getByTestId('custom-mode-button');
-
-			expect(dropdownButton).toHaveClass('border-blue-300');
-			expect(customButton).not.toHaveClass('border-blue-300');
-		});
-
-		it('switches to custom mode when custom button is clicked', async () => {
-			const user = userEvent.setup();
-			render(SelectToken, mockProps);
-
-			const customButton = screen.getByTestId('custom-mode-button');
-			await user.click(customButton);
-
-			expect(customButton).toHaveClass('border-blue-300');
-			expect(screen.getByTestId('dropdown-mode-button')).not.toHaveClass('border-blue-300');
-		});
-
-		it('shows TokenSelectionModal component in dropdown mode', () => {
+		it('shows token selection modal', () => {
 			render(SelectToken, mockProps);
-
 			expect(screen.getByText('Select a token...')).toBeInTheDocument();
 		});
 
-		it('shows custom input in custom mode', async () => {
-			const user = userEvent.setup();
-			render(SelectToken, mockProps);
-
-			const customButton = screen.getByTestId('custom-mode-button');
-			await user.click(customButton);
-
-			expect(screen.getByPlaceholderText('Enter token address (0x...)')).toBeInTheDocument();
-		});
-
-		it('clears state when switching from dropdown to custom mode', async () => {
-			const user = userEvent.setup();
-			const mockGuiNoToken = {
-				...mockGui,
-				getTokenInfo: vi.fn().mockResolvedValue({ value: null })
-			} as unknown as DotrainOrderGui;
-
-			(useGui as Mock).mockReturnValue(mockGuiNoToken);
-
-			render(SelectToken, {
-				...mockProps
-			});
-
-			const dropdownButton = screen.getByText('Select a token...');
-			await user.click(dropdownButton);
-
-			const firstToken = screen.getByText('Test Token 1');
-			await user.click(firstToken);
-
-			const customButton = screen.getByTestId('custom-mode-button');
-			await user.click(customButton);
-
-			const customInput = screen.getByPlaceholderText('Enter token address (0x...)');
-			expect(customInput).toHaveValue('');
-
-			expect(mockGuiNoToken.unsetSelectToken).toHaveBeenCalledWith('input');
-		});
-
-		it('clears state when switching from custom to dropdown mode', async () => {
-			const user = userEvent.setup();
-			render(SelectToken, mockProps);
-
-			const customButton = screen.getByTestId('custom-mode-button');
-			await user.click(customButton);
-
-			const customInput = screen.getByPlaceholderText('Enter token address (0x...)');
-			await user.type(customInput, '0x1234567890123456789012345678901234567890');
-
-			const dropdownButton = screen.getByTestId('dropdown-mode-button');
-			await user.click(dropdownButton);
-
-			expect(mockGui.unsetSelectToken).toHaveBeenCalledWith('input');
-		});
-
-		it('handles token selection from dropdown', async () => {
-			const user = userEvent.setup();
-			const mockGuiNoToken = {
-				...mockGui,
-				getTokenInfo: vi.fn().mockResolvedValue({ value: null })
-			} as unknown as DotrainOrderGui;
-
-			(useGui as Mock).mockReturnValue(mockGuiNoToken);
-
-			render(SelectToken, {
-				...mockProps
-			});
-
-			const dropdownButton = screen.getByText('Select a token...');
-			await user.click(dropdownButton);
-
-			const secondToken = screen.getByText('Another Token');
-			await user.click(secondToken);
-
-			expect(mockGuiNoToken.setSelectToken).toHaveBeenCalledWith(
-				'input',
-				'0x0987654321098765432109876543210987654321'
-			);
-		});
-
 		it('displays selected token info when token is selected', async () => {
 			mockGui.getTokenInfo = vi.fn().mockResolvedValue({
 				value: {
diff --git a/packages/ui-components/src/__tests__/TokenSelectionModal.test.ts b/packages/ui-components/src/__tests__/TokenSelectionModal.test.ts
index 0c8ad912da..4c8d67bde2 100644
--- a/packages/ui-components/src/__tests__/TokenSelectionModal.test.ts
+++ b/packages/ui-components/src/__tests__/TokenSelectionModal.test.ts
@@ -92,7 +92,7 @@ describe('TokenSelectionModal', () => {
 		const button = screen.getByRole('button');
 		await user.click(button);
 
-		expect(screen.getByPlaceholderText('Search tokens...')).toBeInTheDocument();
+		expect(screen.getByPlaceholderText('Search tokens or enter address (0x...)')).toBeInTheDocument();
 	});
 
 	it('loads tokens on mount', async () => {
@@ -155,7 +155,7 @@ describe('TokenSelectionModal', () => {
 		const button = screen.getByRole('button');
 		await user.click(button);
 
-		const searchInput = screen.getByPlaceholderText('Search tokens...');
+		const searchInput = screen.getByPlaceholderText('Search tokens or enter address (0x...)');
 		await user.type(searchInput, 'TEST');
 
 		await waitFor(() => {
@@ -183,7 +183,7 @@ describe('TokenSelectionModal', () => {
 		const button = screen.getByRole('button');
 		await user.click(button);
 
-		const searchInput = screen.getByPlaceholderText('Search tokens...');
+		const searchInput = screen.getByPlaceholderText('Search tokens or enter address (0x...)');
 		await user.type(searchInput, 'TEST');
 
 		expect(screen.getByText('Searching tokens...')).toBeInTheDocument();
@@ -252,8 +252,114 @@ describe('TokenSelectionModal', () => {
 		await user.click(button);
 
 		await waitFor(() => {
-			const searchInput = screen.getByPlaceholderText('Search tokens...');
+			const searchInput = screen.getByPlaceholderText('Search tokens or enter address (0x...)');
 			expect(searchInput).toHaveFocus();
 		});
 	});
+
+	it('validates custom token address when entered', async () => {
+		const mockGuiWithCustomToken = {
+			getAllTokens: vi.fn().mockResolvedValue({ value: [] }),
+			setSelectToken: vi.fn().mockResolvedValue(undefined),
+			getTokenInfo: vi.fn().mockResolvedValue({
+				value: {
+					address: '0x1234567890123456789012345678901234567890',
+					name: 'Custom Token',
+					symbol: 'CUSTOM',
+					decimals: 18
+				}
+			}),
+			unsetSelectToken: vi.fn().mockResolvedValue(undefined)
+		} as unknown as DotrainOrderGui;
+
+		(useGui as Mock).mockReturnValue(mockGuiWithCustomToken);
+
+		const user = userEvent.setup();
+		render(TokenSelectionModal, {
+			...defaultProps,
+			onSelect: mockOnSelect
+		});
+
+		const button = screen.getByRole('button');
+		await user.click(button);
+
+		const searchInput = screen.getByPlaceholderText('Search tokens or enter address (0x...)');
+		await user.type(searchInput, '0x1234567890123456789012345678901234567890');
+
+		await waitFor(() => {
+			expect(screen.getByText('Custom Token')).toBeInTheDocument();
+			expect(screen.getByText('Custom token (not in list)')).toBeInTheDocument();
+		});
+	});
+
+	it('shows error for invalid custom token address', async () => {
+		const mockGuiWithError = {
+			getAllTokens: vi.fn().mockResolvedValue({ value: [] }),
+			setSelectToken: vi.fn().mockRejectedValue(new Error('Invalid token address')),
+			unsetSelectToken: vi.fn().mockResolvedValue(undefined)
+		} as unknown as DotrainOrderGui;
+
+		(useGui as Mock).mockReturnValue(mockGuiWithError);
+
+		const user = userEvent.setup();
+		render(TokenSelectionModal, {
+			...defaultProps,
+			onSelect: mockOnSelect
+		});
+
+		const button = screen.getByRole('button');
+		await user.click(button);
+
+		const searchInput = screen.getByPlaceholderText('Search tokens or enter address (0x...)');
+		await user.type(searchInput, '0x1234567890123456789012345678901234567890');
+
+		await waitFor(() => {
+			expect(screen.getByText('Invalid token address')).toBeInTheDocument();
+		});
+	});
+
+	it('allows selection of custom token', async () => {
+		const mockGuiWithCustomToken = {
+			getAllTokens: vi.fn().mockResolvedValue({ value: [] }),
+			setSelectToken: vi.fn().mockResolvedValue(undefined),
+			getTokenInfo: vi.fn().mockResolvedValue({
+				value: {
+					address: '0x1234567890123456789012345678901234567890',
+					name: 'Custom Token',
+					symbol: 'CUSTOM',
+					decimals: 18
+				}
+			}),
+			unsetSelectToken: vi.fn().mockResolvedValue(undefined)
+		} as unknown as DotrainOrderGui;
+
+		(useGui as Mock).mockReturnValue(mockGuiWithCustomToken);
+
+		const user = userEvent.setup();
+		render(TokenSelectionModal, {
+			...defaultProps,
+			onSelect: mockOnSelect
+		});
+
+		const button = screen.getByRole('button');
+		await user.click(button);
+
+		const searchInput = screen.getByPlaceholderText('Search tokens or enter address (0x...)');
+		await user.type(searchInput, '0x1234567890123456789012345678901234567890');
+
+		await waitFor(() => {
+			expect(screen.getByText('Custom Token')).toBeInTheDocument();
+		});
+
+		const customTokenItem = screen.getByText('Custom Token');
+		await user.click(customTokenItem);
+
+		expect(mockOnSelect).toHaveBeenCalledWith({
+			key: 'temp-validation-token',
+			address: '0x1234567890123456789012345678901234567890',
+			name: 'Custom Token',
+			symbol: 'CUSTOM',
+			decimals: 18
+		});
+	});
 });

From a959ee3a4885f667c70af333a1fe2e0a5296cce9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 6 Sep 2025 08:09:50 +0000
Subject: [PATCH 5/5] Fix syntax issues and successfully build unified token
 selection components

Co-authored-by: hardyjosh <1190022+hardyjosh@users.noreply.github.com>
---
 .../components/deployment/SelectToken.svelte  | 204 ++++----
 .../deployment/TokenSelectionModal.svelte     | 494 +++++++++---------
 2 files changed, 349 insertions(+), 349 deletions(-)

diff --git a/packages/ui-components/src/lib/components/deployment/SelectToken.svelte b/packages/ui-components/src/lib/components/deployment/SelectToken.svelte
index f1fab6ef72..465917a356 100644
--- a/packages/ui-components/src/lib/components/deployment/SelectToken.svelte
+++ b/packages/ui-components/src/lib/components/deployment/SelectToken.svelte
@@ -1,116 +1,116 @@
 <script lang="ts">
-	import type { GuiSelectTokensCfg, TokenInfo } from '@rainlanguage/orderbook';
-	import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
-	import { Spinner } from 'flowbite-svelte';
-	import { onMount } from 'svelte';
-	import { useGui } from '$lib/hooks/useGui';
-	import TokenSelectionModal from './TokenSelectionModal.svelte';
-	import TokenBalanceComponent from './TokenBalance.svelte';
-	import type { TokenBalance } from '$lib/types/tokenBalance';
+  import type { GuiSelectTokensCfg, TokenInfo } from '@rainlanguage/orderbook';
+  import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
+  import { Spinner } from 'flowbite-svelte';
+  import { onMount } from 'svelte';
+  import { useGui } from '$lib/hooks/useGui';
+  import TokenSelectionModal from './TokenSelectionModal.svelte';
+  import TokenBalanceComponent from './TokenBalance.svelte';
+  import type { TokenBalance } from '$lib/types/tokenBalance';
 
-	export let token: GuiSelectTokensCfg;
-	export let onSelectTokenSelect: (key: string) => void;
-	export let tokenBalances: Map<string, TokenBalance> = new Map();
+  export let token: GuiSelectTokensCfg;
+  export let onSelectTokenSelect: (key: string) => void;
+  export let tokenBalances: Map<string, TokenBalance> = new Map();
 
-	let tokenInfo: TokenInfo | null = null;
-	let error = '';
-	let checking = false;
-	let selectedToken: TokenInfo | null = null;
+  let tokenInfo: TokenInfo | null = null;
+  let error = '';
+  let checking = false;
+  let selectedToken: TokenInfo | null = null;
 
-	const gui = useGui();
+  const gui = useGui();
 
-	onMount(async () => {
-		try {
-			let result = await gui.getTokenInfo(token.key);
-			if (result.error) {
-				throw new Error(result.error.msg);
-			}
-			tokenInfo = result.value;
-			if (result.value.address) {
-				selectedToken = result.value;
-				onSelectTokenSelect(token.key);
-			}
-		} catch {
-			// do nothing
-		}
-	});
+  onMount(async () => {
+    try {
+      let result = await gui.getTokenInfo(token.key);
+      if (result.error) {
+        throw new Error(result.error.msg);
+      }
+      tokenInfo = result.value;
+      if (result.value.address) {
+        selectedToken = result.value;
+        onSelectTokenSelect(token.key);
+      }
+    } catch {
+      // do nothing
+    }
+  });
 
-	function handleTokenSelect(token: TokenInfo) {
-		selectedToken = token;
-		saveTokenSelection(token.address);
-	}
+  function handleTokenSelect(token: TokenInfo) {
+    selectedToken = token;
+    saveTokenSelection(token.address);
+  }
 
-	async function saveTokenSelection(address: string) {
-		checking = true;
-		error = '';
-		try {
-			await gui.setSelectToken(token.key, address);
-			await getInfoForSelectedToken();
-		} catch (e) {
-			const errorMessage = (e as Error).message || 'Invalid token address.';
-			error = errorMessage;
-		} finally {
-			checking = false;
-			onSelectTokenSelect(token.key);
-		}
-	}
+  async function saveTokenSelection(address: string) {
+    checking = true;
+    error = '';
+    try {
+      await gui.setSelectToken(token.key, address);
+      await getInfoForSelectedToken();
+    } catch (e) {
+      const errorMessage = (e as Error).message || 'Invalid token address.';
+      error = errorMessage;
+    } finally {
+      checking = false;
+      onSelectTokenSelect(token.key);
+    }
+  }
 
-	async function getInfoForSelectedToken() {
-		error = '';
-		try {
-			let result = await gui.getTokenInfo(token.key);
-			if (result.error) {
-				throw new Error(result.error.msg);
-			}
-			tokenInfo = result.value;
-			selectedToken = result.value;
-			error = '';
-		} catch {
-			return (error = 'No token exists at this address.');
-		}
-	}
+  async function getInfoForSelectedToken() {
+    error = '';
+    try {
+      let result = await gui.getTokenInfo(token.key);
+      if (result.error) {
+        throw new Error(result.error.msg);
+      }
+      tokenInfo = result.value;
+      selectedToken = result.value;
+      error = '';
+    } catch {
+      error = 'No token exists at this address.';
+    }
+  }
 </script>
 
 <div class="token-selection-container flex w-full flex-col gap-4">
-	<div class="token-header">
-		{#if token.name || token.description}
-			<div class="flex flex-col">
-				{#if token.name}
-					<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-xl dark:text-white">
-						{token.name}
-					</h1>
-				{/if}
-				{#if token.description}
-					<p class="text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
-						{token.description}
-					</p>
-				{/if}
-			</div>
-		{/if}
-	</div>
+  <div class="token-header">
+    {#if token.name || token.description}
+      <div class="flex flex-col">
+        {#if token.name}
+          <h1 class="break-words text-xl font-semibold text-gray-900 lg:text-xl dark:text-white">
+            {token.name}
+          </h1>
+        {/if}
+        {#if token.description}
+          <p class="text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
+            {token.description}
+          </p>
+        {/if}
+      </div>
+    {/if}
+  </div>
 
-	<TokenSelectionModal {selectedToken} onSelect={handleTokenSelect} />
+  <TokenSelectionModal {selectedToken} onSelect={handleTokenSelect} />
 
-	<div class="token-status">
-		{#if checking}
-			<div class="flex h-5 flex-row items-center gap-2">
-				<Spinner class="h-5 w-5" />
-				<span>Checking...</span>
-			</div>
-		{:else if tokenInfo}
-			<div
-				class="flex h-5 flex-row items-center gap-2"
-				data-testid={`select-token-success-${token.key}`}
-			>
-				<CheckCircleSolid class="h-5 w-5" color="green" />
-				<span>{tokenInfo.name}</span>
-				<TokenBalanceComponent tokenBalance={tokenBalances.get(token.key)} />
-			</div>
-		{:else if error}
-			<div class="flex h-5 flex-row items-center gap-2" data-testid="error">
-				<CloseCircleSolid class="h-5 w-5" color="red" />
-				<span>{error}</span>
-			</div>
-		{/if}
-	</div>
+  <div class="token-status">
+    {#if checking}
+      <div class="flex h-5 flex-row items-center gap-2">
+        <Spinner class="h-5 w-5" />
+        <span>Checking...</span>
+      </div>
+    {:else if tokenInfo}
+      <div
+        class="flex h-5 flex-row items-center gap-2"
+        data-testid={`select-token-success-${token.key}`}
+      >
+        <CheckCircleSolid class="h-5 w-5" color="green" />
+        <span>{tokenInfo.name}</span>
+        <TokenBalanceComponent tokenBalance={tokenBalances.get(token.key)} />
+      </div>
+    {:else if error}
+      <div class="flex h-5 flex-row items-center gap-2" data-testid="error">
+        <CloseCircleSolid class="h-5 w-5" color="red" />
+        <span>{error}</span>
+      </div>
+    {/if}
+  </div>
 </div>
diff --git a/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte b/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte
index 2ddd97509e..0e2285c403 100644
--- a/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte
+++ b/packages/ui-components/src/lib/components/deployment/TokenSelectionModal.svelte
@@ -1,252 +1,252 @@
 <script lang="ts">
-	import { Input, Button, Modal } from 'flowbite-svelte';
-	import { SearchOutline, CheckCircleSolid, ChevronDownSolid, ExclamationCircleSolid } from 'flowbite-svelte-icons';
-	import type { TokenInfo } from '@rainlanguage/orderbook';
-	import { useGui } from '$lib/hooks/useGui';
-	import { onMount, tick } from 'svelte';
-
-	export let selectedToken: TokenInfo | null = null;
-	export let onSelect: (token: TokenInfo) => void;
-
-	let modalOpen = false;
-	let searchQuery = '';
-	let tokens: TokenInfo[] = [];
-	let isSearching = false;
-	let customToken: TokenInfo | null = null;
-	let customTokenError = '';
-	let isValidatingCustomToken = false;
-
-	const gui = useGui();
-
-	async function loadTokens(search?: string) {
-		isSearching = true;
-		customToken = null;
-		customTokenError = '';
-
-		const result = await gui.getAllTokens(search);
-		if (result.error) {
-			tokens = [];
-		} else {
-			tokens = result.value;
-		}
-
-		isSearching = false;
-	}
-
-	function isValidAddress(address: string): boolean {
-		return /^0x[a-fA-F0-9]{40}$/.test(address);
-	}
-
-	async function validateCustomToken(address: string) {
-		if (!isValidAddress(address)) {
-			customTokenError = 'Invalid address format';
-			return;
-		}
-
-		isValidatingCustomToken = true;
-		customTokenError = '';
-		customToken = null;
-
-		try {
-			// Create a temporary token key for validation
-			const tempKey = 'temp-validation-token';
-			
-			// Try to set the token which will validate and fetch info
-			await gui.setSelectToken(tempKey, address);
-			
-			// Get the token info
-			const result = await gui.getTokenInfo(tempKey);
-			if (result.error) {
-				throw new Error(result.error.msg);
-			}
-
-			// Create custom token info
-			const tokenInfo = result.value;
-			customToken = {
-				key: tempKey,
-				address: tokenInfo.address,
-				decimals: tokenInfo.decimals,
-				name: tokenInfo.name,
-				symbol: tokenInfo.symbol
-			};
-
-			// Clean up - unset the temporary token
-			await gui.unsetSelectToken(tempKey);
-		} catch (error) {
-			customTokenError = (error as Error).message || 'Invalid token address';
-			customToken = null;
-		} finally {
-			isValidatingCustomToken = false;
-		}
-	}
-
-	async function handleSearch(event: Event) {
-		const target = event.target as HTMLInputElement;
-		searchQuery = target.value;
-		
-		// Check if the input looks like an address
-		if (isValidAddress(searchQuery)) {
-			// Load normal tokens first
-			await loadTokens();
-			// Then validate the custom address
-			await validateCustomToken(searchQuery);
-		} else {
-			// Normal search
-			customToken = null;
-			customTokenError = '';
-			await loadTokens(searchQuery || undefined);
-		}
-	}
-
-	onMount(() => loadTokens());
-
-	function formatAddress(address: string): string {
-		return `${address.slice(0, 6)}...${address.slice(-4)}`;
-	}
-
-	function handleTokenSelect(token: TokenInfo) {
-		onSelect(token);
-		modalOpen = false;
-	}
-
-	$: displayText = selectedToken
-		? `${selectedToken.name} (${selectedToken.symbol})`
-		: 'Select a token...';
-
-	$: if (modalOpen) {
-		tick().then(() => {
-			const input = document.querySelector('.token-search-input') as HTMLInputElement;
-			if (input) {
-				input.focus();
-			}
-		});
-		// Reset search state when modal opens
-		searchQuery = '';
-		customToken = null;
-		customTokenError = '';
-		loadTokens();
-	}
+  import { Input, Button, Modal } from 'flowbite-svelte';
+  import { SearchOutline, CheckCircleSolid, ChevronDownSolid, ExclamationCircleSolid } from 'flowbite-svelte-icons';
+  import type { TokenInfo } from '@rainlanguage/orderbook';
+  import { useGui } from '$lib/hooks/useGui';
+  import { onMount, tick } from 'svelte';
+
+  export let selectedToken: TokenInfo | null = null;
+  export let onSelect: (token: TokenInfo) => void;
+
+  let modalOpen = false;
+  let searchQuery = '';
+  let tokens: TokenInfo[] = [];
+  let isSearching = false;
+  let customToken: TokenInfo | null = null;
+  let customTokenError = '';
+  let isValidatingCustomToken = false;
+
+  const gui = useGui();
+
+  async function loadTokens(search?: string) {
+    isSearching = true;
+    customToken = null;
+    customTokenError = '';
+
+    const result = await gui.getAllTokens(search);
+    if (result.error) {
+      tokens = [];
+    } else {
+      tokens = result.value;
+    }
+
+    isSearching = false;
+  }
+
+  function isValidAddress(address: string): boolean {
+    return /^0x[a-fA-F0-9]{40}$/.test(address);
+  }
+
+  async function validateCustomToken(address: string) {
+    if (!isValidAddress(address)) {
+      customTokenError = 'Invalid address format';
+      return;
+    }
+
+    isValidatingCustomToken = true;
+    customTokenError = '';
+    customToken = null;
+
+    try {
+      // Create a temporary token key for validation
+      const tempKey = 'temp-validation-token';
+      
+      // Try to set the token which will validate and fetch info
+      await gui.setSelectToken(tempKey, address);
+      
+      // Get the token info
+      const result = await gui.getTokenInfo(tempKey);
+      if (result.error) {
+        throw new Error(result.error.msg);
+      }
+
+      // Create custom token info
+      const tokenInfo = result.value;
+      customToken = {
+        key: tempKey,
+        address: tokenInfo.address,
+        decimals: tokenInfo.decimals,
+        name: tokenInfo.name,
+        symbol: tokenInfo.symbol
+      };
+
+      // Clean up - unset the temporary token
+      await gui.unsetSelectToken(tempKey);
+    } catch (error) {
+      customTokenError = (error as Error).message || 'Invalid token address';
+      customToken = null;
+    } finally {
+      isValidatingCustomToken = false;
+    }
+  }
+
+  async function handleSearch(event: Event) {
+    const target = event.target as HTMLInputElement;
+    searchQuery = target.value;
+    
+    // Check if the input looks like an address
+    if (isValidAddress(searchQuery)) {
+      // Load normal tokens first
+      await loadTokens();
+      // Then validate the custom address
+      await validateCustomToken(searchQuery);
+    } else {
+      // Normal search
+      customToken = null;
+      customTokenError = '';
+      await loadTokens(searchQuery || undefined);
+    }
+  }
+
+  onMount(() => loadTokens());
+
+  function formatAddress(address: string): string {
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  }
+
+  function handleTokenSelect(token: TokenInfo) {
+    onSelect(token);
+    modalOpen = false;
+  }
+
+  $: displayText = selectedToken
+    ? `${selectedToken.name} (${selectedToken.symbol})`
+    : 'Select a token...';
+
+  $: if (modalOpen) {
+    tick().then(() => {
+      const input = document.querySelector('.token-search-input') as HTMLInputElement;
+      if (input) {
+        input.focus();
+      }
+    });
+    // Reset search state when modal opens
+    searchQuery = '';
+    customToken = null;
+    customTokenError = '';
+    loadTokens();
+  }
 </script>
 
 <div class="token-dropdown">
-	<div class="relative w-full">
-		<Button
-			color="alternative"
-			class="flex w-full justify-between overflow-hidden overflow-ellipsis pl-4 pr-2 text-left"
-			size="lg"
-			on:click={() => (modalOpen = true)}
-		>
-			<div class="flex-grow overflow-hidden">
-				<span class="text-gray-900 dark:text-white">{displayText}</span>
-			</div>
-			<ChevronDownSolid class="ml-2 h-4 w-4 text-black dark:text-white" />
-		</Button>
-
-		<Modal bind:open={modalOpen} size="md" class="w-full max-w-lg">
-			<div slot="header" class="flex w-full items-center justify-between">
-				<h3 class="text-xl font-medium text-gray-900 dark:text-white">Select a token</h3>
-			</div>
-			<div class="relative w-full border-b border-gray-200 p-2 dark:border-gray-600">
-				<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-5">
-					<SearchOutline class="h-4 w-4 text-gray-500 dark:text-gray-400" />
-				</div>
-				<Input
-					type="text"
-					placeholder="Search tokens or enter address (0x...)"
-					bind:value={searchQuery}
-					on:input={handleSearch}
-					class="token-search-input pl-10"
-				/>
-			</div>
-
-			<div class="token-list max-h-80 overflow-y-auto">
-				{#if isSearching || isValidatingCustomToken}
-					<div class="p-4 text-center text-gray-500 dark:text-gray-400">
-						<p>{isValidatingCustomToken ? 'Validating token...' : 'Searching tokens...'}</p>
-					</div>
-				{:else}
-					<!-- Custom token result (if found) -->
-					{#if customToken}
-						<div
-							class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 bg-yellow-50 border-l-4 border-l-yellow-500 dark:bg-yellow-900/20 dark:border-gray-600"
-							on:click={() => customToken && handleTokenSelect(customToken)}
-							on:keydown={(e) => e.key === 'Enter' && customToken && handleTokenSelect(customToken)}
-							role="button"
-							tabindex="0"
-						>
-							<div class="token-info flex-grow">
-								<div class="token-name font-medium text-gray-900 dark:text-white">
-									{customToken.name}
-								</div>
-								<div class="token-details flex gap-2 text-sm text-gray-500 dark:text-gray-400">
-									<span class="symbol font-medium">{customToken.symbol}</span>
-									<span class="address">{formatAddress(customToken.address)}</span>
-								</div>
-								<div class="flex items-center gap-1 mt-1">
-									<ExclamationCircleSolid class="h-3 w-3 text-yellow-600" />
-									<span class="text-xs text-yellow-700 dark:text-yellow-400">Custom token (not in list)</span>
-								</div>
-							</div>
-							{#if selectedToken?.address === customToken.address}
-								<CheckCircleSolid class="selected-icon h-5 w-5 text-green-500" />
-							{/if}
-						</div>
-					{/if}
-
-					<!-- Custom token error -->
-					{#if customTokenError}
-						<div class="p-3 bg-red-50 border-l-4 border-l-red-500 dark:bg-red-900/20">
-							<div class="flex items-center gap-2 text-red-700 dark:text-red-400">
-								<ExclamationCircleSolid class="h-4 w-4" />
-								<span class="text-sm">{customTokenError}</span>
-							</div>
-						</div>
-					{/if}
-
-					<!-- Regular token list -->
-					{#each tokens as token (token.address)}
-						<div
-							class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 last:border-b-0 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700"
-							class:bg-blue-50={selectedToken?.address === token.address}
-							class:dark:bg-blue-900={selectedToken?.address === token.address}
-							class:border-l-4={selectedToken?.address === token.address}
-							class:border-l-blue-500={selectedToken?.address === token.address}
-							on:click={() => handleTokenSelect(token)}
-							on:keydown={(e) => e.key === 'Enter' && handleTokenSelect(token)}
-							role="button"
-							tabindex="0"
-						>
-							<div class="token-info flex-grow">
-								<div class="token-name font-medium text-gray-900 dark:text-white">
-									{token.name}
-								</div>
-								<div class="token-details flex gap-2 text-sm text-gray-500 dark:text-gray-400">
-									<span class="symbol font-medium">{token.symbol}</span>
-									<span class="address">{formatAddress(token.address)}</span>
-								</div>
-							</div>
-							{#if selectedToken?.address === token.address}
-								<CheckCircleSolid class="selected-icon h-5 w-5 text-green-500" />
-							{/if}
-						</div>
-					{/each}
-
-					{#if tokens.length === 0 && !customToken && !customTokenError && !isValidAddress(searchQuery)}
-						<div class="no-results p-4 text-center text-gray-500 dark:text-gray-400">
-							<p>No tokens found matching your search.</p>
-							<button
-								class="mt-2 text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
-								on:click={() => {
-									searchQuery = '';
-									loadTokens();
-								}}
-							>
-								Clear search
-							</button>
-						</div>
-					{/if}
-				{/if}
-			</div>
-		</Modal>
-	</div>
+  <div class="relative w-full">
+    <Button
+      color="alternative"
+      class="flex w-full justify-between overflow-hidden overflow-ellipsis pl-4 pr-2 text-left"
+      size="lg"
+      on:click={() => (modalOpen = true)}
+    >
+      <div class="flex-grow overflow-hidden">
+        <span class="text-gray-900 dark:text-white">{displayText}</span>
+      </div>
+      <ChevronDownSolid class="ml-2 h-4 w-4 text-black dark:text-white" />
+    </Button>
+
+    <Modal bind:open={modalOpen} size="md" class="w-full max-w-lg">
+      <div slot="header" class="flex w-full items-center justify-between">
+        <h3 class="text-xl font-medium text-gray-900 dark:text-white">Select a token</h3>
+      </div>
+      <div class="relative w-full border-b border-gray-200 p-2 dark:border-gray-600">
+        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-5">
+          <SearchOutline class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+        </div>
+        <Input
+          type="text"
+          placeholder="Search tokens or enter address (0x...)"
+          bind:value={searchQuery}
+          on:input={handleSearch}
+          class="token-search-input pl-10"
+        />
+      </div>
+
+      <div class="token-list max-h-80 overflow-y-auto">
+        {#if isSearching || isValidatingCustomToken}
+          <div class="p-4 text-center text-gray-500 dark:text-gray-400">
+            <p>{isValidatingCustomToken ? 'Validating token...' : 'Searching tokens...'}</p>
+          </div>
+        {:else}
+          <!-- Custom token result (if found) -->
+          {#if customToken}
+            <div
+              class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 bg-yellow-50 border-l-4 border-l-yellow-500 dark:bg-yellow-900/20 dark:border-gray-600"
+              on:click={() => customToken && handleTokenSelect(customToken)}
+              on:keydown={(e) => e.key === 'Enter' && customToken && handleTokenSelect(customToken)}
+              role="button"
+              tabindex="0"
+            >
+              <div class="token-info flex-grow">
+                <div class="token-name font-medium text-gray-900 dark:text-white">
+                  {customToken.name}
+                </div>
+                <div class="token-details flex gap-2 text-sm text-gray-500 dark:text-gray-400">
+                  <span class="symbol font-medium">{customToken.symbol}</span>
+                  <span class="address">{formatAddress(customToken.address)}</span>
+                </div>
+                <div class="flex items-center gap-1 mt-1">
+                  <ExclamationCircleSolid class="h-3 w-3 text-yellow-600" />
+                  <span class="text-xs text-yellow-700 dark:text-yellow-400">Custom token (not in list)</span>
+                </div>
+              </div>
+              {#if selectedToken?.address === customToken.address}
+                <CheckCircleSolid class="selected-icon h-5 w-5 text-green-500" />
+              {/if}
+            </div>
+          {/if}
+
+          <!-- Custom token error -->
+          {#if customTokenError}
+            <div class="p-3 bg-red-50 border-l-4 border-l-red-500 dark:bg-red-900/20">
+              <div class="flex items-center gap-2 text-red-700 dark:text-red-400">
+                <ExclamationCircleSolid class="h-4 w-4" />
+                <span class="text-sm">{customTokenError}</span>
+              </div>
+            </div>
+          {/if}
+
+          <!-- Regular token list -->
+          {#each tokens as token (token.address)}
+            <div
+              class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 last:border-b-0 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700"
+              class:bg-blue-50={selectedToken?.address === token.address}
+              class:dark:bg-blue-900={selectedToken?.address === token.address}
+              class:border-l-4={selectedToken?.address === token.address}
+              class:border-l-blue-500={selectedToken?.address === token.address}
+              on:click={() => handleTokenSelect(token)}
+              on:keydown={(e) => e.key === 'Enter' && handleTokenSelect(token)}
+              role="button"
+              tabindex="0"
+            >
+              <div class="token-info flex-grow">
+                <div class="token-name font-medium text-gray-900 dark:text-white">
+                  {token.name}
+                </div>
+                <div class="token-details flex gap-2 text-sm text-gray-500 dark:text-gray-400">
+                  <span class="symbol font-medium">{token.symbol}</span>
+                  <span class="address">{formatAddress(token.address)}</span>
+                </div>
+              </div>
+              {#if selectedToken?.address === token.address}
+                <CheckCircleSolid class="selected-icon h-5 w-5 text-green-500" />
+              {/if}
+            </div>
+          {/each}
+
+          {#if tokens.length === 0 && !customToken && !customTokenError && !isValidAddress(searchQuery)}
+            <div class="no-results p-4 text-center text-gray-500 dark:text-gray-400">
+              <p>No tokens found matching your search.</p>
+              <button
+                class="mt-2 text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                on:click={() => {
+                  searchQuery = '';
+                  loadTokens();
+                }}
+              >
+                Clear search
+              </button>
+            </div>
+          {/if}
+        {/if}
+      </div>
+    </Modal>
+  </div>
 </div>