Liq rewards proposals

app/src/components/common/icons/IconArrowBack.tsx

@@ -42,7 +42,7 @@ export const IconArrowBack = (props: Props) => {
       <path
         className="path"
         d="M21 11H6.83L10.41 7.41L9 6L3 12L9 18L10.41 16.59L6.83 13H21V11Z"
-        fill={hoverEffect ? '#DCDFF2' : '#37474F'}
+        fill={color ? color : hoverEffect ? '#DCDFF2' : '#37474F'}
       />
     </Wrapper>
   )

app/src/components/common/layout/header/index.tsx

@@ -166,8 +166,6 @@ const HeaderDropdown = styled(Dropdown)`
 `
 
 const MarketAndGovernanceNav = styled.div<{ disabled?: boolean }>`
-  display: none;
-  background-color: ${props => (props.disabled ? props => props.theme.buttonSecondary.backgroundColor : 'transparent')};
   ${props => (props.disabled ? 'pointer-events:none;' : '')};
   border-radius: 32px;
   color: ${props => (!props.disabled ? props.theme.colors.clickable : props.theme.colors.primary)};
@@ -198,7 +196,6 @@ const HeaderContainer: React.FC = (props: any) => {
   const [isDepositWithdrawModalOpen, setDepositWithdrawModalState] = useState(false)
   const [isModalLockTokensOpen, setModalLockTokensState] = useState<boolean>(false)
   const [depositWithdrawType, setDepositWithdrawType] = useState<ExchangeType>(ExchangeType.deposit)
-  const [marketPage, setMarketPage] = useState(true)
 
   const hasRouter = props.history !== undefined
   const disableConnectButton = isConnectWalletModalOpen
@@ -265,6 +262,8 @@ const HeaderContainer: React.FC = (props: any) => {
     onClick: () => history && history.push('/'),
   }
 
+  const isMarketPage = history.location.pathname.startsWith('/liquidity')
+  const isGuildPage = history.location.pathname === '/guild'
   return (
     <HeaderWrapper {...restProps}>
       <HeaderInner>
@@ -273,21 +272,14 @@ const HeaderContainer: React.FC = (props: any) => {
             <Logo />
           </LogoWrapper>
           <MarketAndGovernanceNav
-            disabled={marketPage}
-            onClick={() => {
-              setMarketPage(!marketPage)
-            }}
+            disabled={isMarketPage}
+            onClick={() => history && history.push('/')}
             style={{ marginLeft: '48px' }}
           >
             Markets
           </MarketAndGovernanceNav>
-          <MarketAndGovernanceNav
-            disabled={!marketPage}
-            onClick={() => {
-              setMarketPage(!marketPage)
-            }}
-          >
-            Governance
+          <MarketAndGovernanceNav disabled={isGuildPage} onClick={() => history && history.push('/guild')}>
+            Guild
           </MarketAndGovernanceNav>
         </ContentsLeft>
         <ContentsRight>

app/src/components/guild/proposal_details_view_container.tsx

@@ -85,6 +85,7 @@ const MarketStatus = styled.div`
     margin-top: 16px;
   }
 `
+
 const StateButton = styled.div`
   border: 1px solid #4b9e98;
   padding: 9px 14px;
