From 4b2dad20d16524a7c42624d4641fba6b68e5f2ba Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Sun, 9 Jun 2024 13:01:01 +0200
Subject: [PATCH 1/2] fix(app): fix text connect btn

---
 app/src/lib/components/connect/connect.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte
index e94e9c38b0..a1863f92d4 100644
--- a/app/src/lib/components/connect/connect.svelte
+++ b/app/src/lib/components/connect/connect.svelte
@@ -17,7 +17,11 @@ import { cosmosStore, cosmosWalletsInformation } from "$lib/wallet/cosmos/index.
 /**
  * TODO: check both chains
  */
-$: buttonText = $sepoliaStore.connectionStatus === "connected" ? "Connected" : "Connect Wallet"
+
+$: buttonText =
+  $sepoliaStore.connectionStatus === "connected" || $cosmosStore.connectionStatus === "connected"
+    ? "Connected"
+    : "Connect Wallet"
 
 let sheetOpen = false
 $: if ($navigating) sheetOpen = false

From 1aa4093b767e05a5bccf9868b6d68bbf23b7c1f9 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Sun, 9 Jun 2024 13:01:44 +0200
Subject: [PATCH 2/2] fix(app): toasts and btn fix

---
 app/src/lib/components/SpinnerSVG.svelte | 19 ++++++++++++++++
 app/src/routes/faucet/+page.svelte       | 28 +++++++++---------------
 2 files changed, 29 insertions(+), 18 deletions(-)
 create mode 100644 app/src/lib/components/SpinnerSVG.svelte

diff --git a/app/src/lib/components/SpinnerSVG.svelte b/app/src/lib/components/SpinnerSVG.svelte
new file mode 100644
index 0000000000..409ba1f28a
--- /dev/null
+++ b/app/src/lib/components/SpinnerSVG.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+export let className: string
+//Add this through our icon package instead
+</script>
+
+<svg class={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g stroke="currentColor">
+    <circle cx="12" cy="12" fill="none" r="9.5" stroke-linecap="round" stroke-width="3">
+      <animate attributeName="stroke-dasharray" calcMode="spline" dur="1.5s"
+               keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite"
+               values="0 150;42 150;42 150;42 150"/>
+      <animate attributeName="stroke-dashoffset" calcMode="spline" dur="1.5s"
+               keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite"
+               values="0;-16;-59;-59"/>
+    </circle>
+    <animateTransform attributeName="transform" dur="2s" repeatCount="indefinite" type="rotate"
+                      values="0 12 12;360 12 12"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/app/src/routes/faucet/+page.svelte b/app/src/routes/faucet/+page.svelte
index 4eb7fa89d2..596e8ee1a8 100644
--- a/app/src/routes/faucet/+page.svelte
+++ b/app/src/routes/faucet/+page.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-import toast from "svelte-french-toast"
 import { debounce } from "$lib/utilities/index.ts"
 import LockLockedIcon from "virtual:icons/lucide/lock"
 import { Input } from "$lib/components/ui/input/index.ts"
 import LockOpenIcon from "virtual:icons/lucide/lock-open"
 import { Button } from "$lib/components/ui/button/index.ts"
 import { cosmosStore } from "$/lib/wallet/cosmos/config.ts"
-import LoadingIcon from "virtual:icons/lucide/loader-circle"
 import { unionTransfersQuery } from "$lib/queries/transfers.ts"
 import ExternalLinkIcon from "virtual:icons/lucide/external-link"
 import { unionAddressRegex } from "./schema.ts"
@@ -14,6 +12,8 @@ import { isValidCosmosAddress } from "$/lib/wallet/utilities/validate.ts"
 import { Label } from "$lib/components/ui/label"
 import { getUnoFromFaucet } from "$lib/mutations/faucet.ts"
 import { createMutation, createQuery } from "@tanstack/svelte-query"
+import { toast } from "svelte-sonner"
+import SpinnerSVG from "$lib/components/SpinnerSVG.svelte"
 import * as Form from "$lib/components/ui/form/index.ts"
 import * as Card from "$lib/components/ui/card/index.ts"
 
@@ -44,15 +44,6 @@ let submissionStatus: "idle" | "submitting" | "submitted" | "error" = "idle"
 let inputState: "locked" | "unlocked" = $cosmosStore.address ? "locked" : "unlocked"
 const onLockClick = () => (inputState = inputState === "locked" ? "unlocked" : "locked")
 
-$: {
-  if (submissionStatus === "submitting") {
-    toast.loading("Submitting faucet request 🚰", {
-      duration: debounceDelay - 300,
-      className: "text-sm p-2.5"
-    })
-  }
-}
-
 let opacity = 0
 
 let focused = false
@@ -87,8 +78,10 @@ const mutation = createMutation({
   onError: error => {
     console.error("Error during the faucet request:", error)
     submissionStatus = "error"
+    toast.error("Faucet request failed.")
   },
   onSuccess: data => {
+    toast.success("Faucet request successful!")
     console.log("Faucet request successful:", data)
   }
 })
@@ -99,19 +92,16 @@ const debouncedSubmit = debounce(() => {
     return
   }
   $mutation.mutate()
-  console.log("here")
   submissionStatus = "submitted"
+  toast.error("Faucet request submitted!")
 }, debounceDelay)
 
 const handleSubmit = () => {
   submissionStatus = "submitting"
+  toast.loading("Submitting faucet request..")
   debouncedSubmit()
 }
 
-$: if ($mutation.status === "success") toast.success("Success!")
-
-$: console.log(submissionStatus)
-
 $: unionBalancesQuery = createQuery<Balance>({
   queryKey: [$cosmosStore.address, "balance", "union-testnet-8"],
   refetchInterval: 5000,
@@ -159,7 +149,7 @@ $: unionBalancesQuery = createQuery<Balance>({
                     bind:value={address}
                     disabled={inputState === 'locked'}
                     id="address"
-                    on:blur={handleBlur()}
+                    on:blur={handleBlur}
                     on:focus={handleFocus}
                     on:input={handleInput}
                     on:mouseenter={handleMouseEnter}
@@ -208,7 +198,9 @@ $: unionBalancesQuery = createQuery<Balance>({
             <Button class="w-full sm:w-fit" type="submit">
               Submit
               {#if submissionStatus === 'submitting'}
-                <LoadingIcon/>
+              <span class="ml-2">
+                <SpinnerSVG className="w-4 h-4"/>
+              </span>
               {/if}
             </Button>
             <a class="flex items-center gap-x-2 font-bold text-xs" href="https://git-faucets.web.val.run"