bring in modal

packages/ui-components/src/lib/components/detail/VaultDetail.svelte

@@ -13,26 +13,36 @@
 	import { createQuery } from '@tanstack/svelte-query';
 
 	import { onDestroy } from 'svelte';
-	import type { Readable } from 'svelte/store';
+	import type { Readable, Writable } from 'svelte/store';
 	import { queryClient } from '../../queries/queryClient';
 
 	import { ArrowDownOutline, ArrowUpOutline } from 'flowbite-svelte-icons';
 	import type { Vault } from '@rainlanguage/orderbook/js_api';
 	import OrderOrVaultHash from '../OrderOrVaultHash.svelte';
 	import type { AppStoresInterface } from '../../types/appStores';
+	import type { Config } from 'wagmi';
 
 	export let id: string;
 	export let network: string;
 	export let walletAddressMatchesOrBlank: Readable<(otherAddress: string) => boolean> | undefined =
 		undefined;
+	// Tauri App modals
 	export let handleDepositModal: ((vault: Vault, onDeposit: () => void) => void) | undefined =
 		undefined;
 	export let handleWithdrawModal: ((vault: Vault, onWithdraw: () => void) => void) | undefined =
 		undefined;
+	// Wagmi modals
+	export let handleDepositOrWithdrawModal: (args: {
+		vault: Vault;
+		onDepositOrWithdraw: () => void;
+		action: 'deposit' | 'withdraw';
+		subgraphUrl: string;
+	}) => void;
 	export let lightweightChartsTheme: Readable<ChartTheme> | undefined = undefined;
 	export let activeNetworkRef: AppStoresInterface['activeNetworkRef'];
 	export let activeOrderbookRef: AppStoresInterface['activeOrderbookRef'];
 	export let settings;
+	export let wagmiConfig: Writable<Config> | undefined = undefined;
 
 	const subgraphUrl = $settings?.subgraphs?.[network] || '';
 
@@ -73,7 +83,30 @@
 			{data.token.name}
 		</div>
 		<div>
