fix(app): toasts and btns (#2080)

- Added toasts back
- Fixed spinner on btn
- "Connect wallet" / "Connected" btn to work with `$cosmosStore` as
well. (We could have something inline with "Connected 1/2" to give more
info on connect btn.)

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>

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

app/src/routes/faucet/+page.svelte

@@ -1,19 +1,19 @@
 <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"
 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"