Fixed these bugs

[BUG] - Zerion #79 [BUG] - Farcaster Login #80 [BUG] - Farcaster Wallet adress #81 [BUG] Farcaster ID #82 [BUG] Endorsements - Symbols Limit #83 [BUG] Endorsement Not In Local Time #84 [BUG] Endorsements submitting appearance (API) #85 [BUG] Long Project name & Description (2 bugs) #86 [BUG] UI/UX on Endorsements page #87 [BUG] Character limit to high for endorsements #88 [BUG] Last endorsement time wrong at times #89 [BUG] Endorsement EAS Link #90 [BUG] Too many pages for pagination. #91
greenpill-dev-guild · Dec 1, 2024 · 108cbc7 · 108cbc7
1 parent 6af7b88
commit 108cbc7
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 36 deletions.
diff --git a/packages/client/src/app/projects/page.tsx b/packages/client/src/app/projects/page.tsx
@@ -13,7 +13,7 @@ const ProjectsPage: NextPage = async ({
 }) => {
   const query = searchParams?.query || "";
   const currentPage = Number(searchParams?.page) || 1;
-  const totalPages = 5;
+  const totalPages = 4;
 
   return (
     <ProjectsView query={query} page={currentPage} totalPages={totalPages} />

diff --git a/packages/client/src/components/Project/Attest/Endorsement.tsx b/packages/client/src/components/Project/Attest/Endorsement.tsx
@@ -34,7 +34,7 @@ export const ProjectAttestEndorsement = forwardRef<
         ref={ref}
         {...props}
       />
-      <p className="text-sm">500 Characters Max</p>
+      <p className="text-sm">250 Characters Max</p>
     </div>
   );
 });

