Fix/proposal details small fixes

app/src/components/guild/proposal_details_view_container.tsx

@@ -2,6 +2,7 @@ import { BigNumber, bigNumberify } from 'ethers/utils'
 import React from 'react'
 import styled from 'styled-components'
 
+import { useTheme } from '../../hooks/useTheme'
 import { TYPE } from '../../theme'
 import { getArbitrator, getToken } from '../../util/networks'
 import { KlerosSubmission } from '../../util/types'
@@ -86,8 +87,8 @@ const MarketStatus = styled.div`
   }
 `
 
-const StateButton = styled.div`
-  border: 1px solid #4b9e98;
+const StateButton = styled.div<{ color: string }>`
+  border: 1px solid ${props => props.color};
   padding: 9px 14px;
   width: fit-content;
   border-radius: 6px;
@@ -191,8 +192,8 @@ const BarDiagramStyled = styled(BarDiagram)`
     margin: 0 -20px;
   }
 `
-const MarketStatusText = styled(TYPE.bodyMedium)`
-  color: ${props => props.theme.profit};
+const MarketStatusText = styled(TYPE.bodyMedium)<{ proposalState: number }>`
+  color: ${props => (props.proposalState === 0 ? props.theme.profit : props.theme.alert)};
 `
 
 interface Props {
@@ -212,6 +213,7 @@ interface Props {
   proposalTimeLeft: string
   yesVotes: string
   back: () => void
+  proposalState: any
 }
 export const ProposalDetailsView: React.FC<Props> = (props: Props) => {
   const {
@@ -224,13 +226,15 @@ export const ProposalDetailsView: React.FC<Props> = (props: Props) => {
     isScalar,
     liquidity,
     marketDetails,
+    proposalState,
     proposalTimeLeft,
     scaleValue,
     totalVolume,
     volume,
     yesVotes,
   } = props
 
+  const theme = useTheme()
   const object = [
     ['Rewards', { text: amount, icon: <IconOmen /> }],
     ['APY%', { text: apy }],
@@ -260,9 +264,11 @@ export const ProposalDetailsView: React.FC<Props> = (props: Props) => {
           <TYPE.heading3 marginLeft={'12px'}>Guild Overview</TYPE.heading3>
         </BackNavigation>
         <MarketStatus>
-          <MarketStatusText>{proposalTimeLeft}</MarketStatusText>
-          <StateButton>
-            <MarketStatusText>Active</MarketStatusText>
+          <MarketStatusText proposalState={proposalState}>{proposalTimeLeft}</MarketStatusText>
+          <StateButton color={proposalState === 0 ? theme.profit : theme.alert}>
+            <MarketStatusText proposalState={proposalState}>
+              {proposalState === 0 ? 'Active' : 'Inactive'}
+            </MarketStatusText>
           </StateButton>
         </MarketStatus>
       </NavigationSection>

app/src/components/guild/proposed_rewards_view.tsx

@@ -102,6 +102,8 @@ interface Props {
   select: (address: string) => void
   setIsTransactionModalOpen: (open: boolean) => void
   proposeLiquidityRewards: () => Promise<void>
+  votesForExecution: BigNumber
+  totalLocked: BigNumber
 }
 
 const ProposedRewardsView = (props: Props) => {
@@ -121,7 +123,9 @@ const ProposedRewardsView = (props: Props) => {
     selected,
     setIsTransactionModalOpen,
     toggle,
+    totalLocked,
     votes,
+    votesForExecution,
     votesRequired,
   } = props
   const { networkId, txHash, txState } = context
@@ -173,6 +177,8 @@ const ProposedRewardsView = (props: Props) => {
                   market={item}
                   networkId={networkId}
                   onClick={() => select(item.address)}
+                  totalLocked={totalLocked}
+                  votesForExecution={votesForExecution}
                 />
               )
             })}
@@ -181,7 +187,13 @@ const ProposedRewardsView = (props: Props) => {
       {!propose && proposals.length > 0 && (
         <MarketCardsWrapper>
           {proposals.map(proposal => (
-            <ProposalMarketCard key={proposal.id} networkId={networkId} proposal={proposal} />
+            <ProposalMarketCard
+              key={proposal.id}
+              networkId={networkId}
+              proposal={proposal}
+              totalLocked={totalLocked}
+              votesForExecution={votesForExecution}
+            />
           ))}
         </MarketCardsWrapper>
       )}

app/src/components/market/common_sections/card_bottom_details/bar_diagram_probabilities/index.tsx

@@ -63,6 +63,15 @@ export const Progress = styled.div<{ width: number; outcomeIndex?: number; selec
   transition: width 0.25s ease-out, background-color 0.25s ease-out;
   width: ${props => props.width}%;
 `
