remove usage of NEXT_PUBLIC_DEFAULT_CHAIN_ID

frontend/.env.local.example

@@ -7,8 +7,6 @@ NEXT_PUBLIC_DOMAIN=testnet.hypercerts.org
 #######
 ## Web3
 #######
-### 5=Goerli, 10=Optimism
-NEXT_PUBLIC_DEFAULT_CHAIN_ID=5
 ### UUPS proxy contract address
 NEXT_PUBLIC_CONTRACT_ADDRESS=0x822F17A9A5EeCFd66dBAFf7946a8071C265D1d07
 ### Subgraph URL - currently using hosted service

frontend/components/config.tsx

@@ -20,7 +20,7 @@ export interface ConfigProps {
 export function Config(props: ConfigProps) {
   const { className, children } = props;
   const { client: hypercertClient } = useHypercertClient();
-  const chainId = hypercertClient.config.chain?.id
+  const chainId = hypercertClient?.config.chain?.id
     ? Number(hypercertClient.config.chain.id)
     : undefined;
 

frontend/components/hypercert-fetcher.tsx

@@ -45,6 +45,9 @@ export function HypercertFetcher(props: HypercertFetcherProps) {
   const { client } = useHypercertClient();
 
   React.useEffect(() => {
+    if (!client) {
+      return;
+    }
     spawn(
       (async () => {
         const hashQueryString = window.location.hash.slice(
@@ -76,7 +79,7 @@ export function HypercertFetcher(props: HypercertFetcherProps) {
         setData(hypercert);
       })(),
     );
-  }, [useQueryString, byClaimId, byMetadataUri]);
+  }, [useQueryString, byClaimId, byMetadataUri, client]);
 
   // Show when loading
   if (!client && !ignoreLoading && !!loading && !data) {

frontend/hooks/burnFraction.ts

@@ -13,7 +13,6 @@ export const useBurnFraction = ({
   const [txPending, setTxPending] = useState(false);
 
   const { client, isLoading } = useHypercertClient();
-  const publicClient = client.config.publicClient;
 
   const stepDescriptions = {
     preparing: "Preparing to burn fraction",
@@ -32,8 +31,16 @@ export const useBurnFraction = ({
 
       setStep("burning");
 
+      if (!client) {
+        toast("No client found", {
+          type: "error",
+        });
+        return;
+      }
+
       const hash = await client.burnClaimFraction(claimId);
 
+      const publicClient = client.config.publicClient;
       const receipt = await publicClient?.waitForTransactionReceipt({
         confirmations: 3,
         hash: hash,

frontend/hooks/fractions.ts

@@ -2,37 +2,40 @@ import { useHypercertClient } from "./hypercerts-client";
 import { useQuery } from "@tanstack/react-query";
 
 export const useFractionsByOwner = (owner: string) => {
-  const {
-    client: { indexer },
-  } = useHypercertClient();
+  const { client } = useHypercertClient();
 
   return useQuery(
     ["graph", "fractions", "owner", owner],
-    () => indexer.fractionsByOwner(owner),
+    () => {
+      if (!client) return null;
+      return client.indexer.fractionsByOwner(owner);
+    },
     { enabled: !!owner, refetchInterval: 5000 },
   );
 };
 
 export const useFractionsByClaim = (claimId: string) => {
-  const {
-    client: { indexer },
-  } = useHypercertClient();
+  const { client } = useHypercertClient();
 
   return useQuery(
     ["graph", "fractions", "claim", claimId],
-    () => indexer.fractionsByClaim(claimId),
+    () => {
+      if (!client) return null;
+      return client.indexer.fractionsByClaim(claimId);
+    },
     { enabled: !!claimId, refetchInterval: 5000 },
   );
 };
 
 export const useFractionById = (fractionId: string) => {
-  const {
-    client: { indexer },
-  } = useHypercertClient();
+  const { client } = useHypercertClient();
 
   return useQuery(
     ["graph", "fractions", fractionId],
-    () => indexer.fractionById(fractionId),
+    () => {
+      if (!client) return null;
+      return client.indexer.fractionById(fractionId);
+    },
     { enabled: !!fractionId },
   );
 };

frontend/hooks/hypercerts-client.ts

@@ -4,18 +4,19 @@ import { NFT_STORAGE_TOKEN, WEB3_STORAGE_TOKEN } from "../lib/config";
 import { HypercertClient, HypercertClientConfig } from "@hypercerts-org/sdk";
 import { useWalletClient, useNetwork } from "wagmi";
 
-const clientConfig: Partial<HypercertClientConfig> = {
-  chain: { id: 5 },
-  nftStorageToken: NFT_STORAGE_TOKEN,
-  web3StorageToken: WEB3_STORAGE_TOKEN,
-};
-
-const defaultClient = new HypercertClient(clientConfig);
-
 export const useHypercertClient = () => {
   const { chain } = useNetwork();
-
-  const [client, setClient] = React.useState<HypercertClient>();
+  const clientConfig = {
+    chain,
+    nftStorageToken: NFT_STORAGE_TOKEN,
+    web3StorageToken: WEB3_STORAGE_TOKEN,
+  };
+  const [client, setClient] = React.useState<HypercertClient | null>(() => {
+    if (clientConfig.chain?.id) {
+      return new HypercertClient(clientConfig);
+    }
+    return null;
+  });
   const [isLoading, setIsLoading] = React.useState(false);
 
   const {

frontend/hooks/mintClaim.ts

@@ -10,7 +10,6 @@ export const useMintClaim = ({ onComplete }: { onComplete?: () => void }) => {
   const [txPending, setTxPending] = useState(false);
 
   const { client, isLoading } = useHypercertClient();
-  const publicClient = client.config.publicClient;
 
   const stepDescriptions = {
     preparing: "Preparing to mint hypercert",
@@ -31,16 +30,24 @@ export const useMintClaim = ({ onComplete }: { onComplete?: () => void }) => {
     try {
       setTxPending(true);
 
+      if (!client) {
+        toast("No client found", {
+          type: "error",
+        });
+        return;
+      }
+
       const hash = await client.mintClaim(
         metaData,
         BigInt(units),
         transferRestrictions,
       );
 
-      const receipt = await publicClient?.waitForTransactionReceipt({
-        confirmations: 3,
-        hash: hash,
-      });
+      const receipt =
+        await client.config.publicClient?.waitForTransactionReceipt({
+          confirmations: 3,
+          hash: hash,
+        });
 
       setStep("waiting");
 

frontend/hooks/mintClaimAllowlist.ts

@@ -23,7 +23,6 @@ export const useMintClaimAllowlist = ({
   const [txPending, setTxPending] = useState(false);
 
   const { client, isLoading } = useHypercertClient();
-  const publicClient = client.config.publicClient;
 
   const stepDescriptions = {
     validateAllowlist: "Validating allowlist",
@@ -89,6 +88,13 @@ export const useMintClaimAllowlist = ({
   ) => {
     setStep("validateAllowlist");
 
+    if (!client) {
+      toast("No client found", {
+        type: "error",
+      });
+      return;
+    }
+
     let _totalSupply;
     let _allowlist: AllowlistEntry[];
 
@@ -130,6 +136,7 @@ export const useMintClaimAllowlist = ({
         transferRestrictions,
       );
 
+      const publicClient = client.config.publicClient;
       const receipt = await publicClient?.waitForTransactionReceipt({
         confirmations: 3,
         hash: hash,

frontend/hooks/mintFractionAllowlist.ts

@@ -15,7 +15,6 @@ export const useMintFractionAllowlist = ({
   const [txPending, setTxPending] = useState(false);
 
   const { client, isLoading } = useHypercertClient();
-  const publicClient = client.config.publicClient;
 
   const { setStep, showModal, hideModal } = useContractModal();
 
@@ -37,12 +36,20 @@ export const useMintFractionAllowlist = ({
     try {
       setTxPending(true);
 
+      if (!client) {
+        toast("No client found", {
+          type: "error",
+        });
+        return;
+      }
+
       const hash = await client.mintClaimFractionFromAllowlist(
         claimID,
         units,
         proof,
       );
 
+      const publicClient = client.config.publicClient;
       const receipt = await publicClient?.waitForTransactionReceipt({
         confirmations: 3,
         hash: hash,

frontend/hooks/mintFractionAllowlistBatch.ts

@@ -27,8 +27,6 @@ export const useMintFractionAllowlistBatch = ({
   const { data: claimIds } = useGetAllEligibility(address ?? "", chain?.id);
   const parseError = useParseBlockchainError();
 
-  const publicClient = client.config.publicClient;
-
   const stepDescriptions = {
     initial: "Initializing interaction",
     proofs: "Getting and verifying proofs",
@@ -38,6 +36,9 @@ export const useMintFractionAllowlistBatch = ({
   };
 
   const initializeWrite = async () => {
+    if (!client) {
+      throw new Error("No client found");
+    }
     if (!address) {
       throw new Error("No address found for current user");
     }
@@ -79,6 +80,7 @@ export const useMintFractionAllowlistBatch = ({
         proofs,
       );
 
+      const publicClient = client.config.publicClient;
       const receipt = await publicClient?.waitForTransactionReceipt({
         confirmations: 3,
         hash: hash,

frontend/hooks/splitClaimUnits.ts

@@ -23,9 +23,13 @@ export const useSplitFractionUnits = ({
   const { setStep, showModal, hideModal } = useContractModal();
   const parseError = useParseBlockchainError();
 
-  const publicClient = client.config.publicClient;
-
   const initializeWrite = async (fractionId: bigint, fractions: bigint[]) => {
+    if (!client) {
+      toast("No client found", {
+        type: "error",
+      });
+      return;
+    }
     showModal({ stepDescriptions });
     setStep("splitting");
     try {
@@ -34,6 +38,7 @@ export const useSplitFractionUnits = ({
       const hash = await client.splitFractionUnits(fractionId, fractions);
 
       setStep("waiting");
+      const publicClient = client.config.publicClient;
       const receipt = await publicClient?.waitForTransactionReceipt({
         confirmations: 3,
         hash: hash,

frontend/hooks/verifyFractionClaim.ts

@@ -8,26 +8,27 @@ export type ClaimProof = {
 };
 
 export const useVerifyFractionClaim = () => {
-  const {
-    client: { indexer, storage },
-  } = useHypercertClient();
+  const { client } = useHypercertClient();
 
   const verifyFractionClaim = async (claimId: string, address: string) => {
-    const claimByIdRes = await indexer.claimById(claimId);
+    if (!client) {
+      throw new Error("No client found");
+    }
+    const claimByIdRes = await client.indexer.claimById(claimId);
     if (!claimByIdRes?.claim) {
       throw new Error("No claim found for ${claimID}");
     }
 
     const { uri, tokenID: _id } = claimByIdRes.claim;
-    const metadata = await storage.getMetadata(uri || "");
+    const metadata = await client.storage.getMetadata(uri || "");
 
     if (!metadata?.allowList) {
       throw new Error(`No allowlist found for ${claimId}`);
     }
 
     // TODO: this should be retrieved with `getData`, but it fails on res.files()
     // Need to investigate further
-    const treeResponse = await storage.getData(metadata.allowList);
+    const treeResponse = await client.storage.getData(metadata.allowList);
 
     if (!treeResponse) {
       throw new Error("Could not fetch json tree dump for allowlist");