style: First version of guild membership statistic

app/src/components/common/card/responsive_cards/table.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { TYPE } from '../../../../theme'
+import { ButtonStateful } from '../../../button/button_stateful'
+import { ButtonType } from '../../../button/button_styling_types'
+import { CardCSS } from '../index'
+
+const CardStyled = styled.div<{ hasButton: boolean }>`
+  ${CardCSS};
+  box-shadow: none;
+  width: ${props => (props.hasButton ? '100%' : 'fit-content')};
+  display: flex;
+  flex-direction: row;
+  gap: ${props => (props.hasButton ? '64px' : '48px')};
+  margin-top: 32px;
+  padding: ${props => (props.hasButton ? '32px' : '24px 32px')};
+  justify-content: space-between;
+
+  @media (min-width: ${props => props.theme.themeBreakPoints.xl}) {
+    div:nth-child(3) {
+      ${props =>
+        props.hasButton && `border-right: 1px solid #e8eaf6;padding-right: 64px;margin: -32px 0;padding-top: 32px;`};
+    }
+  }
+  //mobile
+  @media (max-width: ${props => props.theme.themeBreakPoints.xl}) {
+    flex-direction: column;
+    width: 100%;
+    gap: 10px;
+    padding: 20px;
+    margin-top: 24px;
+  }
+`
+const ItemWrapper = styled.div`
+  > div:nth-child(2) {
+    margin-top: 8px;
+    @media (max-width: ${props => props.theme.themeBreakPoints.xl}) {
+      margin-top: 0px;
+    }
+  }
+  @media (max-width: ${props => props.theme.themeBreakPoints.xl}) {
+    display: flex;
+    justify-content: space-between;
+  }
+`
+const DataWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+interface Props {
+  valueObject: any
+  style?: any
+  hasButton?: boolean
+}
+export const Table: React.FC<Props> = (props: Props) => {
+  const { hasButton = false, valueObject, ...restProps } = props
+
+  return (
+    <CardStyled hasButton={hasButton} {...restProps}>
+      {valueObject.map((item: any) => {
+        return (
+          <ItemWrapper key={item}>
+            <TYPE.bodyMedium color={'text2'}>{item[0]}</TYPE.bodyMedium>
+            <DataWrapper>
+              <TYPE.bodyMedium color={'text1'}>{item[1].text} </TYPE.bodyMedium>
+              {item[1]['icon'] !== undefined && <div style={{ marginLeft: '8px' }}> {item[1].icon}</div>}
+            </DataWrapper>
+          </ItemWrapper>
+        )
+      })}
+      {hasButton && (
+        <ButtonStateful buttonType={ButtonType.primary} style={{ alignSelf: 'center' }}>
+          Claim Rewards
+        </ButtonStateful>
+      )}
+    </CardStyled>
+  )
+}

app/src/components/guild/proposed_rewards_view.tsx

@@ -2,12 +2,15 @@ import { BigNumber } from 'ethers/utils'
 import React from 'react'
 import styled from 'styled-components'
 
+import { STANDARD_DECIMALS } from '../../common/constants'
 import { ConnectedWeb3Context } from '../../contexts'
 import { TYPE } from '../../theme'
 import { RemoteData } from '../../util/remote_data'
+import { bigNumberToNumber, calculatePercentageOfWhole } from '../../util/tools'
 import { MarketFilters, MarketMakerDataItem } from '../../util/types'
 import { Button } from '../button'
 import { ButtonType } from '../button/button_styling_types'
+import { Table } from '../common/card/responsive_cards/table'
 import { IconArrowBack } from '../common/icons'
 import { MarketCard } from '../market/market_card'
 import { ModalTransactionWrapper } from '../modal/modal_transaction'
@@ -100,6 +103,9 @@ interface Props {
   select: (address: string) => void
   setIsTransactionModalOpen: (open: boolean) => void
   proposeLiquidityRewards: () => Promise<void>
+  totalLocked: BigNumber
+  userLocked: BigNumber
+  totalRewards: BigNumber
 }
 
 const ProposedRewardsView = (props: Props) => {
@@ -118,6 +124,9 @@ const ProposedRewardsView = (props: Props) => {
     selected,
     setIsTransactionModalOpen,
     toggle,
+    totalLocked,
+    totalRewards,
+    userLocked,
     votes,
     votesRequired,
   } = props
@@ -128,15 +137,31 @@ const ProposedRewardsView = (props: Props) => {
   const isPrevDisabled = pageIndex === 0
   const isNextDisabled = !moreMarkets
 
+  const guildOverviewData = [
+    ['Members', { text: '60' }],
+    ['Total Locked', { text: `${bigNumberToNumber(totalLocked, STANDARD_DECIMALS)} OMN` }],
+    ['Total Rewards', { text: `${bigNumberToNumber(totalRewards, STANDARD_DECIMALS)} OMN` }],
+    ['Voting Power', { text: `${calculatePercentageOfWhole(totalLocked, userLocked)}%` }],
+    ['You Locked', { text: `${bigNumberToNumber(userLocked, STANDARD_DECIMALS)} OMN` }],
+    ['Claimable Rewards', { text: '250 OMN' }],
+  ]
+
   return (
     <GuildPageWrapper>
-      {propose && (
+      {propose ? (
         <OverviewWrapper onClick={toggle}>
-          <IconArrowBack color="#7986CB" />
+          <IconArrowBack color={'#7986CB'} />
           <TYPE.heading3 color="primary2" marginLeft={16}>
             Guild Overview
           </TYPE.heading3>
         </OverviewWrapper>
+      ) : (
+        <>
+          <TYPE.heading1 color="text3" marginBottom={'32px'}>
+            Guild Overview
+          </TYPE.heading1>
+          <Table hasButton style={{ marginBottom: '64px' }} valueObject={guildOverviewData} />
+        </>
       )}
       <ProposalHeadingWrapper>
         {propose ? (

app/src/components/modal/modal_lock_yo_tokens/index.tsx

@@ -10,7 +10,7 @@ import { useAirdropService } from '../../../hooks'
 import { ERC20Service, OmenGuildService } from '../../../services'
 import { TYPE } from '../../../theme'
 import { getToken, networkIds } from '../../../util/networks'
-import { bigNumberToString, daysUntil, divBN, formatLockDate } from '../../../util/tools'
+import { bigNumberToString, calculatePercentageOfWhole, daysUntil, formatLockDate } from '../../../util/tools'
 import { TransactionStep } from '../../../util/types'
 import { Button } from '../../button/button'
 import { ButtonStateful, ButtonStates } from '../../button/button_stateful'
@@ -128,12 +128,7 @@ const ModalLockTokens = (props: Props) => {
   const getTokenLockInfo = async () => {
     try {
       if (cpk?.address && omen.omenGuildAddress) {
-        let address
-        if (context.networkId === networkIds.MAINNET && !context.relay) {
-          address = await omen.tokenVault()
-        } else {
-          address = cpk.address
-        }
+        const address = await omen.getUserAddress(cpk.address, relay)
 
         const locked = await omen.tokensLocked(address)
         const total = await omen.totalLocked()
@@ -334,16 +329,13 @@ const ModalLockTokens = (props: Props) => {
               <LightDataItem>{isLockAmountOpen && 'Your '}Vote Weight</LightDataItem>
               <DarkDataItem>
                 <TYPE.bodyMedium color={!displayLockAmount.isZero() && 'text2'}>
-                  {!totalLocked.isZero() && !userLocked.isZero()
-                    ? (divBN(userLocked, totalLocked) * 100).toFixed(2)
-                    : '0.00'}
-                  %
+                  {calculatePercentageOfWhole(totalLocked, userLocked)}%
                 </TYPE.bodyMedium>
 
                 {!displayLockAmount.isZero() && (
                   <>
                     <ArrowIcon color={theme.text1} style={{ margin: '0 10px' }} />
-                    {(divBN(userLocked.add(displayLockAmount), totalLocked) * 100).toFixed(2)}%
+                    {calculatePercentageOfWhole(totalLocked, userLocked.add(displayLockAmount))}%
                   </>
                 )}
               </DarkDataItem>

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'
 
@@ -27,15 +28,19 @@ interface Props {
 
 const ProposedRewardsPage = (props: Props) => {
   const { context, currentFilter, markets, onFilterChange, onLoadNextPage, onLoadPrevPage } = props
-  const { account, balances, cpk, library, networkId, setTxState } = context
+  const { account, balances, cpk, library, networkId, relay, setTxState } = context
 
   const [propose, setPropose] = useState(false)
   const [selected, setSelected] = useState('')
+  const [totalLocked, setTotalLocked] = useState(Zero)
+  const [userLocked, setUserLocked] = useState(Zero)
+
   const [isTransactionModalOpen, setIsTransactionModalOpen] = useState<boolean>(false)
   const [isTransactionProcessing, setIsTransactionProcessing] = useState<boolean>(false)
 
   const [votes, setVotes] = useState(new BigNumber(0))
   const [votesRequired, setVotesRequired] = useState(new BigNumber(0))
+  const [totalRewards, setTotalRewards] = useState(Zero)
 
   const { liquidityMiningCampaigns } = useGraphLiquidityMiningCampaigns()
 
@@ -48,19 +53,39 @@ const ProposedRewardsPage = (props: Props) => {
   }, [currentFilter, markets])
 
   useEffect(() => {
-    const getVoteInfo = async () => {
+    const getGuildInfo = async () => {
       if (!cpk || !account) {
         return
       }
+      if (liquidityMiningCampaigns) {
+        setTotalRewards(
+          liquidityMiningCampaigns.reduce(
+            (prev: BigNumber, { rewardAmounts }: any) => prev.add(rewardAmounts[0]),
+            Zero,
+          ),
+        )
+      }
+
+      // const stakingService = new StakingService(library, cpk.address, liquidityMiningCampaign.id)
+      // const claimableRewards = await stakingService.getClaimableRewards(cpk.address)
+
       const omen = new OmenGuildService(library, networkId)
       const [votes, required] = await Promise.all([await omen.votesOf(cpk.address), await omen.votesForCreation()])
+      const fetchLockAddress = await omen.getUserAddress(cpk.address, relay)
+
+      const locked = await omen.tokensLocked(fetchLockAddress)
+
+      setUserLocked(locked.amount)
+      const totalLocked = await omen.totalLocked()
 
+      setTotalLocked(totalLocked)
       setVotes(votes)
       setVotesRequired(required)
     }
 
-    getVoteInfo()
-  }, [account, cpk, library, networkId])
+    getGuildInfo()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [account, cpk, library, networkId, liquidityMiningCampaigns])
 
   const toggle = () => {
     setPropose(!propose)
@@ -122,6 +147,9 @@ const ProposedRewardsPage = (props: Props) => {
       selected={selected}
       setIsTransactionModalOpen={setIsTransactionModalOpen}
       toggle={toggle}
+      totalLocked={totalLocked}
+      totalRewards={totalRewards}
+      userLocked={userLocked}
       votes={votes}
       votesRequired={votesRequired}
     />

app/src/services/guild.ts

@@ -3,7 +3,7 @@ import { Web3Provider } from 'ethers/providers'
 import { BigNumber } from 'ethers/utils'
 
 import { multicall } from '../util/multicall'
-import { getContractAddress } from '../util/networks'
+import { getContractAddress, networkIds } from '../util/networks'
 
 const GuildAbi = [
   {
@@ -145,7 +145,9 @@ class OmenGuildService {
     const signer = provider.getSigner()
     this.user = signer
     this.network = network
+
     this.provider = provider
+
     this.omenGuildAddress = getContractAddress(network, 'omenGuildProxy')
     if (this.omenGuildAddress) {
       this.contract = new ethers.Contract(this.omenGuildAddress, GuildAbi, provider.getSigner()).connect(signer)
@@ -188,6 +190,13 @@ class OmenGuildService {
   lockTokens = async (amount: BigNumber) => {
     return await this.contract?.lockTokens(amount)
   }
+  getUserAddress = async (cpkAddress: string, relay: boolean) => {
+    if (this.network === networkIds.MAINNET && !relay) {
+      return await this.tokenVault()
+    } else {
+      return cpkAddress
+    }
+  }
 
   unlockTokens = async (amount: BigNumber) => {
     return await this.contract?.releaseTokens(amount)

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'
 
@@ -36,7 +37,10 @@ export const signatureToVRS = (rawSignature: string) => {
 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'