-			{#if handleDepositModal && handleWithdrawModal && $walletAddressMatchesOrBlank?.(data.owner)}
+			{#if $wagmiConfig}
+				<Button
+					data-testid="vaultDetailDepositButton"
+					color="dark"
+					on:click={() =>
+						handleDepositOrWithdrawModal({
+							vault: data,
+							onDepositOrWithdraw: $vaultDetailQuery.refetch,
+							action: 'deposit',
+							subgraphUrl
+						})}><ArrowDownOutline size="xs" class="mr-2" />Deposit</Button
+				>
+				<Button
+					data-testid="vaultDetailDepositButton"
+					color="dark"
+					on:click={() =>
+						handleDepositOrWithdrawModal({
+							vault: data,
+							onDepositOrWithdraw: $vaultDetailQuery.refetch,
+							action: 'withdraw',
+							subgraphUrl
+						})}><ArrowUpOutline size="xs" class="mr-2" />Withdraw</Button
+				>
+			{:else if handleDepositModal && handleWithdrawModal && $walletAddressMatchesOrBlank?.(data.owner)}
 				<Button
 					data-testid="vaultDetailDepositButton"
 					color="dark"

packages/ui-components/src/lib/stores/transactionStore.ts

@@ -4,7 +4,9 @@ import type { Config } from '@wagmi/core';
 import { sendTransaction, switchChain, waitForTransactionReceipt } from '@wagmi/core';
 import type {
 	ApprovalCalldata,
-	DepositAndAddOrderCalldataResult
+	DepositAndAddOrderCalldataResult,
+	DepositCalldataResult,
+	WithdrawalCalldataResult
 } from '@rainlanguage/orderbook/js_api';
 
 export const ADDRESS_ZERO = '0x0000000000000000000000000000000000000000';
@@ -41,6 +43,12 @@ export type DeploymentTransactionArgs = {
 	chainId: number;
 };
 
+export type DepositOrWithdrawTransactionArgs = {
+	config: Config;
+	calldata: DepositCalldataResult | WithdrawalCalldataResult;
+	chainId: number;
+};
+
 export type TransactionState = {
 	status: TransactionStatus;
 	error: string;
@@ -167,10 +175,19 @@ const transactionStore = () => {
 		}
 	};
 
+	const handleDepositOrWithdrawTransaction = async (config, calldata, chainId) => {
+		try {
+			await switchChain(config, { chainId });
+		} catch {
+			return transactionError(TransactionErrorMessage.SWITCH_CHAIN_FAILED);
+		}
+	};
+
 	return {
 		subscribe,
 		reset,
 		handleDeploymentTransaction,
+		handleDepositOrWithdrawTransaction,
 		checkingWalletAllowance,
 		awaitWalletConfirmation,
 		awaitApprovalTx,

packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { transactionStore, InputTokenAmount } from '@rainlanguage/ui-components';
+	import type { Hex } from 'viem';
+	import {
+		getVaultDepositCalldata,
+		getVaultWithdrawCalldata,
+		type ApprovalCalldataResult,
+		type DepositAndAddOrderCalldataResult,
+		type Vault
+	} from '@rainlanguage/orderbook/js_api';
+	import { wagmiConfig } from '$lib/stores/wagmi';
+	import { Modal, Button, Toggle } from 'flowbite-svelte';
+	import TransactionModal from './TransactionModal.svelte';
+
+	export let open: boolean;
+	export let vault: Vault;
+	export let action: 'deposit' | 'withdraw';
+	export let subgraphUrl: string;
+	export let onDepositOrWithdraw: () => void;
+
+	$: console.log(vault);
+
+	let currentStep = 1;
+	let amount: bigint = 0n;
+	let isDeposit = true;
+
+	const messages = {
+		success: 'Your transaction was successful.',
+		pending: 'Processing your transaction...',
+		error: 'Transaction failed.'
+	};
+
+	// async function executeWalletconnect() {
+	// 	isSubmitting = true;
+	// 	try {
+	// 		if (!$orderbookAddress) throw Error('Select an orderbook to deposit');
+	// 		const allowance = await checkAllowance(vault.token.id, $orderbookAddress);
+	// 		if (allowance.lt(amount)) {
+	// 			const approveCalldata = (await vaultDepositApproveCalldata(
+	// 				BigInt(vault.vaultId),
+	// 				vault.token.id,
+	// 				amount,
+	// 				allowance.toBigInt()
+	// 			)) as Uint8Array;
+	// 			const approveTx = await ethersExecute(approveCalldata, vault.token.id);
+	// 			toasts.success('Approve Transaction sent successfully!');
+	// 			await approveTx.wait(1);
+	// 		}
+
+	// 		const depositCalldata = (await vaultDepositCalldata(
+	// 			BigInt(vault.vaultId),
+	// 			vault.token.id,
+	// 			amount
+	// 		)) as Uint8Array;
+	// 		const depositTx = await ethersExecute(depositCalldata, $orderbookAddress);
+	// 		toasts.success('Transaction sent successfully!');
+	// 		await depositTx.wait(1);
+	// 		onDeposit();
+	// 	} catch (e) {
+	// 		reportErrorToSentry(e);
+	// 		toasts.error(formatEthersTransactionError(e));
+	// 	}
+	// 	isSubmitting = false;
+	// 	reset();
+	// }
+
+	function handleContinue() {
+		// const calldata = getVaultDepositCalldata({
+		//     subgraphUrl
+		// 	deploymentCalldata,
+		// 	amount
+		// });
+		// if (amount > 0n) {
+		// 	currentStep = 2;
+		// 	transactionStore.handleDepositOrWithdrawTransaction({
+		// 		config: $wagmiConfig,
+		// 		chainId,
+		// 		amount,
+		// 		isDeposit
+		// 	});
+		// }
+	}
+
+	function handleClose() {
+		open = false;
+		currentStep = 1;
+		amount = 0n;
+	}
+</script>
+
+{#if currentStep === 1}
+	<Modal bind:open autoclose={false} size="md">
+		<div class="space-y-6">
+			<div class="flex flex-col gap-4">
+				<h3 class="text-xl font-medium">Enter Amount</h3>
+				<Toggle bind:checked={isDeposit}>
+					{isDeposit ? 'Deposit' : 'Withdraw'}
+				</Toggle>
+			</div>
+			<!-- <TokenAmountInput bind:value={amount} {symbol} {decimals} {maxValue} /> -->
+			<div class="flex justify-end gap-2">
+				<Button color="alternative" on:click={handleClose}>Cancel</Button>
+				<Button color="blue" on:click={handleContinue} disabled={amount <= 0n}>
+					{isDeposit ? 'Deposit' : 'Withdraw'}
+				</Button>
+			</div>
+		</div>
+	</Modal>
+{:else}
+	<TransactionModal bind:open {messages} on:close={handleClose} />
+{/if}

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 lg:hidden dark:border-gray-700"
+				class="absolute right-3 top-2 z-20 flex size-8 items-center border dark:border-gray-700 lg:hidden"
 				on:click={() => (sideBarHidden = true)}
 			/>
 		{/if}

packages/webapp/src/lib/services/modal.ts

@@ -1,7 +1,9 @@
 import DeployModal from '$lib/components/DeployModal.svelte';
+import DepositOrWithdrawModal from '$lib/components/DepositOrWithdrawModal.svelte';
 import type {
 	ApprovalCalldataResult,
-	DepositAndAddOrderCalldataResult
+	DepositAndAddOrderCalldataResult,
+	Vault
 } from '@rainlanguage/orderbook/js_api';
 import type { Hex } from 'viem';
 
@@ -12,6 +14,17 @@ export type DeployModalProps = {
 	chainId: number;
 };
 
+export type DepositOrWithdrawModalProps = {
+	vault: Vault;
+	onDepositOrWithdraw: () => void;
+	action: 'deposit' | 'withdraw';
+	subgraphUrl: string;
+};
+
 export const handleDeployModal = (args: DeployModalProps) => {
 	new DeployModal({ target: document.body, props: { open: true, ...args } });
 };
+
+export const handleDepositOrWithdrawModal = (args: DepositOrWithdrawModalProps) => {
+	new DepositOrWithdrawModal({ target: document.body, props: { open: true, ...args } });
+};

packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte

@@ -2,7 +2,8 @@
 	import { PageHeader } from '@rainlanguage/ui-components';
 	import { page } from '$app/stores';
 	import { VaultDetail } from '@rainlanguage/ui-components';
-
+	import { wagmiConfig } from '$lib/stores/wagmi';
+	import { handleDepositOrWithdrawModal } from '$lib/services/modal';
 	const { settings, activeOrderbookRef, activeNetworkRef, lightweightChartsTheme } =
 		$page.data.stores;
 </script>
@@ -16,4 +17,6 @@
 	{settings}
 	{activeNetworkRef}
 	{activeOrderbookRef}
+	{wagmiConfig}
+	{handleDepositOrWithdrawModal}
 />