Merge pull request #105 from VoiceDeck/feat/upgrade-hypercerts

WIP Feat/upgrade hypercerts

components/report-details/funding-data-wrapper.tsx

@@ -5,73 +5,73 @@ import type { Report } from "@/types";
 import { Loader2 } from "lucide-react";
 
 interface FundingDataWrapperProps {
-	hypercertId: Partial<Report>["hypercertId"];
-	children: React.ReactNode;
-	totalAmount: Partial<Report>["totalCost"];
-	fundedAmount: Partial<Report>["fundedSoFar"];
+  hypercertId: Partial<Report>["hypercertId"];
+  children: React.ReactNode;
+  totalAmount: Partial<Report>["totalCost"];
+  fundedAmount: Partial<Report>["fundedSoFar"];
 }
 
 const FundingDataWrapper: React.FC<FundingDataWrapperProps> = ({
-	hypercertId,
-	totalAmount,
-	fundedAmount,
-	children,
+  hypercertId,
+  totalAmount,
+  fundedAmount,
+  children,
 }: FundingDataWrapperProps) => {
-	if (!hypercertId) {
-		return <div>No hypercertId found </div>;
-	}
-	if (!totalAmount) {
-		return <div>No total cost found</div>;
-	}
+  if (!hypercertId) {
+    return <div>No hypercertId found </div>;
+  }
+  if (!totalAmount) {
+    return <div>No total cost found</div>;
+  }
 
-	const { genesisFractionQuery, hypercertClaimQuery } =
-		useFetchFundingData(hypercertId);
+  const { genesisFractionQuery, hypercertClaimQuery } =
+    useFetchFundingData(hypercertId);
 
-	const { data: genesisFractionResponse, isPending: fractionsPending } =
-		genesisFractionQuery;
-	const { data: hypercertClaimResponse, isPending: claimPending } =
-		hypercertClaimQuery;
+  const { data: genesisFractionResponse, isPending: fractionsPending } =
+    genesisFractionQuery;
+  const { data: hypercertClaimResponse, isPending: claimPending } =
+    hypercertClaimQuery;
+  const genesisFraction = genesisFractionResponse?.data[0];
+  const hypercertClaim = hypercertClaimResponse;
 
-	const genesisFraction = genesisFractionResponse?.claimTokens[0];
-	const hypercertClaim = hypercertClaimResponse?.claim;
+  if (fractionsPending || claimPending)
+    return (
+      <section className="h-20 shadow-md max-w-3xl flex justify-center items-center bg-vd-beige-100 gap-2 rounded-lg ease-in duration-300">
+        <div className="animate-spin">
+          <Loader2 size={18} />
+        </div>
+        Loading funding data...
+      </section>
+    );
 
-	if (fractionsPending || claimPending)
-		return (
-			<section className="h-20 shadow-md max-w-3xl flex justify-center items-center bg-vd-beige-100 gap-2 rounded-lg ease-in duration-300">
-				<div className="animate-spin">
-					<Loader2 size={18} />
-				</div>
-				Loading funding data...
-			</section>
-		);
+  if (!hypercertClaim) {
+    return <div>Missing data for calculations</div>;
+  }
+  console.log("hypercertClaim", hypercertClaim);
 
-	if (!hypercertClaim) {
-		return <div>Missing data for calculations</div>;
-	}
+  const totalUnits = hypercertClaim.units ? Number(hypercertClaim.units) : 0;
+  const pricePerUnit = totalAmount / Number(totalUnits);
+  const percentProgress = ((fundedAmount || 0) / totalAmount) * 100;
+  const minUnitAmount = 1 / pricePerUnit;
+  const dollarAmountNeeded = (totalAmount - (fundedAmount || 0)).toFixed(2);
 
-	const totalUnits = hypercertClaim.totalUnits;
-	const pricePerUnit = totalAmount / Number(totalUnits);
-	const percentProgress = ((fundedAmount || 0) / totalAmount) * 100;
-	const minUnitAmount = 1 / pricePerUnit;
-	const dollarAmountNeeded = (totalAmount - (fundedAmount || 0)).toFixed(2);
-
-	return (
-		<FundingProvider
-			value={{
-				genesisFraction,
-				hypercertClaim,
-				pricePerUnit,
-				totalUnits,
-				totalAmount,
-				// unitsRemaining,
-				percentProgress,
-				minUnitAmount,
-				dollarAmountNeeded,
-			}}
-		>
-			{children}
-		</FundingProvider>
-	);
+  return (
+    <FundingProvider
+      value={{
+        genesisFraction,
+        hypercertClaim,
+        pricePerUnit,
+        totalUnits,
+        totalAmount,
+        // unitsRemaining,
+        percentProgress,
+        minUnitAmount,
+        dollarAmountNeeded,
+      }}
+    >
+      {children}
+    </FundingProvider>
+  );
 };
 
 export default FundingDataWrapper;

components/report-details/support/form.tsx

@@ -124,7 +124,6 @@ async function getOrdersForReport(
 		const { data: orders } = await hypercertClient.api.fetchOrdersByHypercertId(
 			{
 				hypercertId,
-				chainId,
 			},
 		);
 		return orders;

config/constants.ts

@@ -0,0 +1,19 @@
+import { optimism, sepolia } from "viem/chains";
+import { Chain } from "viem";
+import { Environment } from "@hypercerts-org/sdk";
+
+export const WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
+export const ENVIRONMENT = process.env.NEXT_PUBLIC_ENVIRONMENT as Environment;
+
+export const testNetChains = [sepolia] as const;
+export const prodNetChains = [optimism] as const;
+
+export const SUPPORTED_CHAINS = (
+  ENVIRONMENT === "production" ? prodNetChains : testNetChains
+) as readonly [Chain, ...Chain[]];
+const allChains = [
+  ...testNetChains.map((x) => x.id),
+  ...prodNetChains.map((x) => x.id),
+] as const;
+
+export type SupportedChainIdType = (typeof allChains)[number];

config/hypercerts.ts

@@ -0,0 +1,13 @@
+import { parseUnits } from "viem";
+import { CONSTANTS } from "@hypercerts-org/sdk";
+import { ENVIRONMENT } from "@/config/constants";
+
+const HYPERCERT_API_URL =
+  CONSTANTS.ENDPOINTS[ENVIRONMENT as keyof typeof CONSTANTS.ENDPOINTS];
+
+export const HYPERCERTS_API_URL_REST = `${HYPERCERT_API_URL}/v1`;
+export const HYPERCERTS_API_URL_GRAPH = `${HYPERCERT_API_URL}/v1/graphql`;
+
+export const DEFAULT_NUM_FRACTIONS = parseUnits("1", 8);
+
+export const DEFAULT_DISPLAY_CURRENCY = "usd";

contexts/funding-context.tsx

@@ -1,12 +1,10 @@
 "use client";
-import type { Claim } from "@/types";
-import type { ClaimToken } from "@hypercerts-org/sdk";
 import { type ReactNode, createContext, useContext } from "react";
 
 // Define the shape of the context
 interface FundingContextType {
-	genesisFraction?: ClaimToken;
-	hypercertClaim: Claim;
+	genesisFraction?: any;
+	hypercertClaim: any;
 	pricePerUnit: number;
 	totalUnits: number;
 	totalAmount: number;