@@ -200,30 +201,34 @@ interface Props {
   duration: any
   marketDetails: any
   scaleValue: any
-  liqudiity: any
+  liquidity: any
   totalVolume: any
   volume: any
   closingDate: any
   closingIn: any
   apyTwo: any
   verified: any
   isScalar: any
-  setIsScalar: any
+  proposalTimeLeft: string
+  yesVotes: string
+  back: () => void
 }
 export const ProposalDetailsView: React.FC<Props> = (props: Props) => {
   const {
     amount,
     apy,
+    back,
     closingDate,
     closingIn,
     duration,
     isScalar,
-    liqudiity,
+    liquidity,
     marketDetails,
+    proposalTimeLeft,
     scaleValue,
-    setIsScalar,
     totalVolume,
     volume,
+    yesVotes,
   } = props
 
   const object = [
@@ -232,7 +237,7 @@ export const ProposalDetailsView: React.FC<Props> = (props: Props) => {
     ['Duration', { text: duration }],
   ]
   const secondObject = [
-    ['Liqudity', { text: liqudiity }],
+    ['Liquidity', { text: liquidity }],
     ['Total Volume', { text: totalVolume }],
     ['24h Volume', { text: volume }],
     ['Closing', { text: closingDate }],
@@ -250,33 +255,27 @@ export const ProposalDetailsView: React.FC<Props> = (props: Props) => {
   return (
     <Container>
       <NavigationSection>
-        <BackNavigation>
+        <BackNavigation onClick={back}>
           <IconArrowBack />
           <TYPE.heading3 marginLeft={'12px'}>Guild Overview</TYPE.heading3>
         </BackNavigation>
         <MarketStatus>
-          <MarketStatusText>5 days, 54 mins left</MarketStatusText>
+          <MarketStatusText>{proposalTimeLeft}</MarketStatusText>
           <StateButton>
             <MarketStatusText>Active</MarketStatusText>
           </StateButton>
         </MarketStatus>
       </NavigationSection>
       <MainWrapper>
         <MainSection>
-          <Heading>Issue Liqudity Rewards</Heading>
+          <Heading>Issue Liquidity Rewards</Heading>
           <StyledTable valueObject={object} />
-          <MarketDetails
-            onClick={() => {
-              setIsScalar(!isScalar)
-            }}
-          >
-            Market Details
-          </MarketDetails>
+          <MarketDetails>Market Details</MarketDetails>
           <TYPE.heading3 color={'text3'} marginTop={'12px'}>
             {marketDetails}
           </TYPE.heading3>
           <OutcomeStyleWrapper>
-            {!isScalar ? (
+            {isScalar ? (
               <>
                 <MarketScale
                   currentPrediction={scaleValue}
@@ -311,8 +310,8 @@ export const ProposalDetailsView: React.FC<Props> = (props: Props) => {
           <VoteHeading>Vote</VoteHeading>
           <VotesBar>
             <BarDiagram
-              additionalTextLeft={'454 votes'}
-              additionalTextRight={'454 OMEN'}
+              additionalTextLeft={`${yesVotes} votes`}
+              additionalTextRight={`${yesVotes} OMEN`}
               color={'primary1'}
               outcomeIndex={22}
               outcomeName={'Yes'}

app/src/components/guild/proposed_rewards_view.tsx

@@ -0,0 +1,222 @@
+import { BigNumber } from 'ethers/utils'
+import React from 'react'
+import styled from 'styled-components'
+
+import { ConnectedWeb3Context } from '../../contexts'
+import { Proposal } from '../../services/guild'
+import { TYPE } from '../../theme'
+import { RemoteData } from '../../util/remote_data'
+import { MarketFilters, MarketMakerDataItem } from '../../util/types'
+import { Button } from '../button'
+import { ButtonType } from '../button/button_styling_types'
+import { IconArrowBack } from '../common/icons'
+import { MarketCard, ProposalMarketCard } from '../market/market_card'
+import { ModalTransactionWrapper } from '../modal/modal_transaction'
+
+const GuildPageWrapper = styled.div`
+  width: 100%;
+  @media (max-width: ${props => props.theme.themeBreakPoints.xxl}) {
+    padding: 0 14px;
+  }
+`
+
+const ProposalHeadingWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  @media (max-width: ${props => props.theme.themeBreakPoints.sm}) {
+    flex-wrap: wrap;
+  }
+`
+
+const ProposalButton = styled(Button)`
+  @media (max-width: ${props => props.theme.themeBreakPoints.sm}) {
+    margin-top: 24px;
+    width: 100%;
+  }
+`
+
+const MarketCardsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 12px;
+  margin-bottom: 32px;
+
+  & > div:not(:nth-child(1)):not(:nth-child(4)) {
+    margin-left: 20px;
+  }
+`
+
+const OverviewWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  cursor: pointer;
+
+  &:hover svg {
+    path {
+      fill: ${props => props.theme.primary1};
+    }
+  }
+
+  &:hover div {
+    color: ${props => props.theme.primary1};
+  }
+`
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
+const ButtonNavWrapper = styled.div`
+  display: flex;
+`
+
+const NextButton = styled(Button)`
+  margin-left: 12px;
+`
+
+interface Props {
+  count: number
+  context: ConnectedWeb3Context
+  currentFilter: any
+  isFiltering?: boolean
+  fetchMyMarkets: boolean
+  markets: RemoteData<MarketMakerDataItem[]>
+  moreMarkets: boolean
+  pageIndex: number
+  onFilterChange: (filter: MarketFilters) => void
+  onLoadNextPage: () => void
+  onLoadPrevPage: () => void
+  votes: BigNumber
+  votesRequired: BigNumber
+  isTransactionModalOpen: boolean
+  isTransactionProcessing: boolean
+  selected: string
+  propose: boolean
+  proposals: Proposal[]
+  toggle: () => void
+  select: (address: string) => void
+  setIsTransactionModalOpen: (open: boolean) => void
+  proposeLiquidityRewards: () => Promise<void>
+}
+
+const ProposedRewardsView = (props: Props) => {
+  const {
+    context,
+    isTransactionModalOpen,
+    isTransactionProcessing,
+    markets,
+    moreMarkets,
+    onLoadNextPage,
+    onLoadPrevPage,
+    pageIndex,
+    proposals,
+    propose,
+    proposeLiquidityRewards,
+    select,
+    selected,
+    setIsTransactionModalOpen,
+    toggle,
+    votes,
+    votesRequired,
+  } = props
+  const { networkId, txHash, txState } = context
+
+  const proposalButtonDisabled =
+    (propose && !selected.length) || isTransactionProcessing || votes.isZero() || votes.lt(votesRequired)
+  const isPrevDisabled = pageIndex === 0
+  const isNextDisabled = !moreMarkets
+
+  return (
+    <GuildPageWrapper>
+      {propose && (
+        <OverviewWrapper onClick={toggle}>
+          <IconArrowBack color="primary2" />
+          <TYPE.heading3 color="primary2" marginLeft={16}>
+            Guild Overview
+          </TYPE.heading3>
+        </OverviewWrapper>
+      )}
+      <ProposalHeadingWrapper>
+        {propose ? (
+          <TYPE.heading1 color="text3">Choose Market for liquidity rewards</TYPE.heading1>
+        ) : (
+          <div>
+            <TYPE.heading1 color="text3">Proposed Liquidity Rewards</TYPE.heading1>
+            <TYPE.bodyRegular color="text2" marginTop={8}>
+              Reward liquidity providers of popular omen markets with 500 OMN tokens
+            </TYPE.bodyRegular>
+          </div>
+        )}
+        <ProposalButton
+          buttonType={ButtonType.primary}
+          disabled={proposalButtonDisabled}
+          onClick={propose ? proposeLiquidityRewards : toggle}
+        >
+          Propose Liq. Rewards
+        </ProposalButton>
+      </ProposalHeadingWrapper>
+      {propose && (
+        <MarketCardsWrapper>
+          {RemoteData.hasData(markets) &&
+            RemoteData.is.success(markets) &&
+            markets.data.length > 0 &&
+            markets.data.map(item => {
+              return (
+                <MarketCard
+                  active={selected === item.address}
+                  key={item.address}
+                  market={item}
+                  networkId={networkId}
+                  onClick={() => select(item.address)}
+                />
+              )
+            })}
+        </MarketCardsWrapper>
+      )}
+      {!propose && proposals.length > 0 && (
+        <MarketCardsWrapper>
+          {proposals.map(proposal => (
+            <ProposalMarketCard key={proposal.id} networkId={networkId} proposal={proposal} />
+          ))}
+        </MarketCardsWrapper>
+      )}
+      {propose && (
+        <ButtonWrapper>
+          <Button onClick={toggle}>Back</Button>
+          <ButtonNavWrapper>
+            <Button
+              buttonType={isPrevDisabled ? ButtonType.primary : ButtonType.primaryLine}
+              disabled={pageIndex === 0}
+              onClick={onLoadPrevPage}
+            >
+              Prev
+            </Button>
+            <NextButton
+              buttonType={isNextDisabled ? ButtonType.primary : ButtonType.primaryLine}
+              disabled={!moreMarkets}
+              onClick={onLoadNextPage}
+            >
+              Next
+            </NextButton>
+          </ButtonNavWrapper>
+        </ButtonWrapper>
+      )}
+      <ModalTransactionWrapper
+        confirmations={0}
+        confirmationsRequired={0}
+        isOpen={isTransactionModalOpen}
+        message={'Propose Liquidity Rewards'}
+        onClose={() => setIsTransactionModalOpen(false)}
+        txHash={txHash}
+        txState={txState}
+      />
+    </GuildPageWrapper>
+  )
+}
+
+export { ProposedRewardsView }