From 3e288c4cfd4d3c1766bb353d027fbdbf11645c6b Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Mon, 10 Feb 2025 16:00:08 +0100
Subject: [PATCH 01/25] Add getTransaction

---
 crates/js_api/src/subgraph/mod.rs             |  1 +
 crates/js_api/src/subgraph/transaction.rs     | 16 ++++++++++
 crates/subgraph/src/orderbook_client.rs       | 14 +++++++++
 crates/subgraph/src/types/mod.rs              |  1 +
 crates/subgraph/src/types/transaction.rs      | 12 +++++++
 .../orderbook/test/js_api/transaction.test.ts | 31 +++++++++++++++++++
 6 files changed, 75 insertions(+)
 create mode 100644 crates/js_api/src/subgraph/transaction.rs
 create mode 100644 crates/subgraph/src/types/transaction.rs
 create mode 100644 packages/orderbook/test/js_api/transaction.test.ts

diff --git a/crates/js_api/src/subgraph/mod.rs b/crates/js_api/src/subgraph/mod.rs
index 3241b9c16..7df2bad7f 100644
--- a/crates/js_api/src/subgraph/mod.rs
+++ b/crates/js_api/src/subgraph/mod.rs
@@ -8,6 +8,7 @@ use thiserror::Error;
 use wasm_bindgen::{JsError, JsValue};
 
 pub mod order;
+pub mod transaction;
 pub mod vault;
 
 #[derive(Error, Debug)]
diff --git a/crates/js_api/src/subgraph/transaction.rs b/crates/js_api/src/subgraph/transaction.rs
new file mode 100644
index 000000000..d629860b4
--- /dev/null
+++ b/crates/js_api/src/subgraph/transaction.rs
@@ -0,0 +1,16 @@
+use cynic::Id;
+use rain_orderbook_bindings::wasm_traits::prelude::*;
+use rain_orderbook_subgraph_client::{OrderbookSubgraphClient, OrderbookSubgraphClientError};
+use reqwest::Url;
+
+/// Internal function to fetch a single transaction
+/// Returns the Transaction struct
+#[wasm_bindgen(js_name = "getTransaction")]
+pub async fn get_sg_transaction(
+    url: &str,
+    id: &str,
+) -> Result<JsValue, OrderbookSubgraphClientError> {
+    let client = OrderbookSubgraphClient::new(Url::parse(url)?);
+    let transaction = client.transaction_detail(Id::new(id)).await?;
+    Ok(to_value(&transaction)?)
+}
diff --git a/crates/subgraph/src/orderbook_client.rs b/crates/subgraph/src/orderbook_client.rs
index fbcb74ac5..4d83760e5 100644
--- a/crates/subgraph/src/orderbook_client.rs
+++ b/crates/subgraph/src/orderbook_client.rs
@@ -8,6 +8,7 @@ use crate::types::order::{
     OrdersListQuery,
 };
 use crate::types::order_trade::{OrderTradeDetailQuery, OrderTradesListQuery};
+use crate::types::transaction::TransactionDetailQuery;
 use crate::types::vault::{VaultDetailQuery, VaultsListQuery};
 use crate::vault_balance_changes_query::VaultBalanceChangesListPageQueryClient;
 use cynic::Id;
@@ -379,4 +380,17 @@ impl OrderbookSubgraphClient {
         }
         Ok(all_pages_merged)
     }
+
+    pub async fn transaction_detail(
+        &self,
+        id: Id,
+    ) -> Result<Transaction, OrderbookSubgraphClientError> {
+        let data = self
+            .query::<TransactionDetailQuery, IdQueryVariables>(IdQueryVariables { id: &id })
+            .await?;
+        let transaction = data
+            .transaction
+            .ok_or(OrderbookSubgraphClientError::Empty)?;
+        Ok(transaction)
+    }
 }
diff --git a/crates/subgraph/src/types/mod.rs b/crates/subgraph/src/types/mod.rs
index b653da9b9..aa590dc15 100644
--- a/crates/subgraph/src/types/mod.rs
+++ b/crates/subgraph/src/types/mod.rs
@@ -3,6 +3,7 @@ mod impls;
 pub mod order;
 pub mod order_detail_traits;
 pub mod order_trade;
+pub mod transaction;
 pub mod vault;
 
 pub use cynic::Id;
diff --git a/crates/subgraph/src/types/transaction.rs b/crates/subgraph/src/types/transaction.rs
new file mode 100644
index 000000000..7344b5f23
--- /dev/null
+++ b/crates/subgraph/src/types/transaction.rs
@@ -0,0 +1,12 @@
+use super::common::*;
+use crate::schema;
+use typeshare::typeshare;
+
+#[derive(cynic::QueryFragment, Debug)]
+#[cynic(graphql_type = "Query", variables = "IdQueryVariables")]
+#[typeshare]
+pub struct TransactionDetailQuery {
+    #[arguments(id: $id)]
+    #[typeshare(typescript(type = "TransactionSubgraph"))]
+    pub transaction: Option<Transaction>,
+}
diff --git a/packages/orderbook/test/js_api/transaction.test.ts b/packages/orderbook/test/js_api/transaction.test.ts
new file mode 100644
index 000000000..809db66bb
--- /dev/null
+++ b/packages/orderbook/test/js_api/transaction.test.ts
@@ -0,0 +1,31 @@
+import assert from 'assert';
+import { getLocal } from 'mockttp';
+import { describe, it, beforeEach, afterEach } from 'vitest';
+import { Transaction } from '../../dist/types/js_api.js';
+import { getTransaction } from '../../dist/cjs/js_api.js';
+
+const transaction1 = {
+	id: 'tx1',
+	from: '0x1',
+	blockNumber: '1',
+	timestamp: '1'
+} as unknown as Transaction;
+
+describe('Rain Orderbook JS API Package Bindgen Tests - Order', async function () {
+	const mockServer = getLocal();
+	beforeEach(() => mockServer.start(8090));
+	afterEach(() => mockServer.stop());
+
+	it('should fetch a single transaction', async () => {
+		await mockServer
+			.forPost('/sg1')
+			.thenReply(200, JSON.stringify({ data: { transaction: transaction1 } }));
+
+		try {
+			const result: Transaction = await getTransaction(mockServer.url + '/sg1', transaction1.id);
+			assert.equal(result.id, transaction1.id);
+		} catch (e) {
+			assert.fail('expected to resolve, but failed' + (e instanceof Error ? e.message : String(e)));
+		}
+	});
+});

From 8bd686d51a16c2b18c307e5c060f6109feb0b099 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Tue, 11 Feb 2025 11:34:58 +0100
Subject: [PATCH 02/25] getting the tc and polling

---
 crates/js_api/src/subgraph/transaction.rs     |  6 +--
 crates/subgraph/src/orderbook_client.rs       |  2 +
 .../detail/DepositOrWithdrawButtons.svelte    |  8 +++-
 .../lib/components/detail/OrderDetail.svelte  |  3 ++
 .../lib/components/detail/VaultDetail.svelte  |  2 +
 .../src/lib/stores/transactionStore.ts        | 47 +++++++++++++++----
 .../components/DepositOrWithdrawModal.svelte  |  7 ++-
 packages/webapp/src/lib/services/modal.ts     |  1 +
 8 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/crates/js_api/src/subgraph/transaction.rs b/crates/js_api/src/subgraph/transaction.rs
index d629860b4..cb173586d 100644
--- a/crates/js_api/src/subgraph/transaction.rs
+++ b/crates/js_api/src/subgraph/transaction.rs
@@ -6,11 +6,11 @@ use reqwest::Url;
 /// Internal function to fetch a single transaction
 /// Returns the Transaction struct
 #[wasm_bindgen(js_name = "getTransaction")]
-pub async fn get_sg_transaction(
+pub async fn get_transaction(
     url: &str,
-    id: &str,
+    tx_hash: &str,
 ) -> Result<JsValue, OrderbookSubgraphClientError> {
     let client = OrderbookSubgraphClient::new(Url::parse(url)?);
-    let transaction = client.transaction_detail(Id::new(id)).await?;
+    let transaction = client.transaction_detail(Id::new(tx_hash)).await?;
     Ok(to_value(&transaction)?)
 }
diff --git a/crates/subgraph/src/orderbook_client.rs b/crates/subgraph/src/orderbook_client.rs
index 4d83760e5..aa902c629 100644
--- a/crates/subgraph/src/orderbook_client.rs
+++ b/crates/subgraph/src/orderbook_client.rs
@@ -26,6 +26,8 @@ pub enum OrderbookSubgraphClientError {
     CynicClientError(#[from] CynicClientError),
     #[error("Subgraph query returned no data")]
     Empty,
+    #[error("Request timed out")]
+    RequestTimedOut,
     #[error(transparent)]
     PaginationClientError(#[from] PaginationClientError),
     #[error(transparent)]
diff --git a/packages/ui-components/src/lib/components/detail/DepositOrWithdrawButtons.svelte b/packages/ui-components/src/lib/components/detail/DepositOrWithdrawButtons.svelte
index 0b70c7e1b..7e5472c60 100644
--- a/packages/ui-components/src/lib/components/detail/DepositOrWithdrawButtons.svelte
+++ b/packages/ui-components/src/lib/components/detail/DepositOrWithdrawButtons.svelte
@@ -10,12 +10,14 @@
 		action: 'deposit' | 'withdraw';
 		chainId: number;
 		rpcUrl: string;
+		subgraphUrl: string;
 	}) => void;
 
 	export let vault: Vault;
 	export let chainId: number;
 	export let rpcUrl: string;
 	export let query: CreateQueryResult;
+	export let subgraphUrl: string;
 </script>
 
 <Button
@@ -27,7 +29,8 @@
 			onDepositOrWithdraw: $query.refetch,
 			action: 'deposit',
 			chainId,
-			rpcUrl
+			rpcUrl,
+			subgraphUrl
 		})}><ArrowUpOutline size="sm" /></Button
 >
 <Button
@@ -39,6 +42,7 @@
 			onDepositOrWithdraw: $query.refetch,
 			action: 'withdraw',
 			chainId,
-			rpcUrl
+			rpcUrl,
+			subgraphUrl
 		})}><ArrowDownOutline size="sm" /></Button
 >
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index 21f550cb4..8f9780854 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -31,6 +31,7 @@
 				action: 'deposit' | 'withdraw';
 				chainId: number;
 				rpcUrl: string;
+				subgraphUrl: string;
 		  }) => void)
 		| undefined = undefined;
 	export let handleOrderRemoveModal:
@@ -146,6 +147,7 @@
 									{rpcUrl}
 									query={orderDetailQuery}
 									{handleDepositOrWithdrawModal}
+									{subgraphUrl}
 								/>
 							{/if}
 						{/each}
@@ -169,6 +171,7 @@
 									{rpcUrl}
 									query={orderDetailQuery}
 									{handleDepositOrWithdrawModal}
+									{subgraphUrl}
 								/>
 							{/if}
 						{/each}
diff --git a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
index 4ba56f815..70ea6fac3 100644
--- a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
@@ -30,6 +30,7 @@
 				action: 'deposit' | 'withdraw';
 				chainId: number;
 				rpcUrl: string;
