with balance

src/App.tsx

@@ -90,21 +90,31 @@ export function App() {
     getEligibilityData();
   }, [address]);
 
-  function revalidate() {
-  }
-
-  //console.log(isEligible);
-
   return (
     <>
       <section>
         <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center opacity-70">
           <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
-            <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium">
-              Soulbound
-              <br />
-              <p className="font-bold text-[#3441c0]">ETH Faucet</p>
-            </h1>
+            <div className="flex flex-col">
+              <img className="w-48 -ml-2" src="logo.svg" />
+
+              <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
+                Soulbound
+                <br />
+                <p className="font-bold text-[#3441c0]">ETH Faucet</p>
+              </h1>
+            </div>
+            {!isEligible && isConnected && (
+              <div className="my-4 text-xs">
+                We cannot find a Soubound token in your wallet.{" "}
+                <a
+                  className="font-bold underline"
+                  href="https://mint.ethbrno.cz/"
+                >
+                  Mint yours here.
+                </a>
+              </div>
+            )}
             {isConnected && (
               <div className="flex items-baseline my-6">
                 <div className="space-x-6 flex text-sm font-medium">
@@ -160,17 +170,6 @@ export function App() {
                     >
                       Connect
                     </button>
-                    <button
-                      className={isEligible || !isConnected
-                        ? `whitebtn`
-                        : `redbtn`}
-                      onClick={() => {
-                        revalidate;
-                      }}
-                      disabled={isFetching != "none" || isEligible}
-                    >
-                      Validate
-                    </button>
                     <button
                       className={isEligible ? `greenbtn` : `whitebtn`}
                       onClick={() => initiateTokenFall()}
@@ -188,17 +187,6 @@ export function App() {
                   <Connect />
                 </div>
               )}
-            {!isEligible && (
-              <div className="my-4 text-xs">
-                We cannot find a Soubound token in your wallet.{" "}
-                <a
-                  className="font-bold underline"
-                  href="https://mint.ethbrno.cz/"
-                >
-                  Mint yours here.
-                </a>
-              </div>
-            )}
           </div>
           <div className="lg:max-w-lg lg:w-full md:w-1/3 w-5/6 flex justify-center">
             <img

src/components/Balance.tsx

@@ -1,14 +1,48 @@
 export interface BalanceType {
   balance: number;
   network: string;
-  quota: Object;
+  quota: {
+    quota: number;
+    used: number;
+  };
 }
 
 export function Balance(props: BalanceType[]) {
-  console.log(props);
+  const nets = Object.values(props);
+  console.log(nets);
+
   return (
     <>
-      Balance
+      <section className="text-gray-900 body-font w-full bg-white/20 my-4 p-4 border-white/20 border">
+        <div className="container divide-y mx-auto">
+          {nets.map((net) => {
+            return (
+              <div
+                key={net.network}
+                className="flex flex-wrap text-left"
+              >
+                <div className="p-4 sm:w-1/3 w-1/2">
+                  <h2 className="title-font font-medium sm:text-2xl text-3xl">
+                    {net.network}
+                  </h2>
+                </div>
+                <div className="p-4 sm:w-1/3 w-1/2">
+                  <h2 className="title-font font-medium sm:text-4xl text-3xl">
+                    {Number(net.balance).toFixed(2)} Ξ
+                  </h2>
+                  <p className="leading-relaxed">Balance</p>
+                </div>
+                <div className="p-4 sm:w-1/3 w-1/2">
+                  <h2 className="title-font font-medium sm:text-4xl text-3xl">
+                    {net.quota.used} of {net.quota.quota}
+                  </h2>
+                  <p className="leading-relaxed">Requests used</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
     </>
   );
 }

src/index.css

@@ -12,7 +12,7 @@
     }
 
     .greenbtn {
-        @apply px-6 h-12 uppercase font-semibold tracking-wider border-2 border-black bg-[#3441c0] text-white hover:border-[#3441c0] disabled:opacity-10;
+        @apply px-6 h-12 uppercase font-semibold tracking-wider border-2 border-[#3441c0] bg-[#3441c0] text-white hover:border-white disabled:opacity-10;
     }
 
     .whitebtn {