fix(app): save before sleep

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

@@ -1,22 +1,21 @@
 <script lang="ts">
-import CopyUrlButton from "$lib/components/TransferFrom/components/CopyUrlButton.svelte"
-import ResetButton from "$lib/components/TransferFrom/components/ResetButton.svelte"
-import CollapsibleDisplay from "./CollapsibleDisplay.svelte"
-import type { IntentStore } from "../transfer/intents.ts"
-import type { ValidationStore } from "../transfer/validation.ts"
-import type { ContextStore } from "../transfer/context.ts"
-
-interface DebugProps {
-  intents: IntentStore
-  validation: ValidationStore
-  context: ContextStore
-}
-
-export let intents: DebugProps["intents"]
-export let validation: DebugProps["validation"]
-export let context: DebugProps["context"]
-
-const { userAddress, sourceChain, destinationChain, balances, assetInfo, chains } = context
+  import CopyUrlButton from "$lib/components/TransferFrom/components/CopyUrlButton.svelte"
+  import ResetButton from "$lib/components/TransferFrom/components/ResetButton.svelte"
+  import CollapsibleDisplay from "./CollapsibleDisplay.svelte"
+  import type { IntentStore } from "../transfer/intents.ts"
+  import type { ValidationStoreAndMethods } from "../transfer/validation.ts"
+  import type { ContextStore } from "../transfer/context.ts"
+  import type { Readable } from "svelte/store"
+
+  interface DebugProps {
+    intents: IntentStore
+    validation: ValidationStoreAndMethods
+    context: Readable<ContextStore>
+  }
+
+  export let intents: DebugProps["intents"]
+  export let validation: DebugProps["validation"]
+  export let context: DebugProps["context"]
 </script>
 
 <div class="p-4 w-full">
@@ -33,31 +32,31 @@ const { userAddress, sourceChain, destinationChain, balances, assetInfo, chains
     </div>
 
     <div class="mb-4">
-      <CollapsibleDisplay data={$validation} initiallyExpanded label="Validation Errors" color="text-red-500"/>
+      <CollapsibleDisplay data={$validation} initiallyExpanded label="Validation" color="text-red-500"/>
     </div>
 
     <div class="mb-4">
-      <CollapsibleDisplay data={$userAddress} initiallyExpanded label="User Addresses" color="text-orange-500"/>
+      <CollapsibleDisplay data={$context.userAddress} initiallyExpanded label="User Addresses" color="text-orange-500"/>
     </div>
 
     <div class="mb-4">
-      <CollapsibleDisplay data={$assetInfo} label="Selected Asset Info" color="text-yellow-500"/>
+      <CollapsibleDisplay data={$context.assetInfo} label="Selected Asset Info" color="text-yellow-500"/>
     </div>
 
     <div class="mb-4">
-      <CollapsibleDisplay data={$balances} label="Balances" color="text-purple-500"/>
+      <CollapsibleDisplay data={$context.balances} label="Balances" color="text-purple-500"/>
     </div>
 
     <div class="mb-4">
-      <CollapsibleDisplay data={$sourceChain} label="Source Chain" color="text-blue-500"/>
+      <CollapsibleDisplay data={$context.sourceChain} label="Source Chain" color="text-blue-500"/>
     </div>
 
     <div class="mb-4">
-      <CollapsibleDisplay data={$destinationChain} label="Destination Chain" color="text-green-500"/>
+      <CollapsibleDisplay data={$context.destinationChain} label="Destination Chain" color="text-green-500"/>
     </div>
 
     <div class="mb-4">
-      <CollapsibleDisplay data={chains} label="Available Chains" color="text-indigo-500"/>
+      <CollapsibleDisplay data={$context.chains} label="Available Chains" color="text-indigo-500"/>
     </div>
   </div>
 </div>

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

@@ -117,6 +117,6 @@
   <DebugBox
           {intents}
           {validation}
-          context={context}
+          {context}
   />
 {/if}

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

@@ -13,7 +13,6 @@ export type AddressBalance = {
   gasToken: boolean
   address: Address
   symbol: string
-  chain_id: string
 }
 
 export type NamedBalance = {
@@ -22,12 +21,9 @@ export type NamedBalance = {
   name: string | null
   symbol: string
   gasToken: boolean
-  chain_id: string
 }
 
-export type EmptyBalance = {
-  chain_id: string
-}
+export type EmptyBalance = {}
 
 export type Balance = AddressBalance | NamedBalance | EmptyBalance
 
@@ -75,18 +71,22 @@ export function createContextStore(intents: IntentStore): Readable<ContextStore>
       userAddress,
       userBalancesQuery({ chains, connected: true, userAddr: get(userAddress) })
     ],
-    ([_intentsValue, _userAddressValue, rawBalances]) => {
-      return rawBalances.flatMap((balanceResult, index) => {
-        const chain = chains[index]
-        if (!balanceResult?.isSuccess || balanceResult.data instanceof Error) {
-          return []
-        }
-        return balanceResult.data.map(balance => ({
-          ...balance,
-          balance: BigInt(balance.balance),
-          chain_id: chain.chain_id // Add chain_id to each balance
-        }))
-      })
+    ([intentsValue, _userAddressValue, rawBalances]) => {
+      const sourceChain = chains.find(chain => chain.chain_id === intentsValue.source)
+      if (!sourceChain) return []
+
+      const chainIndex = chains.findIndex(c => c.chain_id === sourceChain.chain_id)
+      const balanceResult = rawBalances[chainIndex]
+
+      if (!balanceResult?.isSuccess || balanceResult.data instanceof Error) {
+        console.log("No balances fetched yet for selected chain")
+        return []
+      }
+
+      return balanceResult.data.map(balance => ({
+        ...balance,
+        balance: BigInt(balance.balance)
+      }))
     }
   )
 

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

@@ -121,4 +121,4 @@ export function createIntentStore(): IntentStore {
       set(defaultParams)
     }
   }
-}
+}