+				subgraphUrl: string
 		  }) => void)
 		| undefined = undefined;
 	export let id: string;
@@ -97,6 +98,7 @@
 					{rpcUrl}
 					query={vaultDetailQuery}
 					{handleDepositOrWithdrawModal}
+					{subgraphUrl}
 				/>
 			{:else if handleDepositModal && handleWithdrawModal && $walletAddressMatchesOrBlank?.(data.owner)}
 				<Button
diff --git a/packages/ui-components/src/lib/stores/transactionStore.ts b/packages/ui-components/src/lib/stores/transactionStore.ts
index 981d0651c..9cd0115d8 100644
--- a/packages/ui-components/src/lib/stores/transactionStore.ts
+++ b/packages/ui-components/src/lib/stores/transactionStore.ts
@@ -7,7 +7,8 @@ import type {
 	DepositAndAddOrderCalldataResult,
 	DepositCalldataResult,
 	Vault,
-	WithdrawCalldataResult
+	WithdrawCalldataResult,
+	getTransaction
 } from '@rainlanguage/orderbook/js_api';
 
 export const ADDRESS_ZERO = '0x0000000000000000000000000000000000000000';
@@ -19,6 +20,7 @@ export enum TransactionStatus {
 	PENDING_WALLET = 'Waiting for wallet confirmation...',
 	PENDING_APPROVAL = 'Approving token spend...',
 	PENDING_DEPLOYMENT = 'Deploying your strategy...',
+	PENDING_SUBGRAPH = 'Awaiting subgraph...',
 	SUCCESS = 'Success! Transaction confirmed',
 	ERROR = 'Something went wrong'
 }
