fix(app): save progress

unionlabs · Jun 8, 2024 · 8ba2215 · 8ba2215
1 parent aac38a1
commit 8ba2215
Show file tree

Hide file tree

Showing 6 changed files with 301 additions and 299 deletions.
diff --git a/app/src/lib/graphql/client.ts b/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 }
+}
diff --git a/app/src/lib/graphql/documents/faucet.ts b/app/src/lib/graphql/documents/faucet.ts
@@ -0,0 +1,6 @@
+export const faucetUnoMutation = `
+mutation FaucetUnoMutation($address: Address!) {
+  faucet {
+    send(input: {toAddress: $address})
+  }
+}`
diff --git a/app/src/lib/mutations/faucet.ts b/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 }

diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
@@ -1,71 +1,53 @@
 <script lang="ts">
-import "$lib/polyfill.ts"
-import "$styles/index.css"
-import { onMount } from "svelte"
-import { ModeWatcher } from "mode-watcher"
-import { browser } from "$app/environment"
-import { onNavigate } from "$app/navigation"
-import { page, navigating } from "$app/stores"
-import { shortcut } from "@svelte-put/shortcut"
-import { cosmosStore } from "$lib/wallet/cosmos"
-import Footer from "$lib/components/footer.svelte"
-import { Toaster } from "$lib/components/ui/sonner"
-import Header from "$lib/components/header/header.svelte"
-import { updateTheme } from "$lib/utilities/update-theme.ts"
-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 { PersistQueryClientProvider } from "@tanstack/svelte-query-persist-client"
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"
+  import "$lib/polyfill.ts"
+  import "$styles/index.css"
+  import { onMount } from "svelte"
+  import { ModeWatcher } from "mode-watcher"
+  import { browser } from "$app/environment"
+  import { onNavigate } from "$app/navigation"
+  import { page, navigating } from "$app/stores"
+  import { shortcut } from "@svelte-put/shortcut"
+  import { cosmosStore } from "$lib/wallet/cosmos"
+  import Footer from "$lib/components/footer.svelte"
+  import { Toaster } from "$lib/components/ui/sonner"
+  import Header from "$lib/components/header/header.svelte"
+  import { updateTheme } from "$lib/utilities/update-theme.ts"
+  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 { notifyManager } from "@tanstack/svelte-query"
+  import { PersistQueryClientProvider } from "@tanstack/svelte-query-persist-client"
+  import { createQueryClient } from "$lib/graphql/client.ts";
 
-if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
+  const { queryClient, localStoragePersister } = createQueryClient();
+  if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
 
-$: updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
+  $: updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
 
-onMount(() => {
-  /* fix for iOS Safari viewport zooming on input focus */
-  if (navigator.userAgent.indexOf("iPhone") === -1) return
-  const metaElement = document.querySelector("meta[name=viewport]")
-  if (!metaElement) return
-  metaElement.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1")
-})
-
-onMount(() => {
-  const lastConnectedWallet = $cosmosStore["connectedWallet"] as "leap" | "keplr"
-  if (
-    lastConnectedWallet &&
-    window[lastConnectedWallet] &&
-    ["leap", "keplr"].includes(lastConnectedWallet)
-  )
-    return cosmosStore.connect(lastConnectedWallet)
+  onMount(() => {
+    /* fix for iOS Safari viewport zooming on input focus */
+    if (navigator.userAgent.indexOf("iPhone") === -1) return
+    const metaElement = document.querySelector("meta[name=viewport]")
+    if (!metaElement) return
+    metaElement.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1")
+  })
 
-  if (window?.keplr) cosmosStore.connect("keplr")
-  else if (window?.leap) cosmosStore.connect("leap")
-})
+  onMount(() => {
+    const lastConnectedWallet = $cosmosStore["connectedWallet"] as "leap" | "keplr"
+    if (
+      lastConnectedWallet &&
+      window[lastConnectedWallet] &&
+      ["leap", "keplr"].includes(lastConnectedWallet)
+    )
+      return cosmosStore.connect(lastConnectedWallet)
 
-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()
-      }
-    }
+    if (window?.keplr) cosmosStore.connect("keplr")
+    else if (window?.leap) cosmosStore.connect("leap")
   })
-})
 
-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>