Staging into Main

app/allocation/[category]/components/RankingRow.tsx

@@ -39,13 +39,13 @@ const RankingRow: FC<IRankingRowProps> = ({
         locked && 'bg-gray-100'
       }`}
     >
-      <td className="pb-8 pl-4 pt-4">
+      <td className="pb-8 pl-1 pt-4 lg:pl-4">
         <Checkbox
           checked={selected}
           onChange={() => onSelect(project.projectId)}
         />
       </td>
-      <td className="pb-8 pl-4 pt-4">
+      <td className="pb-8 pl-1 pt-4 lg:pl-4">
         <Image
           src={project.project.image || '/assets/images/placeholder.png'}
           alt={project.project.name}
@@ -54,20 +54,20 @@ const RankingRow: FC<IRankingRowProps> = ({
           unoptimized
         />
       </td>
-      <td className="w-[50%] pb-8 pl-4 pt-4">
+      <td className="2xl:w-[50%] xl:w-[35%] w-[30%] pb-8 pl-1 pt-4 lg:pl-4">
         <p className={`font-medium text-gray-700 ${styles.oneLineClamp}`}>
           {project.project.name}
         </p>
         <p className={`text-sm text-gray-400 ${styles.oneLineClamp}`}>
           {project.project.description}
         </p>
       </td>
-      {/* <td className="pb-8 pl-4 pt-4">
+      {/* <td className="pb-8 lg:pl-4 pl-1 pt-4">
         <div className="flex items-center gap-2">
           <ExpandVertical />
         </div>
       </td> */}
-      <td className="pb-8 pl-4 pt-4">
+      <td className="pb-8 pl-1 pt-4 lg:pl-4">
         <div
           className={`flex items-center justify-center rounded-md border border-gray-200 px-4 py-2 ${
             locked && 'bg-gray-100'
@@ -76,7 +76,7 @@ const RankingRow: FC<IRankingRowProps> = ({
           <p className="text-gray-700">{index + 1}</p>
         </div>
       </td>
-      <td className="relative pb-8 pl-4 pt-4">
+      <td className="relative pb-8 pl-1 pt-4 lg:pl-4">
         <NumericFormat
           suffix="%"
           decimalScale={2}

app/allocation/[category]/page.tsx

@@ -172,7 +172,10 @@ const RankingPage = () => {
   const lockSelection = () => {
     if (!projects) return;
 
-    if (checkedItems.length > projects?.length - 2) {
+    if (
+      checkedItems.length > projects?.length - 2
+      || lockedItems.length >= projects?.length - 2
+    ) {
       setTotalShareError('At least two projects must be unlocked');
       window.scrollTo(0, document.body.scrollHeight);
       return;
@@ -367,7 +370,7 @@ const RankingPage = () => {
             </div>
           </div>
           {/* <SearchBar search={search} setSearch={setSearch} /> */}
-          <div className="flex items-center justify-between rounded-lg bg-gray-100 px-8 py-3">
+          <div className="flex items-center justify-between rounded-lg bg-gray-100 px-4 py-3 lg:px-8">
             <div className="flex items-center gap-4">
               <div className="flex items-center justify-center gap-2">
                 <Checkbox
@@ -428,23 +431,25 @@ const RankingPage = () => {
               )
             : projects?.length
               ? (
-                  <table className="w-full">
-                    <tbody className="flex flex-col gap-6">
-                      {projects.map((project, index) => (
-                        <RankingRow
-                          key={project.projectId}
-                          index={index}
-                          budget={allocationBudget * project.share}
-                          project={project}
-                          selected={checkedItems.includes(project.projectId)}
-                          locked={lockedItems.includes(project.projectId)}
-                          onLock={handleLocck}
-                          onSelect={selectItem}
-                          onVote={handleVote}
-                        />
-                      ))}
-                    </tbody>
-                  </table>
+                  <div className="w-full overflow-x-auto">
+                    <table className="w-full min-w-full">
+                      <tbody className="flex flex-col gap-6">
+                        {projects.map((project, index) => (
+                          <RankingRow
+                            key={project.projectId}
+                            index={index}
+                            budget={allocationBudget * project.share}
+                            project={project}
+                            selected={checkedItems.includes(project.projectId)}
+                            locked={lockedItems.includes(project.projectId)}
+                            onLock={handleLocck}
+                            onSelect={selectItem}
+                            onVote={handleVote}
+                          />
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
                 )
               : (
                   <p className="text-center text-gray-400">No projects found</p>

app/allocation/components/BudgetAllocation.tsx

@@ -22,6 +22,7 @@ interface IBudgetAllocationProps extends BudgetCategory {
   username?: string
   isBadgeholder: boolean
   bhCategory: string
+  isBHCategoryAtessted: boolean
   attestationLink: string | null
   categorySlug: string
   onDelegate: () => void
@@ -39,6 +40,7 @@ const BudgetAllocation: React.FC<IBudgetAllocationProps> = ({
   progress = CollectionProgressStatusEnum.Pending,
   username,
   isBadgeholder,
+  isBHCategoryAtessted,
   bhCategory,
   categorySlug,
   onScore,
@@ -48,15 +50,13 @@ const BudgetAllocation: React.FC<IBudgetAllocationProps> = ({
 
   const renderProgressState = useMemo(() => {
     switch (progress) {
-      case CollectionProgressStatusEnum.Finished:
-        return <VotedCategory id={id} isAutoConnecting={isAutoConnecting} />;
       case CollectionProgressStatusEnum.Attested:
         return (
           <VotedCategory
             budgetEditHandle={onScore}
             id={id}
             isAutoConnecting={isAutoConnecting}
-            attestationLink={attestationLink}
+            attestationLink={attestationLink || ''}
           />
         );
       case CollectionProgressStatusEnum.Delegated:
@@ -67,6 +67,7 @@ const BudgetAllocation: React.FC<IBudgetAllocationProps> = ({
             username={username}
           />
         );
+      case CollectionProgressStatusEnum.Finished:
       case CollectionProgressStatusEnum.Pending:
       default:
         return (
@@ -79,6 +80,7 @@ const BudgetAllocation: React.FC<IBudgetAllocationProps> = ({
             isBadgeholder={isBadgeholder}
             bhCategory={bhCategory}
             categorySlug={categorySlug}
+            isBHCategoryAtessted={isBHCategoryAtessted}
           />
         );
     }

app/allocation/components/CategoryAllocation.tsx

@@ -36,6 +36,7 @@ interface CategoryAllocationProps extends TCategory {
   username?: string
   isBadgeholder: boolean
   bhCategory: string
+  isBHCategoryAtessted: boolean
   categorySlug: string
   onDelegate: () => void
   onScore: () => void
@@ -60,6 +61,7 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
   isBadgeholder,
   bhCategory,
   categorySlug,
+  isBHCategoryAtessted,
   onDelegate,
   onScore,
   onLockClick,
@@ -123,6 +125,7 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
             isBadgeholder={isBadgeholder}
             bhCategory={bhCategory}
             categorySlug={categorySlug}
+            isBHCategoryAtessted={isBHCategoryAtessted}
           />
         );
     }

app/allocation/components/EOA/EmailLoginModal.tsx

@@ -151,7 +151,7 @@ const EmailLoginModal = ({ closeModal, selectedCategoryId }: TEmailLoginModalPro
                 className="flex items-center gap-1 font-medium text-primary"
                 onClick={() =>
                   window.open(
-                    'https://pairwise.vote/blog/2021/09/15/why-we-need-anonymous-voting/',
+                    'https://paragraph.xyz/@pairwise/empowering-superchain-with-pseudonymous',
                     '_blank'
                   )}
               >

app/allocation/components/ProgressCards/PendingCategory.tsx

@@ -9,6 +9,7 @@ type TPendingCategoryProps = {
   isBadgeholder: boolean
   bhCategory: string
   categorySlug: string
+  isBHCategoryAtessted: boolean
 };
 
 const PendingCategory = ({
@@ -20,21 +21,22 @@ const PendingCategory = ({
   isBadgeholder,
   bhCategory,
   categorySlug,
+  isBHCategoryAtessted,
 }: TPendingCategoryProps) => {
   return (
     <div className="flex w-full flex-col items-center justify-center gap-2">
       <div className="flex w-full items-center justify-between">
         <button
           onClick={onScore}
           className={`whitespace-nowrap rounded-md py-3 text-sm font-medium ${
-            isAutoConnecting || (isBadgeholder && bhCategory !== categorySlug)
-              ? 'border bg-gray-300 text-gray-500'
+            isAutoConnecting || (isBadgeholder && bhCategory !== categorySlug && !isBHCategoryAtessted)
+              ? 'border bg-gray-300 text-gray-600'
               : 'bg-primary text-white'
           } ${
             isBadgeholder && bhCategory === categorySlug ? 'w-full' : 'w-[48%]'
           }`}
           disabled={
-            isAutoConnecting || (isBadgeholder && bhCategory !== categorySlug)
+            isAutoConnecting || (isBadgeholder && bhCategory !== categorySlug && !isBHCategoryAtessted)
           }
         >
           Vote
@@ -63,8 +65,8 @@ const PendingCategory = ({
           </p>
         </div>
       )}
-      {progress === 'WIP'
-      && !(isBadgeholder && bhCategory !== categorySlug) && (
+      {(progress === 'WIP' || progress === 'Finished')
+      && !(isBadgeholder && bhCategory !== categorySlug && !isBHCategoryAtessted) && (
         <div className="flex w-full justify-center gap-2 rounded-xl border border-[#FFA15A] bg-[#FFF7ED] py-1">
           <p className="text-xs font-medium text-[#FFA15A]">Voting</p>
         </div>

app/allocation/page.tsx

@@ -133,6 +133,11 @@ const AllocationPage = () => {
     = useState<Pick<ICategory, 'id' | 'name'>>();
   const [targetDelegate, setTargetDelegate] = useState<TargetDelegate>();
 
+  const [rankingProgress, setRankingProgress]
+    = useState<CollectionProgressStatusEnum>(
+      CollectionProgressStatusEnum.Pending
+    );
+
   const { mutateAsync: updateCategoriesRanking } = useUpdateCategoriesRanking({
     budget: totalValue,
     allocationPercentages:
@@ -304,6 +309,20 @@ const AllocationPage = () => {
     );
   };
 
+  const isBHCategoryAtessted = () => {
+    const bhCategoryProgress = categories?.find(
+      el => el.id === categorySlugIdMap.get(category)
+    )?.progress;
+
+    return bhCategoryProgress === CollectionProgressStatusEnum.Attested;
+  };
+
+  useEffect(() => {
+    if (categoryRankings) {
+      setRankingProgress(categoryRankings.progress);
+    }
+  }, [categoryRankings]);
+
   useEffect(() => {
     if (delegations) {
       const budgetDelegateFromYou = delegations?.fromYou?.budget;
@@ -315,10 +334,14 @@ const AllocationPage = () => {
   }, [delegations]);
 
   useEffect(() => {
-    if (categoryRankings && categoryRankings.progress === 'Attested' && dbudgetProgress === CollectionProgressStatusEnum.Pending) {
+    if (
+      rankingProgress === CollectionProgressStatusEnum.Attested
+      && dbudgetProgress === CollectionProgressStatusEnum.Pending
+    ) {
       setDbudgetProgress(CollectionProgressStatusEnum.Attested);
     }
-  }, [categoryRankings, dbudgetProgress]);
+    else setDbudgetProgress(CollectionProgressStatusEnum.Pending);
+  }, [rankingProgress]);
 
   useEffect(() => {
     if (categoryRankings) {
@@ -533,6 +556,7 @@ const AllocationPage = () => {
                           loading={delegationsLoading}
                           isBadgeholder={isBadgeholder}
                           bhCategory={category}
+                          isBHCategoryAtessted={isBHCategoryAtessted()}
                           categorySlug={category}
                           onDelegate={() => {
                             setCategoryToDelegate(budgetCategory);
@@ -558,6 +582,7 @@ const AllocationPage = () => {
                             loading={delegationsLoading}
                             isBadgeholder={isBadgeholder}
                             bhCategory={category}
+                            isBHCategoryAtessted={isBHCategoryAtessted()}
                             categorySlug={categoryIdSlugMap.get(cat.id)!}
                             onDelegate={() => {
                               setCategoryToDelegate(cat);

app/comparison/card/GithubBox.tsx

@@ -55,13 +55,13 @@ const GithubBox: FC<Props> = ({ repo }) => {
           {isExpanded
             ? (
                 <div className="flex items-center gap-2">
-                  <span> Hide metrics </span>
+                  {'metrics' in repo && repo.metrics && <span> Hide metrics </span>}
                   <ArrowUpIcon />
                 </div>
               )
             : (
                 <div className="flex items-center gap-2">
-                  <span> View metrics </span>
+                  {'metrics' in repo && repo.metrics && <span> View metrics </span>}
                   <ArrowDownIcon />
                 </div>
               )}

app/comparison/card/Header-RF6.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState, useEffect, useMemo } from 'react';
 import { useDisconnect, useAccount } from 'wagmi';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { ConnectButton } from '@/app/utils/wallet/Connect';
 import { PwLogo } from '@/public/assets/icon-components/PairwiseLogo';
 import { ThinExternalLinkIcon } from '@/public/assets/icon-components/ThinExternalLink';
@@ -33,6 +33,7 @@ const HeaderRF6: FC<HeaderProps> = ({
   isFirstSelection = false,
 }) => {
   const path = usePathname();
+  const router = useRouter();
   const { disconnectAsync } = useDisconnect();
   const { signOut, loginAddress } = useAuth();
   const { data: badges } = useGetPublicBadges();
@@ -168,7 +169,7 @@ const HeaderRF6: FC<HeaderProps> = ({
       <div className="relative z-40 w-full border-b bg-white">
         <div className="flex items-center justify-between px-6 py-4 md:px-12 lg:px-4">
           {!isFirstSelection && (
-            <div className="flex items-center">
+            <div onClick={() => router.push('/allocation')} className="flex cursor-pointer items-center">
               <PwLogo />
             </div>
           )}

app/comparison/card/ProjectCard.tsx

@@ -161,9 +161,9 @@ export const ProjectCard: React.FC<Props> = ({
 
     const handleScroll = () => {
       if (parentRef.current && titleRef.current) {
-        const rect = titleRef.current.getBoundingClientRect();
+        const rect = titleRef.current.getBoundingClientRect()?.top;
         const offset = parentRef.current.getBoundingClientRect()?.top;
-        setIsSticky(rect.top <= offset && rect.top >= -offset);
+        setIsSticky(rect <= offset && rect >= -offset);
       }
     };
 
@@ -241,7 +241,7 @@ export const ProjectCard: React.FC<Props> = ({
     coi || coiLoading ? 'brightness-50' : ''
     }`}
       >
-        <div ref={parentRef} className="h-[78vh] gap-10 overflow-y-auto p-2">
+        <div ref={parentRef} className="h-[78vh] gap-10 overflow-y-auto">
           <div className="mr-4">
             {/* Cover Image and Profile Avatar */}
             <div className="relative h-40">
@@ -424,7 +424,7 @@ export const ProjectCard: React.FC<Props> = ({
                 />
                 {project.testimonials?.length && (
                   <SimpleInfoBox
-                    title={`https://www.metricsgarden.xyz/projects/${project.projectId}/contributions/${project.projectId}`}
+                    title={`https://www.metricsgarden.xyz/projects/${project.projectId}/?tab=insights`}
                     description=""
                     type="link"
                     showIcon={false}

app/comparison/card/modals/GoodRatingModal.tsx

@@ -24,11 +24,11 @@ const StarRating: FC<IStarRatingProps> = ({ color, numRated }) => (
 );
 
 const ratingOptions = [
-  { color: '#FF1D1D', numRated: 1, label: 'No impact on the OP stack' },
-  { color: '#FF8C22', numRated: 2, label: 'Low impact on the OP stack' },
-  { color: '#F8CE00', numRated: 3, label: 'Medium impact on the OP stack' },
-  { color: '#46C34C', numRated: 4, label: 'High impact on the OP stack' },
-  { color: '#479F78', numRated: 5, label: 'Very High impact on the OP stack' },
+  { color: '#FF1D1D', numRated: 1, label: 'No impact on the OP Governance' },
+  { color: '#FF8C22', numRated: 2, label: 'Low impact on the OP Governance' },
+  { color: '#F8CE00', numRated: 3, label: 'Medium impact on the OP Governance' },
+  { color: '#46C34C', numRated: 4, label: 'High impact on the OP Governance' },
+  { color: '#479F78', numRated: 5, label: 'Very High impact on the OP Governance' },
 ];
 
 const GoodRatingModal: FC<IGoodRatingModalProps> = ({ confirm }) => (