Merge pull request #23 from daqhris/fix/query-client-setup

Fix QueryClient setup for static generation

app/attestation/[uid]/page.tsx

@@ -3,10 +3,9 @@
 import React, { useEffect, useState } from "react";
 import { Attestation } from "../../../types/attestation";
 import { SchemaEncoder } from "@ethereum-attestation-service/eas-sdk";
-import Lottie from "lottie-react";
+// import Lottie from "lottie-react";
 import tw from "tailwind-styled-components";
 import { AttestationCard } from "~~/components/AttestationCard";
-import skyAnimation from "~~/public/sky.json";
 
 interface AttestationPageProps {
   params: { uid: string };
@@ -154,6 +153,7 @@ export default function AttestationPage({ params }: AttestationPageProps) {
   return (
     <Container>
       <AnimationWrapper>
+        {/* Lottie animation commented out to address build issues
         <Lottie
           animationData={skyAnimation}
           style={{
@@ -165,6 +165,7 @@ export default function AttestationPage({ params }: AttestationPageProps) {
             transform: "scale(3)",
           }}
         />
+        */}
       </AnimationWrapper>
       <Overlay />
       <ContentWrapper>

components/QueryClientProviderWrapper.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import getQueryClient from "../utils/queryClient";
+import { QueryClientProvider } from "@tanstack/react-query";
+
+interface QueryClientProviderWrapperProps {
+  children: React.ReactNode;
+}
+
+const QueryClientProviderWrapper: React.FC<QueryClientProviderWrapperProps> = ({ children }) => {
+  const queryClientRef = React.useRef(getQueryClient());
+
+  return <QueryClientProvider client={queryClientRef.current}>{children}</QueryClientProvider>;
+};
+
+export default QueryClientProviderWrapper;

next.config.js

@@ -14,12 +14,11 @@ const nextConfig = {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
-  compiler: {
-    styledComponents: true,
-  },
   images: {
     domains: ['api.poap.tech', 'placehold.co'],
   },
+  swcMinify: true,
+  compiler: undefined,
 };
 
 module.exports = nextConfig;

pages/404.tsx

@@ -1,17 +1,11 @@
 import React from "react";
-import getQueryClient from "../utils/queryClient";
-import { QueryClientProvider } from "@tanstack/react-query";
 
 const Custom404 = () => {
-  const queryClient = getQueryClient();
-
   return (
-    <QueryClientProvider client={queryClient}>
-      <div>
-        <h1>404 - Page Not Found</h1>
-        <p>The page you are looking for does not exist.</p>
-      </div>
-    </QueryClientProvider>
+    <div>
+      <h1>404 - Page Not Found</h1>
+      <p>The page you are looking for does not exist.</p>
+    </div>
   );
 };
 

pages/_app.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 import type { AppProps } from "next/app";
 import "../styles/globals.css";
-import getQueryClient from "../utils/queryClient";
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
-import { DehydratedState, HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { WagmiConfig, createConfig, http } from "wagmi";
 import { mainnet, sepolia } from "wagmi/chains";
+import QueryClientProviderWrapper from "../components/QueryClientProviderWrapper";
 
 // Configure chains & providers
 const config = createConfig({
@@ -23,28 +21,17 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
-type MyAppProps = AppProps & {
-  pageProps: {
-    dehydratedState?: DehydratedState;
-  };
-};
+type MyAppProps = AppProps;
 
 function MyApp({ Component, pageProps }: MyAppProps) {
-  console.log("MyApp rendering");
-  const queryClient = getQueryClient();
-  console.log("QueryClient obtained:", queryClient);
-
   return (
-    <QueryClientProvider client={queryClient}>
-      <HydrationBoundary state={pageProps.dehydratedState}>
-        <WagmiConfig config={config}>
-          <ApolloProvider client={client}>
-            <Component {...pageProps} />
-          </ApolloProvider>
-        </WagmiConfig>
-      </HydrationBoundary>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
+    <QueryClientProviderWrapper>
+      <WagmiConfig config={config}>
+        <ApolloProvider client={client}>
+          <Component {...pageProps} />
+        </ApolloProvider>
+      </WagmiConfig>
+    </QueryClientProviderWrapper>
   );
 }
 

pages/_error.tsx

@@ -1,22 +1,16 @@
 import React from "react";
-import getQueryClient from "../utils/queryClient";
-import { QueryClientProvider } from "@tanstack/react-query";
 import { NextPageContext } from "next";
 
 interface ErrorProps {
   statusCode?: number;
 }
 
 const Error = ({ statusCode }: ErrorProps) => {
-  const queryClient = getQueryClient();
-
   return (
-    <QueryClientProvider client={queryClient}>
-      <div>
-        <h1>Error {statusCode}</h1>
-        <p>{statusCode ? "An error " + statusCode + " occurred on server" : "An error occurred on client"}</p>
-      </div>
-    </QueryClientProvider>
+    <div>
+      <h1>Error {statusCode}</h1>
+      <p>{statusCode ? "An error " + statusCode + " occurred on server" : "An error occurred on client"}</p>
+    </div>
   );
 };
 

pages/api/mission-enrollment.ts

@@ -12,10 +12,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const EASContractAddress = "0xC2679fBD37d54388Ce493F1DB75320D236e1815e"; // Sepolia v0.26
     const missionEnrollmentSchemaUid = "0x40e5abe23a3378a9a43b7e874c5cb8dfd4d6b0823501d317acee41e08d3af4dd";
-    const provider = new ethers.AlchemyProvider("sepolia", process.env.NEXT_PUBLIC_ALCHEMY_API_KEY);
+    const provider = new ethers.providers.AlchemyProvider("sepolia", process.env.NEXT_PUBLIC_ALCHEMY_API_KEY);
     const signer = new ethers.Wallet(process.env.ETH_KEY as string, provider);
     const eas = new EAS(EASContractAddress);
-    eas.connect(signer);
+    eas.connect(signer as any);
 
     const schemaEncoder = new SchemaEncoder("string missionProposal");
 
@@ -31,15 +31,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const offchainAttestation = await offchain.signOffchainAttestation(
       {
-        recipient: ethers.ZeroAddress,
+        recipient: ethers.constants.AddressZero,
         data,
-        refUID: ethers.ZeroHash,
+        refUID: ethers.constants.HashZero,
         revocable: true,
         expirationTime: BigInt(0),
-        time: BigInt(Date.now() / 1000),
+        time: BigInt(Math.floor(Date.now() / 1000)),
         schema: missionEnrollmentSchemaUid,
       },
-      signer,
+      signer as any,
     );
 
     const encodedOffchainAttestation = offchainAttestation;

src/utils/poapVerification.test.js

@@ -1,4 +1,4 @@
-import { verifyPOAPOwnership, verifyETHGlobalBrusselsPOAPOwnership } from "./poapVerification";
+import { verifyETHGlobalBrusselsPOAPOwnership, verifyPOAPOwnership } from "./poapVerification";
 import axios from "axios";
 
 jest.mock("axios");

utils/wagmi-utils.ts

@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
-import type { JsonRpcProvider, JsonRpcSigner } from "ethers";
 import { ethers } from "ethers";
 import { type HttpTransport, PublicClient, WalletClient } from "viem";
 import { usePublicClient, useWalletClient } from "wagmi";
 
+type JsonRpcProvider = ethers.providers.JsonRpcProvider;
+type JsonRpcSigner = ethers.providers.JsonRpcSigner;
+
 export function publicClientToProvider(publicClient: PublicClient) {
   const { chain, transport } = publicClient;
 
@@ -18,12 +20,12 @@ export function publicClientToProvider(publicClient: PublicClient) {
   };
   if (transport.type === "fallback") {
     const providers = (transport.transports as ReturnType<HttpTransport>[]).map(
-      ({ value }) => new ethers.JsonRpcProvider(value?.url, network),
+      ({ value }) => new ethers.providers.JsonRpcProvider(value?.url, network),
     );
     if (providers.length === 1) return providers[0];
-    return new ethers.FallbackProvider(providers);
+    return new ethers.providers.FallbackProvider(providers);
   }
-  return new ethers.JsonRpcProvider(transport.url, network);
+  return new ethers.providers.JsonRpcProvider(transport.url, network);
 }
 
 export function walletClientToSigner(walletClient: WalletClient) {
@@ -42,8 +44,8 @@ export function walletClientToSigner(walletClient: WalletClient) {
     name: chain.name,
     ensAddress: chain.contracts?.ensRegistry?.address,
   };
-  const provider = new ethers.BrowserProvider(transport, network);
-  return new ethers.JsonRpcSigner(provider, account.address);
+  const provider = new ethers.providers.Web3Provider(transport as any, network);
+  return provider.getSigner(account.address);
 }
 
 export function useSigner() {