chore: split ViewProjectDetails components into separate files

Author: hussmartinez

packages/grant-explorer/src/features/round/ViewProjectDetails/ViewProjectDetails.tsx

@@ -0,0 +1,69 @@
+import { BaseQuestion, Round, RoundApplicationQuestion } from "data-layer";
+import { GrantApplicationFormAnswer } from "../../../api/types";
+import { renderToHTML } from "common";
+
+export function ApplicationFormAnswers(props: {
+  answers: GrantApplicationFormAnswer[];
+  round: Round | undefined;
+}) {
+  const roundQuestions = props.round?.applicationQuestions as (BaseQuestion &
+    RoundApplicationQuestion)[];
+  let answers: GrantApplicationFormAnswer[] = [];
+  if (roundQuestions) {
+    answers = roundQuestions
+      .filter((q) => !q.hidden && !q.encrypted)
+      .map((q) => ({
+        ...props.answers.find(
+          (a) =>
+            a.questionId === q.id && a.question === q.title && a.type === q.type
+        ),
+        question: q.title,
+      }))
+      .filter((a): a is GrantApplicationFormAnswer => !!a.answer);
+  }
+
+  if (answers.length === 0) {
+    answers = props.answers.filter((a) => !!a.answer && !a.hidden);
+  }
+
+  if (answers.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl mt-8 font-thin text-blue-800">
+        Additional Information
+      </h1>
+      <div>
+        {answers.map((answer) => {
+          const answerText = Array.isArray(answer.answer)
+            ? answer.answer.join(", ")
+            : answer.answer;
+          return (
+            <div key={answer.questionId}>
+              <p className="text-md mt-8 mb-3 font-semibold text-blue-800">
+                {answer.question}
+              </p>
+              {answer.type === "paragraph" ? (
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: renderToHTML(answerText.replace(/\n/g, "\n\n")),
+                  }}
+                  className="text-md prose prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-a:text-blue-600"
+                ></p>
+              ) : (
+                <p
+                  className="text-base text-blue-800"
+                  dangerouslySetInnerHTML={{
+                    __html: renderToHTML(answerText.replace(/\n/g, "\n\n")),
+                  }}
+                ></p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

packages/grant-explorer/src/features/round/ViewProjectDetails/components/ApplicationFormAnswers.tsx

@@ -0,0 +1,19 @@
+export const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 0C3.44772 0 3 0.447715 3 1V2H2C0.895431 2 0 2.89543 0 4V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V4C16 2.89543 15.1046 2 14 2H13V1C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1V2H5V1C5 0.447715 4.55228 0 4 0ZM4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H12C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5H4Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

packages/grant-explorer/src/features/round/ViewProjectDetails/components/CalendarIcon.tsx

@@ -0,0 +1,24 @@
+import { CheckIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
+
+export function CartButtonToggle(props: {
+  isAlreadyInCart: boolean;
+  addToCart: () => void;
+  removeFromCart: () => void;
+}) {
+  return (
+    <button
+      className="font-mono bg-blue-100 hover:bg-blue-300  hover:text-grey-50 transition-all w-full items-center justify-center rounded-b-3xl rounded-t-none p-4 inline-flex gap-2"
+      data-testid={props.isAlreadyInCart ? "remove-from-cart" : "add-to-cart"}
+      onClick={() =>
+        props.isAlreadyInCart ? props.removeFromCart() : props.addToCart()
+      }
+    >
+      {props.isAlreadyInCart ? (
+        <CheckIcon className="w-5 h-5" />
+      ) : (
+        <ShoppingCartIcon className="w-5 h-5" />
+      )}
+      {props.isAlreadyInCart ? "Added to cart" : "Add to cart"}
+    </button>
+  );
+}

packages/grant-explorer/src/features/round/ViewProjectDetails/components/CartButtonToggle.tsx

@@ -0,0 +1,13 @@
+import { renderToHTML } from "common";
+
+export function Detail(props: { text: string; testID: string }) {
+  return (
+    <p
+      dangerouslySetInnerHTML={{
+        __html: renderToHTML(props.text.replace(/\n/g, "\n\n")),
+      }}
+      className="text-blue-800 text-md prose prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-a:text-blue-600 max-w-full"
+      data-testid={props.testID}
+    />
+  );
+}

packages/grant-explorer/src/features/round/ViewProjectDetails/components/Detail.tsx

@@ -0,0 +1,23 @@
+import { Box, Tab, Tabs } from "@chakra-ui/react";
+
+export function ProjectDetailsTabs(props: {
+  tabs: string[];
+  onChange?: (tabIndex: number) => void;
+  selected: number;
+}) {
+  return (
+    <Box className="" bottom={0.5}>
+      {props.tabs.length > 0 && (
+        <Tabs
+          display="flex"
+          onChange={props.onChange}
+          defaultIndex={props.selected}
+        >
+          {props.tabs.map((tab, index) => (
+            <Tab key={index}>{tab}</Tab>
+          ))}
+        </Tabs>
+      )}
+    </Box>
+  );
+}

packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectDetailsTab.tsx

@@ -0,0 +1,35 @@
+import React, {
+  ComponentPropsWithRef,
+  createElement,
+  FunctionComponent,
+  PropsWithChildren,
+} from "react";
+import { VerifiedBadge } from "./VerifiedBadge";
+
+export function ProjectLink({
+  icon,
+  children,
+  url,
+  isVerified,
+}: PropsWithChildren<{
+  icon: FunctionComponent<ComponentPropsWithRef<"svg">>;
+  url?: string;
+  isVerified?: boolean;
+}>) {
+  const Component = url ? "a" : "div";
+  return children ? (
+    <div className="flex items-center gap-2">
+      <div>{createElement(icon, { className: "w-4 h-4 text-grey-400" })}</div>
+      <div className="flex gap-2">
+        <Component
+          href={url}
+          target="_blank"
+          className={url && "text-blue-300 hover:underline"}
+        >
+          {children}
+        </Component>
+        {isVerified && <VerifiedBadge />}
+      </div>
+    </div>
+  ) : null;
+}

packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLink.tsx

@@ -0,0 +1,81 @@
+import { ReactComponent as GithubIcon } from "../../../../assets/github-logo.svg";
+import { ReactComponent as TwitterIcon } from "../../../../assets/twitter-logo.svg";
+import { ReactComponent as EthereumIcon } from "../../../../assets/icons/ethereum-icon.svg";
+import { ReactComponent as GlobeIcon } from "../../../../assets/icons/globe-icon.svg";
+import { Project } from "../../../api/types";
+import { formatDateWithOrdinal, useValidateCredential } from "common";
+import { useEnsName } from "wagmi";
+import { ProjectLink } from "./ProjectLink";
+import CopyToClipboard from "../../CopyToClipboard";
+import { CalendarIcon } from "./CalendarIcon";
+
+export function ProjectLinks({ project }: { project?: Project }) {
+  const {
+    recipient,
+    projectMetadata: {
+      createdAt,
+      website,
+      projectTwitter,
+      projectGithub,
+      userGithub,
+      credentials,
+    },
+  } = project ?? { projectMetadata: {} };
+
+  // @ts-expect-error Temp until viem (could also cast recipient as Address or update the type)
+  const ens = useEnsName({ address: recipient, enabled: Boolean(recipient) });
+
+  const { isValid: validTwitterCredential } = useValidateCredential(
+    credentials?.twitter,
+    projectTwitter
+  );
+
+  const { isValid: validGithubCredential } = useValidateCredential(
+    credentials?.github,
+    projectGithub
+  );
+
+  const createdOn =
+    createdAt &&
+    `Created on: ${formatDateWithOrdinal(new Date(createdAt ?? 0))}`;
+
+  return (
+    <div
+      className={`grid md:grid-cols-2 gap-4  border-y-[2px] py-4 my-4 ${
+        // isLoading?
+        createdAt ? "" : "bg-grey-100 animate-pulse"
+      }`}
+    >
+      <ProjectLink icon={EthereumIcon}>
+        <CopyToClipboard text={ens.data || recipient} />
+      </ProjectLink>
+      <ProjectLink icon={CalendarIcon}>{createdOn}</ProjectLink>
+      <ProjectLink url={website} icon={GlobeIcon}>
+        {website}
+      </ProjectLink>
+      {projectTwitter !== undefined && (
+        <ProjectLink
+          url={`https://twitter.com/${projectTwitter}`}
+          icon={TwitterIcon}
+          isVerified={validTwitterCredential}
+        >
+          {projectTwitter}
+        </ProjectLink>
+      )}
+      {projectGithub !== undefined && (
+        <ProjectLink
+          url={`https://github.com/${projectGithub}`}
+          icon={GithubIcon}
+          isVerified={validGithubCredential}
+        >
+          {projectGithub}
+        </ProjectLink>
+      )}
+      {userGithub !== undefined && (
+        <ProjectLink url={`https://github.com/${userGithub}`} icon={GithubIcon}>
+          {userGithub}
+        </ProjectLink>
+      )}
+    </div>
+  );
+}

packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLinks.tsx

@@ -0,0 +1,15 @@
+import DefaultLogoImage from "../../../../assets/default_logo.png";
+
+const ipfsGateway = process.env.REACT_APP_IPFS_BASE_URL;
+
+export function ProjectLogo({ logoImg }: { logoImg?: string }) {
+  const src = logoImg ? `${ipfsGateway}/ipfs/${logoImg}` : DefaultLogoImage;
+
+  return (
+    <img
+      className={"-mt-16 h-32 w-32 rounded-full ring-4 ring-white bg-white"}
+      src={src}
+      alt="Project Logo"
+    />
+  );
+}

packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLogo.tsx

@@ -0,0 +1,54 @@
+import { Stat } from "./Stat";
+import { formatDistanceToNowStrict } from "date-fns";
+import { Application } from "data-layer";
+import { useProjectDetailsParams } from "../hooks/useProjectDetailsParams";
+import { useRoundById } from "../../../../context/RoundContext";
+import { isInfiniteDate } from "../../../api/utils";
+
+export function ProjectStats(props: { application: Application | undefined }) {
+  const { chainId, roundId } = useProjectDetailsParams();
+  const { round } = useRoundById(Number(chainId), roundId);
+  const application = props.application;
+
+  const timeRemaining =
+    round?.roundEndTime && !isInfiniteDate(round?.roundEndTime)
+      ? formatDistanceToNowStrict(round.roundEndTime)
+      : null;
+  const isBeforeRoundEndDate =
+    round &&
+    (isInfiniteDate(round.roundEndTime) || round.roundEndTime > new Date());
+
+  return (
+    <div className="rounded-3xl flex-auto p-3 md:p-4 gap-4 flex flex-col text-blue-800">
+      <Stat
+        isLoading={!application}
+        value={`$${application?.totalAmountDonatedInUsd.toFixed(2)}`}
+      >
+        funding received in current round
+      </Stat>
+      <Stat isLoading={!application} value={application?.uniqueDonorsCount}>
+        contributors
+      </Stat>
+
+      <Stat
+        isLoading={isBeforeRoundEndDate === undefined}
+        value={timeRemaining}
+        className={
+          // Explicitly check for true - could be undefined if round hasn't been loaded yet
+          isBeforeRoundEndDate === true || isBeforeRoundEndDate === undefined
+            ? ""
+            : "flex-col-reverse"
+        }
+      >
+        {
+          // If loading - render empty
+          isBeforeRoundEndDate === undefined
+            ? ""
+            : isBeforeRoundEndDate
+              ? "to go"
+              : "Round ended"
+        }
+      </Stat>
+    </div>
+  );
+}