inamiddleofthings

.env.example

@@ -1 +0,0 @@
-VITE_ALCHEMY_API_KEY=

.gitignore

@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
+.env

src/App.tsx

@@ -1,6 +1,7 @@
 import { useAccount, useSignMessage } from "wagmi";
 import { useEffect, useState } from "react";
-import { Account, Connect } from "./components";
+import { Balance, Connect } from "./components";
+import { BalanceType } from "./components";
 import { verifyMessage } from "ethers/lib/utils";
 import { SignMessageArgs } from "@wagmi/core";
 
@@ -10,6 +11,7 @@ export function App() {
   const [isEligible, setIsEligible] = useState(false);
   const [isFetching, setIsFetching] = useState("none");
   const [network, setNetwork] = useState("goerli");
+  const [balances, setBalances] = useState<BalanceType[]>([]);
   const baseUrl = "https://faucet-api.ethbrno.cz";
 
   const getEligibilityData = async () => {
@@ -21,6 +23,8 @@ export function App() {
         mode: "cors",
       });
       const res = await apiResponse.json();
+      //console.log(res);
+      setBalances(res?.balances);
       if (res?.tokenId) setIsEligible(true);
       else setIsEligible(false);
     } catch (error) {
@@ -133,15 +137,18 @@ export function App() {
                 </div>
               </div>
             )}
-            {}
-            <p className="mb-8 leading-relaxed">
-              If you own a Soulbound token you can ask for up to 200 ETH for
-              either Goerli and Sepolia testnets. This should be enough not only
-              for a development purposes, but also for prepaid gas transactions
-              for your testing users. These tokens have no real monetary value.
-              Every request grants you 50 ETH and there is a request cooldown
-              for 5 hours to avoid misuse.
-            </p>
+            {!isEligible
+              ? (
+                <p className="mb-8 leading-relaxed">
+                  If you own a Soulbound token you can ask for up to 200 ETH for
+                  either Goerli and Sepolia testnets. This should be enough not
+                  only for a development purposes, but also for prepaid gas
+                  transactions for your testing users. These tokens have no real
+                  monetary value. Every request grants you 50 ETH and there is a
+                  request cooldown for 5 hours to avoid misuse.
+                </p>
+              )
+              : <Balance {...balances} />}
             {!isConnecting || isConnected
               ? (
                 <div className="mb-4 text-sm font-medium">

src/components/Account.tsx

@@ -1,13 +1,25 @@
-import { useAccount, useEnsName } from 'wagmi'
+import { useAccount, useBalance, useEnsName } from "wagmi";
 
 export function Account() {
-  const { address } = useAccount()
-  const { data: ensNameData } = useEnsName({ address })
+  const { address } = useAccount();
+  const { data: ensNameData } = useEnsName({ address });
+
+  const { data, isError, isLoading } = useBalance({
+    addressOrName: address,
+  });
+
+  if (isLoading) return <div>Fetching balance…</div>;
+  if (isError) return <div>Error fetching balance</div>;
 
   return (
-    <div>
-      {ensNameData ?? address}
-      {ensNameData ? ` (${address})` : null}
-    </div>
-  )
+    <>
+      <div>
+        {ensNameData ?? address}
+        {ensNameData ? ` (${address})` : null}
+      </div>
+      <div>
+        Balance: {data?.formatted} {data?.symbol}
+      </div>
+    </>
+  );
 }

src/components/Balance.tsx

@@ -0,0 +1,14 @@
+export interface BalanceType {
+  balance: number;
+  network: string;
+  quota: Object;
+}
+
+export function Balance(props: BalanceType[]) {
+  console.log(props);
+  return (
+    <>
+      Balance
+    </>
+  );
+}

src/components/index.ts

@@ -1,3 +1,5 @@
 export { Account } from './Account'
 export { Connect } from './Connect'
+export { Balance } from './Balance'
+export type { BalanceType } from './Balance'
 export { NetworkSwitcher } from './NetworkSwitcher'

src/components/useSoulBound.ts

@@ -1,45 +0,0 @@
-import { useState, useEffect } from 'react';
-
-
-export type SoulApiResponse = {
-    status: Number;
-    statusText: String;
-    data: any;
-    error: any;
-    loading: Boolean;
-    isEligible: Boolean;
-};
-
-const baseUrl = "https://faucet-api.ethbrno.cz/lookup?addr="
-
-export const useApiGet = (addr: string): SoulApiResponse => {
-    const [status, setStatus] = useState<Number>(0);
-    const [statusText, setStatusText] = useState<String>('');
-    const [data, setData] = useState<any>();
-    const [error, setError] = useState<any>();
-    const [loading, setLoading] = useState<boolean>(false);
-    const [isEligible, setIsEligible] = useState<boolean>(false);
-
-    const getAPIData = async () => {
-        setLoading(true);
-        try {
-            const apiResponse = await fetch(baseUrl + addr);
-            const json = await apiResponse.json();
-            setStatus(apiResponse.status);
-            setStatusText(apiResponse.statusText);
-            setData(json);
-        } catch (error) {
-            setError(error);
-        }
-        //console.log(data.tokenId)
-        if (data?.tokenId) setIsEligible(true);
-        setLoading(false);
-
-    };
-
-    useEffect(() => {
-        getAPIData();
-    }, []);
-
-    return { status, statusText, data, error, loading, isEligible };
-};

src/main.tsx

@@ -10,7 +10,6 @@ import {
 } from "wagmi";
 import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
 import { InjectedConnector } from "wagmi/connectors/injected";
-import { MetaMaskConnector } from "wagmi/connectors/metaMask";
 import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
 import { alchemyProvider } from "wagmi/providers/alchemy";