Merge branch 'main' into par-601

gitcoinco · Nov 8, 2024 · 559611b · 559611b
2 parents 6be9d74 + 9fdc723
commit 559611b
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 19 deletions.
diff --git a/packages/grant-explorer/src/features/collections/CollectionCard.tsx b/packages/grant-explorer/src/features/collections/CollectionCard.tsx
@@ -11,8 +11,15 @@ export type CollectionCardProps = {
 const CollectionCard = ({ collection, size }: CollectionCardProps) => {
   const { cid, name, description } = collection;
 
+  const sliceLength = size === "small" ? 165 : 385;
+
+  let desc = description;
+  if (description && description.length > sliceLength) {
+    desc = description.slice(0, sliceLength) + "...";
+  }
+
   return (
-    <BasicCard className="w-full">
+    <BasicCard className="w-full h-[246px]">
       <a
         href={collectionPath(cid!)}
         data-track-event={`home-collections-card-${size}`}
@@ -21,12 +28,8 @@ const CollectionCard = ({ collection, size }: CollectionCardProps) => {
           <CollectionBanner />
         </CardHeader>
         <div className="p-4 space-y-1">
-          <div className="font-medium truncate text-xl">
-            {name}
-          </div>
-          <p className="text-grey-400 text-sm">
-            {description}
-          </p>
+          <div className="font-medium truncate text-xl">{name}</div>
+          <p className="text-grey-400 text-sm">{desc}</p>
         </div>
       </a>
     </BasicCard>

diff --git a/packages/grant-explorer/src/features/collections/CollectionDetails.tsx b/packages/grant-explorer/src/features/collections/CollectionDetails.tsx
@@ -3,6 +3,7 @@ import { CheckIcon, LinkIcon } from "@heroicons/react/20/solid";
 import { ShoppingCartIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 import { CollectionV1 } from "./collections";
+import { useCollections } from "./hooks/useCollections";
 
 type Props = {
   collection: CollectionV1;
@@ -17,17 +18,21 @@ export function CollectionDetails({
   projectsInView,
   onAddAllApplicationsToCart,
 }: Props) {
+  const collections = useCollections();
+
+  // filter collections by collection.href
+  const description = collections.data?.find(
+    (c) => c.cid && location.href.includes(c.cid)
+  )?.description;
+
   return (
     <div className="mt-16">
-      <h3 className="text-4xl font-medium mb-2">{`${
-        collection.name ?? defaultCollectionName
-      } (${projectsInView})`}</h3>
-      <div className="flex">
-        <div className="text-lg flex-1 whitespace-pre-wrap">
-          {collection.description}
-        </div>
-        <div className="w-96">
-          <div className="flex justify-end gap-2">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
+        <div className="col-span-1 md:col-span-4 flex flex-col md:flex-row justify-between items-start md:items-center">
+          <h3 className="text-4xl font-medium">
+            {`${collection.name ?? defaultCollectionName} (${projectsInView})`}
+          </h3>
+          <div className="flex gap-2 mt-4 md:mt-0">
             <ShareButton url={location.href} />
             <AddToCartButton
               current={projectsInView}
@@ -36,6 +41,9 @@ export function CollectionDetails({
             />
           </div>
         </div>
+        <div className="col-span-1 md:col-span-3 text-lg flex-1 whitespace-pre-wrap">
+          {description ?? collection.description}
+        </div>
       </div>
     </div>
   );

diff --git a/packages/grant-explorer/src/features/discovery/CardBanner.tsx b/packages/grant-explorer/src/features/discovery/CardBanner.tsx
@@ -117,7 +117,7 @@ export function CollectionBanner() {
   const [gradient] = useState<string[]>(getRandomGradient());
   return (
     <div
-      className="h-[70px]"
+      className="h-[104px]"
       style={{
         background: `linear-gradient(180deg, #${gradient[0]} 0%, #${gradient[1]} 100%)`,
       }}

diff --git a/packages/grant-explorer/src/features/round/CopyToClipboard.tsx b/packages/grant-explorer/src/features/round/CopyToClipboard.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import {
+  CheckCircleIcon,
+  DocumentDuplicateIcon,
+} from "@heroicons/react/24/outline";
+import { truncate } from "../common/utils/truncate";
+import { isAddress } from "viem";
+
+const CopyToClipboard = ({ text }: { text: string | undefined }) => {
+  const [copied, setCopied] = useState(false);
+  const copyText = () => {
+    navigator.clipboard
+      .writeText(text || "")
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 3000);
+      })
+      .catch((error) => {
+        console.error("Failed to copy text: ", error);
+      });
+  };
+
+  return (
+    <div onClick={copyText} className="flex" style={{ cursor: "pointer" }}>
+      {isAddress(text || "") ? truncate(text) : text}
+      {copied ? (
+        <CheckCircleIcon
+          aria-hidden="true"
+          className="ml-1 w-5 text-blue-500"
+        />
+      ) : (
+        <DocumentDuplicateIcon
+          aria-hidden="true"
+          className="ml-1 w-5 text-blue-500"
+        />
+      )}
+    </div>
+  );
+};
+
+export default CopyToClipboard;
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx
@@ -44,13 +44,13 @@ import { useOSO } from "../api/oso";
 import { CheckIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
 import { Application, useDataLayer } from "data-layer";
 import { DefaultLayout } from "../common/DefaultLayout";
-import { truncate } from "../common/utils/truncate";
 import {
   mapApplicationToProject,
   mapApplicationToRound,
   useApplication,
 } from "../projects/hooks/useApplication";
 import { PassportWidget } from "../common/PassportWidget";
+import CopyToClipboard from "./CopyToClipboard";
 
 const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
@@ -370,7 +370,7 @@ function ProjectLinks({ project }: { project?: Project }) {
       }`}
     >
       <ProjectLink icon={EthereumIcon}>
-        {ens.data || truncate(recipient)}
+        <CopyToClipboard text={ens.data || recipient} />
       </ProjectLink>
       <ProjectLink icon={CalendarIcon}>{createdOn}</ProjectLink>
       <ProjectLink url={website} icon={GlobeIcon}>