Release/november (#92)

* removed farcaster login
added 700 milliseconds to wait before endorsment fetch
added back cacheechange for graphql client

* 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

Author: Oba-One

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} />

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>
   );
 });

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({

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>
   );

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">

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(2000);
+      await delay(3200);
       await refetch();
 
       toast.dismiss();

packages/client/src/modules/urql.ts

@@ -2,14 +2,12 @@ import { Client, cacheExchange, fetchExchange } from "@urql/core";
 
 export const easOptimismClient = new Client({
   url: "https://optimism.easscan.org/graphql",
-  exchanges: [fetchExchange],
-  requestPolicy: "network-only",
+  exchanges: [cacheExchange, fetchExchange],
 });
 
 export const osoClient = new Client({
   url: "https://www.opensource.observer/api/v1/graphql",
-  exchanges: [fetchExchange],
-  requestPolicy: "network-only",
+  exchanges: [cacheExchange, fetchExchange],
   fetchOptions: {
     headers: {
       Authorization: `Bearer ${process.env.OPEN_SOURCE_OBSERVER_API_KEY}`,

packages/client/src/modules/wagmi.ts

@@ -17,15 +17,12 @@ export const metadata = {
 };
 
 // Create wagmiConfig
-const chains = [optimism] as const;
 export const config = defaultWagmiConfig({
-  chains,
+  chains: [optimism],
   projectId,
   metadata,
   ssr: true,
-  auth: {
-    socials: ["farcaster"],
-  },
+  auth: {},
   storage: createStorage({
     storage: cookieStorage,
   }),

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) {

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"
                 >