Add Uniswap price feeds

package.json

@@ -7,11 +7,13 @@
     "3box": "^1.21.0",
     "@1hive/connect-conviction-voting": "^0.2.2",
     "@aragon/connect": "^0.6.0",
+    "@aragon/connect-thegraph": "^0.6.0",
     "@aragon/ui": "^1.6.0",
     "@sentry/browser": "^5.21.4",
     "bignumber.js": "^9.0.0",
     "clipboard-polyfill": "^3.0.0-pre5",
     "ethers": "^5.0.7",
+    "graphql-tag": "^2.11.0",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
     "react-app-rewired": "^2.1.5",

src/components/BalanceToken.js

@@ -3,16 +3,21 @@ import styled from 'styled-components'
 import TokenAmount from 'token-amount'
 import { useTheme, GU } from '@aragon/ui'
 
-import { useTokenBalanceToUsd } from '../lib/web3-utils'
+import { useUniswapAntPrice } from '../hooks/useUniswapAntPrice'
 import logoAnt from '../assets/logo-ant.svg'
 
-const ANT_SYMBOL = 'ANT'
 const ANT_DECIMALS = 18
-const USD_DECIMALS = 2
 
 const BalanceToken = ({ amount, symbol, color, size }) => {
   const theme = useTheme()
-  const antBalance = useTokenBalanceToUsd(ANT_SYMBOL, ANT_DECIMALS, amount)
+  const uniAntPrice = useUniswapAntPrice()
+
+  const valueFormatted = TokenAmount.format(
+    amount.toFixed(0),
+    ANT_DECIMALS
+  ).replace(/,/g, '')
+
+  const antFinalPrice = Number(uniAntPrice) * Number(valueFormatted)
 
   return (
     <div
@@ -39,11 +44,7 @@ const BalanceToken = ({ amount, symbol, color, size }) => {
           color: ${theme.contentSecondary};
         `}
       >
-        (${' '}
-        {antBalance === '-'
-          ? ''
-          : TokenAmount.format(antBalance.toFixed(0), USD_DECIMALS)}
-        )
+        ($ {antFinalPrice.toLocaleString()})
       </div>
     </div>
   )

src/components/Metrics.js

@@ -12,15 +12,13 @@ import {
 } from '@aragon/ui'
 import AccountModule from './Account/AccountModule'
 import Carousel from './Carousel/Carousel'
-import BigNumber, { bigNum } from '../lib/bigNumber'
+import { useUniswapAntPrice } from '../hooks/useUniswapAntPrice'
+import BigNumber from '../lib/bigNumber'
 import { formatTokenAmount } from '../lib/token-utils'
-import { useTokenBalanceToUsd } from '../lib/web3-utils'
 import { useAppState } from '../providers/AppState'
 import { useWallet } from '../providers/Wallet'
 import StakingTokens from '../screens/StakingTokens'
 
-const USD_DECIMALS = 2
-
 const Metrics = React.memo(function Metrics({
   amountOfProposals,
   commonPool,
@@ -35,7 +33,7 @@ const Metrics = React.memo(function Metrics({
   const { layoutName } = useLayout()
   const theme = useTheme()
   const compactMode = layoutName === 'small'
-  const antPrice = useTokenBalanceToUsd('ANT', 18, bigNum(1))
+  const uniAntPrice = useUniswapAntPrice()
 
   const myActiveTokens = useMemo(() => {
     if (!myStakes) {
@@ -183,7 +181,11 @@ const Metrics = React.memo(function Metrics({
               )}
             </>
           )}
-          <TokenPrice token={antPrice} uppercased />
+          <Metric
+            label="ANT price"
+            value={`$${Number(uniAntPrice).toFixed(2)}`}
+            uppercased
+          />
           <div
             css={`
               width: 100%;
@@ -312,7 +314,19 @@ function CarouselBalance({ amount, decimals = 18, label, symbol = 'ANT' }) {
 
 function TokenBalance({ label, token, value, symbol, uppercased }) {
   const theme = useTheme()
-  const usdBalance = useTokenBalanceToUsd(symbol, token.decimals, value)
+  const uniAntPrice = useUniswapAntPrice()
+
+  const valueFormatted = formatTokenAmount(
+    value.toFixed(0),
+    token.decimals,
+    undefined,
+    false,
+    {
+      commas: false,
+    }
+  ).replace(/,/g, '')
+
+  const antFinalPrice = Number(uniAntPrice) * Number(valueFormatted)
 
   return (
     <>
@@ -328,24 +342,12 @@ function TokenBalance({ label, token, value, symbol, uppercased }) {
           color: ${theme.contentSecondary};
         `}
       >
-        {`$ ${formatTokenAmount(usdBalance, 2)}`}
+        {`$ ${antFinalPrice.toLocaleString()}`}
       </div>
     </>
   )
 }
 
-function TokenPrice({ token, uppercased }) {
-  return (
-    <div>
-      <Metric
-        label="ANT price"
-        value={`$${formatTokenAmount(token, USD_DECIMALS)}`}
-        uppercased={uppercased}
-      />
-    </div>
-  )
-}
-
 const LineSeparator = styled.div`
   width: 100%;
   height: 1px;

src/hooks/useUniswapAntPrice.js

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+import gql from 'graphql-tag'
+import { GraphQLWrapper } from '@aragon/connect-thegraph'
+import * as Sentry from '@sentry/browser'
+
+const UNISWAP_URL = 'https://api.thegraph.com/subgraphs/name/lutter/uniswap-v2'
+const DAI_ANT_PAIR_ID = '0x7286656f87b60e7560ef0a0e53cfa41f450ef993'
+
+const UNISWAP_PAIR_QUERY = gql`
+  query {
+    pair(id: "${DAI_ANT_PAIR_ID}") {
+      token0Price
+    }
+  }
+`
+
+export function useUniswapAntPrice() {
+  const [antPrice, setAntPrice] = useState('0')
+  const wrapper = new GraphQLWrapper(UNISWAP_URL)
+
+  useEffect(() => {
+    let cancelled = false
+    async function getData() {
+      try {
+        const results = await wrapper.performQuery(UNISWAP_PAIR_QUERY)
+
+        const { pair } = results.data
+        if (!cancelled) {
+          setAntPrice(pair.token0Price)
+        }
+      } catch (err) {
+        Sentry.captureException(err)
+      }
+    }
+
+    getData()
+
+    return () => (cancelled = true)
+  })
+
+  return antPrice
+}