fix(app): save store reactivity progress

app/src/lib/components/TransferFrom/index.svelte

@@ -7,8 +7,21 @@ import Chains from "$lib/components/TransferFrom/components/Cube/faces/Chains.sv
 import Assets from "$lib/components/TransferFrom/components/Cube/faces/Assets.svelte"
 import Transfer from "$lib/components/TransferFrom/components/Cube/faces/Transfer.svelte"
 import Cube from "$lib/components/TransferFrom/components/Cube/index.svelte"
+import type {Chain, UserAddresses} from "$lib/types.ts";
+import {userBalancesQuery} from "$lib/queries/balance";
+import {balanceStore, userAddress} from "$lib/components/TransferFrom/transfer/balances.ts";
 
-const stores = createTransferStore()
+export let chains: Array<Chain>
+
+$: userBalancesQuery({
+  chains,
+  userAddr: $userAddress,
+  connected: true
+}).subscribe(x => {
+  balanceStore.set(x)
+})
+
+const stores = createTransferStore(chains)
 </script>
 
 <Cube>

app/src/lib/components/TransferFrom/transfer/balances.ts

@@ -0,0 +1,17 @@
+import {derived, type Readable, writable} from "svelte/store";
+import type {UserAddresses} from "$lib/types.ts";
+import {userAddrCosmos} from "$lib/wallet/cosmos";
+import {userAddrEvm} from "$lib/wallet/evm";
+import {userAddressAptos} from "$lib/wallet/aptos";
+import type {QueryObserverResult} from "@tanstack/query-core";
+
+export let userAddress: Readable<UserAddresses> = derived(
+  [userAddrCosmos, userAddrEvm, userAddressAptos],
+  ([$userAddrCosmos, $userAddrEvm, $userAddressAptos]) => ({
+    evm: $userAddrEvm,
+    cosmos: $userAddrCosmos,
+    aptos: $userAddressAptos
+  })
+)
+
+export let balanceStore = writable<QueryObserverResult<any>[]>([])

app/src/lib/components/TransferFrom/transfer/context.ts

@@ -1,11 +1,7 @@
-import { derived, get, type Readable } from "svelte/store"
-import { userAddrCosmos } from "$lib/wallet/cosmos"
-import { userAddrEvm } from "$lib/wallet/evm"
-import { userAddressAptos } from "$lib/wallet/aptos"
-import { userBalancesQuery } from "$lib/queries/balance"
+import { derived, type Readable } from "svelte/store"
 import type { Chain, UserAddresses } from "$lib/types"
-import { useQueryClient } from "@tanstack/svelte-query"
 import type { Address } from "$lib/wallet/types"
+import { balanceStore, userAddress } from "./balances"
 
 export type BalanceRecord = {
   balance: bigint
@@ -27,27 +23,17 @@ export interface ContextStore {
   balances: BalancesList
 }
 
-export function createContextStore(): Readable<ContextStore> {
-  const queryClient = useQueryClient()
-
-  const queryData = <T extends Array<unknown>>(
-    key: Array<string>,
-    filter?: (value: T[number]) => boolean
-  ): T => {
-    const data = queryClient.getQueryData<T>(key) ?? []
-    return (filter ? data.filter(filter) : data) as T
-  }
-
-  const chains = queryData<Array<Chain>>(["chains"], chain => chain.enabled_staging)
-
-  const userAddress = derived(
-    [userAddrCosmos, userAddrEvm, userAddressAptos],
-    ([cosmos, evm, aptos]) => ({ evm, aptos, cosmos })
-  ) as Readable<UserAddresses>
-
+export function createContextStore(chains: Array<Chain>): Readable<ContextStore> {
   const balances = derived(
-    [userAddress, userBalancesQuery({ chains, connected: true, userAddr: get(userAddress) })],
-    ([_, $rawBalances]) => {
+    balanceStore,
+    ($rawBalances) => {
+      if (!$rawBalances?.length) {
+        return chains.map(chain => ({
+          chainId: chain.chain_id,
+          balances: []
+        }))
+      }
+
       return chains.map((chain, chainIndex) => {
         const balanceResult = $rawBalances[chainIndex]
 
@@ -63,7 +49,10 @@ export function createContextStore(): Readable<ContextStore> {
           chainId: chain.chain_id,
           balances: balanceResult.data.map(balance => ({
             ...balance,
-            balance: BigInt(balance.balance)
+            balance: BigInt(balance.balance),
+            gasToken: balance.gasToken ?? false,
+            address: balance.address as Address,
+            symbol: balance.symbol || balance.address
           }))
         }
       })
@@ -75,4 +64,4 @@ export function createContextStore(): Readable<ContextStore> {
     userAddress: $userAddress,
     balances: $balances
   }))
-}
+}

app/src/lib/components/TransferFrom/transfer/index.ts

@@ -12,6 +12,9 @@ import {
   createValidationStore,
   type ValidationStore
 } from "$lib/components/TransferFrom/transfer/validation.ts"
+import type { Chain, UserAddresses } from "$lib/types"
+import type { QueryObserverResult } from "@tanstack/svelte-query"
+
 
 export interface TransferStore {
   rawIntents: RawIntentsStore
@@ -20,9 +23,9 @@ export interface TransferStore {
   validation: Readable<ValidationStore>
 }
 
-export function createTransferStore(): TransferStore {
+export function createTransferStore(chains: Array<Chain>): TransferStore {
   const rawIntents = createRawIntentsStore()
-  const context = createContextStore()
+  const context = createContextStore(chains)
   const intents = createIntentStore(rawIntents, context)
   const validation = createValidationStore(rawIntents, intents, context)
 
@@ -32,4 +35,4 @@ export function createTransferStore(): TransferStore {
     intents,
     validation
   }
-}
+}

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

@@ -7,8 +7,8 @@ import TransferFrom from "$lib/components/TransferFrom/index.svelte"
   <title>Union | Send</title>
 </svelte:head>
 
-<ChainsGate>
+<ChainsGate let:chains>
   <div class="w-full flex flex-col justify-center items-center">
-    <TransferFrom />
+    <TransferFrom {chains} />
   </div>
 </ChainsGate>