feat(app): add persisted cache to quotetoken (#3822)

we key this on `${$source}-${$asset}-${$destination}`

Author: cor

app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte

@@ -12,6 +12,7 @@ import Address from "$lib/components/address.svelte"
 import type { Intents } from "$lib/components/TransferFrom/transfer/types.ts"
 import type { Chain } from "$lib/types.ts"
 import TokenBalance from "$lib/components/TransferFrom/components/TokenBalance.svelte"
+import InlineLoadingDots from "$lib/components/InlineLoadingDots.svelte"
 
 interface Props {
   rawIntents: RawIntentsStore
@@ -26,6 +27,7 @@ export let intents: Props["intents"]
 export let validation: Props["validation"]
 export let chains: Props["chains"]
 export let rotateTo: Props["rotateTo"]
+$: console.log(intents.quoteToken)
 </script>
 
 <div class="flex flex-col w-full h-full">
@@ -105,23 +107,28 @@ export let rotateTo: Props["rotateTo"]
     <div>
       {#if !intents.channel}
         <div class="flex justify-center">
-          <p class="text-xs text-center max-w-[230px]">No recommended UCS03 channel to go from {toDisplayName($rawIntents.source, chains)}
-            to {toDisplayName($rawIntents.destination, chains)}</p>
+          <p class="text-xs text-center max-w-[230px]">
+            No recommended UCS03 channel to go from {toDisplayName($rawIntents.source, chains)}
+            to {toDisplayName($rawIntents.destination, chains)}
+          </p>
         </div>
       {:else}
         <div class="flex flex-col gap-1 justify-end items-center">
-          <div class="flex gap-4 text-muted-foreground text-xs">{intents.channel.source_connection_id}
-            | {intents.channel.source_channel_id}
-            <ArrowRightIcon/>{intents.channel.destination_connection_id} | {intents.channel.destination_channel_id}
+          <div class="flex gap-4 text-muted-foreground text-xs">
+            {intents.channel.source_connection_id} | {intents.channel.source_channel_id}
+            <ArrowRightIcon /> {intents.channel.destination_connection_id} | {intents.channel.destination_channel_id}
           </div>
+
           {#if !$rawIntents.asset}
             <p class="text-xs">Select an asset</p>
           {:else if !$rawIntents.source || !$rawIntents.destination}
             <p class="text-xs">Select source and destination</p>
-          {:else if validation.args === "NO_QUOTE_AVAILABLE"}
-            <div class="text-xs text-center">No Quote Token available for this transfer. Sending new assets to Cosmos is
-              currently not supported and will be enabled in an update soon.
+          {:else if intents.quoteToken === "NO_QUOTE_AVAILABLE"}
+            <div class="text-xs text-center">
+              No Quote Token available for this transfer. Sending new assets to Cosmos is currently not supported and will be enabled in an update soon.
             </div>
+          {:else if intents.quoteToken === "QUOTE_LOADING"}
+            <InlineLoadingDots />
           {:else if intents.quoteToken}
             <div class="flex-1 flex flex-col items-center text-xs">
               <Token chainId={$rawIntents.destination} denom={intents.quoteToken} {chains}/>
@@ -132,8 +139,10 @@ export let rotateTo: Props["rotateTo"]
           {/if}
         </div>
       {/if}
-      <Button class="w-full mt-2" disabled={!validation.isValid} on:click={() => rotateTo("verifyFace")}>Transfer
+      <Button class="w-full mt-2" disabled={!validation.isValid} on:click={() => rotateTo("verifyFace")}>
+        Transfer
       </Button>
     </div>
+
   </div>
 </div>

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

@@ -5,7 +5,7 @@ import Assets from "$lib/components/TransferFrom/components/Cube/faces/Assets.sv
 import Transfer from "$lib/components/TransferFrom/components/Cube/faces/Transfer.svelte"
 import Cube from "$lib/components/TransferFrom/components/Cube/index.svelte"
 import type { Chain, Ucs03Channel } from "$lib/types.ts"
-import { derived } from "svelte/store"
+import { derived, get, type Readable } from "svelte/store"
 import { getChannelInfo, getQuoteToken } from "@unionlabs/client"
 import { createRawIntentsStore } from "$lib/components/TransferFrom/transfer/raw-intents.ts"
 import { userAddrCosmos } from "$lib/wallet/cosmos"
@@ -17,6 +17,12 @@ import { balances } from "$lib/stores/balances.ts"
 import { tokenInfos } from "$lib/stores/tokens.ts"
 import { onMount } from "svelte"
 import { queryBalances } from "$lib/stores/balances.ts"
+import type {
+  DerivedSource,
+  Nullable,
+  QuoteData
+} from "$lib/components/TransferFrom/transfer/types.ts"
+import { persisted } from "svelte-persisted-store"
 
 export let chains: Array<Chain>
 export let ucs03channels: Array<Ucs03Channel>
@@ -32,7 +38,11 @@ const userAddress = derived(
   })
 )
 
-const quoteToken = derived(
+const quoteResults = persisted<Record<string, QuoteData | null>>("quote-results", {})
+const quoteToken: Readable<Nullable<QuoteData>> = derived<
+  [DerivedSource, DerivedSource, DerivedSource],
+  Nullable<QuoteData>
+>(
   [
     derived(rawIntents, $r => $r.source),
     derived(rawIntents, $r => $r.asset),
@@ -41,22 +51,43 @@ const quoteToken = derived(
   ([$source, $asset, $destination], set) => {
     set(null)
 
-    if (!($source && $asset && ucs03channels)) {
-      return
-    }
+    if (!($source && $asset && $destination && ucs03channels)) return
 
     const channel = getChannelInfo($source, $destination, ucs03channels)
-    if (!channel) {
+    if (!channel) return
+
+    const sourceChain = chains.find(c => c.chain_id === $source)
+    if (!sourceChain) {
+      console.error("Invalid source chain in quote token calculation")
       return
     }
-    const sourceChain = chains.find(c => c.chain_id === $source)
 
-    if (!sourceChain) {
-      console.error("invalid source chain in quote token calculation")
+    const cacheKey = `${$source}-${JSON.stringify(channel)}-${$asset}-v1`
+    const cachedResult = get(quoteResults)[cacheKey] ?? null
+
+    if (cachedResult) {
+      set(cachedResult)
       return
     }
 
-    getQuoteToken($source, $asset, channel).then(quote => set(quote))
+    set({ type: "QUOTE_LOADING" })
+
+    //@ts-ignore
+    getQuoteToken($source, $asset, channel)
+      .then(result => {
+        if (result.isOk()) {
+          const quoteData = result.value
+          quoteResults.update(store => ({ ...store, [cacheKey]: quoteData }))
+          set(quoteData)
+        } else {
+          console.error("Error fetching quote token:", result.error)
+          set(null)
+        }
+      })
+      .catch(err => {
+        console.error("Unexpected error in getQuoteToken:", err)
+        set(null)
+      })
   },
   null
 )

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

@@ -2,9 +2,8 @@ import type { Chain, Ucs03Channel, UserAddresses } from "$lib/types"
 import type { FormFields } from "$lib/components/TransferFrom/transfer/raw-intents.ts"
 import { fromHex } from "viem"
 import { bech32ToBech32Address, getChannelInfo } from "@unionlabs/client"
-import type { Intents, QuoteResponse } from "$lib/components/TransferFrom/transfer/types.ts"
+import type { Intents, QuoteData } from "$lib/components/TransferFrom/transfer/types.ts"
 import type { Balances } from "$lib/stores/balances.ts"
-import type { Result } from "neverthrow"
 import type { TokenInfos } from "$lib/stores/tokens.ts"
 
 export const createIntents = (
@@ -14,7 +13,7 @@ export const createIntents = (
   chains: Array<Chain>,
   ucs03channels: Array<Ucs03Channel>,
   tokenInfos: TokenInfos,
-  quoteToken: Result<QuoteResponse, Error> | null
+  quoteToken: QuoteData | null
 ): Intents => {
   // Source Chain
   const sourceChain = chains.find(chain => chain.chain_id === rawIntents.source) ?? null
@@ -79,13 +78,12 @@ export const createIntents = (
     console.log(`[QuoteToken] is null`)
   }
 
-  const quoteTokenDenom = quoteToken
-    ? quoteToken.isErr()
-      ? null
-      : quoteToken.value.type === "NO_QUOTE_AVAILABLE"
+  const quoteTokenDenom =
+    quoteToken?.type === "QUOTE_LOADING"
+      ? "QUOTE_LOADING"
+      : quoteToken?.type === "NO_QUOTE_AVAILABLE"
         ? "NO_QUOTE_AVAILABLE"
-        : quoteToken.value.quote_token
-    : null
+        : (quoteToken?.quote_token ?? null)
 
   console.log(
     `[QuoteToken] quote for ${baseToken?.denom} from ${sourceChain?.chain_id} -> ${destinationChain?.chain_id}:`,

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

@@ -1,8 +1,7 @@
 import type { getChannelInfo } from "@unionlabs/client"
-import type { Chain, UserAddresses } from "$lib/types.ts"
-import type { FormFields } from "$lib/components/TransferFrom/transfer/raw-intents.ts"
-import type { Result } from "neverthrow"
+import type { Chain } from "$lib/types.ts"
 import type { Balance } from "$lib/stores/balances"
+import type { Readable } from "svelte/store"
 
 export type TransferArgs =
   | {
@@ -22,11 +21,6 @@ export type TransferContext = {
   destinationChain: Chain
 }
 
-export type BaseToken = {
-  denom: string
-  balance: string
-}
-
 export interface Intents {
   sourceChain: Chain | null
   destinationChain: Chain | null
@@ -47,22 +41,6 @@ export interface TokenInfo {
   }
 }
 
-// Add this interface to represent the balances structure
-export interface ChainBalance {
-  data?: {
-    chain_id: string
-    balances: Record<string, string>
-  }
-}
-
-export type FieldErrors = Partial<Record<keyof FormFields, string>>
-
-export interface ValidationContext {
-  userAddress: UserAddresses
-  baseTokenInfo?: TokenInfo | null
-  quoteToken: Result<QuoteResponse, Error> | null
-}
-
 export type QuoteResponse =
   | {
       quote_token: string
@@ -71,3 +49,11 @@ export type QuoteResponse =
   | {
       type: "NO_QUOTE_AVAILABLE"
     }
+
+export type Nullable<T> = T | null
+export type DerivedSource = Readable<Nullable<string>>
+export type QuoteTokenType = "UNWRAPPED" | "NEW_WRAPPED" | "NO_QUOTE_AVAILABLE"
+export type QuoteData =
+  | { quote_token: string; type: Extract<QuoteTokenType, "UNWRAPPED" | "NEW_WRAPPED"> }
+  | { type: Extract<QuoteTokenType, "NO_QUOTE_AVAILABLE"> }
+  | { type: "QUOTE_LOADING" }