Merge pull request #77 from VoiceDeck/dev

Hotfix 1.0.5.2 - progress bar styling and funding calculations

Author: thebeyondr

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

@@ -44,17 +44,14 @@ const FundingDataWrapper: React.FC<FundingDataWrapperProps> = ({
 				Loading funding data...
 			</section>
 		);
-	// if (error) return <div>Error loading data</div>;
 
-	if (!genesisFraction || !hypercertClaim) {
+	if (!hypercertClaim) {
 		return <div>Missing data for calculations</div>;
 	}
 
 	const totalUnits = hypercertClaim.totalUnits;
 	const pricePerUnit = totalAmount / Number(totalUnits);
-	const unitsRemaining = genesisFraction.units;
-	const percentProgress =
-		((totalUnits - genesisFraction.units) / totalUnits) * 100;
+	const percentProgress = ((fundedAmount || 0) / totalAmount) * 100;
 	const minUnitAmount = 1 / pricePerUnit;
 	const dollarAmountNeeded = (totalAmount - (fundedAmount || 0)).toFixed(2);
 
@@ -66,7 +63,7 @@ const FundingDataWrapper: React.FC<FundingDataWrapperProps> = ({
 				pricePerUnit,
 				totalUnits,
 				totalAmount,
-				unitsRemaining,
+				// unitsRemaining,
 				percentProgress,
 				minUnitAmount,
 				dollarAmountNeeded,

components/report-details/funding-progress.tsx

@@ -15,7 +15,7 @@ const FundingProgress: React.FC<FundingProgressProps> = ({
 	reportInfo,
 }) => {
 	const { percentProgress, dollarAmountNeeded } = useFunding();
-	const isFullyFunded = percentProgress === 100;
+	const isFullyFunded = percentProgress >= 100;
 
 	return (
 		<section className="px-3 py-4 flex flex-col space-y-2 md:flex-row md:space-x-4 md:justify-between bg-slate-50/80 backdrop-blur-md rounded-t-xl md:rounded-b-xl shadow-md max-w-3xl">
@@ -39,11 +39,17 @@ const FundingProgress: React.FC<FundingProgressProps> = ({
 				<Progress value={percentProgress} />
 			</div>
 			<div className="p-[2px]" />
-			<SupportReport
-				image={reportInfo.image}
-				title={reportInfo.title}
-				hypercertId={reportInfo.hypercertId}
-			/>
+			{isFullyFunded ? (
+				<div>
+					<p className="text-lg font-semibold text-vd-blue-900">Funded!</p>
+				</div>
+			) : (
+				<SupportReport
+					image={reportInfo.image}
+					title={reportInfo.title}
+					hypercertId={reportInfo.hypercertId}
+				/>
+			)}
 		</section>
 	);
 };

components/report-details/support/form.tsx

@@ -86,7 +86,7 @@ const transactionStatusContent: Record<
 		icon: <CheckCircle size={36} />,
 		title: "Thank you! We got your support.",
 		content:
-			"Your transaction was successful. We're grateful for your contribution!",
+			"Your transaction was successful. We're grateful for your contribution! It might take a few minutes to show up on the report.",
 	},
 };
 
@@ -252,7 +252,7 @@ const SupportReportForm = ({ hypercertId }: SupportReportFormProps) => {
 											rows={3}
 											placeholder="Leave a message with your donation"
 											{...field}
-											className="w-full px-4 py-2 border rounded-lg resize-none"
+											className="w-full px-4 py-2 border rounded-lg resize-none bg-stone-100"
 										/>
 									</FormControl>
 									<FormMessage />
@@ -298,18 +298,17 @@ const SupportReportForm = ({ hypercertId }: SupportReportFormProps) => {
 						<Alert className="bg-stone-50">
 							{/* <AlertTitle className="font-semibold">Please note</AlertTitle> */}
 							<AlertDescription>
-								You will need WETH on the Sepolia testnet. Get some ETH from the
-								faucet then wrap it to WETH.
+								You will need ETH on the Sepolia testnet. You can get some from
+								the link below.
 							</AlertDescription>
 							<AlertDescription className="flex gap-2 items-center py-1">
-								<p className="hidden md:block font-semibold">Links:</p>
 								<a
 									href="https://www.alchemy.com/faucets/ethereum-sepolia"
 									target="_blank"
 									rel="noopener noreferrer"
 									className={cn(
 										buttonVariants({ variant: "link" }),
-										"text-sm flex justify-between items-center group",
+										"flex justify-between items-center group p-0",
 									)}
 									aria-label="Open Sepolia Faucet in a new tab"
 								>
@@ -321,25 +320,6 @@ const SupportReportForm = ({ hypercertId }: SupportReportFormProps) => {
 										aria-hidden="true"
 									/>
 								</a>
-								<p className="text-stone-400">|</p>
-								<a
-									href="https://weth.altlayer.io/transfer"
-									target="_blank"
-									rel="noopener noreferrer"
-									className={cn(
-										buttonVariants({ variant: "link" }),
-										"text-sm flex justify-between items-center group",
-									)}
-									aria-label="Open AltLayer's ETH Wrapper in a new tab"
-								>
-									ETH Wrapper
-									<span className="sr-only">(opens in a new tab)</span>
-									<ArrowUpRight
-										size={16}
-										className="ml-1 opacity-70 group-hover:translate-x-0.5 group-hover:opacity-100 group-hover:-translate-y-0.5 transition-transform duration-300 ease-in-out"
-										aria-hidden="true"
-									/>
-								</a>
 							</AlertDescription>
 							<div className="p-2" />
 							<Button

components/reports/report-card.tsx

@@ -81,7 +81,11 @@ const ReportCard: React.FC<ReportCardProps> = ({
 						className="w-full"
 						value={(fundedSoFar / totalCost) * 100}
 					/>
-					<p className="text-xs">${totalCost - fundedSoFar} needed</p>
+					<p className="text-xs">
+						{fundedSoFar === totalCost
+							? "Funded!"
+							: `${totalCost - fundedSoFar} needed`}
+					</p>
 				</CardFooter>
 			</Card>
 		</Link>

components/ui/progress.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as React from "react";
 
@@ -17,7 +17,10 @@ const Progress = React.forwardRef<
 		{...props}
 	>
 		<ProgressPrimitive.Indicator
-			className="h-full w-full flex-1 bg-vd-blue-900 transition-all dark:bg-vd-blue-200"
+			className={cn(
+				"h-full w-full flex-1 bg-vd-blue-900 transition-all dark:bg-vd-blue-200",
+				value === 100 && "bg-green-500",
+			)}
 			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 		/>
 	</ProgressPrimitive.Root>

contexts/funding-context.tsx

@@ -5,12 +5,12 @@ import { type ReactNode, createContext, useContext } from "react";
 
 // Define the shape of the context
 interface FundingContextType {
-	genesisFraction: ClaimToken;
+	genesisFraction?: ClaimToken;
 	hypercertClaim: Claim;
 	pricePerUnit: number;
 	totalUnits: number;
 	totalAmount: number;
-	unitsRemaining: number;
+	// unitsRemaining: number;
 	percentProgress: number;
 	minUnitAmount: number;
 	dollarAmountNeeded: string;