add attestation link

app/allocation/[category]/page.tsx

@@ -58,7 +58,9 @@ const RankingPage = () => {
   const category = categorySlugIdMap.get((params?.category as string) || '');
 
   // const [search, setSearch] = useState<string>("");
-  const [attestationState, setAttestationState] = useState(AttestationState.Initial);
+  const [attestationState, setAttestationState] = useState(
+    AttestationState.Initial
+  );
   const [attestationLink, setAttestationLink] = useState<string>();
   const [checkedItems, setCheckedItems] = useState<number[]>([]);
   const [projects, setProjects] = useState<IProjectRanking[] | null>(null);
@@ -68,6 +70,7 @@ const RankingPage = () => {
   const [isLocked, setIsLocked] = useState(false);
   const [isUnlocked, setIsUnlocked] = useState(false);
   const [allocationBudget, setAllocationBudget] = useState<number>(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const { data: categoryRankings, isLoading: rankingLoading }
     = useCategoryRankings();
@@ -120,8 +123,8 @@ const RankingPage = () => {
           projects.map(project => ({
             ...project,
             share:
-            (newRanking.find(el => el.id === project.projectId)
-              ?.percentage || 0) / 100,
+              (newRanking.find(el => el.id === project.projectId)
+                ?.percentage || 0) / 100,
           }))
         );
 
@@ -201,7 +204,8 @@ const RankingPage = () => {
   };
 
   const submitVotes = async () => {
-    console.log('Projects,', projects);
+    setIsSubmitting(true);
+
     if (!projects) return;
 
     const rankingArray = projects.map(project => ({
@@ -215,12 +219,26 @@ const RankingPage = () => {
 
     if (!wallet || !ranking || !signer) {
       console.error('Requirements not met for attestations');
+      setIsSubmitting(false);
       return;
     }
 
-    await attest({ ranking: { id: ranking.id, name: ranking.name,
-      ranking: projects.map(el => ({ RF6Id: el.project.RF6Id, share: el.share })) },
-    setAttestationLink, setAttestationState, signer, wallet });
+    await attest({
+      ranking: {
+        id: ranking.id,
+        name: ranking.name,
+        ranking: projects.map(el => ({
+          RF6Id: el.project.RF6Id,
+          share: el.share,
+        })),
+      },
+      setAttestationLink,
+      setAttestationState,
+      signer,
+      wallet,
+    });
+
+    setIsSubmitting(false);
   };
 
   const handleAttestationModalClose = () => {
@@ -296,9 +314,7 @@ const RankingPage = () => {
   return (
     <div>
       <Modal
-        isOpen={
-          attestationState !== AttestationState.Initial
-        }
+        isOpen={attestationState !== AttestationState.Initial}
         onClose={handleAttestationModalClose}
         showCloseButton={true}
       >
@@ -308,8 +324,12 @@ const RankingPage = () => {
             onClose={() => setAttestationState(AttestationState.Initial)}
           />
         )}
-        {attestationState === AttestationState.Loading && <AttestationLoading />}
-        {attestationState === AttestationState.Error && <AttestationError onClick={submitVotes} />}
+        {attestationState === AttestationState.Loading && (
+          <AttestationLoading />
+        )}
+        {attestationState === AttestationState.Error && (
+          <AttestationError onClick={submitVotes} />
+        )}
       </Modal>
       <HeaderRF6 />
       <div className="flex flex-col justify-between gap-4 px-6 py-16 lg:px-20 xl:px-52 2xl:px-72">
@@ -441,12 +461,25 @@ const RankingPage = () => {
               Back to Categories
             </button>
             <button
-              className="flex items-center justify-center gap-3 rounded-lg bg-primary px-10 py-2 font-semibold text-white"
+              className={`font-semibold" flex items-center justify-center gap-3 rounded-lg px-10 py-2
+              ${
+    totalShareError
+      ? 'bg-gray-200 text-gray-400'
+      : 'bg-primary text-white'
+    }`}
               onClick={submitVotes}
               disabled={!!totalShareError}
             >
-              Submit Vote
-              <ArrowRightIcon size={20} />
+              {isSubmitting
+                ? (
+                    'Submitting votes...'
+                  )
+                : (
+                    <>
+                      Submit votes
+                      <ArrowRightIcon />
+                    </>
+                  )}
             </button>
           </div>
         </div>

app/allocation/components/CategoryAllocation.tsx

@@ -53,6 +53,7 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
   allocationPercentage,
   allocationBudget,
   locked,
+  attestationLink,
   delegations,
   loading,
   username,
@@ -97,14 +98,15 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
         return (
           <DelegatedCategory
             id={id}
+
             isAutoConnecting={isAutoConnecting}
             username={username}
           />
         );
       case CollectionProgressStatusEnum.Finished:
         return <VotedCategory id={id} isAutoConnecting={isAutoConnecting} />;
       case CollectionProgressStatusEnum.Attested:
-        return <VotedCategory id={id} isAutoConnecting={isAutoConnecting} />;
+        return <VotedCategory id={id} isAutoConnecting={isAutoConnecting} attestationLink={attestationLink || ''} />;
       case CollectionProgressStatusEnum.Pending:
       default:
         return (

app/allocation/components/ProgressCards/VotedCategory.tsx

@@ -5,11 +5,13 @@ import { CheckIcon } from '@/public/assets/icon-components/Check';
 type TVotedCategoryProps = {
   id: number
   isAutoConnecting: boolean
+  attestationLink?: string | null
 };
 
 const VotedCategory = ({
   id,
   isAutoConnecting,
+  attestationLink,
 }: TVotedCategoryProps) => {
   const router = useRouter();
 
@@ -21,17 +23,21 @@ const VotedCategory = ({
       >
         Edit
       </button>
-      <div className="flex w-full justify-center gap-2 rounded-xl border border-[#17B26A] bg-[#ECFDF3] py-1">
-        <p className="text-xs font-medium text-[#17B26A]">Voted</p>
-        <CheckIcon size={15} />
-      </div>
-      <button
-        onClick={() => {}}
-        className="whitespace-nowrap text-xs text-gray-600 underline"
-        disabled={isAutoConnecting}
-      >
-        View attestation
-      </button>
+      {attestationLink != null && (
+        <div className="flex w-full justify-center gap-2 rounded-xl border border-[#17B26A] bg-[#ECFDF3] py-1">
+          <p className="text-xs font-medium text-[#17B26A]">Voted</p>
+          <CheckIcon size={15} />
+        </div>
+      )}
+      {attestationLink && (
+        <button
+          onClick={() => window.open(attestationLink, '_blank')}
+          className="whitespace-nowrap text-xs text-gray-600 underline"
+          disabled={isAutoConnecting}
+        >
+          View attestation
+        </button>
+      )}
     </div>
   );
 };

app/comparison/utils/data-fetching/categories.ts

@@ -9,6 +9,7 @@ export type TCategory = {
   image: string
   projectCount: number
   progress: CollectionProgressStatus
+  attestationLink: string | null
 };
 
 export const getCategories = async (): Promise<TCategory[]> => {