Change ETH → WETH

app/reports/[slug]/page.tsx

@@ -93,7 +93,8 @@ export default async function ReportPage({ params }: ReportPageProps) {
 					<div className="fixed bottom-[96px] -mx-4 -my-4 md:relative md:bottom-auto md:mx-0 md:my-0 w-full">
 						<FundingDataWrapper
 							hypercertId={report.hypercertId}
-							totalReportCost={report.totalCost}
+							totalAmount={report.totalCost}
+							fundedAmount={report.fundedSoFar}
 						>
 							<FundingProgress
 								totalAmount={report.totalCost}

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

@@ -7,18 +7,20 @@ import { Loader2 } from "lucide-react";
 interface FundingDataWrapperProps {
 	hypercertId: Partial<Report>["hypercertId"];
 	children: React.ReactNode;
-	totalReportCost: Partial<Report>["totalCost"];
+	totalAmount: Partial<Report>["totalCost"];
+	fundedAmount: Partial<Report>["fundedSoFar"];
 }
 
 const FundingDataWrapper: React.FC<FundingDataWrapperProps> = ({
-	totalReportCost,
 	hypercertId,
+	totalAmount,
+	fundedAmount,
 	children,
 }: FundingDataWrapperProps) => {
 	if (!hypercertId) {
 		return <div>No hypercertId found </div>;
 	}
-	if (!totalReportCost) {
+	if (!totalAmount) {
 		return <div>No total cost found</div>;
 	}
 
@@ -49,12 +51,12 @@ const FundingDataWrapper: React.FC<FundingDataWrapperProps> = ({
 	}
 
 	const totalUnits = hypercertClaim.totalUnits;
-	const pricePerUnit = totalReportCost / Number(totalUnits);
+	const pricePerUnit = totalAmount / Number(totalUnits);
 	const unitsRemaining = genesisFraction.units;
 	const percentProgress =
 		((totalUnits - genesisFraction.units) / totalUnits) * 100;
 	const minUnitAmount = 1 / pricePerUnit;
-	const dollarAmountNeeded = (pricePerUnit * genesisFraction.units).toFixed(2);
+	const dollarAmountNeeded = (totalAmount - (fundedAmount || 0)).toFixed(2);
 
 	return (
 		<FundingProvider
@@ -63,7 +65,7 @@ const FundingDataWrapper: React.FC<FundingDataWrapperProps> = ({
 				hypercertClaim,
 				pricePerUnit,
 				totalUnits,
-				totalReportCost,
+				totalAmount,
 				unitsRemaining,
 				percentProgress,
 				minUnitAmount,

components/report-details/support/dialog.tsx

@@ -43,7 +43,7 @@ const SupportContent = ({
 		);
 	}
 	// TODO: remove this when we don't need dummy order
-	if (process.env.DEPLOY_ENV === "production") {
+	if (process.env.NEXT_PUBLIC_DEPLOY_ENV === "production") {
 		return <SupportReportForm hypercertId={hypercertId} />;
 	}
 	return (

components/report-details/support/form.tsx

@@ -152,7 +152,9 @@ const SupportReportForm = ({ hypercertId }: SupportReportFormProps) => {
 		Number(dollarAmountNeeded),
 		pricePerUnit,
 		// TODO: remove this when we don't need dummy order
-		process.env.DEPLOY_ENV === "production" ? orders?.[0] : orders?.[5],
+		process.env.NEXT_PUBLIC_DEPLOY_ENV === "production"
+			? orders?.[0]
+			: orders?.[5],
 		handleBuyFraction,
 		address,
 		hypercertId,

config/endpoint.ts

@@ -3,9 +3,9 @@ const development = "https://app.vd-dev.org"
 const localhost = "http://localhost:3000"
 
 export const getVoiceDeckUrl = () => {
-    if (process.env.DEPLOY_ENV === "production") {
+    if (process.env.NEXT_PUBLIC_DEPLOY_ENV === "production") {
         return production
-    } else if (process.env.DEPLOY_ENV === "development") {
+    } else if (process.env.NEXT_PUBLIC_DEPLOY_ENV === "development") {
         return development
     } else {
         return localhost

contexts/funding-context.tsx

@@ -9,7 +9,7 @@ interface FundingContextType {
 	hypercertClaim: Claim;
 	pricePerUnit: number;
 	totalUnits: number;
-	totalReportCost: number;
+	totalAmount: number;
 	unitsRemaining: number;
 	percentProgress: number;
 	minUnitAmount: number;

hooks/use-buy-fraction.ts

@@ -26,10 +26,11 @@ const useHandleBuyFraction = (
   const handleBuyFraction = async (
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     order: any,
-    amount: number,
+    amount: bigint,
     address: Address,
     hypercertId: string | undefined,
-    comment: string | undefined
+    comment: string | undefined,
+    amountInDollor: number
   ) => {
     if (!publicClient) {
       throw new Error("No public client found");
@@ -38,40 +39,36 @@ const useHandleBuyFraction = (
       throw new Error("No order found");
     }
 
+
+    // if I enter 1 USD to buy in the UI, the amount will be 1000000000000000n
+    // amount: 1000000000000000n (10^15)
+    // pricePerUnit: 1
+    console.log({ order, amount, address, hypercertId, comment });
+    // print order.price
+    console.log(order.price);
     const takerOrder = hypercertExhangeClient.createFractionalSaleTakerBid(
       order,
       address,
       amount,
       order.price
     );
 
-    try {
-      setTransactionStatus("Approval");
-      const totalPrice = BigInt(order.price) * BigInt(amount);
-      if (currentAllowance < totalPrice) {
-        const approveTx = await hypercertExhangeClient.approveErc20(
-          order.currency, // Be sure to set the allowance for the correct currency
-          totalPrice
-        );
-        await waitForTransactionReceipt(publicClient, {
-          hash: approveTx.hash as `0x${string}`,
-        });
-      }
-    } catch (e) {
-      console.error(e);
-      setTransactionStatus("Failed");
-    }
-
+
     try {
       setTransactionStatus("PreparingOrder");
       const { call } = hypercertExhangeClient.executeOrder(
         order,
         takerOrder,
         order.signature
       );
+
+
       setTransactionStatus("SignForBuy");
-      const tx = await call();
+      const myAmount = BigInt(order.price) * amount;
+      console.log(`myAmount: ${myAmount}`);
+      const tx = await call({value: myAmount});
 
+      console.log(`amountInDollor: ${amountInDollor}`)
       fetch("/api/contributions", {
         method: "POST",
         headers: {
@@ -80,7 +77,7 @@ const useHandleBuyFraction = (
         body: JSON.stringify({
           txId: tx.hash as `0x${string}`,
           hypercertId: hypercertId,
-          amount: amount,
+          amount: amountInDollor,
           comment: comment,
         }),
       });

hooks/use-funding-data.ts

@@ -10,7 +10,6 @@ type UseFetchFundingDataReturnType = {
   hypercertClaimQuery: UseQueryResult<Record<"claim", Claim>>;
 };
 
-// TODO: Use actual hypercert ID
 export const useFetchFundingData = (
   hypercertId: Partial<Report>["hypercertId"]
 ): UseFetchFundingDataReturnType => {
@@ -27,9 +26,7 @@ export const useFetchFundingData = (
       queryKey: ["hypercerts", "fractions", "id", hypercertId],
       queryFn: () =>
         indexer.fractionsByClaim(
-          // hypercertId
-          // TODO: Use actual hypercert ID
-          "0xa16dfb32eb140a6f3f2ac68f41dad8c7e83c4941-39472754562828861761751454462085112528896"
+          hypercertId as string
         ),
     });
 
@@ -38,10 +35,7 @@ export const useFetchFundingData = (
       queryKey: ["hypercerts", "claim", "id", hypercertId],
       queryFn: () =>
         indexer.claimById(
-          // hypercertId
-          // TODO: Use actual hypercert ID
-          // "0xa16dfb32eb140a6f3f2ac68f41dad8c7e83c4941-67375908650345815765748172271490105868288"
-          "0xa16dfb32eb140a6f3f2ac68f41dad8c7e83c4941-39472754562828861761751454462085112528896"
+          hypercertId as string
         ),
     });
 

hooks/use-support-form.ts

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import type { Address } from "viem";
 import { z } from "zod";
+
 import type { useHandleBuyFraction } from "./use-buy-fraction";
 
 export interface SupportFormInputs {
@@ -51,7 +52,7 @@ const useSupportForm = (
       throw new Error("No address found");
     }
 
-    await handleBuyFraction(order, unitsToBuy, address, hypercertId, values.comment);
+    await handleBuyFraction(order, BigInt(Math.trunc(unitsToBuy)), address, hypercertId, values.comment, values.fractionPayment);
   };
 
   return { form, isProcessing, onSubmit };

lib/impact-reports.ts

@@ -105,7 +105,7 @@ export const fetchReports = async (): Promise<Report[]> => {
       	const orders = await getOrders(reports);
 
         // TODO: remove this when we don't need dummy order
-        if (process.env.DEPLOY_ENV === "production") {
+        if (process.env.NEXT_PUBLIC_DEPLOY_ENV === "production") {
       	reports = reports.map((report) => {
       		for (const order of orders) {
       			if (order && order.hypercertId === report.hypercertId) {

lib/marketplace.ts

@@ -61,7 +61,7 @@ export async function getOrders(reports: Report[]): Promise<(Order | null)[]> {
     } else {
 
       // TODO: remove this when we don't need dummy order
-    if (process.env.DEPLOY_ENV === "production") {
+    if (process.env.NEXT_PUBLIC_DEPLOY_ENV === "production") {
       // fetch only orders for reports that are not fully funded
       orders = await Promise.all(
         reports.map((report) =>

next.config.mjs

@@ -7,7 +7,7 @@ const nextConfig = {
 	images: {
 		remotePatterns: [
 			{
-				hostname: process.env.DEPLOY_ENV === "production" ? "directus.voicedeck.org" : "directus.vd-dev.org",
+				hostname: process.env.NEXT_PUBLIC_DEPLOY_ENV === "production" ? "directus.voicedeck.org" : "directus.vd-dev.org",
 				protocol: "https",
 			}
 		]