Fix/UI issues 231114

src/components/Journey/HelpModal/HelpModalSteps.tsx

@@ -47,9 +47,9 @@ export const HelpModalStepTwo: React.FC<StepTwoProps> = ({
         <p className="max-w-[55%] text-xl font-semibold">
           Jump straight into ranking projects where you have expertise. Your
           initial category allocations can be edited anytime before submitting
-          your list. The more project rankings you complete, the more fine-tuned
-          the project allocations. Leverage your expertise to shape impact in
-          the Optimism ecosystem!
+          your list. The more projects you rank, the more fine-tuned the project
+          allocations. Leverage your expertise to shape impact in the Optimism
+          ecosystem!
         </p>
         <img
           alt="ethers"
@@ -88,7 +88,7 @@ export const HelpModalStepThree: React.FC<StepTwoProps> = ({
           {`When you are satisfied with your rankings on one planet, you can move
           onto the next! You can make any manual adjustments you would like in
           the "Ranking" section. This is where you can finalize your list and
-          submit to Agora and Supermodular for voting.`}
+          submit to Agora and West for voting.`}
         </p>
         <img
           alt="ethers"

src/components/Poll/Pair/VoteModal/index.tsx

@@ -1,10 +1,11 @@
+import { PairType, PairTypeMetaData } from '@/types/Pairs/Pair'
+import { useEffect, useState } from 'react'
+
 import { Close } from '@/components/Icon/Close'
-import { sanitize } from 'dompurify'
 import Image from 'next/image'
 import { Layers } from '@/components/Icon/Layers'
-import { PairType, PairTypeMetaData } from '@/types/Pairs/Pair'
-import { useEffect, useState } from 'react'
 import { axiosInstance } from '@/utils/axiosInstance'
+import { sanitize } from 'dompurify'
 
 interface VoteModalProps {
   item: PairType
@@ -24,15 +25,15 @@ export const VoteModal: React.FC<VoteModalProps> = ({ handeClose, item }) => {
     <>
       <div className="relative flex  min-w-[700px] flex-col  gap-6">
         <div className="flex flex-col">
-          <header className="flex justify-between mb-2">
+          <header className="mb-2 flex justify-between">
             <h3 className="text-2xl font-bold ">{item.name}</h3>
             <Close className="cursor-pointer" onClick={handeClose} />
           </header>
           {item.numOfChildren > 0 && (
-            <div className="self-start p-1 border rounded-lg border-black-3">
-              <div className="flex items-center gap-2 px-3 py-1 border rounded-lg border-gray-10">
+            <div className="self-start rounded-lg border border-black-3 p-1">
+              <div className="flex items-center gap-2 rounded-lg border border-gray-10 px-3 py-1">
                 <Layers />
-                <span className="text-sm font-IBM">
+                <span className="font-IBM text-sm">
                   {`${item.numOfChildren} + Projects`}
                 </span>
               </div>
@@ -49,7 +50,7 @@ export const VoteModal: React.FC<VoteModalProps> = ({ handeClose, item }) => {
                 src={item.image || '/nip.png'}
                 width={360}
               />
-              <div className="max-w-[360px] overflow-hidden whitespace-nowrap text-ellipsis ">
+              <div className="max-w-[360px] overflow-hidden text-ellipsis whitespace-nowrap ">
                 <span className="font-medium"> Website: </span>
                 <a
                   className="text-blue-400"
@@ -60,7 +61,7 @@ export const VoteModal: React.FC<VoteModalProps> = ({ handeClose, item }) => {
                 </a>
               </div>
             </div>
-            <div className="flex flex-col gap-6 px-4 overflow-auto text-lg font-Inter">
+            <div className="flex flex-col gap-6 overflow-auto px-4 font-Inter text-lg">
               <div className="flex flex-col gap-2">
                 <p
                   dangerouslySetInnerHTML={{
@@ -84,9 +85,9 @@ export const VoteModal: React.FC<VoteModalProps> = ({ handeClose, item }) => {
                   />
                 </div>
               )}
-              {Boolean(metadata?.contributionLinks?.length) && (
-                <div className="flex flex-col gap-2">
-                  <b>Contribution Links:</b>
+              <div className="flex flex-col gap-2">
+                <b>Contribution Links:</b>
+                {Boolean(metadata?.contributionLinks?.length) ? (
                   <ul className="list-disc pl-8">
                     {metadata?.contributionLinks.map((cLink) => (
                       <li key={cLink.url}>
@@ -95,17 +96,21 @@ export const VoteModal: React.FC<VoteModalProps> = ({ handeClose, item }) => {
                           href={cLink.url}
                           rel="noreferrer"
                           target="_blank">
-                          {cLink.type}
+                          {cLink.description}
                         </a>{' '}
-                        - {cLink.description}
+                        - {cLink.type}
                       </li>
                     ))}
                   </ul>
-                </div>
-              )}
-              {Boolean(metadata?.impactMetrics?.length) && (
-                <div className="flex flex-col gap-2">
-                  <b>Impact Metrics:</b>
+                ) : (
+                  <ul className="list-disc pl-8">
+                    <li>No contribution links</li>
+                  </ul>
+                )}
+              </div>
+              <div className="flex flex-col gap-2">
+                <b>Impact Metrics:</b>
+                {Boolean(metadata?.impactMetrics?.length) ? (
                   <ul className="list-disc pl-8">
                     {metadata?.impactMetrics.map((metric) => (
                       <li key={metric.url}>
@@ -120,11 +125,15 @@ export const VoteModal: React.FC<VoteModalProps> = ({ handeClose, item }) => {
                       </li>
                     ))}
                   </ul>
-                </div>
-              )}
-              {Boolean(metadata?.fundingSources?.length) && (
-                <div className="flex flex-col gap-2">
-                  <b>Funding Sources:</b>
+                ) : (
+                  <ul className="list-disc pl-8">
+                    <li>No impact metrics</li>
+                  </ul>
+                )}
+              </div>
+              <div className="flex flex-col gap-2">
+                <b>Funding Sources:</b>
+                {Boolean(metadata?.fundingSources?.length) ? (
                   <ul className="list-disc pl-8">
                     {metadata?.fundingSources.map((fund) => (
                       <li key={fund.type}>
@@ -133,21 +142,25 @@ export const VoteModal: React.FC<VoteModalProps> = ({ handeClose, item }) => {
                       </li>
                     ))}
                   </ul>
-                </div>
-              )}
+                ) : (
+                  <ul className="list-disc pl-8">
+                    <li>No funding sources</li>
+                  </ul>
+                )}
+              </div>
             </div>
           </div>
           {!item.childProjects?.length ? null : (
             <div className="mt-6 mb-10 ">
-              <h5 className="pb-2 text-lg border-b border-b-gray-10">
+              <h5 className="border-b border-b-gray-10 pb-2 text-lg">
                 {item.childProjects.length} projects
               </h5>
-              <div className="flex flex-wrap w-full mt-4 gap-7">
+              <div className="mt-4 flex w-full flex-wrap gap-7">
                 {item.childProjects.map((child) => (
                   <div className="flex w-1/4 gap-4" key={child.id}>
                     <Image
                       alt={item.name}
-                      className="w-12 h-12 rounded shrink-0"
+                      className="h-12 w-12 shrink-0 rounded"
                       height={48}
                       src={child.image}
                       width={48}

src/components/Poll/Rankings/EditTextField.tsx

@@ -7,13 +7,14 @@ import {
   useRef,
   useState,
 } from 'react'
+
+import { Disabled } from '@/components/Icon/Disabled'
+import { EditingCollectionRanking } from './edit-logic/edit'
 import { PadlockLocked } from '@/components/Icon/Padlock-Locked'
 import { PadlockUnlocked } from '@/components/Icon/Padlock-Unlocked'
-import debounce from 'lodash.debounce'
-import cn from 'classnames'
-import { EditingCollectionRanking } from './edit-logic/edit'
-import { Disabled } from '@/components/Icon/Disabled'
 import { Warning } from '../../Icon/Warning'
+import cn from 'classnames'
+import debounce from 'lodash.debounce'
 
 interface Props {
   value: number
@@ -99,13 +100,7 @@ export const EditTextField: FC<Props> = ({
           {state === 'locked' ? (
             <PadlockLocked height={25} width={25} />
           ) : state === 'disabled' ? (
-            <div title="Rank more projects in this category to unlock.">
-              <PadlockLocked
-                height={25}
-                width={25}
-                className="text-[#9e9d9d]"
-              />
-            </div>
+            <PadlockLocked height={25} width={25} className="text-[#9e9d9d]" />
           ) : (
             <PadlockUnlocked fill="blue" height={25} width={25} />
           )}

src/components/Poll/Rankings/OverallRankingRow/AttestationModal.tsx

@@ -6,6 +6,11 @@ import {
 } from '@ethereum-attestation-service/eas-sdk'
 import { CollectionRanking, ProjectRanking } from '../edit-logic/edit'
 import { EASNetworks, SCHEMA_UID, useSigner } from './eas'
+import {
+  convertRankingToAttestationFormat,
+  getPrevAttestationIds,
+} from './attest-utils'
+import { finishCollections, getRankings } from '../../../../utils/poll'
 import { useAccount, useChainId, useConnect } from 'wagmi'
 import { useEffect, useState } from 'react'
 
@@ -14,15 +19,10 @@ import { Close } from '@/components/Icon/Close'
 import Link from 'next/link'
 import { LinkSharp } from '@/components/Icon/LinkSharp'
 import Modal from '@/components/Modal/Modal'
+import { Warning } from '@/components/Icon/Warning'
 import { axiosInstance } from '@/utils/axiosInstance'
 import cn from 'classnames'
-import {
-  convertRankingToAttestationFormat,
-  getPrevAttestationIds,
-} from './attest-utils'
-import { finishCollections, getRankings } from '../../../../utils/poll'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
-import { Warning } from '@/components/Icon/Warning'
 
 interface Props {
   isOpen: boolean
@@ -44,7 +44,7 @@ export const AttestationModal: React.FC<Props> = ({
   const [step, setSteps] = useState<number>(0)
   const [loading, setLoading] = useState(false)
   const [agoraUrl, setAgoraUrl] = useState('')
-  const [smUrl, setSmUrl] = useState('')
+  const [westUrl, setWestUrl] = useState('')
   const [ranking, setRanking] = useState<CollectionRanking>()
 
   const chainId = useChainId()
@@ -145,13 +145,10 @@ export const AttestationModal: React.FC<Props> = ({
       await axiosInstance.post('/flow/reportAttest', {
         cid: collectionId,
       })
-      // setUrl(`${easConfig.explorer}/attestation/view/${newAttestationUID}`)
       setAgoraUrl(
-        `https://optimism-agora-dev.agora-dev.workers.dev/retropgf/3/list/${newAttestationUID}`
-      )
-      setSmUrl(
-        `https://retro-pgf-staging.vercel.app/lists/${newAttestationUID}`
+        `https://vote.optimism.io/retropgf/3/list/${newAttestationUID}`
       )
+      setWestUrl(`https://round3.optimism.io/lists/${newAttestationUID}`)
       setSteps(1)
     } catch (e) {
       console.error('error on sending tx:', e)
@@ -165,14 +162,14 @@ export const AttestationModal: React.FC<Props> = ({
     <Modal isOpen={isOpen} onClose={onClose}>
       <div
         className={cn(
-          'relative flex min-h-[250px] w-[600px] flex-col gap-10 px-2 font-IBM'
+          'relative flex min-h-[250px] w-[600px] flex-col gap-10 font-IBM'
         )}>
         {step === 0 && (
           <div className="flex flex-col gap-6">
             <p className="text-2xl font-bold">Create list</p>
             <p className="text-xl">
               Lists that you create here can be used for the RetroPGF voting
-              both in Agora and Supermodular.
+              both in Agora and West.
             </p>
             <p className="text-xl">
               Lists are created using the Ethereum Attestation Service. You need
@@ -208,15 +205,17 @@ export const AttestationModal: React.FC<Props> = ({
         )}
 
         {step === 1 && (
-          <div className="flex flex-col gap-10">
+          <div className="flex flex-col gap-5">
             <header className="mb-2 flex justify-end">
               <Close className="cursor-pointer" onClick={onClose} />
             </header>
-            <p className="text-xl">
-              The list has been created, you can access it shortly on Agora or
-              Supermodular.
+            <p className="text-center text-2xl font-bold">
+              Your list has been created!
+            </p>
+            <p className="mb-5 text-center text-xl">
+              Great work, you can access the list shortly on Agora or West.
             </p>
-            <div className="flex flex-col items-center justify-center gap-4">
+            <div className="mb-5 flex flex-col items-center justify-center gap-5">
               <a href={agoraUrl} rel="noreferrer" target="_blank">
                 <button
                   className="flex h-[50px] items-center justify-center rounded-full border border-black p-2 px-8 "
@@ -225,11 +224,11 @@ export const AttestationModal: React.FC<Props> = ({
                   <LinkSharp className="ml-4" />
                 </button>
               </a>
-              <a href={smUrl} rel="noreferrer" target="_blank">
+              <a href={westUrl} rel="noreferrer" target="_blank">
                 <button
                   className="flex h-[50px] items-center justify-center rounded-full border border-black p-2 px-8"
                   onClick={() => {}}>
-                  View list on Supermodular
+                  View list on West
                   <LinkSharp className="ml-4" />
                 </button>
               </a>

src/components/Poll/Rankings/OverallRankingRow/CategoryContextMenu.tsx

@@ -134,7 +134,7 @@ const CreateListOption: React.FC<CreateListOptionProps> = ({
   openAttestationModal,
   isEditing,
 }) => {
-  const title = 'Create list'
+  const title = progress === 'Attested' ? 'Recreate list' : 'Create list'
   const disabled = progress === 'Pending' || progress === 'WIP'
   if (isEditing || disabled || !collection) {
     return (

src/components/Poll/Rankings/OverallRankingRow/EditManualModal.tsx

@@ -21,7 +21,7 @@ export const EditManualModal: React.FC<Props> = ({
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <div className="flex w-96 flex-col gap-5 font-IBM">
-        <p className="text-2xl font-bold">Please note</p>
+        <p className="text-2xl font-bold">Warning</p>
         <p>
           After making manual edits to a category you can&apos;t do any more
           pairwise rankings for that category.

src/pages/index.tsx

@@ -116,9 +116,9 @@ export default function Home() {
           <h3 className="text-[32px] font-bold">Streamlining List Creation</h3>
           <p className="text-lg font-medium">
             With Pairwise, you can easily create, edit, and share curated lists
-            of projects, to be imported directly into Agora and Supermodular for
-            final voting. By progressing through planets and moons, the process
-            of list-making is engaging and fun!
+            of projects, to be imported directly into Agora and West for final
+            voting. By progressing through planets and moons, the process of
+            list-making is engaging and fun!
           </p>
           <CollectionsLeft className="absolute -left-[350px] -mt-[300px]" />
         </div>
@@ -144,7 +144,7 @@ export default function Home() {
           </p>
           <img
             alt="Voted Projects"
-            className="w-3/4 absolute -left-[160px] -mt-[98px]"
+            className="absolute -left-[160px] -mt-[98px] w-3/4"
             src="/images/voted-projects.png"
           />
         </div>
@@ -153,7 +153,7 @@ export default function Home() {
       <div className="relative mx-auto mb-60 mt-[340px] flex w-[662px] flex-col items-center justify-center gap-10 text-center">
         <Star className="absolute right-0 -top-40" height={35} width={35} />
         <h2 className="text-5xl font-bold text-red">
-          Ready to Shape the Galaxy?
+          Ready to shape the solar system?
         </h2>
         <p className="text-[32px]  font-medium text-black">
           Kickstart Your Journey: Connect Your Wallet Now