Update for new proposal

src/pages/KyberDAO/Vote/ProposalItem/OptionButton.tsx

@@ -8,6 +8,7 @@ import RadioButtonChecked from 'components/Icons/RadioButtonChecked'
 import RadioButtonUnchecked from 'components/Icons/RadioButtonUnchecked'
 import { RowBetween, RowFit } from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
+import { HARDCODED_OPTION_TITLE } from 'pages/KyberDAO/constants'
 
 const Wrapper = styled.div<{ type?: 'Finished' | 'Active' | 'Choosing' | 'Pending'; disabled?: boolean }>`
   border-radius: 4px;
@@ -112,6 +113,7 @@ export default function OptionButton({
   onOptionClick,
   isCheckBox,
   disabled,
+  proposalId,
   id,
 }: {
   checked?: boolean
@@ -121,9 +123,11 @@ export default function OptionButton({
   onOptionClick?: () => void
   isCheckBox: boolean
   disabled?: boolean
+  proposalId: number
   id: number
 }) {
   const parsedPercent = parseFloat(percent.toFixed(2) || '0')
+  const hardCodedTitle = HARDCODED_OPTION_TITLE[proposalId][id]
   return (
     <Wrapper onClick={() => !disabled && onOptionClick?.()} disabled={disabled} type={type}>
       <div style={{ zIndex: 4, width: '100%' }}>
@@ -147,7 +151,7 @@ export default function OptionButton({
                   <RadioButtonUnchecked />
                 )}{' '}
               </CheckButtonWrapper>
-              <Text>{`${id}. ${title}`}</Text>
+              <Text>{`${id}. ${hardCodedTitle || title}`}</Text>
             </RowFit>
           </MouseoverTooltip>
           <Text fontSize="12px" padding={'0 4px'}>

src/pages/KyberDAO/Vote/ProposalItem/Participants.tsx

@@ -11,6 +11,7 @@ import Row, { RowBetween, RowFit } from 'components/Row'
 import { useProposalInfoById } from 'hooks/kyberdao'
 import { ProposalType, VoteDetail } from 'hooks/kyberdao/types'
 import useTheme from 'hooks/useTheme'
+import { HARDCODED_OPTION_TITLE } from 'pages/KyberDAO/constants'
 import { getFullDisplayBalance } from 'utils/formatBalance'
 
 const Wrapper = styled.div`
@@ -176,23 +177,29 @@ export default function Participants({ proposalId }: { proposalId?: number }) {
   return (
     <Wrapper>
       {options && participants
-        ? options.map((o, index) => {
+        ? options.map((optionTitle, index) => {
             const sumPower = proposalInfo?.vote_stats.options.find(option => option.option === index)?.vote_count
             const isWonOption =
               proposalInfo?.proposal_type === ProposalType.BinaryProposal &&
               proposalInfo?.vote_stats?.options.reduce((max, o) => (o.vote_count > max.vote_count ? o : max)).option ===
                 index
             const filteredParticipants = participants.filter(p => p.option === index)
+            const hardCodedTitle = proposalId ? HARDCODED_OPTION_TITLE[proposalId][index] : undefined
             return (
-              <OptionWrapper key={o} isWonOption={isWonOption} onClick={() => setModalIndex(index)} hasHoverStyle>
+              <OptionWrapper
+                key={optionTitle}
+                isWonOption={isWonOption}
+                onClick={() => setModalIndex(index)}
+                hasHoverStyle
+              >
                 <RowBetween>
                   <RowFit height={19}>
                     {isWonOption && <img alt="gold-medal" src={Gold} style={{ marginRight: '8px' }} />}
                     <Text
                       fontSize={isLongText ? '14px' : '16px'}
                       style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
                     >
-                      {o}
+                      {hardCodedTitle || optionTitle}
                     </Text>
                   </RowFit>
 
@@ -234,7 +241,7 @@ export default function Participants({ proposalId }: { proposalId?: number }) {
                   onDismiss={() => setModalIndex(null)}
                   isWonOption={isWonOption}
                   sumPower={sumPower}
-                  option={o}
+                  option={optionTitle}
                 />
               </OptionWrapper>
             )

src/pages/KyberDAO/Vote/ProposalItem/index.tsx

@@ -187,7 +187,7 @@ const VoteButton = ({
   )
 }
 
-const FORCED_TO_BINARY_OPTION_PROPOSALS = [14, 15, 17, 18]
+const FORCED_TO_BINARY_OPTION_PROPOSALS = [14, 15, 17, 18, 19]
 
 function ProposalItem({
   proposal,
@@ -324,6 +324,7 @@ function ProposalItem({
                   : 'Finished'
               }
               isCheckBox={proposal.proposal_type === ProposalType.GenericProposal && !isForcedBinaryOption}
+              proposalId={proposal.proposal_id}
               id={index}
             />
           )

src/pages/KyberDAO/constants.tsx

@@ -0,0 +1,5 @@
+// Operator miss typing option title, need to custom it in UI
+// { [ProposalId]: {[OptionId]: newTitle } }
+export const HARDCODED_OPTION_TITLE: Record<number, Record<number, string>> = {
+  19: { 1: 'Base - KNC-USDC & KNC-ETH' },
+}