good UX 🧌

src/App.tsx

@@ -1,6 +1,6 @@
 import { useAccount, useSignMessage } from "wagmi";
 import { useEffect, useState } from "react";
-import { Balance, Connect } from "./components";
+import { Balance, Connect, LoadingIndicator } from "./components";
 import { BalanceType } from "./components";
 import { verifyMessage } from "ethers/lib/utils";
 import { SignMessageArgs } from "@wagmi/core";
@@ -14,7 +14,7 @@ export function App() {
   const [balances, setBalances] = useState<BalanceType[]>([]);
   const baseUrl = "https://faucet-api.ethbrno.cz";
 
-  const getEligibilityData = async () => {
+  const getBalanceData = async () => {
     if (!address) return;
     setIsFetching("eligibility");
     try {
@@ -67,6 +67,7 @@ export function App() {
       .then((response) => response.json())
       .then((data) => {
         //console.log("Success:", data);
+        getBalanceData();
         setIsFetching("none");
       })
       .catch((error) => {
@@ -87,7 +88,7 @@ export function App() {
   }
 
   useEffect(() => {
-    getEligibilityData();
+    getBalanceData();
   }, [address]);
 
   return (
@@ -165,7 +166,19 @@ export function App() {
                   </p>
                 </>
               )
-              : <Balance {...balances} />}
+              : (
+                <>
+                  {isFetching == "tokens"
+                    ? <LoadingIndicator />
+                    : <Balance {...balances} />}
+
+                  <div className="w-full flex justify-end items-end">
+                    <button className="mr-4" onClick={() => getBalanceData()}>
+                      ⟳ Refresh
+                    </button>
+                  </div>
+                </>
+              )}
             {!isConnecting || isConnected
               ? (
                 <div className="mb-4 text-sm font-medium">

src/components/Connect.tsx

@@ -22,7 +22,7 @@ export function Connect() {
             .filter((x) => x.ready && x.id !== connector?.id)
             .map((x) => (
               <button
-                className="whitebtn hover:border-teal-400"
+                className="whitebtn"
                 key={x.id}
                 onClick={() => connect({ connector: x })}
               >

src/components/LoadingIndicator.tsx

@@ -0,0 +1,42 @@
+export function LoadingIndicator() {
+  return (
+    <div className="text-gray-900 body-font w-full bg-white/20 my-4 p-4 border-white/20 border">
+      <div className="container mx-auto">
+        <div className="flex justify-start align-middle items-center">
+          <div className="p-4 ">
+            <h2 className="title-font font-medium sm:text-2xl text-3xl">
+              <svg
+                className="animate-spin -ml-1 mr-3 h-5 w-5 text-black"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                >
+                </circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                >
+                </path>
+              </svg>
+            </h2>
+          </div>
+          <div className="p-4 ">
+            <h2 className="title-font font-medium sm:text-2xl text-3xl">
+              Requesting tokens
+            </h2>
+            <p className="leading-relaxed">This can take some time...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/index.ts

@@ -2,4 +2,4 @@ export { Account } from './Account'
 export { Connect } from './Connect'
 export { Balance } from './Balance'
 export type { BalanceType } from './Balance'
-export { NetworkSwitcher } from './NetworkSwitcher'
+export { LoadingIndicator } from './LoadingIndicator'

src/index.css

@@ -16,7 +16,7 @@
     }
 
     .whitebtn {
-        @apply px-6 h-12 uppercase font-semibold tracking-wider border border-slate-200 text-slate-900 hover:border-[#3441c0] disabled:opacity-10;
+        @apply px-6 h-12 uppercase font-semibold tracking-wider border border-slate-200 text-slate-900 hover:border-[#3441c0] disabled:opacity-10 hover:bg-white/30;
     }
 
     .redbtn {