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 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      clipRule="evenodd"
+      d="M5.71778 17.0285C5.27239 16.7544 5 16.2661 5 15.7418V12.8142C5 12.7022 5.02982 12.5941 5.08549 12.498C5.25849 12.1979 5.64223 12.0958 5.94047 12.2719L12.5061 16.124C12.8898 16.3501 13.1264 16.7624 13.1264 17.2106V20.2443C13.1264 20.3823 13.0886 20.5204 13.0171 20.6385C12.8003 20.9947 12.339 21.1067 11.9851 20.8886L5.71778 17.0285ZM15.5045 11.4695C15.8882 11.6956 16.1248 12.1079 16.1248 12.5561V18.7114C16.1248 18.8935 16.0274 19.0616 15.8703 19.1496L14.4327 19.9641C14.4149 19.9741 14.395 19.9821 14.3751 19.9881V16.5702C14.3751 16.128 14.1444 15.7178 13.7667 15.4897L8.00043 12.0178V8.15968C8.00043 8.04762 8.03025 7.93957 8.08593 7.84353C8.25892 7.54339 8.64266 7.4413 8.94091 7.61742L15.5045 11.4695ZM18.3777 6.92304C18.7634 7.14716 19 7.56337 19 8.01162V17.0025C19 17.1866 18.8986 17.3567 18.7375 17.4447L17.3755 18.1851V11.9257C17.3755 11.4835 17.1449 11.0753 16.7691 10.8472L10.8756 7.28922V3.62922C10.8756 3.51716 10.9054 3.40911 10.9591 3.31307C11.1321 3.01293 11.5158 2.91084 11.8141 3.08493L18.3777 6.92304Z"
+      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,17 @@ const AdditionalMarketDataLeft = styled.div`
   }
 `
 
-const AdditionalMarketDataSectionTitle = styled.p<{ isError?: boolean }>`
+const CompoundInterestWrapper = styled.div<{ customColor: string }>`
+  color: ${props => props.theme.colors.green};
+  margin-left: 2px !important;
+  &:hover {
+    color: ${props => props.customColor};
+  }
+`
+
+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;
@@ -54,7 +65,12 @@ const AdditionalMarketDataSectionTitle = styled.p<{ isError?: boolean }>`
   }
 `
 
-const AdditionalMarketDataSectionWrapper = styled.a<{ noColorChange?: boolean; isError?: boolean }>`
+const AdditionalMarketDataSectionWrapper = styled.a<{
+  noColorChange?: boolean
+  isError?: boolean
+  customColorChange?: boolean
+  customColor?: string
+}>`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -69,7 +85,13 @@ const AdditionalMarketDataSectionWrapper = styled.a<{ noColorChange?: boolean; i
       }
       path {
         fill: ${props =>
-          props.noColorChange ? '' : props.isError ? props.theme.colors.alertHover : props.theme.colors.primaryLight};
+          props.customColorChange
+            ? props.customColor
+            : props.noColorChange
+            ? ''
+            : props.isError
+            ? props.theme.colors.alertHover
+            : props.theme.colors.primaryLight};
       }
 
       path:nth-child(even) {
@@ -88,6 +110,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 +122,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 +141,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 +197,22 @@ export const AdditionalMarketData: React.FC<Props> = props => {
             {curatedByDxDaoOrKleros ? 'Verified' : 'Not Verified'}
           </AdditionalMarketDataSectionTitle>
         </AdditionalMarketDataSectionWrapper>
+        {collateral.symbol.toLowerCase() in CompoundTokenType ? (
+          <AdditionalMarketDataSectionWrapper
+            customColor={'#00897B'}
+            customColorChange={true}
+            data-arrow-color="transparent"
+            data-for="marketData"
+            data-tip={`This market is earning ${compoundInterestRate}% APY powered by compound.finance`}
+          >
+            <CompoundIconNoBorder />
+            <AdditionalMarketDataSectionTitle noLeftMargin={true}>
+              <CompoundInterestWrapper customColor={'#00897B'}>{compoundInterestRate}% APY</CompoundInterestWrapper>
+            </AdditionalMarketDataSectionTitle>
+          </AdditionalMarketDataSectionWrapper>
+        ) : (
+          <span />
+        )}
       </AdditionalMarketDataLeft>
       <ReactTooltip
         className="customMarketTooltip"