feat(app): reactive balance querying and error state handling

app/src/lib/queries/balance.ts

@@ -63,9 +63,10 @@ export function evmBalancesQuery({
   chainId: string
 } & ({ contractAddresses: Array<string> } | { tokenSpecification: "erc20" | "DEFAULT_TOKENS" })) {
   return createQuery({
-    queryKey: [address, "balances", chainId],
+    queryKey: ["balances", chainId, address],
     enabled: isValidEvmAddress(address),
     refetchOnWindowFocus: false,
+    refetchInterval: 1_000,
     queryFn: async () => {
       const assetsToCheck =
         "contractAddresses" in restParams && Array.isArray(restParams.contractAddresses)
@@ -85,17 +86,14 @@ export function evmBalancesQuery({
         })
       })
       const result = v.safeParse(evmBalancesResponseSchema, await response.json())
-      if (!result.success) return null
+      if (!result.success) return new Error(`Error parsing result ${JSON.stringify(result.issues)}`);
 
       const tokensInfo = await getEvmTokensInfo(
         result.output.result.tokenBalances.map(({ contractAddress }) => contractAddress)
       )
       return tokensInfo.map((token, index) => ({
         ...token,
-        balance: formatUnits(
-          BigInt(result.output.result.tokenBalances[index].tokenBalance),
-          token.decimals
-        )
+        balance: BigInt(result.output.result.tokenBalances[index].tokenBalance)
       }))
     }
   })
@@ -109,15 +107,15 @@ export function cosmosBalancesQuery({
   chainId: string
 }) {
   return createQuery({
-    queryKey: [address, "balances", chainId],
+    queryKey: ["balances", chainId, address],
     enabled: isValidCosmosAddress(address),
     refetchOnWindowFocus: false,
     queryFn: async () => {
         const restUrl = CHAIN_URLS[chainId].REST
         const response = await fetch(
             `${restUrl}/cosmos/bank/v1beta1/balances/${address}`,
-        )
-        if (!response.ok) return []
+        {});
+        if (!response.ok) return new Error("invalid response");
         return (await response.json()).balances.map((x) => {
             return {
                 address: x.denom,

app/src/routes/balance/+page.svelte

@@ -1,27 +1,53 @@
 <script lang="ts">
-  import { createQuery } from '@tanstack/svelte-query'
   import { cosmosBalancesQuery, evmBalancesQuery } from '$lib/queries/balance'
-  import { CHAIN_URLS } from '$lib/constants';
   import { sepoliaStore } from "$lib/wallet/evm/config.ts"
   import { cosmosStore } from "$lib/wallet/cosmos"
 
-$: evmBalances = evmBalancesQuery({
-    chainId: '11155111',
-    address: $sepoliaStore.address,
-    tokenSpecification: 'erc20',
-})
+  let evmBalances: null | ReturnType<typeof evmBalancesQuery>;
+  $: if($sepoliaStore.address) evmBalances = evmBalancesQuery({
+      chainId: '11155111',
+      address: $sepoliaStore.address,
+      tokenSpecification: 'erc20',
+  })
 
-$: cosmosBalances = cosmosBalancesQuery({
+  let cosmosBalances: null | ReturnType<typeof cosmosBalancesQuery>;
+  $: if ($cosmosStore.address) cosmosBalances = cosmosBalancesQuery({
     chainId: 'union-testnet-8',
-      address: $cosmosStore.address
+    address: $cosmosStore.address
   })
 
-$: data1 = $cosmosBalances?.data || []
-$: data2 = $evmBalances?.data || []
-
 </script>
 
-<main>
-    <pre>{JSON.stringify(data1, undefined, 2)}</pre>
-    <pre>{JSON.stringify(data2, undefined, 2)}</pre>
-</main>
+
+<div>
+  <h2>Sepolia</h2>
+  {#if $evmBalances}
+    {#if $evmBalances.isLoading}
+      Loading...
+    {:else if $evmBalances.isError}
+      {$evmBalances.error.message}
+    {:else if $evmBalances.isSuccess}
+      <pre>{JSON.stringify($evmBalances.data, null, 2)}</pre>
+    {/if}
+  {:else}
+    <p>Connect your EVM wallet to continue</p>
+  {/if}
+
+</div>
+
+
+<div>
+  <h2>Cosmos</h2>
+  {#if $cosmosBalances}
+    {#if $cosmosBalances.isLoading}
+      Loading...
+    {:else if $cosmosBalances.isError}
+      {$cosmosBalances.error.message}
+    {:else if $cosmosBalances.isSuccess}
+      <pre>{JSON.stringify($cosmosBalances.data)}</pre>
+    {/if}
+  {:else}
+    <p>Connect your cosmos wallet to continue</p>
+  {/if}
+</div>
+