diff --git a/packages/client/src/components/Project/Attest/index.tsx b/packages/client/src/components/Project/Attest/index.tsx
@@ -32,7 +32,7 @@ function generateSchema(projectCreator: boolean) {
           .nullish(),
       })
     : z.object({
-        endorsement: z.string().min(100).max(1000),
+        endorsement: z.string().min(100).max(250),
         metrics: z
           .array(
             z.object({

diff --git a/packages/client/src/components/Project/Endorsements.tsx b/packages/client/src/components/Project/Endorsements.tsx
@@ -27,7 +27,7 @@ export const ProjectEndorsementCard: React.FC<ProjectEndorsementCardProps> = ({
         <p className="font-semibold">
           by {formatAddress(endorsement.attester)}
         </p>
-        <span>{endorsement.created_at}</span>
+        <span>{new Date(endorsement.created_at).toLocaleString()}</span>
       </div>
     </li>
   );

diff --git a/packages/client/src/components/Project/Overview.tsx b/packages/client/src/components/Project/Overview.tsx
@@ -55,7 +55,7 @@ export const ProjectOverview: React.FC<ProjectOverviewProps> = ({
         height={120}
       />
       <div className="flex-1">
-        <h1 className="text-5xl font-semibold">{title}</h1>
+        <h1 className="line-clamp-2 text-5xl font-semibold">{title}</h1>
         <p className="line-clamp-6">{description}</p>
       </div>
       <div className="flex h-full basis-72 flex-col items-end justify-between gap-6">

diff --git a/packages/client/src/hooks/useEndorsements.ts b/packages/client/src/hooks/useEndorsements.ts
@@ -27,8 +27,8 @@ export const useEndorsements = (projectUID: string) => {
   const { data, refetch } = useQuery({
     queryKey: ["endorsements", projectUID],
     queryFn: () => getProjectEndorsements(projectUID),
-    staleTime: 30000,
-    refetchInterval: 120000,
+    // staleTime: 30000,
+    refetchInterval: 4000,
   });
 
   const createEndorsement = async (params: CreateEndorsementParams) => {
@@ -64,7 +64,7 @@ export const useEndorsements = (projectUID: string) => {
 
       const newAttestationUID = await transaction.wait();
 
-      await delay(2700);
+      await delay(3200);
       await refetch();
 
       toast.dismiss();

diff --git a/packages/client/src/utils/text.ts b/packages/client/src/utils/text.ts
@@ -18,30 +18,42 @@ export function formatPrice(
 }
 
 export function formatLastUpdated(updatedAt: string) {
+  const msPerSecond = 1000;
+  const msPerMinute = 60 * msPerSecond;
+  const msPerHour = 60 * msPerMinute;
+  const msPerDay = 24 * msPerHour;
+  const msPerMonth = 30 * msPerDay;
+  const msPerYear = 12 * msPerMonth;
+
   const updatedDate = new Date(updatedAt).getTime();
   const now = new Date().getTime();
+  const differenceInMs = now - updatedDate;
+
+  if (differenceInMs < msPerSecond) {
+    return "just now";
+  }
+
+  if (differenceInMs < msPerMinute) {
+    return `${Math.floor(differenceInMs / msPerSecond)} seconds ago`;
+  }
 
-  console.log("updatedDate", updatedDate, now);
+  if (differenceInMs < msPerHour) {
+    return `${Math.floor(differenceInMs / msPerMinute)} minutes ago`;
+  }
 
-  const differenceInSeconds = Math.floor((now - updatedDate) / 1000);
+  if (differenceInMs < msPerDay) {
+    return `${Math.floor(differenceInMs / msPerHour)} hours ago`;
+  }
 
-  const intervals = [
-    { label: "year", seconds: 31536000 },
-    { label: "month", seconds: 2592000 },
-    { label: "day", seconds: 86400 },
-    { label: "hour", seconds: 3600 },
-    { label: "minute", seconds: 60 },
-    { label: "second", seconds: 1 },
-  ];
+  if (differenceInMs < msPerMonth) {
+    return `${Math.floor(differenceInMs / msPerDay)} days ago`;
+  }
 
-  for (const interval of intervals) {
-    const count = Math.floor(differenceInSeconds / interval.seconds);
-    if (count !== 0) {
-      return `${count} ${interval.label}${count !== 1 ? "s" : ""} ago`;
-    }
+  if (differenceInMs < msPerYear) {
+    return `${Math.floor(differenceInMs / msPerMonth)} months ago`;
   }
 
-  return "just now";
+  return `${Math.floor(differenceInMs / msPerYear)} years ago`;
 }
 
 export function determineSocialMedia(link: string | null) {

diff --git a/packages/client/src/views/Profile/Endorsements.tsx b/packages/client/src/views/Profile/Endorsements.tsx
@@ -26,19 +26,21 @@ const ProfileEndorsementsView: React.FC<ProfileEndorsementsProps> = () => {
   return (
     <div className="w-full flex-1">
       {endorsements?.length ? (
-        <ul className="flex max-w-xl flex-col gap-2">
+        <ul className="flex max-w-xl flex-col gap-3">
           {endorsements.map((endorsement) => (
             <li
               key={endorsement.id}
-              className="flex flex-col items-center justify-between gap-8 rounded-xl border-slate-100 p-4 shadow-sm"
+              className="border-1 flex flex-col items-center justify-between gap-8 rounded-xl border-slate-100 p-4 shadow-md"
             >
               <p className="max-w-prose font-light leading-snug">
                 {endorsement.description}
               </p>
               <div className="flex w-full justify-between">
-                <span className="">{endorsement.created_at}</span>
+                <span className="">
+                  {new Date(endorsement.created_at).toLocaleString()}
+                </span>
                 <Link
-                  href={`https://sepolia.easscan.org/${endorsement.id}`}
+                  href={`https://optimism.easscan.org/attestation/view/${endorsement.id}`}
                   target="_blank"
                   className="button button-link"
                 >

diff --git a/packages/client/src/views/Profile/Settings.tsx b/packages/client/src/views/Profile/Settings.tsx
@@ -35,14 +35,6 @@ const ProfileSettings: React.FC<ProfileSettingsProps> = ({ user }) => {
         </p>
         <span className="">{address ? formatAddress(address) : ""}</span>
       </div>
-      <div className="border-b-2 border-slate-200 pb-8">
-        <h4 className="mb-2">Farcaster ID</h4>
-        <p className="mb-4 font-light">
-          Recommended for project builders to claim ownership to enable
-          self-claim impact attestation.
-        </p>
-        <span className="">{walletInfo?.name ?? ""}</span>
-      </div>
       <div>
         {address && (
           <button onClick={handleLogout} className="button-secondary">