add nfts

package.json

@@ -10,8 +10,12 @@
   },
   "dependencies": {
     "ethers": "^5",
+    "graphql": "^16.6.0",
+    "graphql-request": "^5.1.0",
+    "nft.storage": "^7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.1",
     "wagmi": "^0.11.6"
   },
   "devDependencies": {

src/App.tsx

@@ -1,9 +1,8 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import "./App.css";
 import { useAccount } from "wagmi";
 import Connect from "./components/Connect";
 import USDCDetails from "./components/USDCDetails";
+import "./App.css";
+import { Link } from "react-router-dom";
 
 function App() {
   const { address, isConnected } = useAccount();
@@ -16,6 +15,7 @@ function App() {
         <>
           <p>Hello, {address}</p>
           <USDCDetails />
+          <Link to="/nft">go to nfts</Link>
         </>
       ) : (
         <Connect />

src/components/Nfts.tsx

@@ -0,0 +1,76 @@
+import { request, gql } from "graphql-request";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+const query = gql`
+  {
+    tokens(where: { name_not: "" }, first: 20) {
+      id
+      nftContract {
+        id
+      }
+      amount
+      name
+      imageURI
+      mintTime
+      tokenId
+      tokenURI
+      owners {
+        ownerAccount {
+          id
+        }
+      }
+    }
+  }
+`;
+const ENDPOINT =
+  "https://api.thegraph.com/subgraphs/name/chainsafe/goerli-all-nft";
+
+// source: https://thegraph.com/hosted-service/subgraph/chainsafe/goerli-all-nft
+
+export default function Nfts() {
+  const [data, setData] = useState<any[]>([]);
+
+  const queryTheGraph = async () => {
+    try {
+      const req = await request(ENDPOINT, query);
+
+      const ipfsSrc = req.tokens
+        .map((item: any) => ({
+          ...item,
+          imageURI: item.imageURI.replace("ipfs://", "https://ipfs.io/ipfs/"),
+        }))
+        .filter((item: any) => item.name && item.imageURI);
+      console.log(ipfsSrc);
+      setData(ipfsSrc);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  useEffect(() => {
+    queryTheGraph();
+  }, []);
+
+  return (
+    <main>
+      <div className="gallery-title">
+        <h1>Very good NFT gallery</h1>
+        <Link to="/">go to money</Link>
+      </div>
+      <section className="gallery">
+        {data?.map((item) => (
+          <div key={item.id}>
+            <h3>{item?.name}</h3>
+            <p>NFT Contract: {item?.nftContract?.id}</p>
+            {item?.imageURI.includes("mp4") ? (
+              <video src={item?.imageURI}></video>
+            ) : (
+              <img loading="lazy" src={item?.imageURI} alt={item.name} />
+            )}
+          </div>
+        ))}
+      </section>
+    </main>
+  );
+}

src/components/USDCDetails.tsx

@@ -15,11 +15,15 @@ export default function USDCDetails() {
   const [to, setTo] = useState<`0x${string}`>();
 
   const { address } = useAccount();
+
+  // Get the balance of x token
   const { data: balance } = useBalance({
     address,
     token: USDC_CONTRACT,
-    formatUnits: 6,
+    formatUnits: 6
   });
+
+  // Prepare transaction with args
   const { config } = usePrepareContractWrite({
     address: USDC_CONTRACT,
     abi: erc20ABI,
@@ -29,6 +33,7 @@ export default function USDCDetails() {
   });
   const { data, isLoading, write } = useContractWrite(config);
 
+  // on form submit
   function handleSubmit(event: FormEvent) {
     event.preventDefault();
 
@@ -38,7 +43,9 @@ export default function USDCDetails() {
   return (
     <div className="token-section">
       <h3>USDC (wink wink)</h3>
-      <strong>Balance: {balance?.formatted}</strong>
+      <strong>
+        Balance: {balance?.formatted} {balance?.symbol}
+      </strong>
       <form onSubmit={handleSubmit}>
         <input
           type="text"

src/index.css

@@ -7,7 +7,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background: linear-gradient(45deg, #0d0d2a, transparent);
+  background: linear-gradient(45deg, #0d0d2a, #111);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -34,7 +34,7 @@ body {
 }
 
 h1 {
-  font-size: 3.2em;
+  font-size: 3.2rem;
   line-height: 1.1;
 }
 
@@ -121,3 +121,27 @@ input {
 .token-section button {
   margin-top: 0.5rem;
 }
+.gallery-title {
+  margin: 4rem 0;
+}
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+}
+.gallery img,
+.gallery video {
+  margin: 0.5rem 0;
+  max-width: 100%;
+  width: 300px;
+  border-radius: 8px;
+}
+.gallery h3 {
+  font-weight: 600;
+  font-size: 1.35rem;
+}
+@media screen and (max-width: 40em) {
+  .gallery {
+    grid-template-columns: 1fr;
+  }
+}

src/lib/wagmiClient.ts

@@ -5,12 +5,14 @@ import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
 
 const { provider, webSocketProvider, chains } = configureChains(
   [mainnet, goerli],
-  [publicProvider()]
+  [publicProvider()],
+  { pollingInterval: 10_000 }
 );
 
 export const wagmiClient = createClient({
   provider,
   webSocketProvider,
+
   connectors: [
     new InjectedConnector({ chains }),
     new WalletConnectConnector({

src/main.tsx

@@ -4,14 +4,24 @@ import { WagmiConfig } from "wagmi";
 import { wagmiClient } from "./lib/wagmiClient";
 import App from "./App";
 import "./index.css";
+import { createBrowserRouter, Link, RouterProvider } from "react-router-dom";
+import Nfts from "./components/Nfts";
 
-// Global polyfill for WalletConnect to work
-(window as any).global = window;
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+  },
+  {
+    path: "/nft",
+    element: <Nfts />,
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <WagmiConfig client={wagmiClient}>
-      <App />
+      <RouterProvider router={router} />
     </WagmiConfig>
   </React.StrictMode>
 );