+const Relative = styled.div<{ color: keyof Colors; quorum: number }>`
+  position: relative;
+  left:${props => `${props.quorum}%`};
+  border-radius: 4px 4px 0 0;
+  background-color: ${({ color, theme }) => color && (theme as any)[color]}
+
+  width: 4px;
+  height: 4px;
+`
 const AdditionalTextStyle = styled(TYPE.bodyRegular)`
   color: ${props => props.theme.text2};
 `
@@ -84,6 +93,7 @@ interface Props extends DOMAttributes<HTMLDivElement> {
   color?: keyof Colors
   progressBarHeight?: number
   displayText?: boolean
+  quorum?: number
 }
 
 export const BarDiagram: React.FC<Props> = (props: Props) => {
@@ -96,6 +106,7 @@ export const BarDiagram: React.FC<Props> = (props: Props) => {
     outcomeName,
     probability,
     progressBarHeight,
+    quorum,
     selected,
     winningBadge,
     ...restProps
@@ -111,8 +122,9 @@ export const BarDiagram: React.FC<Props> = (props: Props) => {
             <OutcomeValue>{probability.toFixed(2)}%</OutcomeValue>
           </OutcomeText>
         )}
+        {quorum && <Relative color={probability > quorum ? 'primary1' : 'primary4'} quorum={quorum} />}
         <ProgressBar height={progressBarHeight}>
-          <Progress color={color} outcomeIndex={outcomeIndex} selected={selected} width={probability} />
+          <Progress color={color} outcomeIndex={outcomeIndex} selected={selected} width={probability}></Progress>
         </ProgressBar>
         {additionalTextLeft && additionalTextRight && (
           <OutcomeText style={{ marginTop: '10px', marginBottom: '0px' }}>

app/src/components/market/market_card/market_card.tsx

@@ -1,10 +1,11 @@
+import { BigNumber } from 'ethers/utils'
 import moment from 'moment'
 import React from 'react'
 import styled from 'styled-components'
 
 import { Proposal } from '../../../services/guild'
 import { TYPE } from '../../../theme'
-import { bigNumberToString, isScalarMarket, limitDecimalPlaces } from '../../../util/tools'
+import { bigNumberToString, calculatePercentageOfWhole, isScalarMarket, limitDecimalPlaces } from '../../../util/tools'
 import { MarketMakerDataItem } from '../../../util/types'
 import { BarDiagram } from '../common_sections/card_bottom_details/bar_diagram_probabilities'
 import {
@@ -91,7 +92,7 @@ const ScaleWrapper = styled.div`
   border-radius: 8px;
   margin-bottom: 16px;
   padding: 13px 0px;
-  height: 76px;
+  height: 79px;
 `
 
 const PercWrapper = styled.div`
@@ -139,10 +140,12 @@ interface Props {
   networkId: number
   proposal?: Proposal
   onClick?: () => void
+  totalLocked: BigNumber
+  votesForExecution: BigNumber
 }
 
 export const MarketCard = (props: Props) => {
-  const { active, market, networkId, onClick, proposal } = props
+  const { active, market, networkId, onClick, proposal, totalLocked, votesForExecution } = props
 
   const resolutionDate = moment(market.openingTimestamp).format('Do MMMM YYYY')
   const formattedLiquidity: string = bigNumberToString(market.totalPoolShares, market.collateral.decimals)
@@ -170,16 +173,6 @@ export const MarketCard = (props: Props) => {
         : Number(currentPrediction) * 100
   }
 
-  let progress
-  if (proposal) {
-    // total time range
-    const total = proposal.endTime.toNumber() - proposal.startTime.toNumber()
-    // where we are in the range
-    const now = proposal.endTime.toNumber() - new Date().getTime() / 1000
-    // progress percentage
-    progress = limitDecimalPlaces(String(proposal && (now / total) * 100), 2)
-  }
-
   return (
     <CardWrapper>
       {proposal && (
@@ -189,7 +182,13 @@ export const MarketCard = (props: Props) => {
               Voting ends in {moment(new Date(proposal.endTime.toNumber() * 1000)).fromNow(true)}
             </TYPE.heading3>
           </BarHeadingWrapper>
-          <BarDiagram color={'primary1'} displayText={false} probability={progress || 0} progressBarHeight={4} />
+          <BarDiagram
+            color={'primary1'}
+            displayText={false}
+            probability={Number(calculatePercentageOfWhole(totalLocked, proposal.totalVotes))}
+            progressBarHeight={4}
+            quorum={Number(calculatePercentageOfWhole(totalLocked, votesForExecution))}
+          />
         </BarWrapper>
       )}
       <StyledMarketCard active={active} onClick={onClick} proposal={!!proposal}>

app/src/components/market/market_card/proposal_market_card.tsx

@@ -1,3 +1,4 @@
+import { BigNumber } from 'ethers/utils'
 import React from 'react'
 import { useHistory } from 'react-router'
 
@@ -10,10 +11,12 @@ interface Props {
   proposal: Proposal
   networkId: number
   onClick?: () => void
+  totalLocked: BigNumber
+  votesForExecution: BigNumber
 }
 
 export const ProposalMarketCard = (props: Props) => {
-  const { networkId, proposal } = props
+  const { networkId, proposal, totalLocked, votesForExecution } = props
   const { marketMakerData } = useGraphMarketMakerData(proposal.description, networkId)
   const history = useHistory()
 
@@ -25,6 +28,15 @@ export const ProposalMarketCard = (props: Props) => {
     history.push(`/proposals/${proposal.id}`)
   }
 
-  // @ts-expect-error ignore
-  return <MarketCard market={marketMakerData} networkId={networkId} onClick={onClick} proposal={proposal} />
+  return (
+    <MarketCard
+      // @ts-expect-error ignore
+      market={marketMakerData}
+      networkId={networkId}
+      onClick={onClick}
+      proposal={proposal}
+      totalLocked={totalLocked}
+      votesForExecution={votesForExecution}
+    />
+  )
 }

app/src/pages/guild/proposal_details_page.tsx

@@ -84,6 +84,7 @@ export const ProposalDetailsPage = (props: RouteComponentProps<RouteParams>) =>
     isScalar,
     proposalTimeLeft,
     yesVotes,
+    proposalState: proposal && proposal.state,
   }
   return <ProposalDetailsView {...dummyDataPassed} />
 }

app/src/pages/guild/proposed_rewards_page.tsx

@@ -1,3 +1,4 @@
+import { Zero } from 'ethers/constants'
 import { BigNumber } from 'ethers/utils'
 import React, { useEffect, useState } from 'react'
 
@@ -37,6 +38,8 @@ const ProposedRewardsPage = (props: Props) => {
 
   const [votes, setVotes] = useState(new BigNumber(0))
   const [votesRequired, setVotesRequired] = useState(new BigNumber(0))
+  const [votesForExecution, setVotesForExecution] = useState(Zero)
+  const [totalLocked, setTotalLocked] = useState(Zero)
 
   const { liquidityMiningCampaigns } = useGraphLiquidityMiningCampaigns()
 
@@ -57,7 +60,11 @@ const ProposedRewardsPage = (props: Props) => {
       }
       const omen = new OmenGuildService(library, networkId)
       const [votes, required] = await Promise.all([await omen.votesOf(cpk.address), await omen.votesForCreation()])
+      const totalLocked = await omen.totalLocked()
+      const votesForExecution = await omen.getVotesForExecution()
 
+      setTotalLocked(totalLocked)
+      setVotesForExecution(votesForExecution)
       setVotes(votes)
       setVotesRequired(required)
     }
@@ -130,7 +137,9 @@ const ProposedRewardsPage = (props: Props) => {
       selected={selected}
       setIsTransactionModalOpen={setIsTransactionModalOpen}
       toggle={toggle}
+      totalLocked={totalLocked}
       votes={votes}
+      votesForExecution={votesForExecution}
       votesRequired={votesRequired}
     />
   )

app/src/services/guild.ts

@@ -6,6 +6,13 @@ import { multicall } from '../util/multicall'
 import { getContractAddress } from '../util/networks'
 
 const GuildAbi = [
+  {
+    inputs: [],
+    name: 'getVotesForExecution',
+    outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
   {
     inputs: [{ internalType: 'uint256', name: 'amount', type: 'uint256' }],
     name: 'lockTokens',
@@ -213,6 +220,9 @@ class OmenGuildService {
   lockTime = async () => {
     return this.contract?.lockTime()
   }
+  getVotesForExecution = async () => {
+    return this.contract?.getVotesForExecution()
+  }
 
   getProposalsIdsLength = async () => {
     return this.contract?.getProposalsIdsLength()

app/src/util/tools/web3.ts

@@ -5,6 +5,7 @@ import { getLogger } from '../logger'
 import { getContractAddress, getNativeAsset, getWrapToken } from '../networks'
 import { Token } from '../types'
 
+import { divBN } from './maths'
 import { waitABit } from './other'
 import { strip0x } from './string_manipulation'
 
@@ -37,6 +38,11 @@ export const signaturesFormatted = (signatures: string[]) => {
   return packSignatures(signatures.map(s => signatureToVRS(s)))
 }
 
+export const calculatePercentageOfWhole = (whole: BigNumber, part: BigNumber): string => {
+  if (whole.isZero() || part.isZero()) return '0.00'
+  return (divBN(part, whole) * 100).toFixed(2)
+}
+
 export const isContract = async (provider: any, address: string): Promise<boolean> => {
   const code = await provider.getCode(address)
   return code && code !== '0x'