-
- )}
-
-
-
-
-
- {walletAddress && isSybilDefenseEnabled && (
-
-
- )}
-
-
-
-
-
-
- {round.payoutStrategy?.strategyName &&
- getRoundStrategyTitle(round.payoutStrategy?.strategyName)}
-
-
-
-
-
- {!isDirectRound(round) && (
-
- {isAlloV1 &&
-
-
-
- {roundEndsText}
-
- ) : (
-
- Round ended
-
- )}
-
-
- - {round.roundMetadata?.name} -
- {props.isBeforeRoundStartDate ? ( -
- on
-
-
-
- })
- {chain.prettyName}
-
-
- {isBeforeApplicationEndDate && (
-
-
- Apply
-
- Donate
-
-
- )}
- - {round.roundMetadata?.quadraticFundingConfig?.matchingFundsAvailable.toLocaleString()} - - {tokenData?.symbol ?? "..."} -
-Matching Pool
-- {round.roundMetadata?.eligibility?.description} -
-- -
- {isBeforeApplicationEndDate && (
-
-
-
-
-
-
- )}
- {projectDetailsTabs[selectedTab].content}
-
- {createElement(tab.icon, {
- className: "w-4 h-4",
- })}
-
- )}
- {tab.name}
-
- {props.isProjectsLoading ? (
- <>
- {Array(6)
- .fill("")
- .map((item, index) => (
-
-
- );
-};
-
-function ProjectCard(props: {
- project: Project;
- roundRoutePath: string;
- showProjectCardFooter?: boolean;
- isBeforeRoundEndDate?: boolean;
- roundId: string;
- round: Round;
- chainId: number;
- setCurrentProjectAddedToCart: React.DispatchNo projects
- )} -
-
- {project.projectMetadata.title}
-
-
- by {projectRecipient}
-
-
-
- {
- remove(cartProject);
- }}
- addToCart={() => {
- add(cartProject);
- }}
- setCurrentProjectAddedToCart={
- props.setCurrentProjectAddedToCart
- }
- setShowCartNotification={props.setShowCartNotification}
- />
- )}
-
-
-
- {props.isBeforeRoundEndDate && (
- - $ - {props.crowdfundedUSD?.toLocaleString("en-US", { - minimumFractionDigits: 2, - maximumFractionDigits: 2, - })} -
-- total raised by {props.uniqueContributorsCount} contributors -
-
-
- );
-}
-
-export function CartButtonToggle(props: {
- project: Project;
- isAlreadyInCart: boolean;
- addToCart: () => void;
- removeFromCart: () => void;
- setCurrentProjectAddedToCart: React.Dispatch
-
- );
- }
- return (
- {
- props.addToCart();
- props.setCurrentProjectAddedToCart(props.project);
- props.setShowCartNotification(true);
- }}
- >
-
- );
-}
-
-const RoundStatsTabContent = ({
- roundId,
- chainId,
- round,
- token,
- tokenSymbol,
-}: {
- roundId: string;
- round: Round;
- chainId: number;
- token?: TToken;
- tokenSymbol?: string;
-}): JSX.Element => {
- const [isShareModalOpen, setIsShareModalOpen] = useState(false);
- const dataLayer = useDataLayer();
- const { data: applications, isLoading: isGetApplicationsLoading } =
- useRoundApprovedApplications(
- {
- chainId,
- roundId,
- },
- dataLayer
- );
-
- const totalUSDCrowdfunded = useMemo(() => {
- return (
- applications
- ?.map((application) => application.totalAmountDonatedInUsd)
- .reduce((acc, amount) => acc + amount, 0) ?? 0
- );
- }, [applications]);
-
- const totalDonations = useMemo(() => {
- return (
- applications
- ?.map((application) => Number(application.totalDonationsCount ?? 0))
- .reduce((acc, amount) => acc + amount, 0) ?? 0
- );
- }, [applications]);
-
- const ShareModal = () => {
- const ShareModalBody = () => (
-
-
- );
-
- return (
-
-
-
-
- setIsShareModalOpen(true)} />
-
-
-
-
-
-
- - Want to check out more stats? -
- -
-
- );
-};
-
-const StatCard = ({
- statValue,
- secondaryStatValue,
- statName,
- isValueLoading,
-}: {
- statValue: string;
- secondaryStatValue?: string;
- statName: string;
- isValueLoading?: boolean;
-}): JSX.Element => {
- return (
-
-
-
- {isValueLoading ? (
-
- ) : (
-
- );
-};
-
-const ShareButton = ({
- round,
- tokenSymbol,
- totalUSDCrowdfunded,
- totalDonations,
- type,
-}: {
- round: Round;
- tokenSymbol?: string;
- totalUSDCrowdfunded: number;
- totalDonations: number;
-
- type: "TWITTER" | "FARCASTER";
-}) => {
- const roundName = round.roundMetadata?.name;
- const tokenAmount =
- round.roundMetadata?.quadraticFundingConfig?.matchingFundsAvailable ?? 0;
-
- const shareText = `π ${formatAmount(
- tokenAmount,
- true
- )} ${tokenSymbol} matching pool
-π $${formatAmount(totalUSDCrowdfunded.toFixed(2))} funded so far
-π€ ${formatAmount(totalDonations, true)} donations
-π Check out ${roundName}βs stats!
-`;
-
- const twitterShareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
- shareText + window.location.href
- )}`;
-
- const farcasterShareUrl = createFarcasterShareUrl(
- encodeURIComponent(shareText),
- [window.location.href]
- );
-
- return (
- <>
- {type === "TWITTER" ? (
-
- ) : (
-
- )}
-
- );
-};
-
-const ShareStatsButton = ({
- handleClick,
-}: {
- handleClick: () => void;
-}): JSX.Element => {
- return (
-
- );
-};
diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/AlloVersionBanner.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/AlloVersionBanner.tsx
new file mode 100644
index 0000000000..a977683ceb
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/AlloVersionBanner.tsx
@@ -0,0 +1,24 @@
+import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
+
+export function AlloVersionBanner({ roundId }: { roundId: string }) {
+ const isAlloV1 = roundId.startsWith("0x");
+
+ return (
+ <>
+
-
- )}
-
- - {statValue} -
- {!!secondaryStatValue?.length && ( -- {secondaryStatValue} -
- )} -{statName}
-
+
+
+
+ );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/CartButton.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/CartButton.tsx
new file mode 100644
index 0000000000..f5900f4b37
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/CartButton.tsx
@@ -0,0 +1,25 @@
+import { Project } from "../../api/types";
+
+import { CartButtonToggle } from "./CartButtonToggle";
+
+export function CartButton(props: {
+ project: Project;
+ isAlreadyInCart: boolean;
+ removeFromCart: () => void;
+ addToCart: () => void;
+ setCurrentProjectAddedToCart: React.Dispatch
+
+ );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/CartButtonToggle.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/CartButtonToggle.tsx
new file mode 100644
index 0000000000..0f6e4e820e
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/CartButtonToggle.tsx
@@ -0,0 +1,40 @@
+import { ReactComponent as CartCircleIcon } from "../../../assets/icons/cart-circle.svg";
+import { ReactComponent as CheckedCircleIcon } from "../../../assets/icons/checked-circle.svg";
+import { Project } from "../../api/types";
+
+export function CartButtonToggle(props: {
+ project: Project;
+ isAlreadyInCart: boolean;
+ addToCart: () => void;
+ removeFromCart: () => void;
+ setCurrentProjectAddedToCart: React.Dispatch
+
+ );
+ }
+ return (
+ {
+ props.addToCart();
+ props.setCurrentProjectAddedToCart(props.project);
+ props.setShowCartNotification(true);
+ }}
+ >
+
+ );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectCard.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectCard.tsx
new file mode 100644
index 0000000000..518e5115de
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/ProjectCard.tsx
@@ -0,0 +1,133 @@
+import { Link } from "react-router-dom";
+import { renderToPlainText, useTokenPrice, TToken } from "common";
+
+import { CartProject, Project, Round } from "../../api/types";
+
+import { ProjectBanner, ProjectLogo } from "../../common/ProjectBanner";
+import {
+ BasicCard,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "../../common/styles";
+
+import { useCartStorage } from "../../../store";
+import { CartButton } from "./CartButton";
+
+export function ProjectCard(props: {
+ project: Project;
+ roundRoutePath: string;
+ showProjectCardFooter?: boolean;
+ isBeforeRoundEndDate?: boolean;
+ roundId: string;
+ round: Round;
+ chainId: number;
+ setCurrentProjectAddedToCart: React.Dispatch
+
+ {project.projectMetadata.title}
+
+
+ by {projectRecipient}
+
+
+
+ {
+ remove(cartProject);
+ }}
+ addToCart={() => {
+ add(cartProject);
+ }}
+ setCurrentProjectAddedToCart={
+ props.setCurrentProjectAddedToCart
+ }
+ setShowCartNotification={props.setShowCartNotification}
+ />
+ )}
+
+
+
+ {props.isBeforeRoundEndDate && (
+ + $ + {props.crowdfundedUSD?.toLocaleString("en-US", { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })} +
++ total raised by {props.uniqueContributorsCount} contributors +
+
+ {props.isProjectsLoading ? (
+ <>
+ {Array(6)
+ .fill("")
+ .map((item, index) => (
+
+
+ );
+};
diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/RoundPage.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/RoundPage.tsx
new file mode 100644
index 0000000000..a9ff035cc2
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/RoundPage.tsx
@@ -0,0 +1,465 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+ CalendarIcon,
+ getRoundStrategyTitle,
+ getLocalTime,
+ formatLocalDateAsISOString,
+ getTokensByChainId,
+ stringToBlobUrl,
+ getChainById,
+} from "common";
+import { Input } from "common/src/styles";
+import AlloV1 from "common/src/icons/AlloV1";
+import AlloV2 from "common/src/icons/AlloV2";
+
+import { ReactComponent as Search } from "../../../assets/search-grey.svg";
+
+import { Project, Round } from "../../api/types";
+import { getDaysLeft, isDirectRound, isInfiniteDate } from "../../api/utils";
+import { PassportWidget } from "../../common/PassportWidget";
+
+import RoundEndedBanner from "../../common/RoundEndedBanner";
+import { Badge } from "../../common/styles";
+import Breadcrumb, { BreadcrumbItem } from "../../common/Breadcrumb";
+
+const builderURL = process.env.REACT_APP_BUILDER_URL;
+import CartNotification from "../../common/CartNotification";
+import { useAccount, useToken } from "wagmi";
+import { getAddress } from "viem";
+import { DefaultLayout } from "../../common/DefaultLayout";
+import { getUnixTime } from "date-fns";
+import { PresentationChartBarIcon } from "@heroicons/react/24/outline";
+
+import RoundStartCountdownBadge from "../RoundStartCountdownBadge";
+import ApplicationsCountdownBanner from "../ApplicationsCountdownBanner";
+import { ProjectList } from "./ProjectList";
+import { RoundStatsTabContent } from "./RoundStatsTabContent";
+import { RoundTabs } from "./RoundTabs";
+import { getAlloVersion } from "common/src/config";
+
+const alloVersion = getAlloVersion();
+
+export function RoundPage(props: {
+ round: Round;
+ chainId: number;
+ roundId: string;
+ isBeforeRoundStartDate?: boolean;
+ isAfterRoundStartDate?: boolean;
+ isBeforeRoundEndDate?: boolean;
+ isAfterRoundEndDate?: boolean;
+}) {
+ const { round, chainId, roundId } = props;
+
+ const [searchQuery, setSearchQuery] = useState("");
+ const [projects, setProjects] = useStateNo projects
+ )} +
+
+ )}
+
+
+
+
+
+ {walletAddress && isSybilDefenseEnabled && (
+
+
+ )}
+
+
+
+
+
+
+ {round.payoutStrategy?.strategyName &&
+ getRoundStrategyTitle(round.payoutStrategy?.strategyName)}
+
+
+
+
+
+ {!isDirectRound(round) && (
+
+ {isAlloV1 &&
+
+
+
+ {roundEndsText}
+
+ ) : (
+
+ Round ended
+
+ )}
+
+
+ + {round.roundMetadata?.name} +
+ {props.isBeforeRoundStartDate ? ( +
+ on
+
+
+
+
+ {chain.prettyName}
+
+
+ {isBeforeApplicationEndDate && (
+
+
+ Apply
+
+ Donate
+
+
+ )}
+ + {round.roundMetadata?.quadraticFundingConfig?.matchingFundsAvailable.toLocaleString()} + + {tokenData?.symbol ?? "..."} +
+Matching Pool
++ {round.roundMetadata?.eligibility?.description} +
++ +
+ {isBeforeApplicationEndDate && (
+
+
+
+
+
+
+ )}
+ {projectDetailsTabs[selectedTab].content}
+
+
+ );
+
+ return (
+
+
+
+
+ setIsShareModalOpen(true)} />
+
+
+
+
+
+
+ + Want to check out more stats? +
+ +
+ {createElement(tab.icon, {
+ className: "w-4 h-4",
+ })}
+
+ )}
+ {tab.name}
+
+ {isValueLoading ? (
+
+ ) : (
+
+ );
+};
diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/Stats.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/Stats.tsx
new file mode 100644
index 0000000000..62e04c4c67
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/Stats.tsx
@@ -0,0 +1,89 @@
+import { useTokenPrice, TToken } from "common";
+
+import { Round } from "../../api/types";
+import { StatCard } from "./StatCard";
+import { formatAmount } from "./utils";
+
+export const Stats = ({
+ round,
+ totalCrowdfunded,
+ totalProjects,
+ token,
+ tokenSymbol,
+ totalDonations,
+ totalDonors,
+ statsLoading,
+}: {
+ round: Round;
+ totalCrowdfunded: number;
+ totalProjects: number;
+ chainId: number;
+ token?: TToken;
+ tokenSymbol?: string;
+ totalDonations: number;
+ totalDonors: number;
+ statsLoading: boolean;
+}): JSX.Element => {
+ const tokenAmount =
+ round.roundMetadata?.quadraticFundingConfig?.matchingFundsAvailable ?? 0;
+
+ const { data: poolTokenPrice } = useTokenPrice(
+ token?.redstoneTokenId,
+ token?.priceSource
+ );
+
+ const matchingPoolUSD = poolTokenPrice
+ ? Number(poolTokenPrice) * tokenAmount
+ : undefined;
+ const matchingCapPercent =
+ round.roundMetadata?.quadraticFundingConfig?.matchingCapAmount ?? 0;
+ const matchingCapTokenValue = (tokenAmount * matchingCapPercent) / 100;
+
+ return (
+
+
+ )}
+
+ + {statValue} +
+ {!!secondaryStatValue?.length && ( ++ {secondaryStatValue} +
+ )} +{statName}
+
+
+ );
+};
diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage/ViewRoundPage.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage/ViewRoundPage.tsx
new file mode 100644
index 0000000000..14a50eaae6
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewRoundPage/ViewRoundPage.tsx
@@ -0,0 +1,87 @@
+import { datadogLogs } from "@datadog/browser-logs";
+import { useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { useRoundById } from "../../../context/RoundContext";
+import { isDirectRound, isInfiniteDate } from "../../api/utils";
+
+import NotFoundPage from "../../common/NotFoundPage";
+import { Spinner } from "../../common/Spinner";
+
+import { getAlloVersion } from "common/src/config";
+
+import { RoundPage } from "./RoundPage";
+
+export default function ViewRound() {
+ datadogLogs.logger.info("====> Route: /round/:chainId/:roundId");
+ datadogLogs.logger.info(`====> URL: ${window.location.href}`);
+
+ const { chainId, roundId } = useParams();
+
+ const { round, isLoading } = useRoundById(
+ Number(chainId),
+ roundId?.toLowerCase() as string
+ );
+
+ const currentTime = new Date();
+ const isBeforeRoundStartDate =
+ round &&
+ (isDirectRound(round)
+ ? round.applicationsStartTime
+ : round.roundStartTime) >= currentTime;
+ const isAfterRoundStartDate =
+ round &&
+ (isDirectRound(round)
+ ? round.applicationsStartTime
+ : round.roundStartTime) <= currentTime;
+ // covers infinte dates for roundEndDate
+ const isAfterRoundEndDate =
+ round &&
+ (isInfiniteDate(
+ isDirectRound(round) ? round.applicationsEndTime : round.roundEndTime
+ )
+ ? false
+ : round &&
+ (isDirectRound(round)
+ ? round.applicationsEndTime
+ : round.roundEndTime) <= currentTime);
+ const isBeforeRoundEndDate =
+ round &&
+ (isInfiniteDate(
+ isDirectRound(round) ? round.applicationsEndTime : round.roundEndTime
+ ) ||
+ (isDirectRound(round) ? round.applicationsEndTime : round.roundEndTime) >
+ currentTime);
+
+ const alloVersion = getAlloVersion();
+
+ useEffect(() => {
+ if (
+ isAfterRoundEndDate !== undefined &&
+ roundId?.startsWith("0x") &&
+ alloVersion === "allo-v2" &&
+ !isAfterRoundEndDate
+ ) {
+ window.location.href = `https://explorer-v1.gitcoin.co${window.location.pathname}${window.location.hash}`;
+ }
+ }, [roundId, alloVersion, isAfterRoundEndDate]);
+
+ return isLoading ? (
+
+
+