fix(app): fix faucet (#2077)

Things left to do

- [ ] Fix balance formating
- [ ] Fix toasts and texts
- [ ] Check if claimed / Limit claims
- [ ] Show TX status (success, waiting, fail)

(I clearly have issues with my env, got biome installed but not
formatting according to config)

app/src/lib/graphql/client.ts

@@ -0,0 +1,29 @@
+import { MutationCache, QueryClient } from "@tanstack/svelte-query"
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"
+import { browser } from "$app/environment"
+
+export function createQueryClient() {
+  const queryClient: QueryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        enabled: browser,
+        gcTime: 1000 * 60 * 60 * 24,
+        refetchOnReconnect: () => !queryClient.isMutating()
+      }
+    },
+    mutationCache: new MutationCache({
+      onSettled: () => {
+        if (queryClient.isMutating() === 1) {
+          return queryClient.invalidateQueries()
+        }
+      }
+    })
+  })
+
+  const localStoragePersister = createSyncStoragePersister({
+    key: "SVELTE_QUERY",
+    storage: typeof window !== "undefined" ? window.localStorage : undefined // Use local storage if in browser
+  })
+
+  return { queryClient, localStoragePersister }
+}

app/src/lib/graphql/documents/faucet.ts

@@ -0,0 +1,6 @@
+export const faucetUnoMutation = `
+mutation FaucetUnoMutation($address: Address!) {
+  faucet {
+    send(input: {toAddress: $address})
+  }
+}`

app/src/lib/mutations/faucet.ts

@@ -1,28 +1,32 @@
+import { faucetUnoMutation } from "$lib/graphql/documents/faucet.ts"
+import { URLS } from "$lib/constants"
+
 export async function getUnoFromFaucet(address: string) {
-  const response = await fetch("https://graphql.union.build/v1/graphql", {
+  const response = await fetch(URLS.GRAPHQL, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
-      query: /* GraphQL */ `
-        mutation GetUno($address: Address!) {
-          faucet { send(input: { toAddress: $address }) }
-        }
-      `,
+      query: faucetUnoMutation,
       variables: { address },
-      operationName: "GetUno"
+      operationName: "FaucetUnoMutation"
     })
   })
 
-  if (!response.ok) return { error: await response.text(), status: response.status }
+  if (!response.ok) {
+    const errorText = await response.text()
+    console.error("Fetch error:", errorText)
+    return { error: errorText, status: response.status }
+  }
 
   const responseJson = (await response.json()) as {
-    data?: { union: { send: string } }
+    data?: { faucet: { send: string } }
     errors?: Array<{ message: string }>
   }
-  if ("errors" in responseJson) {
-    const [error] = responseJson.errors || []
-    console.error(error)
-    return { error: error.message, status: response.status }
+
+  if (responseJson.errors && responseJson.errors.length > 0) {
+    const errorMessage = responseJson.errors.map(e => e.message).join("; ")
+    console.error("GraphQL error:", errorMessage)
+    return { error: errorMessage, status: response.status }
   }
 
   return { data: responseJson.data, status: response.status }

app/src/routes/+layout.svelte

@@ -16,10 +16,11 @@ import OnlineStatus from "$lib/components/online-status.svelte"
 import { partytownSnippet } from "@builder.io/partytown/integration"
 import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools"
 import PreloadingIndicator from "$lib/components/preloading-indicator.svelte"
-import { QueryClient, MutationCache, notifyManager } from "@tanstack/svelte-query"
+import { notifyManager } from "@tanstack/svelte-query"
 import { PersistQueryClientProvider } from "@tanstack/svelte-query-persist-client"
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"
+import { createQueryClient } from "$lib/graphql/client.ts"
 
+const { queryClient, localStoragePersister } = createQueryClient()
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
 
 $: updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
@@ -45,27 +46,7 @@ onMount(() => {
   else if (window?.leap) cosmosStore.connect("leap")
 })
 
-const queryClient: QueryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      enabled: browser,
-      gcTime: 1_000 * 60 * 60 * 24, // 24 hours
-      refetchOnReconnect: () => !queryClient.isMutating()
-    }
-  },
-  mutationCache: new MutationCache({
-    onSettled: () => {
-      if (queryClient.isMutating() === 1) {
-        return queryClient.invalidateQueries()
-      }
-    }
-  })
-})
-
-const localStoragePersister = createSyncStoragePersister({
-  key: "SVELTE_QUERY",
-  storage: browser ? window.localStorage : undefined // or window.sessionStorage
-})
+onNavigate(navigation => console.info("Navigating to", navigation.to?.route.id))
 </script>
 
 <svelte:head>