Compound integration with Omen Markets. Archived in favor of https://github.com/protofire/omen-exchange/pull/1570

README.md

@@ -15,4 +15,4 @@ Create a `.env` file. See `.env.example` for environment variables which may be
 
 For Omen builds, use `yarn build`.
 
-The `build` directory in the `app` directory will now contain the build to be served.
+The `build` directory in the `app` directory will now contain the build to be served.

app/.eslintignore

@@ -1,2 +1,3 @@
 src/serviceWorker.ts
+src/abi/compound_abi.ts
 *.d.ts

app/package.json

@@ -51,7 +51,7 @@
     "axios": "^0.21.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-named-asset-import": "^0.3.6",
-    "big.js": "^5.2.2",
+    "big.js": "^6.0.3",
     "circular-dependency-plugin": "^5.2.0",
     "common-tags": "^1.8.0",
     "contract-proxy-kit": "2.2.0-alpha.1",

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

@@ -3,14 +3,16 @@ import styled from 'styled-components'
 interface Props {
   disabled?: boolean
   selected?: boolean
+  fill?: string
+  stroke?: string
 }
 const StyledSvg = styled.svg<{ disabled?: boolean; selected?: boolean }>`
   filter: ${props => (props.selected ? 'saturate(0) brightness(2)' : props.disabled ? 'saturate(0)' : '')};
   cursor: ${props => (props.disabled ? 'initial' : 'pointer')};
 `
 
 export const IconTick = (props: Props) => {
-  const { disabled = false, selected = false } = props
+  const { disabled = false, fill = '#7986CB', selected = false, stroke = '#7986CB' } = props
   return (
     <StyledSvg
       disabled={disabled}
@@ -23,8 +25,8 @@ export const IconTick = (props: Props) => {
     >
       <path
         d="M6.82644 10.8688L2.66115 6.70355L1.27272 8.09198L6.82644 13.6457L18.7273 1.74488L17.3388 0.356445L6.82644 10.8688Z"
-        fill="#7986CB"
-        stroke="#7986CB"
+        fill={fill}
+        stroke={stroke}
         strokeWidth="0.5"
       />
     </StyledSvg>

app/src/components/common/icons/currencies/CompoundIcon.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const CompoundIcon = () => (
+  <svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="20" cy="20" r="19.5" stroke="#E8EAF6" />
+    <path
+      clipRule="evenodd"
+      d="M11.6985 26.7047C11.1099 26.3391 10.75 25.6881 10.75 24.9891V21.0857C10.75 20.9362 10.7894 20.7921 10.863 20.6641C11.0916 20.2639 11.5987 20.1278 11.9928 20.3626L20.6687 25.4987C21.1758 25.8002 21.4884 26.3498 21.4884 26.9475V30.9924C21.4884 31.1764 21.4386 31.3606 21.344 31.518C21.0576 31.9929 20.448 32.1423 19.9803 31.8515L11.6985 26.7047ZM24.6309 19.2927C25.138 19.5942 25.4507 20.1438 25.4507 20.7415V28.9486C25.4507 29.1914 25.322 29.4155 25.1144 29.5329L23.2147 30.6188C23.1911 30.6321 23.1648 30.6428 23.1385 30.6508V26.0937C23.1385 25.5041 22.8337 24.957 22.3345 24.6529L14.7149 20.0238V14.8796C14.7149 14.7302 14.7543 14.5861 14.8278 14.458C15.0564 14.0579 15.5635 13.9217 15.9576 14.1566L24.6309 19.2927ZM28.4276 13.2307C28.9374 13.5295 29.25 14.0845 29.25 14.6822V26.67C29.25 26.9154 29.116 27.1423 28.9032 27.2596L27.1034 28.2468V19.901C27.1034 19.3113 26.7986 18.767 26.302 18.4629L18.5141 13.719V8.83896C18.5141 8.68955 18.5536 8.54549 18.6245 8.41742C18.8531 8.01724 19.3602 7.88112 19.7543 8.11324L28.4276 13.2307Z"
+      fill="#60D099"
+      fillRule="evenodd"
+    />
+  </svg>
+)

app/src/components/common/icons/currencies/CompoundIconNoBorder.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const CompoundIconNoBorder = () => (
+  <svg fill="none" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      clipRule="evenodd"
+      d="M2.41806 12.4698C2.02216 12.2261 1.78003 11.7921 1.78003 11.3261V8.72378C1.78003 8.62417 1.80654 8.52808 1.85602 8.44271C2.0098 8.17592 2.3509 8.08517 2.61601 8.24172L8.45208 11.6658C8.79318 11.8668 9.00349 12.2332 9.00349 12.6317V15.3282C9.00349 15.451 8.96993 15.5737 8.9063 15.6786C8.71366 15.9953 8.30362 16.0949 7.98898 15.901L2.41806 12.4698ZM11.1173 7.52845C11.4584 7.72944 11.6688 8.09588 11.6688 8.49432V13.9657C11.6688 14.1276 11.5822 14.277 11.4426 14.3552L10.1647 15.0792C10.1488 15.0881 10.1311 15.0952 10.1135 15.1006V12.0624C10.1135 11.6694 9.90841 11.3047 9.57262 11.1019L4.44708 8.01584V4.58638C4.44708 4.48677 4.47359 4.39073 4.52308 4.30536C4.67685 4.03857 5.01795 3.94782 5.28306 4.10437L11.1173 7.52845ZM13.6713 3.48714C14.0142 3.68636 14.2245 4.05633 14.2245 4.45477V12.4467C14.2245 12.6103 14.1343 12.7615 13.9912 12.8398L12.7805 13.4979V7.93399C12.7805 7.54088 12.5755 7.17801 12.2414 6.97526L7.00276 3.81264V0.559309C7.00276 0.459699 7.0293 0.363657 7.07701 0.278283C7.23078 0.0114935 7.57188 -0.0792551 7.83699 0.0754935L13.6713 3.48714Z"
+      fill="#4B9E98"
+      fillRule="evenodd"
+    />
+  </svg>
+)

app/src/components/common/icons/currencies/currencies_data.tsx

@@ -68,4 +68,9 @@ export const currenciesData = [
     text: 'USDT',
     token: 'USDT',
   },
+  {
+    icon: <Icons.CompoundIcon />,
+    text: 'COMP',
+    token: 'COMP',
+  },
 ]

app/src/components/common/icons/currencies/index.ts

@@ -11,3 +11,5 @@ export { UsdcIcon } from './UsdcIcon'
 export { WEthIcon } from './WEthIcon'
 export { ZrxIcon } from './ZrxIcon'
 export { UsdtIcon } from './UsdtIcon'
+export { CompoundIconNoBorder } from './CompoundIconNoBorder'
+export { CompoundIcon } from './CompoundIcon'

app/src/components/market/common/add_compound_service/index.tsx

@@ -0,0 +1,163 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { getCTokenForToken } from '../../../../util/tools'
+import { IconTick } from '../../../common/icons'
+import { CompoundIcon } from '../../../common/icons/currencies/CompoundIcon'
+
+const Wrapper = styled.div`
+  border-radius: 4px;
+  border: ${({ theme }) => theme.borders.borderLineDisabled};
+  padding: 18px 25px;
+  margin-bottom: 20px;
+`
+
+const Title = styled.h2`
+  color: ${props => props.theme.colors.textColorDark};
+  font-size: 16px;
+  letter-spacing: 0.4px;
+  line-height: 1.2;
+  margin: 0 0 20px;
+  font-weight: 400;
+`
+
+const DescriptionWrapper = styled.div`
+  align-items: center;
+  display: flex;
+`
+
+const CheckService = styled.div<{ isServiceChecked: boolean }>`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  text-align: center;
+  border: 1px solid ${props => (props.isServiceChecked ? props.theme.colors.transparent : props.theme.colors.tertiary)};
+  background-color: ${props =>
+    props.isServiceChecked ? props.theme.colors.clickable : props.theme.colors.mainBodyBackground};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    border: 1px solid ${props => (props.isServiceChecked ? 'none' : props.theme.colors.tertiaryDark)};
+    cursor: pointer;
+  }
+  &:active {
+    border: none;
+  }
+  path {
+    fill: ${props =>
+      props.isServiceChecked ? props.theme.colors.mainBodyBackground : props.theme.textfield.textColorDark};
+  }
+`
+
+const ServiceWrapper = styled.div`
+  color: ${props => props.theme.colors.textColorLightish};
+  font-size: ${props => props.theme.textfield.fontSize};
+  letter-spacing: 0.2px;
+  line-height: 1.4;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+`
+
+const ServiceIconWrapper = styled.div`
+  display: flex;
+  padding-right: 16px;
+  text-align: center;
+  -webkit-box-align: center;
+`
+
+const ServiceTextWrapper = styled.div`
+  width: 90%;
+`
+
+const ServiceCheckWrapper = styled.div`
+  width: 10%;
+  color: transparent;
+`
+
+const CompoundServiceDescription = styled.div`
+  color: ${props => props.theme.colors.textColorLightish};
+  font-size: ${props => props.theme.textfield.fontSize};
+  letter-spacing: 0.2px;
+  line-height: 1.4;
+  margin: 0;
+  width: 100%;
+`
+
+const ServiceTokenDetails = styled.div`
+  width: 100%;
+  display: flex;
+`
+
+const TextHeading = styled.div`
+  color: ${props => props.theme.colors.textColorDark};
+  width: 71px;
+  height: 16px;
+  left: 54px;
+  top: calc(50% - 16px / 2 - 11px);
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.2px;
+  margin: 0px 6px 0px 0px;
+`
+
+const TextBody = styled.div`
+  line-height: 16px;
+  font-size: 14px;
+  height: 16px;
+  margin: 6px 6px 0px 0px;
+`
+
+const TextBodyMarker = styled.span`
+  color: ${props => props.theme.colors.green};
+  font-weight: 500;
+`
+
+export interface AddCompoundServiceProps {
+  isServiceChecked: boolean
+  toggleServiceCheck?: any
+  compoundInterestRate: string
+  currentToken: string
+}
+
+export const AddCompoundService: React.FC<AddCompoundServiceProps> = (props: AddCompoundServiceProps) => {
+  const { compoundInterestRate, currentToken, isServiceChecked, toggleServiceCheck } = props
+  let serviceChecked = <IconTick selected={true} />
+  if (!isServiceChecked) {
+    serviceChecked = <IconTick selected={false} />
+  }
+  const cTokenSymbol = getCTokenForToken(currentToken)
+
+  return (
+    <Wrapper>
+      <Title>Recommended Service</Title>
+      <DescriptionWrapper>
+        <CompoundServiceDescription>
+          <ServiceWrapper>
+            <ServiceIconWrapper>
+              <CompoundIcon />
+            </ServiceIconWrapper>
+            <ServiceTokenDetails>
+              <ServiceTextWrapper>
+                <TextHeading>Compound</TextHeading>
+                <TextBody>
+                  Convert {currentToken} to {cTokenSymbol} and
+                  <TextBodyMarker> earn {compoundInterestRate}% APY</TextBodyMarker>
+                </TextBody>
+              </ServiceTextWrapper>
+              <ServiceCheckWrapper onClick={toggleServiceCheck}>
+                <CheckService isServiceChecked={isServiceChecked}>{serviceChecked}</CheckService>
+              </ServiceCheckWrapper>
+            </ServiceTokenDetails>
+          </ServiceWrapper>
+        </CompoundServiceDescription>
+      </DescriptionWrapper>
+    </Wrapper>
+  )
+}

app/src/components/market/common/additional_market_data/index.tsx

@@ -1,10 +1,13 @@
-import React, { DOMAttributes } from 'react'
+import React, { DOMAttributes, useEffect, useState } from 'react'
 import ReactTooltip from 'react-tooltip'
 import styled from 'styled-components'
 
+import { useConnectedWeb3Context } from '../../../../hooks'
 import { useRealityLink } from '../../../../hooks/useRealityLink'
-import { Arbitrator, KlerosItemStatus, KlerosSubmission } from '../../../../util/types'
+import { CompoundService } from '../../../../services/compound_service'
+import { Arbitrator, CompoundTokenType, KlerosItemStatus, KlerosSubmission, Token } from '../../../../util/types'
 import { IconAlert, IconArbitrator, IconCategory, IconOracle, IconVerified } from '../../../common/icons'
+import { CompoundIconNoBorder } from '../../../common/icons/currencies/CompoundIconNoBorder'
 
 const AdditionalMarketDataWrapper = styled.div`
   border-top: ${({ theme }) => theme.borders.borderLineDisabled};
@@ -42,9 +45,14 @@ const AdditionalMarketDataLeft = styled.div`
   }
 `
 
-const AdditionalMarketDataSectionTitle = styled.p<{ isError?: boolean }>`
+const CompoundInterestWrapper = styled.div`
+  color: ${props => props.theme.colors.compound};
+  margin-left: 2px !important;
+`
+
+const AdditionalMarketDataSectionTitle = styled.p<{ isError?: boolean; noLeftMargin?: boolean }>`
   margin: 0;
-  margin-left: 8px;
+  margin-left: ${props => (props.noLeftMargin ? '0px' : '8px')};
   font-size: ${props => props.theme.textfield.fontSize};
   line-height: 16px;
   white-space: nowrap;
@@ -88,6 +96,7 @@ const AdditionalMarketDataSectionWrapper = styled.a<{ noColorChange?: boolean; i
 interface Props extends DOMAttributes<HTMLDivElement> {
   category: string
   arbitrator: Arbitrator
+  collateral: Token
   oracle: string
   id: string
   curatedByDxDaoOrKleros: boolean
@@ -99,12 +108,11 @@ interface Props extends DOMAttributes<HTMLDivElement> {
 }
 
 export const AdditionalMarketData: React.FC<Props> = props => {
-  const { address, arbitrator, category, curatedByDxDaoOrKleros, id, oracle, submissionIDs, title } = props
-
+  const { address, arbitrator, category, collateral, curatedByDxDaoOrKleros, id, oracle, submissionIDs, title } = props
   const realitioBaseUrl = useRealityLink()
-
-  const realitioUrl = id ? `${realitioBaseUrl}/#!/question/${id}` : `${realitioBaseUrl}/`
-
+  const realitioUrl = id ? `${realitioBaseUrl}/app/#!/question/${id}` : `${realitioBaseUrl}/`
+  const context = useConnectedWeb3Context()
+  const { account, library: provider } = context
   submissionIDs.sort((s1, s2) => {
     if (s1.status === KlerosItemStatus.Registered) return -1
     if (s2.status === KlerosItemStatus.Registered) return 1
@@ -119,6 +127,18 @@ export const AdditionalMarketData: React.FC<Props> = props => {
   queryParams.append('col1', title)
   queryParams.append('col2', `https://omen.eth.link/#/${address}`)
 
+  const [compoundInterestRate, setCompoundInterestRate] = useState<string>('-')
+
+  useEffect(() => {
+    const getAPY = async () => {
+      const compoundServiceObject = new CompoundService(collateral.address, collateral.symbol, provider, account)
+      const supplyRate = await compoundServiceObject.calculateSupplyRateAPY()
+      setCompoundInterestRate(supplyRate.toFixed(2))
+    }
+    if (collateral.symbol.toLowerCase() in CompoundTokenType) {
+      getAPY()
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
   return (
     <AdditionalMarketDataWrapper>
       <AdditionalMarketDataLeft>
@@ -163,6 +183,21 @@ export const AdditionalMarketData: React.FC<Props> = props => {
             {curatedByDxDaoOrKleros ? 'Verified' : 'Not Verified'}
           </AdditionalMarketDataSectionTitle>
         </AdditionalMarketDataSectionWrapper>
+        {collateral.symbol.toLowerCase() in CompoundTokenType ? (
+          <AdditionalMarketDataSectionWrapper
+            data-arrow-color="transparent"
+            data-for="marketData"
+            data-tip={`This market is earning ${compoundInterestRate}% APY powered by compound.finance`}
+            noColorChange={true}
+          >
+            <CompoundIconNoBorder />
+            <AdditionalMarketDataSectionTitle noLeftMargin={true}>
+              <CompoundInterestWrapper>{compoundInterestRate}% APY</CompoundInterestWrapper>
+            </AdditionalMarketDataSectionTitle>
+          </AdditionalMarketDataSectionWrapper>
+        ) : (
+          <span />
+        )}
       </AdditionalMarketDataLeft>
       <ReactTooltip
         className="customMarketTooltip"