@@ -53,6 +55,7 @@ export type DepositOrWithdrawTransactionArgs = {
 	action: 'deposit' | 'withdraw';
 	chainId: number;
 	vault: Vault;
+	subgraphUrl: string;
 };
 
 export type TransactionState = {
@@ -88,6 +91,34 @@ const transactionStore = () => {
 	const { subscribe, set, update } = writable(initialState);
 	const reset = () => set(initialState);
 
+	const awaitTransactionIndexing = (subgraphUrl: string, txHash: string, successMessage: string) => {
+		update((state) => ({
+			...state,
+			status: TransactionStatus.PENDING_SUBGRAPH,
+			message: 'Checking for transaction indexing...'
+		}));
+		let interval: NodeJS.Timeout;
+		let attempts = 0;
+		try {
+			interval = setInterval(async () => {
+				attempts++;
+				const newTx = await getTransaction(subgraphUrl, txHash);
+				if (newTx) {
+					clearInterval(interval);
+					return transactionSuccess(txHash, successMessage);
+				} else if (attempts >= 5) {
+					update((state) => ({
+						...state,
+						message: 'Please check again later.'
+					}));
+					clearInterval(interval);
+				}
+			}, 1000);
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
 	const checkingWalletAllowance = (message?: string) =>
 		update((state) => ({
 			...state,
@@ -112,7 +143,7 @@ const transactionStore = () => {
 			...state,
 			hash: hash,
 			status: TransactionStatus.PENDING_DEPLOYMENT,
-			message: ''
+			message: 'Confirming transaction...'
 		}));
 	const transactionSuccess = (hash: string, message?: string) =>
 		update((state) => ({
@@ -187,7 +218,8 @@ const transactionStore = () => {
 		transactionCalldata,
 		action,
 		chainId,
-		vault
+		vault,
+		subgraphUrl
 	}: DepositOrWithdrawTransactionArgs) => {
 		try {
 			await switchChain(config, { chainId });
@@ -227,10 +259,8 @@ const transactionStore = () => {
 		try {
 			awaitDeployTx(hash);
 			await waitForTransactionReceipt(config, { hash });
-			return transactionSuccess(
-				hash,
-				`${action === 'deposit' ? 'Deposit' : 'Withdrawal'} successful.`
-			);
+			return awaitTransactionIndexing(subgraphUrl, hash, `${action === 'deposit' ? 'Deposit' : 'Withdrawal'} successful.`);
+
 		} catch {
 			return transactionError(
 				action === 'deposit'
@@ -249,7 +279,8 @@ const transactionStore = () => {
 		awaitWalletConfirmation,
 		awaitApprovalTx,
 		transactionSuccess,
-		transactionError
+		transactionError,
+		awaitTransactionIndexing
 	};
 };
 
diff --git a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte
index 86b5ce870..a14db40fa 100644
--- a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte
+++ b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte
@@ -21,6 +21,7 @@
 	export let vault: Vault;
 	export let chainId: number;
 	export let rpcUrl: string;
+	export let subgraphUrl: string;
 	export let onDepositOrWithdraw: () => void;
 
 	function handleSuccess() {
@@ -71,7 +72,8 @@
 				action,
 				approvalCalldata,
 				chainId,
-				vault
+				vault,
+				subgraphUrl
 			});
 		} else if (action === 'withdraw') {
 			const withdrawCalldata: WithdrawCalldataResult = await getVaultWithdrawCalldata(
@@ -84,7 +86,8 @@
 				transactionCalldata: withdrawCalldata,
 				action,
 				chainId,
-				vault
+				vault,
+				subgraphUrl
 			});
 		}
 	}
diff --git a/packages/webapp/src/lib/services/modal.ts b/packages/webapp/src/lib/services/modal.ts
index 84594046f..5bbb8cb91 100644
--- a/packages/webapp/src/lib/services/modal.ts
+++ b/packages/webapp/src/lib/services/modal.ts
@@ -20,6 +20,7 @@ export type DepositOrWithdrawModalProps = {
 	action: 'deposit' | 'withdraw';
 	chainId: number;
 	rpcUrl: string;
+	subgraphUrl: string;
 };
 
 export const handleDeployModal = (args: DeployModalProps) => {

From 03b8e835539e342bf17b060ac657041160f9d5f7 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Tue, 11 Feb 2025 14:19:33 +0100
Subject: [PATCH 03/25] add deploymemt

---
 .../src/__tests__/transactionStore.test.ts    | 27 +++++++++++-----
 .../deployment/DeploymentPage.svelte          |  3 ++
 .../deployment/DeploymentSteps.svelte         |  5 ++-
 .../src/lib/stores/transactionStore.ts        | 31 +++++++++++--------
 .../src/lib/components/DeployModal.svelte     |  4 ++-
 packages/webapp/src/lib/services/modal.ts     |  1 +
 .../[deploymentKey]/+page.svelte              |  4 ++-
 7 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
index 95ab04e64..3fc7d745c 100644
--- a/packages/ui-components/src/__tests__/transactionStore.test.ts
+++ b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -97,7 +97,8 @@ describe('transactionStore', () => {
 			approvals: mockApprovals,
 			deploymentCalldata: mockDeploymentCalldata,
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
-			chainId: 1
+			chainId: 1,
+			subgraphUrl: 'test.com'
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
@@ -112,7 +113,9 @@ describe('transactionStore', () => {
 			approvals: [],
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
-			chainId: 1
+			chainId: 1,
+						subgraphUrl: 'test.com'
+
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -130,7 +133,9 @@ describe('transactionStore', () => {
 			approvals: mockApprovals,
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
-			chainId: 1
+			chainId: 1,
+						subgraphUrl: 'test.com'
+
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -149,7 +154,9 @@ describe('transactionStore', () => {
 			approvals: mockApprovals,
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
-			chainId: 1
+			chainId: 1,
+						subgraphUrl: 'test.com'
+
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -165,7 +172,9 @@ describe('transactionStore', () => {
 			approvals: [],
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
-			chainId: 1
+			chainId: 1,
+						subgraphUrl: 'test.com'
+
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -182,7 +191,9 @@ describe('transactionStore', () => {
 			approvals: [],
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
-			chainId: 1
+			chainId: 1,
+						subgraphUrl: 'test.com'
+
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -207,7 +218,9 @@ describe('transactionStore', () => {
 			approvals: mockApprovals,
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
-			chainId: 1
+			chainId: 1,
+						subgraphUrl: 'test.com'
+
 		});
 
 		expect(sendTransaction).toHaveBeenCalledTimes(3); // 2 approvals + 1 deployment
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte
index 8f73577c7..da0e4e4ff 100644
--- a/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte
@@ -22,7 +22,9 @@
 		deploymentCalldata: DepositAndAddOrderCalldataResult;
 		orderbookAddress: Hex;
 		chainId: number;
+		subgraphUrl: string;
 	}) => void;
+	export let subgraphUrl: string;
 	const stateFromUrl = $page.url.searchParams.get('state') || '';
 </script>
 
@@ -35,4 +37,5 @@
 	{appKitModal}
 	{handleDeployModal}
 	{stateFromUrl}
+	{subgraphUrl}
 />
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
index e585fff10..264988948 100644
--- a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
@@ -51,7 +51,9 @@
 		deploymentCalldata: DepositAndAddOrderCalldataResult;
 		orderbookAddress: Hex;
 		chainId: number;
+		subgraphUrl: string
 	}) => void;
+	export let subgraphUrl: string;
 
 	let selectTokens: string[] | null = null;
 	let allDepositFields: GuiDeposit[] = [];
@@ -188,7 +190,8 @@
 				approvals,
 				deploymentCalldata,
 				orderbookAddress,
-				chainId
+				chainId,
+				subgraphUrl
 			});
 		} catch (e) {
 			error = DeploymentStepErrors.ADD_ORDER_FAILED;
diff --git a/packages/ui-components/src/lib/stores/transactionStore.ts b/packages/ui-components/src/lib/stores/transactionStore.ts
index 9cd0115d8..9edcf08e9 100644
--- a/packages/ui-components/src/lib/stores/transactionStore.ts
+++ b/packages/ui-components/src/lib/stores/transactionStore.ts
@@ -6,10 +6,11 @@ import type {
 	ApprovalCalldata,
 	DepositAndAddOrderCalldataResult,
 	DepositCalldataResult,
+	Transaction,
 	Vault,
-	WithdrawCalldataResult,
-	getTransaction
+	WithdrawCalldataResult
 } from '@rainlanguage/orderbook/js_api';
+import { getTransaction } from '@rainlanguage/orderbook/js_api';
 
 export const ADDRESS_ZERO = '0x0000000000000000000000000000000000000000';
 export const ONE = BigInt('1000000000000000000');
@@ -46,6 +47,7 @@ export type DeploymentTransactionArgs = {
 	deploymentCalldata: DepositAndAddOrderCalldataResult;
 	orderbookAddress: Hex;
 	chainId: number;
+	subgraphUrl: string;
 };
 
 export type DepositOrWithdrawTransactionArgs = {
@@ -97,26 +99,26 @@ const transactionStore = () => {
 			status: TransactionStatus.PENDING_SUBGRAPH,
 			message: 'Checking for transaction indexing...'
 		}));
-		let interval: NodeJS.Timeout;
+
 		let attempts = 0;
-		try {
-			interval = setInterval(async () => {
+		let newTx: Transaction;
+
+			const interval: NodeJS.Timeout = setInterval(async () => {
 				attempts++;
-				const newTx = await getTransaction(subgraphUrl, txHash);
+				newTx = await getTransaction(subgraphUrl, txHash);
 				if (newTx) {
+					console.log("new tx!", newTx)
 					clearInterval(interval);
 					return transactionSuccess(txHash, successMessage);
 				} else if (attempts >= 5) {
 					update((state) => ({
 						...state,
-						message: 'Please check again later.'
+						message: 'The subgraph took too long to respond. Please check again later.'
 					}));
 					clearInterval(interval);
 				}
 			}, 1000);
-		} catch (error) {
-			console.error(error);
-		}
+
 	};
 
 	const checkingWalletAllowance = (message?: string) =>
@@ -165,7 +167,8 @@ const transactionStore = () => {
 		approvals,
 		deploymentCalldata,
 		orderbookAddress,
-		chainId
+		chainId,
+		subgraphUrl
 	}: DeploymentTransactionArgs) => {
 		try {
 			await switchChain(config, { chainId });
@@ -206,7 +209,9 @@ const transactionStore = () => {
 		try {
 			awaitDeployTx(hash);
 			await waitForTransactionReceipt(config, { hash });
-			return transactionSuccess(hash, 'Strategy deployed successfully.');
+			return awaitTransactionIndexing(subgraphUrl, hash, `Strategy deployed successfully.`);
+
+
 		} catch {
 			return transactionError(TransactionErrorMessage.DEPLOYMENT_FAILED);
 		}
@@ -259,7 +264,7 @@ const transactionStore = () => {
 		try {
 			awaitDeployTx(hash);
 			await waitForTransactionReceipt(config, { hash });
-			return awaitTransactionIndexing(subgraphUrl, hash, `${action === 'deposit' ? 'Deposit' : 'Withdrawal'} successful.`);
+			return awaitTransactionIndexing(subgraphUrl, hash, `The ${action === 'deposit' ? 'deposit' : 'withdrawal'} was successful.`);
 
 		} catch {
 			return transactionError(
diff --git a/packages/webapp/src/lib/components/DeployModal.svelte b/packages/webapp/src/lib/components/DeployModal.svelte
index c7017ed44..2111651d6 100644
--- a/packages/webapp/src/lib/components/DeployModal.svelte
+++ b/packages/webapp/src/lib/components/DeployModal.svelte
@@ -13,6 +13,7 @@
 	export let deploymentCalldata: DepositAndAddOrderCalldataResult;
 	export let orderbookAddress: Hex;
 	export let chainId: number;
+	export let subgraphUrl: string;
 
 	const messages = {
 		success: 'Your strategy was successfully deployed.',
@@ -25,7 +26,8 @@
 		approvals,
 		deploymentCalldata,
 		orderbookAddress,
-		chainId
+		chainId,
+		subgraphUrl
 	});
 </script>
 
diff --git a/packages/webapp/src/lib/services/modal.ts b/packages/webapp/src/lib/services/modal.ts
index 5bbb8cb91..b8df80b04 100644
--- a/packages/webapp/src/lib/services/modal.ts
+++ b/packages/webapp/src/lib/services/modal.ts
@@ -12,6 +12,7 @@ export type DeployModalProps = {
 	deploymentCalldata: DepositAndAddOrderCalldataResult;
 	orderbookAddress: Hex;
 	chainId: number;
+	subgraphUrl: string;
 };
 
 export type DepositOrWithdrawModalProps = {
diff --git a/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte
index 588138fda..b9c587015 100644
--- a/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte
+++ b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte
@@ -4,7 +4,8 @@
 	import { DeploymentPage } from '@rainlanguage/ui-components';
 	import { wagmiConfig, connected, appKitModal } from '$lib/stores/wagmi';
 	import { handleDeployModal } from '$lib/services/modal';
-	const { dotrain, key, name, description } = $page.data;
+	const { dotrain, key, name, description, settings } = $page.data;
+	const { subgraphUrl } = settings;
 
 	if (!dotrain || !key) {
 		setTimeout(() => {
@@ -25,5 +26,6 @@
 		wagmiConnected={connected}
 		{appKitModal}
 		{handleDeployModal}
+		{subgraphUrl}
 	/>
 {/if}

From f0645e891ef59d79de1f1458cf4e17ec8bd54267 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Tue, 11 Feb 2025 22:09:41 +0100
Subject: [PATCH 04/25] add wait for tx

---
 crates/js_api/src/gui/select_tokens.rs               | 11 +++++++++++
 .../lib/components/deployment/DeploymentPage.svelte  |  5 +++--
 .../lib/components/deployment/DeploymentSteps.svelte | 12 +++++++++---
 .../ui-components/src/lib/stores/transactionStore.ts |  6 ++++--
 .../[strategyName]/[deploymentKey]/+page.svelte      |  6 +++---
 5 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/crates/js_api/src/gui/select_tokens.rs b/crates/js_api/src/gui/select_tokens.rs
index 966b0b056..ec673a6fa 100644
--- a/crates/js_api/src/gui/select_tokens.rs
+++ b/crates/js_api/src/gui/select_tokens.rs
@@ -38,6 +38,17 @@ impl DotrainOrderGui {
         Ok(())
     }
 
+    #[wasm_bindgen(js_name = "getNetworkKey")]
+    pub fn get_network_key(&self) -> Result<String, GuiError> {
+        let order_key = Deployment::parse_order_key(
+            self.dotrain_order.dotrain_yaml().documents,
+            &self.selected_deployment,
+        )?;
+        let network_key =
+            Order::parse_network_key(self.dotrain_order.dotrain_yaml().documents, &order_key)?;
+        Ok(network_key)
+    }
+
     #[wasm_bindgen(js_name = "saveSelectToken")]
     pub async fn save_select_token(
         &mut self,
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte
index da0e4e4ff..7c96928b9 100644
--- a/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { type ConfigSource } from '../../typeshare/config';
 	import type { Writable } from 'svelte/store';
 	import DeploymentSteps from './DeploymentSteps.svelte';
 	import type { Config } from 'wagmi';
@@ -24,7 +25,7 @@
 		chainId: number;
 		subgraphUrl: string;
 	}) => void;
-	export let subgraphUrl: string;
+	export let settings: Writable<ConfigSource>;
 	const stateFromUrl = $page.url.searchParams.get('state') || '';
 </script>
 
@@ -37,5 +38,5 @@
 	{appKitModal}
 	{handleDeployModal}
 	{stateFromUrl}
-	{subgraphUrl}
+	{settings}
 />
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
index 264988948..82bcd972d 100644
--- a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
@@ -4,6 +4,7 @@
 	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 {
@@ -42,7 +43,7 @@
 		SERIALIZE_ERROR = 'Error serializing state',
 		ADD_ORDER_FAILED = 'Failed to add order'
 	}
-
+	export let settings: Writable<ConfigSource>;
 	export let dotrain: string;
 	export let deployment: string;
 	export let deploymentDetails: NameAndDescription;
@@ -51,9 +52,8 @@
 		deploymentCalldata: DepositAndAddOrderCalldataResult;
 		orderbookAddress: Hex;
 		chainId: number;
-		subgraphUrl: string
+		subgraphUrl: string;
 	}) => void;
-	export let subgraphUrl: string;
 
 	let selectTokens: string[] | null = null;
 	let allDepositFields: GuiDeposit[] = [];
@@ -67,6 +67,10 @@
 	let error: DeploymentStepErrors | null = null;
 	let errorDetails: string | null = null;
 	let open: boolean = true;
+	let networkKey: string | null = null;
+	let subgraphUrl: string = '';
+
+	$: console.log(subgraphUrl);
 
 	export let wagmiConfig: Writable<Config | undefined>;
 	export let wagmiConnected: Writable<boolean>;
@@ -86,6 +90,8 @@
 			gui = await DotrainOrderGui.chooseDeployment(dotrain, deployment);
 
 			if (gui) {
+				networkKey = await gui.getNetworkKey();
+				subgraphUrl = $settings?.subgraphs?.[networkKey] ?? '';
 				try {
 					selectTokens = await gui.getSelectTokens();
 					return selectTokens;
diff --git a/packages/ui-components/src/lib/stores/transactionStore.ts b/packages/ui-components/src/lib/stores/transactionStore.ts
index 9edcf08e9..72a62bcb4 100644
--- a/packages/ui-components/src/lib/stores/transactionStore.ts
+++ b/packages/ui-components/src/lib/stores/transactionStore.ts
@@ -209,9 +209,11 @@ const transactionStore = () => {
 		try {
 			awaitDeployTx(hash);
 			await waitForTransactionReceipt(config, { hash });
+			if (subgraphUrl === '') {
+				return transactionSuccess(hash, `Strategy deployed successfully.`);
+			} else {
 			return awaitTransactionIndexing(subgraphUrl, hash, `Strategy deployed successfully.`);
-
-
+			}
 		} catch {
 			return transactionError(TransactionErrorMessage.DEPLOYMENT_FAILED);
 		}
diff --git a/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte
index b9c587015..0bbb5e353 100644
--- a/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte
+++ b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte
@@ -4,8 +4,8 @@
 	import { DeploymentPage } from '@rainlanguage/ui-components';
 	import { wagmiConfig, connected, appKitModal } from '$lib/stores/wagmi';
 	import { handleDeployModal } from '$lib/services/modal';
-	const { dotrain, key, name, description, settings } = $page.data;
-	const { subgraphUrl } = settings;
+	const { dotrain, key, name, description } = $page.data;
+	const { settings } = $page.data.stores;
 
 	if (!dotrain || !key) {
 		setTimeout(() => {
@@ -26,6 +26,6 @@
 		wagmiConnected={connected}
 		{appKitModal}
 		{handleDeployModal}
-		{subgraphUrl}
+		{settings}
 	/>
 {/if}

From 9c73aec827b3f1a0cfee4b94e3444005695dc907 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Tue, 11 Feb 2025 23:52:55 +0100
Subject: [PATCH 05/25] add tests

---
 .../src/__tests__/DeploymentSteps.test.ts     | 16 ++--
 .../src/__tests__/transactionStore.test.ts    | 74 +++++++++++++++----
 .../deployment/DeploymentSteps.svelte         |  2 -
 .../lib/components/detail/VaultDetail.svelte  |  2 +-
 .../src/lib/stores/transactionStore.ts        | 47 +++++++-----
 5 files changed, 97 insertions(+), 44 deletions(-)

diff --git a/packages/ui-components/src/__tests__/DeploymentSteps.test.ts b/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
index 123a56474..cb7bc9b17 100644
--- a/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
+++ b/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
@@ -6,6 +6,7 @@ import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
 import type { ComponentProps } from 'svelte';
 import { writable } from 'svelte/store';
 import type { AppKit } from '@reown/appkit';
+import type { ConfigSource } from '../lib/typeshare/config';
 const { mockWagmiConfigStore, mockConnectedStore } = await vi.hoisted(
 	() => import('../lib/__mocks__/stores')
 );
@@ -592,7 +593,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				settings: writable({} as ConfigSource)
 			}
 		});
 
@@ -619,7 +621,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				settings: writable({} as ConfigSource)
 			}
 		});
 
@@ -644,7 +647,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				settings: writable({} as ConfigSource)
 			}
 		});
 
@@ -679,7 +683,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				settings: writable({} as ConfigSource)
 			}
 		});
 
@@ -712,7 +717,8 @@ describe('DeploymentSteps', () => {
 				wagmiConfig: mockWagmiConfigStore,
 				wagmiConnected: mockConnectedStore,
 				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn()
+				handleDeployModal: vi.fn(),
+				settings: writable({} as ConfigSource)
 			}
 		});
 
diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
index 3fc7d745c..0eec68dbb 100644
--- a/packages/ui-components/src/__tests__/transactionStore.test.ts
+++ b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -5,6 +5,8 @@ import transactionStore, {
 	TransactionErrorMessage
 } from '../lib/stores/transactionStore';
 import { waitForTransactionReceipt, sendTransaction, switchChain, type Config } from '@wagmi/core';
+import { getTransaction } from '@rainlanguage/orderbook/js_api';
+import { waitFor } from '@testing-library/svelte';
 
 vi.mock('@wagmi/core', () => ({
 	waitForTransactionReceipt: vi.fn(),
@@ -12,6 +14,10 @@ vi.mock('@wagmi/core', () => ({
 	switchChain: vi.fn()
 }));
 
+vi.mock('@rainlanguage/orderbook/js_api', () => ({
+	getTransaction: vi.fn()
+}));
+
 describe('transactionStore', () => {
 	const mockConfig = {} as Config;
 	const mockOrderbookAddress = '0xabcdef1234567890';
@@ -23,7 +29,8 @@ describe('transactionStore', () => {
 		awaitWalletConfirmation,
 		awaitApprovalTx,
 		transactionSuccess,
-		transactionError
+		transactionError,
+		awaitTransactionIndexing
 	} = transactionStore;
 
 	beforeEach(() => {
@@ -89,6 +96,7 @@ describe('transactionStore', () => {
 		(sendTransaction as Mock).mockResolvedValueOnce('approvalHash1');
 		(sendTransaction as Mock).mockResolvedValueOnce('approvalHash2');
 		(sendTransaction as Mock).mockResolvedValueOnce('deployHash');
+		(getTransaction as Mock).mockReturnValue({ id: 'mockHash' });
 		(waitForTransactionReceipt as Mock).mockResolvedValue({});
 		(switchChain as Mock).mockResolvedValue({});
 
@@ -101,7 +109,7 @@ describe('transactionStore', () => {
 			subgraphUrl: 'test.com'
 		});
 
-		expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
+		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_SUBGRAPH);
 		expect(get(transactionStore).hash).toBe('deployHash');
 	});
 
@@ -114,8 +122,7 @@ describe('transactionStore', () => {
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
 			chainId: 1,
-						subgraphUrl: 'test.com'
-
+			subgraphUrl: 'test.com'
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -134,8 +141,7 @@ describe('transactionStore', () => {
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
 			chainId: 1,
-						subgraphUrl: 'test.com'
-
+			subgraphUrl: 'test.com'
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -155,8 +161,7 @@ describe('transactionStore', () => {
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
 			chainId: 1,
-						subgraphUrl: 'test.com'
-
+			subgraphUrl: 'test.com'
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -173,8 +178,7 @@ describe('transactionStore', () => {
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
 			chainId: 1,
-						subgraphUrl: 'test.com'
-
+			subgraphUrl: 'test.com'
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -192,8 +196,7 @@ describe('transactionStore', () => {
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
 			chainId: 1,
-						subgraphUrl: 'test.com'
-
+			subgraphUrl: 'test.com'
 		});
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
@@ -219,12 +222,51 @@ describe('transactionStore', () => {
 			deploymentCalldata: '0x',
 			orderbookAddress: mockOrderbookAddress as `0x${string}`,
 			chainId: 1,
-						subgraphUrl: 'test.com'
-
+			subgraphUrl: 'test.com'
 		});
 
 		expect(sendTransaction).toHaveBeenCalledTimes(3); // 2 approvals + 1 deployment
-		expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
-		expect(get(transactionStore).message).toBe('Strategy deployed successfully.');
+		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_SUBGRAPH);
+	});
+
+	it('should handle waiting for subgraph indexing', async () => {
+		const mockSubgraphUrl = 'test.com';
+		const mockTxHash = 'mockHash';
+		const mockSuccessMessage = 'Success! Transaction confirmed';
+
+		(getTransaction as Mock).mockResolvedValue({ id: mockTxHash });
+
+		await awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
+
+		await waitFor(() => {
+			expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
+			expect(get(transactionStore).message).toBe(mockSuccessMessage);
+			expect(get(transactionStore).hash).toBe(mockTxHash);
+		});
+	});
+
+	it('should handle subgraph indexing timeout', async () => {
+		const mockSubgraphUrl = 'test.com';
+		const mockTxHash = 'mockHash';
+		const mockSuccessMessage = 'Success message';
+
+		// Mock getTransaction to always return null to simulate timeout
+		(getTransaction as Mock).mockResolvedValue(null);
+
+		await awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
+
+		// First check that we enter pending state
+		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_SUBGRAPH);
+		expect(get(transactionStore).message).toBe('Checking for transaction indexing...');
+
+		// Wait for the timeout message
+		await waitFor(
+			() => {
+				expect(get(transactionStore).message).toBe(
+					'The subgraph took too long to respond. Please check again later.'
+				);
+			},
+			{ timeout: 6000 }
+		); // Increase timeout to allow for all retries
 	});
 });
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
index 82bcd972d..376c790d4 100644
--- a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
@@ -70,8 +70,6 @@
 	let networkKey: string | null = null;
 	let subgraphUrl: string = '';
 
-	$: console.log(subgraphUrl);
-
 	export let wagmiConfig: Writable<Config | undefined>;
 	export let wagmiConnected: Writable<boolean>;
 	export let appKitModal: Writable<AppKit>;
diff --git a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
index 70ea6fac3..2821560ed 100644
--- a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
@@ -30,7 +30,7 @@
 				action: 'deposit' | 'withdraw';
 				chainId: number;
 				rpcUrl: string;
-				subgraphUrl: string
+				subgraphUrl: string;
 		  }) => void)
 		| undefined = undefined;
 	export let id: string;
diff --git a/packages/ui-components/src/lib/stores/transactionStore.ts b/packages/ui-components/src/lib/stores/transactionStore.ts
index 72a62bcb4..c9e4a3f4f 100644
--- a/packages/ui-components/src/lib/stores/transactionStore.ts
+++ b/packages/ui-components/src/lib/stores/transactionStore.ts
@@ -93,7 +93,11 @@ const transactionStore = () => {
 	const { subscribe, set, update } = writable(initialState);
 	const reset = () => set(initialState);
 
-	const awaitTransactionIndexing = (subgraphUrl: string, txHash: string, successMessage: string) => {
+	const awaitTransactionIndexing = async (
+		subgraphUrl: string,
+		txHash: string,
+		successMessage: string
+	) => {
 		update((state) => ({
 			...state,
 			status: TransactionStatus.PENDING_SUBGRAPH,
@@ -103,22 +107,21 @@ const transactionStore = () => {
 		let attempts = 0;
 		let newTx: Transaction;
 
-			const interval: NodeJS.Timeout = setInterval(async () => {
-				attempts++;
-				newTx = await getTransaction(subgraphUrl, txHash);
-				if (newTx) {
-					console.log("new tx!", newTx)
-					clearInterval(interval);
-					return transactionSuccess(txHash, successMessage);
-				} else if (attempts >= 5) {
-					update((state) => ({
-						...state,
-						message: 'The subgraph took too long to respond. Please check again later.'
-					}));
-					clearInterval(interval);
-				}
-			}, 1000);
+		const interval: NodeJS.Timeout = setInterval(async () => {
+			attempts++;
 
+			newTx = await getTransaction(subgraphUrl, txHash);
+			if (newTx) {
+				clearInterval(interval);
+				return transactionSuccess(txHash, successMessage);
+			} else if (attempts >= 5) {
+				update((state) => ({
+					...state,
+					message: 'The subgraph took too long to respond. Please check again later.'
+				}));
+				clearInterval(interval);
+			}
+		}, 1000);
 	};
 
 	const checkingWalletAllowance = (message?: string) =>
@@ -147,13 +150,14 @@ const transactionStore = () => {
 			status: TransactionStatus.PENDING_DEPLOYMENT,
 			message: 'Confirming transaction...'
 		}));
-	const transactionSuccess = (hash: string, message?: string) =>
+	const transactionSuccess = (hash: string, message?: string) => {
 		update((state) => ({
 			...state,
 			status: TransactionStatus.SUCCESS,
 			hash: hash,
 			message: message || ''
 		}));
+	};
 	const transactionError = (message: TransactionErrorMessage, hash?: string) =>
 		update((state) => ({
 			...state,
@@ -212,7 +216,7 @@ const transactionStore = () => {
 			if (subgraphUrl === '') {
 				return transactionSuccess(hash, `Strategy deployed successfully.`);
 			} else {
-			return awaitTransactionIndexing(subgraphUrl, hash, `Strategy deployed successfully.`);
+				return awaitTransactionIndexing(subgraphUrl, hash, `Strategy deployed successfully.`);
 			}
 		} catch {
 			return transactionError(TransactionErrorMessage.DEPLOYMENT_FAILED);
@@ -266,8 +270,11 @@ const transactionStore = () => {
 		try {
 			awaitDeployTx(hash);
 			await waitForTransactionReceipt(config, { hash });
-			return awaitTransactionIndexing(subgraphUrl, hash, `The ${action === 'deposit' ? 'deposit' : 'withdrawal'} was successful.`);
-
+			return awaitTransactionIndexing(
+				subgraphUrl,
+				hash,
+				`The ${action === 'deposit' ? 'deposit' : 'withdrawal'} was successful.`
+			);
 		} catch {
 			return transactionError(
 				action === 'deposit'

From 72ea287d45492f077ff1e3ad17f20d2ee104408b Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Wed, 12 Feb 2025 10:51:06 +0100
Subject: [PATCH 06/25] test not passing

---
 .../ui-components/src/__tests__/transactionStore.test.ts  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
index 0eec68dbb..6a260f0d6 100644
--- a/packages/ui-components/src/__tests__/transactionStore.test.ts
+++ b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -250,16 +250,16 @@ describe('transactionStore', () => {
 		const mockTxHash = 'mockHash';
 		const mockSuccessMessage = 'Success message';
 
-		// Mock getTransaction to always return null to simulate timeout
+
 		(getTransaction as Mock).mockResolvedValue(null);
 
 		await awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
 
-		// First check that we enter pending state
+
 		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_SUBGRAPH);
 		expect(get(transactionStore).message).toBe('Checking for transaction indexing...');
 
-		// Wait for the timeout message
+
 		await waitFor(
 			() => {
 				expect(get(transactionStore).message).toBe(
@@ -267,6 +267,6 @@ describe('transactionStore', () => {
 				);
 			},
 			{ timeout: 6000 }
-		); // Increase timeout to allow for all retries
+		);
 	});
 });

From 30af7077ed041d616c7350ca9e226871ef77a80c Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Wed, 12 Feb 2025 18:16:06 +0100
Subject: [PATCH 07/25] format test

---
 packages/ui-components/src/__tests__/transactionStore.test.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
index 6a260f0d6..666acc68a 100644
--- a/packages/ui-components/src/__tests__/transactionStore.test.ts
+++ b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -250,16 +250,13 @@ describe('transactionStore', () => {
 		const mockTxHash = 'mockHash';
 		const mockSuccessMessage = 'Success message';
 
-
 		(getTransaction as Mock).mockResolvedValue(null);
 
 		await awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
 
-
 		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_SUBGRAPH);
 		expect(get(transactionStore).message).toBe('Checking for transaction indexing...');
 
-
 		await waitFor(
 			() => {
 				expect(get(transactionStore).message).toBe(

From 391df8e2a078a5883cc4d6d16464a14d69b82537 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 11:10:21 +0100
Subject: [PATCH 08/25] invalidate queries on tx success

---
 .../src/routes/vaults/[network]-[id]/+page.svelte    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
index 3f0744d9e..b8d38baf8 100644
--- a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
+++ b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
@@ -1,11 +1,21 @@
 <script lang="ts">
-	import { PageHeader } from '@rainlanguage/ui-components';
+	import { PageHeader, TransactionStatus, transactionStore } from '@rainlanguage/ui-components';
 	import { page } from '$app/stores';
 	import { VaultDetail } from '@rainlanguage/ui-components';
 	import { wagmiConfig, signerAddress } from '$lib/stores/wagmi';
 	import { handleDepositOrWithdrawModal } from '$lib/services/modal';
+	import { useQueryClient } from '@tanstack/svelte-query';
+	const queryClient = useQueryClient();
+
 	const { settings, activeOrderbookRef, activeNetworkRef, lightweightChartsTheme } =
 		$page.data.stores;
+
+	$: if ($transactionStore.status === TransactionStatus.SUCCESS) {
+		console.log('invalidating vault detail', $page.params.id);
+		queryClient.invalidateQueries({
+			queryKey: [$page.params.id]
+		});
+	}
 </script>
 
 <PageHeader title="Vault" pathname={$page.url.pathname} />

From affd03d85600dd7456ad73c1f1a3283d6c244d86 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 11:12:13 +0100
Subject: [PATCH 09/25] WIP live update

---
 .../components/charts/LightweightChart.svelte | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
index 599d63698..918a2a807 100644
--- a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
+++ b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
@@ -45,6 +45,7 @@
 	let timeDelta: number;
 	let timeFrom: UTCTimestamp;
 	let timeTo: UTCTimestamp;
+	let previousDataLength = 0;
 
 	function setTimeScale() {
 		if (chart === undefined) return;
@@ -70,9 +71,25 @@
 		});
 	}
 
-	function setData() {
+	function updateNewDataPoints() {
+		console.log('updating new data points');
 		if (series === undefined || data.length === 0) return;
-		series.setData(data);
+
+		// If this is the first data set, set all the data
+		if (previousDataLength === 0) {
+			series.setData(data);
+			console.log(data.length, previousDataLength);
+		}
+		// If we have new data points, only update the new ones
+		else if (data.length > previousDataLength) {
+			console.log('new data points!');
+			const newPoints = data.slice(previousDataLength);
+			newPoints.forEach((point) => {
+				series?.update(point);
+			});
+		}
+
+		previousDataLength = data.length;
 		setTimeScale();
 	}
 
@@ -91,7 +108,7 @@
 		setOptions();
 	}
 
-	$: if (data || series) setData();
+	$: if (data || series) updateNewDataPoints();
 	$: if (timeDelta) setTimeScale();
 	$: if ($lightweightChartsTheme) setOptions();
 

From 8690ff32eee22498d94a2b2834443c9ef36d98e0 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 11:38:33 +0100
Subject: [PATCH 10/25] wip, trying to get chart updating automatically without
 re-rendering

---
 .../TanstackLightweightChartLine.svelte       |  2 ++
 .../charts/VaultBalanceChart.svelte           |  4 +++-
 .../lib/components/detail/VaultDetail.svelte  |  2 +-
 .../tables/VaultBalanceChangesTable.svelte    |  7 +++++--
 .../routes/vaults/[network]-[id]/+page.svelte | 19 +++++++++++++++----
 5 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte
index 16755cd93..a6bd34ee4 100644
--- a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte
+++ b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte
@@ -26,6 +26,8 @@
 
 	$: data = transformAndSortData($query.data ?? []);
 
+	$: console.log('data changed in chart', data);
+
 	const createSeries = (chart: IChartApi) => chart.addLineSeries({ lineWidth: 1 });
 </script>
 
diff --git a/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte b/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
index 93a7ab5f5..f97063a63 100644
--- a/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
+++ b/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
@@ -14,12 +14,14 @@
 	import { QKEY_VAULT_CHANGES } from '../../queries/keys';
 
 	export let vault: Vault;
+	export let id: string;
 	export let subgraphUrl: string;
 	export let lightweightChartsTheme;
 
 	$: query = createQuery({
-		queryKey: [QKEY_VAULT_CHANGES, vault],
+		queryKey: [id, QKEY_VAULT_CHANGES + id, QKEY_VAULT_CHANGES],
 		queryFn: () => {
+			console.log('✅ geting vault balance chart');
 			return getVaultBalanceChanges(subgraphUrl || '', vault.id, {
 				page: 1,
 				pageSize: 1000
diff --git a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
index 2821560ed..63bdca277 100644
--- a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
@@ -193,7 +193,7 @@
 	</svelte:fragment>
 
 	<svelte:fragment slot="chart" let:data>
-		<VaultBalanceChart vault={data} {subgraphUrl} {lightweightChartsTheme} />
+		<VaultBalanceChart vault={data} {subgraphUrl} {lightweightChartsTheme} {id} />
 	</svelte:fragment>
 
 	<svelte:fragment slot="below"><VaultBalanceChangesTable {id} {subgraphUrl} /></svelte:fragment>
diff --git a/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte b/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte
index ecf61eb4f..9cbbe15f5 100644
--- a/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte
+++ b/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte
@@ -18,9 +18,12 @@
 	export let id: string;
 	export let subgraphUrl: string;
 
+	$: console.log('ID in table', id);
+
 	$: balanceChangesQuery = createInfiniteQuery({
-		queryKey: [id, QKEY_VAULT_CHANGES + id],
+		queryKey: [id, QKEY_VAULT_CHANGES + id, QKEY_VAULT_CHANGES],
 		queryFn: ({ pageParam }) => {
+			console.log('GETTING VAULT BALANCE CHANGES');
 			return getVaultBalanceChanges(subgraphUrl || '', id, {
 				page: pageParam + 1,
 				pageSize: DEFAULT_PAGE_SIZE
@@ -28,7 +31,7 @@
 		},
 		initialPageParam: 0,
 		getNextPageParam(lastPage, _allPages, lastPageParam) {
-			return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : undefined;
+			return lastPage?.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : undefined;
 		},
 		enabled: !!subgraphUrl
 	});
diff --git a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
index b8d38baf8..0bf28af8f 100644
--- a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
+++ b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-	import { PageHeader, TransactionStatus, transactionStore } from '@rainlanguage/ui-components';
+	import {
+		PageHeader,
+		QKEY_VAULT,
+		QKEY_VAULT_CHANGES,
+		TransactionStatus,
+		transactionStore
+	} from '@rainlanguage/ui-components';
 	import { page } from '$app/stores';
 	import { VaultDetail } from '@rainlanguage/ui-components';
 	import { wagmiConfig, signerAddress } from '$lib/stores/wagmi';
@@ -12,9 +18,14 @@
 
 	$: if ($transactionStore.status === TransactionStatus.SUCCESS) {
 		console.log('invalidating vault detail', $page.params.id);
-		queryClient.invalidateQueries({
-			queryKey: [$page.params.id]
-		});
+		// queryClient.invalidateQueries({
+		// 	queryKey: [
+		// 		$page.params.id,
+		// 		QKEY_VAULT_CHANGES + $page.params.id,
+		// 		QKEY_VAULT_CHANGES,
+		// 		QKEY_VAULT
+		// 	]
+		// });
 	}
 </script>
 

From a654c20cd3e0b9b40165ffcfa82c6bc42a1d7ceb Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 12:58:28 +0100
Subject: [PATCH 11/25] invalidate queries and show toast

---
 .../routes/vaults/[network]-[id]/+page.svelte | 46 ++++++++++++-------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
index 0bf28af8f..73ede09ff 100644
--- a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
+++ b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
@@ -1,36 +1,50 @@
 <script lang="ts">
-	import {
-		PageHeader,
-		QKEY_VAULT,
-		QKEY_VAULT_CHANGES,
-		TransactionStatus,
-		transactionStore
-	} from '@rainlanguage/ui-components';
+	import { PageHeader, TransactionStatus, transactionStore } from '@rainlanguage/ui-components';
 	import { page } from '$app/stores';
 	import { VaultDetail } from '@rainlanguage/ui-components';
 	import { wagmiConfig, signerAddress } from '$lib/stores/wagmi';
 	import { handleDepositOrWithdrawModal } from '$lib/services/modal';
 	import { useQueryClient } from '@tanstack/svelte-query';
+	import { Toast } from 'flowbite-svelte';
+	import { CheckCircleSolid } from 'flowbite-svelte-icons';
+	import { fade } from 'svelte/transition';
 	const queryClient = useQueryClient();
 
 	const { settings, activeOrderbookRef, activeNetworkRef, lightweightChartsTheme } =
 		$page.data.stores;
 
+	let toastOpen: boolean = false;
+	let counter: number = 5;
+
+	function triggerToast() {
+		toastOpen = true;
+		counter = 5;
+		timeout();
+	}
+
+	function timeout() {
+		if (--counter > 0) return setTimeout(timeout, 1000);
+		toastOpen = false;
+	}
+
 	$: if ($transactionStore.status === TransactionStatus.SUCCESS) {
-		console.log('invalidating vault detail', $page.params.id);
-		// queryClient.invalidateQueries({
-		// 	queryKey: [
-		// 		$page.params.id,
-		// 		QKEY_VAULT_CHANGES + $page.params.id,
-		// 		QKEY_VAULT_CHANGES,
-		// 		QKEY_VAULT
-		// 	]
-		// });
+		queryClient.invalidateQueries({
+			queryKey: [$page.params.id]
+		});
+		triggerToast();
 	}
 </script>
 
 <PageHeader title="Vault" pathname={$page.url.pathname} />
 
+{#if toastOpen}
+	<Toast dismissable={true} position="top-right" transition={fade}>
+		<CheckCircleSolid slot="icon" class="h-5 w-5" />
+		Vault balance updated
+		<span class="text-sm text-gray-500">Autohide in {counter}s.</span>
+	</Toast>
+{/if}
+
 <VaultDetail
 	id={$page.params.id}
 	network={$page.params.network}

From 8fec5eb582ceb5c01c2e4a4d375c584c6018299f Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 16:16:05 +0100
Subject: [PATCH 12/25] remove logs

---
 .../TanstackLightweightChartLine.svelte       |  2 --
 .../charts/VaultBalanceChart.svelte           |  1 -
 .../tables/VaultBalanceChangesTable.svelte    |  7 ++---
 .../routes/orders/[network]-[id]/+page.svelte | 26 +++++++++++++++++--
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte
index a6bd34ee4..16755cd93 100644
--- a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte
+++ b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte
@@ -26,8 +26,6 @@
 
 	$: data = transformAndSortData($query.data ?? []);
 
-	$: console.log('data changed in chart', data);
-
 	const createSeries = (chart: IChartApi) => chart.addLineSeries({ lineWidth: 1 });
 </script>
 
diff --git a/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte b/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
index f97063a63..6c71fa818 100644
--- a/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
+++ b/packages/ui-components/src/lib/components/charts/VaultBalanceChart.svelte
@@ -21,7 +21,6 @@
 	$: query = createQuery({
 		queryKey: [id, QKEY_VAULT_CHANGES + id, QKEY_VAULT_CHANGES],
 		queryFn: () => {
-			console.log('✅ geting vault balance chart');
 			return getVaultBalanceChanges(subgraphUrl || '', vault.id, {
 				page: 1,
 				pageSize: 1000
diff --git a/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte b/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte
index 9cbbe15f5..ecf61eb4f 100644
--- a/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte
+++ b/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte
@@ -18,12 +18,9 @@
 	export let id: string;
 	export let subgraphUrl: string;
 
-	$: console.log('ID in table', id);
-
 	$: balanceChangesQuery = createInfiniteQuery({
-		queryKey: [id, QKEY_VAULT_CHANGES + id, QKEY_VAULT_CHANGES],
+		queryKey: [id, QKEY_VAULT_CHANGES + id],
 		queryFn: ({ pageParam }) => {
-			console.log('GETTING VAULT BALANCE CHANGES');
 			return getVaultBalanceChanges(subgraphUrl || '', id, {
 				page: pageParam + 1,
 				pageSize: DEFAULT_PAGE_SIZE
@@ -31,7 +28,7 @@
 		},
 		initialPageParam: 0,
 		getNextPageParam(lastPage, _allPages, lastPageParam) {
-			return lastPage?.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : undefined;
+			return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : undefined;
 		},
 		enabled: !!subgraphUrl
 	});
diff --git a/tauri-app/src/routes/orders/[network]-[id]/+page.svelte b/tauri-app/src/routes/orders/[network]-[id]/+page.svelte
index 49dc4f336..b9ef33a27 100644
--- a/tauri-app/src/routes/orders/[network]-[id]/+page.svelte
+++ b/tauri-app/src/routes/orders/[network]-[id]/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { PageHeader } from '@rainlanguage/ui-components';
+  import { PageHeader, TransactionStatus } from '@rainlanguage/ui-components';
   import { page } from '$app/stores';
-  import { OrderDetail } from '@rainlanguage/ui-components';
+  import { OrderDetail, transactionStore } from '@rainlanguage/ui-components';
   import { codeMirrorTheme, lightweightChartsTheme, colorTheme } from '$lib/stores/darkMode';
   import { settings } from '$lib/stores/settings';
   import { handleDebugTradeModal, handleQuoteDebugModal } from '$lib/services/modal';
+  import { useQueryClient } from '@tanstack/svelte-query';
 
   const { id, network } = $page.params;
 
@@ -12,6 +13,27 @@
   const subgraphUrl = $settings?.subgraphs?.[network];
   const rpcUrl = $settings?.networks?.[network]?.rpc;
   const chainId = $settings?.networks?.[network]?.['chain-id'];
+  const queryClient = useQueryClient();
+  let toastOpen: boolean = false;
+  let counter: number = 5;
+
+  function triggerToast() {
+    toastOpen = true;
+    counter = 5;
+    timeout();
+  }
+
+  function timeout() {
+    if (--counter > 0) return setTimeout(timeout, 1000);
+    toastOpen = false;
+  }
+
+  $: if ($transactionStore.status === TransactionStatus.SUCCESS) {
+    queryClient.invalidateQueries({
+      queryKey: [$page.params.id],
+    });
+    triggerToast();
+  }
 </script>
 
 <PageHeader title="Order" pathname={$page.url.pathname} />

From 9d1a1417a29a426d25112382f0fa338ba150953a Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 16:33:53 +0100
Subject: [PATCH 13/25] update reactively on transaction success

---
 .../lib/components/detail/OrderDetail.svelte  |  7 ++-
 .../detail/TanstackOrderQuote.svelte          |  2 +-
 .../routes/orders/[network]-[id]/+page.svelte | 43 ++++++++++++++++++-
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index 9bb028305..b8d45d292 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -69,7 +69,10 @@
 
 	$: orderDetailQuery = createQuery<OrderSubgraph>({
 		queryKey: [id, QKEY_ORDER + id],
-		queryFn: () => getOrder(subgraphUrl, id),
+		queryFn: () => {
+			console.log('querying order', id);
+			return getOrder(subgraphUrl, id);
+		},
 		enabled: !!subgraphUrl
 	});
 
@@ -155,6 +158,7 @@
 											{chainId}
 											{rpcUrl}
 											query={orderDetailQuery}
+											{subgraphUrl}
 											{handleDepositOrWithdrawModal}
 										/>
 									{/if}
@@ -178,6 +182,7 @@
 											{chainId}
 											{rpcUrl}
 											query={orderDetailQuery}
+											{subgraphUrl}
 											{handleDepositOrWithdrawModal}
 										/>
 									{/if}
diff --git a/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte b/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte
index 265bd9067..2d63397bd 100644
--- a/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte
+++ b/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte
@@ -40,7 +40,7 @@
 	};
 
 	$: orderQuoteQuery = createQuery<BatchOrderQuotesResponse[]>({
-		queryKey: [QKEY_ORDER_QUOTE + id],
+		queryKey: [QKEY_ORDER_QUOTE + id, id],
 		queryFn: () => getOrderQuote([order], rpcUrl),
 		enabled: !!id && enabled,
 		refetchInterval: 10000
diff --git a/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte b/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte
index f5e75cc8d..5bc355f4f 100644
--- a/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte
+++ b/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte
@@ -1,19 +1,58 @@
 <script lang="ts">
-	import { OrderDetail, PageHeader } from '@rainlanguage/ui-components';
+	import {
+		OrderDetail,
+		PageHeader,
+		TransactionStatus,
+		transactionStore
+	} from '@rainlanguage/ui-components';
 	import { page } from '$app/stores';
-
 	import { codeMirrorTheme, lightweightChartsTheme, colorTheme } from '$lib/darkMode';
 	import { handleDepositOrWithdrawModal, handleOrderRemoveModal } from '$lib/services/modal';
 	import { wagmiConfig, signerAddress } from '$lib/stores/wagmi';
+	import { useQueryClient } from '@tanstack/svelte-query';
+	import { Toast } from 'flowbite-svelte';
+	import { CheckCircleSolid } from 'flowbite-svelte-icons';
+	import { fade } from 'svelte/transition';
+
+	const queryClient = useQueryClient();
 	const { id, network } = $page.params;
 	const { settings } = $page.data.stores;
 	const orderbookAddress = $settings?.orderbooks[network]?.address;
 	const subgraphUrl = $settings.subgraphs[network];
 	const rpcUrl = $settings.networks[network]?.rpc;
 	const chainId = $settings.networks[network]?.['chain-id'];
+
+	let toastOpen: boolean = false;
+	let counter: number = 5;
+
+	function triggerToast() {
+		toastOpen = true;
+		counter = 5;
+		timeout();
+	}
+
+	function timeout() {
+		if (--counter > 0) return setTimeout(timeout, 1000);
+		toastOpen = false;
+	}
+
+	$: if ($transactionStore.status === TransactionStatus.SUCCESS) {
+		queryClient.invalidateQueries({
+			queryKey: [$page.params.id]
+		});
+		triggerToast();
+	}
 </script>
 
 <PageHeader title="Order" pathname={$page.url.pathname} />
+
+{#if toastOpen}
+	<Toast dismissable={true} position="top-right" transition={fade}>
+		<CheckCircleSolid slot="icon" class="h-5 w-5" />
+		Vault balance updated
+		<span class="text-sm text-gray-500">Autohide in {counter}s.</span>
+	</Toast>
+{/if}
 <OrderDetail
 	{id}
 	{subgraphUrl}

From fff8ee36ff59ce1fac61a67481c872a647661b05 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 17:11:39 +0100
Subject: [PATCH 14/25] add refetch on success

---
 packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
index 73ede09ff..39b7adecc 100644
--- a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
+++ b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
@@ -4,10 +4,10 @@
 	import { VaultDetail } from '@rainlanguage/ui-components';
 	import { wagmiConfig, signerAddress } from '$lib/stores/wagmi';
 	import { handleDepositOrWithdrawModal } from '$lib/services/modal';
-	import { useQueryClient } from '@tanstack/svelte-query';
 	import { Toast } from 'flowbite-svelte';
 	import { CheckCircleSolid } from 'flowbite-svelte-icons';
 	import { fade } from 'svelte/transition';
+	import { useQueryClient } from '@tanstack/svelte-query';
 	const queryClient = useQueryClient();
 
 	const { settings, activeOrderbookRef, activeNetworkRef, lightweightChartsTheme } =

From 6c62abcb1a6bed36e2adc46e86ec0c8fc761bf94 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 17:16:44 +0100
Subject: [PATCH 15/25] update chart test

---
 .../src/__tests__/LightweightChart.test.ts    | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/ui-components/src/__tests__/LightweightChart.test.ts b/packages/ui-components/src/__tests__/LightweightChart.test.ts
index 2911a5df4..3d3d10303 100644
--- a/packages/ui-components/src/__tests__/LightweightChart.test.ts
+++ b/packages/ui-components/src/__tests__/LightweightChart.test.ts
@@ -8,12 +8,14 @@ const setDataMock = vi.fn();
 const applyOptionsMock = vi.fn();
 const setVisibleRangeMock = vi.fn();
 const removeMock = vi.fn();
+const updateMock = vi.fn();
 
 vi.mock('lightweight-charts', async (importOriginal) => ({
 	...((await importOriginal()) as object),
 	createChart: vi.fn(() => ({
 		addLineSeries: vi.fn(() => ({
-			setData: setDataMock
+			setData: setDataMock,
+			update: updateMock
 		})),
 		remove: removeMock,
 		applyOptions: applyOptionsMock,
@@ -96,23 +98,20 @@ test('renders with data correctly', async () => {
 	});
 });
 
-test('updates data correctly when props change', async () => {
+test('updates data correctly when new data points are added', async () => {
 	const title = 'test title';
 	const emptyMessage = 'empty message';
 	const loading = false;
 	const priceSymbol = '$';
 	const createSeries = (chart: IChartApi) => chart.addLineSeries();
 
-	const initialData: { value: number; time: UTCTimestamp; color?: string }[] = [
+
+
+	const initialData = [
 		{ value: 10, time: 1529899200 as UTCTimestamp },
 		{ value: 20, time: 1529899300 as UTCTimestamp }
 	];
 
-	const newData: { value: number; time: UTCTimestamp; color?: string }[] = [
-		{ value: 15, time: 1529900000 as UTCTimestamp },
-		{ value: 25, time: 1529900300 as UTCTimestamp }
-	];
-
 	const { component } = render(LightweightChart, {
 		title,
 		emptyMessage,
@@ -123,15 +122,32 @@ test('updates data correctly when props change', async () => {
 		lightweightChartsTheme: readable({ test: 'test' })
 	});
 
+	// First render should call setData with initial data
 	await waitFor(() => {
 		expect(setDataMock).toHaveBeenCalledWith(initialData);
 	});
 
-	// Update data prop
-	await act(() => component.$set({ data: newData }));
+	// Add new data points
+	const newDataPoints = [
+		...initialData,
+		{ value: 30, time: 1529899400 as UTCTimestamp },
+		{ value: 40, time: 1529899500 as UTCTimestamp }
+	];
+
+	// Update with new data that includes additional points
+	await act(() => component.$set({ data: newDataPoints }));
 
+	// Should call update for each new point
 	await waitFor(() => {
-		expect(setDataMock).toHaveBeenCalledWith(newData);
+		expect(updateMock).toHaveBeenCalledTimes(2);
+		expect(updateMock).toHaveBeenCalledWith({ 
+			value: 30, 
+			time: 1529899400 as UTCTimestamp 
+		});
+		expect(updateMock).toHaveBeenCalledWith({ 
+			value: 40, 
+			time: 1529899500 as UTCTimestamp 
+		});
 	});
 });
 

From 314e0ac6c2d8ff6ab2e33b90ddf56e58d549c0cc Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 17:21:38 +0100
Subject: [PATCH 16/25] mock getNetworkKey

---
 .../src/__tests__/DeploymentSteps.test.ts         | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/ui-components/src/__tests__/DeploymentSteps.test.ts b/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
index 50a656527..a7aff9f37 100644
--- a/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
+++ b/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
@@ -577,7 +577,9 @@ describe('DeploymentSteps', () => {
 	it('shows deployment details when provided', async () => {
 		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
 			getSelectTokens: () => [],
-			getTokenInfo: vi.fn()
+			getTokenInfo: vi.fn(),
+      getNetworkKey: vi.fn()
+
 		});
 
 		const deploymentDetails = {
@@ -611,7 +613,8 @@ describe('DeploymentSteps', () => {
 		const mockSelectTokens = ['token1', 'token2'];
 		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
 			getSelectTokens: () => mockSelectTokens,
-			getTokenInfo: vi.fn()
+			getTokenInfo: vi.fn(),
+      getNetworkKey: vi.fn()
 		});
 
 		render(DeploymentSteps, {
@@ -675,7 +678,9 @@ describe('DeploymentSteps', () => {
 				deposits: []
 			}),
 			getAllFieldDefinitions: () => [],
-			getTokenInfo: vi.fn()
+			getTokenInfo: vi.fn(),
+            getNetworkKey: vi.fn()
+
 		});
 
 		render(DeploymentSteps, {
@@ -710,7 +715,9 @@ describe('DeploymentSteps', () => {
 				deposits: []
 			}),
 			getAllFieldDefinitions: () => [],
-			getTokenInfo: vi.fn()
+			getTokenInfo: vi.fn(),
+            getNetworkKey: vi.fn()
+
 		});
 
 		render(DeploymentSteps, {

From 3ed5517789661ad2614983ab473626a178ee1077 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Thu, 13 Feb 2025 17:23:38 +0100
Subject: [PATCH 17/25] test returning network

---
 packages/orderbook/test/js_api/gui.test.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/orderbook/test/js_api/gui.test.ts b/packages/orderbook/test/js_api/gui.test.ts
index 6ea199ad1..4ecc57517 100644
--- a/packages/orderbook/test/js_api/gui.test.ts
+++ b/packages/orderbook/test/js_api/gui.test.ts
@@ -1375,5 +1375,10 @@ ${dotrainWithoutVaultIds}`;
 				"Missing required field 'tokens' in root"
 			);
 		});
+
+		it('should get network key', async () => {
+			const networkKey = gui.getNetworkKey();
+			assert.equal(networkKey, 'some-network');
+		});
 	});
 });

From 981d68efedee005e76779e558d0d0cdec6fb42b2 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Fri, 14 Feb 2025 14:21:02 +0100
Subject: [PATCH 18/25] add

---
 .../src/__tests__/DeploymentSteps.test.ts     | 11 +++-----
 .../src/__tests__/LightweightChart.test.ts    | 14 +++++-----
 .../routes/orders/[network]-[id]/+page.svelte | 26 ++-----------------
 3 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/packages/ui-components/src/__tests__/DeploymentSteps.test.ts b/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
index a7aff9f37..2cb3c5aff 100644
--- a/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
+++ b/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
@@ -578,8 +578,7 @@ describe('DeploymentSteps', () => {
 		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
 			getSelectTokens: () => [],
 			getTokenInfo: vi.fn(),
-      getNetworkKey: vi.fn()
-
+			getNetworkKey: vi.fn()
 		});
 
 		const deploymentDetails = {
@@ -614,7 +613,7 @@ describe('DeploymentSteps', () => {
 		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
 			getSelectTokens: () => mockSelectTokens,
 			getTokenInfo: vi.fn(),
-      getNetworkKey: vi.fn()
+			getNetworkKey: vi.fn()
 		});
 
 		render(DeploymentSteps, {
@@ -679,8 +678,7 @@ describe('DeploymentSteps', () => {
 			}),
 			getAllFieldDefinitions: () => [],
 			getTokenInfo: vi.fn(),
-            getNetworkKey: vi.fn()
-
+			getNetworkKey: vi.fn()
 		});
 
 		render(DeploymentSteps, {
@@ -716,8 +714,7 @@ describe('DeploymentSteps', () => {
 			}),
 			getAllFieldDefinitions: () => [],
 			getTokenInfo: vi.fn(),
-            getNetworkKey: vi.fn()
-
+			getNetworkKey: vi.fn()
 		});
 
 		render(DeploymentSteps, {
diff --git a/packages/ui-components/src/__tests__/LightweightChart.test.ts b/packages/ui-components/src/__tests__/LightweightChart.test.ts
index 3d3d10303..e400b2058 100644
--- a/packages/ui-components/src/__tests__/LightweightChart.test.ts
+++ b/packages/ui-components/src/__tests__/LightweightChart.test.ts
@@ -105,8 +105,6 @@ test('updates data correctly when new data points are added', async () => {
 	const priceSymbol = '$';
 	const createSeries = (chart: IChartApi) => chart.addLineSeries();
 
-
-
 	const initialData = [
 		{ value: 10, time: 1529899200 as UTCTimestamp },
 		{ value: 20, time: 1529899300 as UTCTimestamp }
@@ -140,13 +138,13 @@ test('updates data correctly when new data points are added', async () => {
 	// Should call update for each new point
 	await waitFor(() => {
 		expect(updateMock).toHaveBeenCalledTimes(2);
-		expect(updateMock).toHaveBeenCalledWith({ 
-			value: 30, 
-			time: 1529899400 as UTCTimestamp 
+		expect(updateMock).toHaveBeenCalledWith({
+			value: 30,
+			time: 1529899400 as UTCTimestamp
 		});
-		expect(updateMock).toHaveBeenCalledWith({ 
-			value: 40, 
-			time: 1529899500 as UTCTimestamp 
+		expect(updateMock).toHaveBeenCalledWith({
+			value: 40,
+			time: 1529899500 as UTCTimestamp
 		});
 	});
 });
diff --git a/tauri-app/src/routes/orders/[network]-[id]/+page.svelte b/tauri-app/src/routes/orders/[network]-[id]/+page.svelte
index b9ef33a27..49dc4f336 100644
--- a/tauri-app/src/routes/orders/[network]-[id]/+page.svelte
+++ b/tauri-app/src/routes/orders/[network]-[id]/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { PageHeader, TransactionStatus } from '@rainlanguage/ui-components';
+  import { PageHeader } from '@rainlanguage/ui-components';
   import { page } from '$app/stores';
-  import { OrderDetail, transactionStore } from '@rainlanguage/ui-components';
+  import { OrderDetail } from '@rainlanguage/ui-components';
   import { codeMirrorTheme, lightweightChartsTheme, colorTheme } from '$lib/stores/darkMode';
   import { settings } from '$lib/stores/settings';
   import { handleDebugTradeModal, handleQuoteDebugModal } from '$lib/services/modal';
-  import { useQueryClient } from '@tanstack/svelte-query';
 
   const { id, network } = $page.params;
 
@@ -13,27 +12,6 @@
   const subgraphUrl = $settings?.subgraphs?.[network];
   const rpcUrl = $settings?.networks?.[network]?.rpc;
   const chainId = $settings?.networks?.[network]?.['chain-id'];
-  const queryClient = useQueryClient();
-  let toastOpen: boolean = false;
-  let counter: number = 5;
-
-  function triggerToast() {
-    toastOpen = true;
-    counter = 5;
-    timeout();
-  }
-
-  function timeout() {
-    if (--counter > 0) return setTimeout(timeout, 1000);
-    toastOpen = false;
-  }
-
-  $: if ($transactionStore.status === TransactionStatus.SUCCESS) {
-    queryClient.invalidateQueries({
-      queryKey: [$page.params.id],
-    });
-    triggerToast();
-  }
 </script>
 
 <PageHeader title="Order" pathname={$page.url.pathname} />

From 35753c650b35acd0e979a2e50377f5c80470059e Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Fri, 14 Feb 2025 14:30:50 +0100
Subject: [PATCH 19/25] tx test not working

---
 .../src/__tests__/transactionStore.test.ts     | 18 +++++++++---------
 .../src/lib/stores/transactionStore.ts         |  4 +++-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
index 666acc68a..c47e7cb49 100644
--- a/packages/ui-components/src/__tests__/transactionStore.test.ts
+++ b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -239,31 +239,31 @@ describe('transactionStore', () => {
 		await awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
 
 		await waitFor(() => {
-			expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
 			expect(get(transactionStore).message).toBe(mockSuccessMessage);
 			expect(get(transactionStore).hash).toBe(mockTxHash);
 		});
 	});
 
 	it('should handle subgraph indexing timeout', async () => {
+		vi.useFakeTimers();
 		const mockSubgraphUrl = 'test.com';
 		const mockTxHash = 'mockHash';
 		const mockSuccessMessage = 'Success message';
 
 		(getTransaction as Mock).mockResolvedValue(null);
 
-		await awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
+		const indexingPromise = awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_SUBGRAPH);
 		expect(get(transactionStore).message).toBe('Checking for transaction indexing...');
 
-		await waitFor(
-			() => {
-				expect(get(transactionStore).message).toBe(
-					'The subgraph took too long to respond. Please check again later.'
-				);
-			},
-			{ timeout: 6000 }
+		await vi.advanceTimersByTime(10000);
+		await indexingPromise;
+
+		expect(get(transactionStore).message).toBe(
+			'The subgraph took too long to respond. Please check again later.'
 		);
+
+		vi.useRealTimers();
 	});
 });
diff --git a/packages/ui-components/src/lib/stores/transactionStore.ts b/packages/ui-components/src/lib/stores/transactionStore.ts
index 48cbab921..3b19347d7 100644
--- a/packages/ui-components/src/lib/stores/transactionStore.ts
+++ b/packages/ui-components/src/lib/stores/transactionStore.ts
@@ -123,14 +123,16 @@ const transactionStore = () => {
 
 			newTx = await getTransaction(subgraphUrl, txHash);
 			if (newTx) {
+				console.log("NEW TX", newTx)
 				clearInterval(interval);
 				return transactionSuccess(txHash, successMessage);
-			} else if (attempts >= 5) {
+			} else if (attempts >= 10) {
 				update((state) => ({
 					...state,
 					message: 'The subgraph took too long to respond. Please check again later.'
 				}));
 				clearInterval(interval);
+				return transactionError(TransactionErrorMessage.TIMEOUT);
 			}
 		}, 1000);
 	};

From 16906addadae3a0887ac6a3ddac1abc046cc8fa7 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Fri, 14 Feb 2025 14:34:15 +0100
Subject: [PATCH 20/25] logging status

---
 packages/ui-components/src/__tests__/transactionStore.test.ts | 3 ++-
 packages/ui-components/src/lib/stores/transactionStore.ts     | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
index c47e7cb49..36077c27a 100644
--- a/packages/ui-components/src/__tests__/transactionStore.test.ts
+++ b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -229,7 +229,7 @@ describe('transactionStore', () => {
 		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_SUBGRAPH);
 	});
 
-	it('should handle waiting for subgraph indexing', async () => {
+	it.only('should handle waiting for subgraph indexing', async () => {
 		const mockSubgraphUrl = 'test.com';
 		const mockTxHash = 'mockHash';
 		const mockSuccessMessage = 'Success! Transaction confirmed';
@@ -239,6 +239,7 @@ describe('transactionStore', () => {
 		await awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
 
 		await waitFor(() => {
+			expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
 			expect(get(transactionStore).message).toBe(mockSuccessMessage);
 			expect(get(transactionStore).hash).toBe(mockTxHash);
 		});
diff --git a/packages/ui-components/src/lib/stores/transactionStore.ts b/packages/ui-components/src/lib/stores/transactionStore.ts
index 3b19347d7..07e76489c 100644
--- a/packages/ui-components/src/lib/stores/transactionStore.ts
+++ b/packages/ui-components/src/lib/stores/transactionStore.ts
@@ -125,7 +125,8 @@ const transactionStore = () => {
 			if (newTx) {
 				console.log("NEW TX", newTx)
 				clearInterval(interval);
-				return transactionSuccess(txHash, successMessage);
+				transactionSuccess(txHash, successMessage);
+
 			} else if (attempts >= 10) {
 				update((state) => ({
 					...state,
@@ -164,6 +165,7 @@ const transactionStore = () => {
 			message: 'Confirming transaction...'
 		}));
 	const transactionSuccess = (hash: string, message?: string) => {
+		console.log("TRANSACTION SUCCESS", hash, message)
 		update((state) => ({
 			...state,
 			status: TransactionStatus.SUCCESS,

From 16d4354317b276728676472909c45b33d540f735 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Fri, 14 Feb 2025 17:21:29 +0100
Subject: [PATCH 21/25] rm unused logs

---
 .../src/lib/components/charts/LightweightChart.svelte          | 3 ---
 .../ui-components/src/lib/components/detail/OrderDetail.svelte | 1 -
 2 files changed, 4 deletions(-)

diff --git a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
index 918a2a807..8713fd332 100644
--- a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
+++ b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
@@ -72,17 +72,14 @@
 	}
 
 	function updateNewDataPoints() {
-		console.log('updating new data points');
 		if (series === undefined || data.length === 0) return;
 
 		// If this is the first data set, set all the data
 		if (previousDataLength === 0) {
 			series.setData(data);
-			console.log(data.length, previousDataLength);
 		}
 		// If we have new data points, only update the new ones
 		else if (data.length > previousDataLength) {
-			console.log('new data points!');
 			const newPoints = data.slice(previousDataLength);
 			newPoints.forEach((point) => {
 				series?.update(point);
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index b5c3e07b0..b61ac8ec9 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -75,7 +75,6 @@
 	$: orderDetailQuery = createQuery<OrderWithSortedVaults>({
 		queryKey: [id, QKEY_ORDER + id],
 		queryFn: () => {
-			console.log('querying order', id);
 			return getOrder(subgraphUrl, id);
 		},
 		enabled: !!subgraphUrl

From a140ab02f76c7edfb428d206ffd3fb7aba3ec2b2 Mon Sep 17 00:00:00 2001
From: highonhopium <jks.hardy@gmail.com>
Date: Fri, 14 Feb 2025 17:39:32 +0000
Subject: [PATCH 22/25] timer fix

---
 .../src/__tests__/transactionStore.test.ts             | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
index 36077c27a..25a1d9c56 100644
--- a/packages/ui-components/src/__tests__/transactionStore.test.ts
+++ b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -236,8 +236,12 @@ describe('transactionStore', () => {
 
 		(getTransaction as Mock).mockResolvedValue({ id: mockTxHash });
 
+		vi.useFakeTimers({ shouldAdvanceTime: true });
+
 		await awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
 
+		vi.runOnlyPendingTimers();
+
 		await waitFor(() => {
 			expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
 			expect(get(transactionStore).message).toBe(mockSuccessMessage);
@@ -253,7 +257,11 @@ describe('transactionStore', () => {
 
 		(getTransaction as Mock).mockResolvedValue(null);
 
-		const indexingPromise = awaitTransactionIndexing(mockSubgraphUrl, mockTxHash, mockSuccessMessage);
+		const indexingPromise = awaitTransactionIndexing(
+			mockSubgraphUrl,
+			mockTxHash,
+			mockSuccessMessage
+		);
 
 		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_SUBGRAPH);
 		expect(get(transactionStore).message).toBe('Checking for transaction indexing...');

From 44057c9fc5189bdcf27a1a03fdf6cc33363c9241 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Fri, 14 Feb 2025 18:44:14 +0100
Subject: [PATCH 23/25] rm logs

---
 packages/ui-components/src/lib/stores/transactionStore.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/ui-components/src/lib/stores/transactionStore.ts b/packages/ui-components/src/lib/stores/transactionStore.ts
index 07e76489c..9200d0808 100644
--- a/packages/ui-components/src/lib/stores/transactionStore.ts
+++ b/packages/ui-components/src/lib/stores/transactionStore.ts
@@ -123,10 +123,8 @@ const transactionStore = () => {
 
 			newTx = await getTransaction(subgraphUrl, txHash);
 			if (newTx) {
-				console.log("NEW TX", newTx)
 				clearInterval(interval);
 				transactionSuccess(txHash, successMessage);
-
 			} else if (attempts >= 10) {
 				update((state) => ({
 					...state,
@@ -165,7 +163,6 @@ const transactionStore = () => {
 			message: 'Confirming transaction...'
 		}));
 	const transactionSuccess = (hash: string, message?: string) => {
-		console.log("TRANSACTION SUCCESS", hash, message)
 		update((state) => ({
 			...state,
 			status: TransactionStatus.SUCCESS,

From 56b72e72cf003cb8f1f660df6754364e1f48a9f5 Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Fri, 14 Feb 2025 19:20:58 +0100
Subject: [PATCH 24/25] lint

---
 .../ui-components/src/__tests__/OrderDetail.test.svelte   | 1 +
 .../ui-components/src/__tests__/VaultBalanceChart.test.ts | 8 ++++++--
 .../src/lib/components/detail/OrderDetail.svelte          | 1 +
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.svelte b/packages/ui-components/src/__tests__/OrderDetail.test.svelte
index 284198db7..a1b46623b 100644
--- a/packages/ui-components/src/__tests__/OrderDetail.test.svelte
+++ b/packages/ui-components/src/__tests__/OrderDetail.test.svelte
@@ -58,6 +58,7 @@
 											rpcUrl="https://example.com"
 											query={orderDetailQuery}
 											handleDepositOrWithdrawModal={() => {}}
+											{subgraphUrl}
 										/>
 									</svelte:fragment>
 								</ButtonVaultLink>
diff --git a/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts b/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
index 4304faa75..49337235f 100644
--- a/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
+++ b/packages/ui-components/src/__tests__/VaultBalanceChart.test.ts
@@ -5,6 +5,9 @@ import VaultBalanceChart from '../lib/components/charts/VaultBalanceChart.svelte
 import type { Vault } from '@rainlanguage/orderbook/js_api';
 import { getVaultBalanceChanges } from '@rainlanguage/orderbook/js_api';
 import { writable } from 'svelte/store';
+import type { ComponentProps } from 'svelte';
+
+type VaultBalanceChartProps = ComponentProps<VaultBalanceChart>;
 
 vi.mock('@rainlanguage/orderbook/js_api', () => ({
 	getVaultBalanceChanges: vi.fn()
@@ -42,8 +45,9 @@ test('calls getVaultBalanceChanges with correct arguments', async () => {
 		props: {
 			vault: mockVault,
 			subgraphUrl: 'https://example.com',
-			lightweightChartsTheme: writable({})
-		},
+			lightweightChartsTheme: writable({}),
+			id: 'vault1'
+		} as VaultBalanceChartProps,
 		context: new Map([['$$_queryClient', queryClient]])
 	});
 
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index b61ac8ec9..f5e4d2b9b 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -165,6 +165,7 @@
 													{rpcUrl}
 													query={orderDetailQuery}
 													{handleDepositOrWithdrawModal}
+													{subgraphUrl}
 												/>
 											{/if}
 										</svelte:fragment>

From 5f34657a40c721dd996004a49f1bcf0cbe3c298e Mon Sep 17 00:00:00 2001
From: Jamie Harding <jharding142@icloud.com>
Date: Fri, 14 Feb 2025 20:57:02 +0100
Subject: [PATCH 25/25] rm only

---
 packages/ui-components/src/__tests__/transactionStore.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
index 25a1d9c56..10630ccb6 100644
--- a/packages/ui-components/src/__tests__/transactionStore.test.ts
+++ b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -229,7 +229,7 @@ describe('transactionStore', () => {
 		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_SUBGRAPH);
 	});
 
-	it.only('should handle waiting for subgraph indexing', async () => {
+	it('should handle waiting for subgraph indexing', async () => {
 		const mockSubgraphUrl = 'test.com';
 		const mockTxHash = 'mockHash';
 		const mockSuccessMessage = 'Success! Transaction confirmed';