Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hotfix 1.0.5.2 - progress bar styling and funding calculations #77

Merged
merged 7 commits into from
Mar 28, 2024
9 changes: 3 additions & 6 deletions components/report-details/funding-data-wrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -66,7 +63,7 @@ const FundingDataWrapper: React.FC<FundingDataWrapperProps> = ({
pricePerUnit,
totalUnits,
totalAmount,
unitsRemaining,
// unitsRemaining,
percentProgress,
minUnitAmount,
dollarAmountNeeded,
Expand Down
18 changes: 12 additions & 6 deletions components/report-details/funding-progress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
);
};
Expand Down
30 changes: 5 additions & 25 deletions components/report-details/support/form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
},
};

Expand Down Expand Up @@ -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 />
Expand Down Expand Up @@ -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"
>
Expand All @@ -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
Expand Down
6 changes: 5 additions & 1 deletion components/reports/report-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 5 additions & 2 deletions components/ui/progress.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
"use client"
"use client";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import * as React from "react";

Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions contexts/funding-context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading