Merge pull request #1040 from rainlanguage/2024-11-28-remove-global-s…

…ubgraphurl-store-from-tauri-app-put-network-in-the-route-instead

2024 11 28 remove global subgraphurl store from tauri app put network in the route instead

packages/ui-components/src/lib/components/tables/VaultsListTable.svelte

@@ -95,7 +95,7 @@
 		emptyMessage="No Vaults Found"
 		on:clickRow={(e) => {
 			updateActiveNetworkAndOrderbook(e.detail.item.subgraphName);
-			goto(`/vaults/${e.detail.item.vault.id}`);
+			goto(`/vaults/${e.detail.item.subgraphName}-${e.detail.item.vault.id}`);
 		}}
 	>
 		<svelte:fragment slot="title">

tauri-app/src/lib/components/detail/VaultDetail.svelte

@@ -12,21 +12,23 @@
   import { createQuery } from '@tanstack/svelte-query';
   import { vaultDetail } from '$lib/queries/vaultDetail';
   import { QKEY_VAULT } from '@rainlanguage/ui-components';
-  import { subgraphUrl } from '$lib/stores/settings';
   import { handleDepositModal, handleWithdrawModal } from '$lib/services/modal';
   import { TanstackPageContentDetail } from '@rainlanguage/ui-components';
   import VaultBalanceChart from '$lib/components/charts/VaultBalanceChart.svelte';
   import { onDestroy } from 'svelte';
   import { queryClient } from '$lib/queries/queryClient';
+  import { settings } from '$lib/stores/settings';
 
   export let id: string;
+  export let network: string;
+  const subgraphUrl = $settings?.subgraphs?.[network] || '';
 
   $: vaultDetailQuery = createQuery({
     queryKey: [id, QKEY_VAULT + id],
     queryFn: () => {
-      return vaultDetail(id, $subgraphUrl || '');
+      return vaultDetail(id, subgraphUrl || '');
     },
-    enabled: !!$subgraphUrl,
+    enabled: !!subgraphUrl,
   });
 
   const interval = setInterval(async () => {

tauri-app/src/lib/components/detail/VaultDetail.test.ts

@@ -68,7 +68,7 @@ test('calls the vault detail query fn with the correct vault id', async () => {
   const queryClient = new QueryClient();
 
   render(VaultDetail, {
-    props: { id: '100' },
+    props: { id: '100', network: 'mainnet' },
     context: new Map([['$$_queryClient', queryClient]]),
   });
 
@@ -85,7 +85,7 @@ test('shows the correct empty message when the query returns no data', async ()
   const queryClient = new QueryClient();
 
   render(VaultDetail, {
-    props: { id: '100' },
+    props: { id: '100', network: 'mainnet' },
     context: new Map([['$$_queryClient', queryClient]]),
   });
 
@@ -121,7 +121,7 @@ test('shows the correct data when the query returns data', async () => {
   const queryClient = new QueryClient();
 
   render(VaultDetail, {
-    props: { id: '100' },
+    props: { id: '100', network: 'mainnet' },
     context: new Map([['$$_queryClient', queryClient]]),
   });
 
@@ -191,7 +191,7 @@ test('shows the correct data when the query returns data with orders', async ()
   const queryClient = new QueryClient();
 
   render(VaultDetail, {
-    props: { id: '100' },
+    props: { id: '100', network: 'mainnet' },
     context: new Map([['$$_queryClient', queryClient]]),
   });
 
@@ -269,7 +269,7 @@ test('orders link to the correct order', async () => {
   const queryClient = new QueryClient();
 
   render(VaultDetail, {
-    props: { id: '100' },
+    props: { id: '100', network: 'mainnet' },
     context: new Map([['$$_queryClient', queryClient]]),
   });
 
@@ -328,7 +328,7 @@ test('shows deposit and withdraw buttons if owner wallet matches, opens correct
   const queryClient = new QueryClient();
 
   render(VaultDetail, {
-    props: { id: '100' },
+    props: { id: '100', network: 'mainnet' },
     context: new Map([['$$_queryClient', queryClient]]),
   });
 

tauri-app/src/routes/vaults/[id]/+page.svelte → tauri-app/src/routes/vaults/[network]-[id]/+page.svelte

@@ -6,4 +6,4 @@
 
 <PageHeader title="Vault" pathname={$page.url.pathname} />
 
-<VaultDetail id={$page.params.id} />
+<VaultDetail id={$page.params.id} network={$page.params.network} />