Update tracked vs untracked display (Uniswap#337)

* style update on chart * Fix code style issues with ESLint * update tracked warning, switch tables to untracked * Fix code style issues with ESLint Co-authored-by: Lint Action <[email protected]>
calebpara · Jan 21, 2021 · 9533f32 · 9533f32
1 parent 81ff23a
commit 9533f32
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 127 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/src/components/DoubleLogo/index.js b/src/components/DoubleLogo/index.js
@@ -12,14 +12,14 @@ export default function DoubleTokenLogo({ a0, a1, size = 24, margin = false }) {
 
   const HigherLogo = styled(TokenLogo)`
     z-index: 2;
-    background-color: white;
+    // background-color: white;
     border-radius: 50%;
   `
 
   const CoveredLogo = styled(TokenLogo)`
     position: absolute;
     left: ${({ sizeraw }) => (sizeraw / 2).toString() + 'px'};
-    background-color: white;
+    // background-color: white;
     border-radius: 50%;
   `
 

diff --git a/src/components/HoverText/index.tsx b/src/components/HoverText/index.tsx
@@ -0,0 +1,40 @@
+import React, { useCallback, useState } from 'react'
+import styled from 'styled-components'
+import Popover, { PopoverProps } from '../Popover'
+
+const Wrapper = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const TooltipContainer = styled.div`
+  width: 228px;
+  padding: 0.6rem 1rem;
+  line-height: 150%;
+  font-weight: 400;
+`
+
+interface TooltipProps extends Omit<PopoverProps, 'content'> {
+  text: string
+}
+
+export function Tooltip({ text, ...rest }: TooltipProps) {
+  return <Popover content={<TooltipContainer>{text}</TooltipContainer>} {...rest} />
+}
+
+export default function HoverText({ text, children }: { text: string; children: any }) {
+  const [show, setShow] = useState<boolean>(false)
+  const open = useCallback(() => setShow(true), [setShow])
+  const close = useCallback(() => setShow(false), [setShow])
+
+  return (
+    <Wrapper>
+      <Tooltip text={text} show={show}>
+        <Wrapper onMouseEnter={open} onMouseLeave={close}>
+          {children}
+        </Wrapper>
+      </Tooltip>
+    </Wrapper>
+  )
+}
diff --git a/src/components/PairList/index.js b/src/components/PairList/index.js
@@ -108,14 +108,22 @@ const SORT_FIELD = {
   APY: 5,
 }
 
-const FIELD_TO_VALUE = {
-  [SORT_FIELD.LIQ]: 'trackedReserveUSD', // sort with tracked volume only
-  [SORT_FIELD.VOL]: 'oneDayVolumeUSD',
-  [SORT_FIELD.VOL_7DAYS]: 'oneWeekVolumeUSD',
-  [SORT_FIELD.FEES]: 'oneDayVolumeUSD',
+const FIELD_TO_VALUE = (field, useTracked) => {
+  switch (field) {
+    case SORT_FIELD.LIQ:
+      return useTracked ? 'trackedReserveUSD' : 'reserveUSD'
+    case SORT_FIELD.VOL:
+      return useTracked ? 'oneDayVolumeUSD' : 'oneDayVolumeUntracked'
+    case SORT_FIELD.VOL_7DAYS:
+      return useTracked ? 'oneWeekVolumeUSD' : 'oneWeekVolumeUntracked'
+    case SORT_FIELD.FEES:
+      return useTracked ? 'oneDayVolumeUSD' : 'oneDayVolumeUntracked'
+    default:
+      return 'trackedReserveUSD'
+  }
 }
 
-function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
+function PairList({ pairs, color, disbaleLinks, maxItems = 10, useTracked = false }) {
   const below600 = useMedia('(max-width: 600px)')
   const below740 = useMedia('(max-width: 740px)')
   const below1080 = useMedia('(max-width: 1080px)')
@@ -148,9 +156,19 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
     const pairData = pairs[pairAddress]
 
     if (pairData && pairData.token0 && pairData.token1) {
-      const liquidity = formattedNum(pairData.reserveUSD, true)
-      const volume = formattedNum(pairData.oneDayVolumeUSD, true)
-      const apy = formattedPercent((pairData.oneDayVolumeUSD * 0.003 * 365 * 100) / pairData.reserveUSD)
+      const liquidity = formattedNum(useTracked ? pairData.trackedReserveUSD : pairData.reserveUSD, true)
+      const volume = formattedNum(useTracked ? pairData.oneDayVolumeUSD : pairData.oneDayVolumeUntracked, true)
+      const apy = formattedPercent(
+        ((useTracked ? pairData.oneDayVolumeUSD : pairData.oneDayVolumeUntracked) * 0.003 * 365 * 100) /
+          (useTracked ? pairData.trackedReserveUSD : pairData.reserveUSD)
+      )
+
+      const weekVolume = formattedNum(useTracked ? pairData.oneWeekVolumeUSD : pairData.oneWeekVolumeUntracked, true)
+
+      const fees = formattedNum(
+        useTracked ? pairData.oneDayVolumeUSD * 0.003 : pairData.oneDayVolumeUntracked * 0.003,
+        true
+      )
 
       return (
         <DashGrid style={{ height: '48px' }} disbaleLinks={disbaleLinks} focus={true}>
@@ -173,8 +191,8 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
           </DataText>
           <DataText area="liq">{liquidity}</DataText>
           <DataText area="vol">{volume}</DataText>
-          {!below1080 && <DataText area="volWeek">{formattedNum(pairData.oneWeekVolumeUSD, true)}</DataText>}
-          {!below1080 && <DataText area="fees">{formattedNum(pairData.oneDayVolumeUSD * 0.003, true)}</DataText>}
+          {!below1080 && <DataText area="volWeek">{weekVolume}</DataText>}
+          {!below1080 && <DataText area="fees">{fees}</DataText>}
           {!below1080 && <DataText area="apy">{apy}</DataText>}
         </DashGrid>
       )
@@ -194,7 +212,8 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
           const apy1 = parseFloat(pairB.oneDayVolumeUSD * 0.003 * 356 * 100) / parseFloat(pairB.reserveUSD)
           return apy0 > apy1 ? (sortDirection ? -1 : 1) * 1 : (sortDirection ? -1 : 1) * -1
         }
-        return parseFloat(pairA[FIELD_TO_VALUE[sortedColumn]]) > parseFloat(pairB[FIELD_TO_VALUE[sortedColumn]])
+        return parseFloat(pairA[FIELD_TO_VALUE(sortedColumn, useTracked)]) >
+          parseFloat(pairB[FIELD_TO_VALUE(sortedColumn, useTracked)])
           ? (sortDirection ? -1 : 1) * 1
           : (sortDirection ? -1 : 1) * -1
       })

diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
@@ -24,57 +24,6 @@ const ReferenceElement = styled.div`
   display: inline-block;
 `
 
-const Arrow = styled.div`
-  width: 8px;
-  height: 8px;
-  z-index: 9998;
-
-  ::before {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    z-index: 9998;
-
-    content: '';
-    border: 1px solid ${({ theme }) => theme.bg3};
-    transform: rotate(45deg);
-    background: ${({ theme }) => theme.bg2};
-  }
-
-  &.arrow-top {
-    bottom: -5px;
-    ::before {
-      border-top: none;
-      border-left: none;
-    }
-  }
-
-  &.arrow-bottom {
-    top: -5px;
-    ::before {
-      border-bottom: none;
-      border-right: none;
-    }
-  }
-
-  &.arrow-left {
-    right: -5px;
-
-    ::before {
-      border-bottom: none;
-      border-left: none;
-    }
-  }
-
-  &.arrow-right {
-    left: -5px;
-    ::before {
-      border-right: none;
-      border-top: none;
-    }
-  }
-`
-
 export interface PopoverProps {
   content: React.ReactNode
   show: boolean
@@ -85,7 +34,7 @@ export interface PopoverProps {
 export default function Popover({ content, show, children, placement = 'auto' }: PopoverProps) {
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement>(null)
   const [popperElement, setPopperElement] = useState<HTMLDivElement>(null)
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement>(null)
+  const [arrowElement] = useState<HTMLDivElement>(null)
   const { styles, update, attributes } = usePopper(referenceElement, popperElement, {
     placement,
     strategy: 'fixed',
@@ -103,12 +52,12 @@ export default function Popover({ content, show, children, placement = 'auto' }:
       <Portal>
         <PopoverContainer show={show} ref={setPopperElement} style={styles.popper} {...attributes.popper}>
           {content}
-          <Arrow
+          {/* <Arrow
             className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
             ref={setArrowElement}
             style={styles.arrow}
             {...attributes.arrow}
-          />
+          /> */}
         </PopoverContainer>
       </Portal>
     </>

diff --git a/src/components/TokenList/index.js b/src/components/TokenList/index.js
@@ -114,14 +114,15 @@ const DataText = styled(Flex)`
 const SORT_FIELD = {
   LIQ: 'totalLiquidityUSD',
   VOL: 'oneDayVolumeUSD',
+  VOL_UT: 'oneDayVolumeUT',
   SYMBOL: 'symbol',
   NAME: 'name',
   PRICE: 'priceUSD',
   CHANGE: 'priceChangeUSD',
 }
 
 // @TODO rework into virtualized list
-function TopTokenList({ tokens, itemMax = 10 }) {
+function TopTokenList({ tokens, itemMax = 10, useTracked = false }) {
   // page state
   const [page, setPage] = useState(1)
   const [maxPage, setMaxPage] = useState(1)
@@ -220,7 +221,7 @@ function TopTokenList({ tokens, itemMax = 10 }) {
             fontWeight="500"
             onClick={(e) => {
               setSortedColumn(SORT_FIELD.NAME)
-              setSortDirection(sortedColumn !== SORT_FIELD.NAMe ? true : !sortDirection)
+              setSortDirection(sortedColumn !== SORT_FIELD.NAME ? true : !sortDirection)
             }}
           >
             {below680 ? 'Symbol' : 'Name'} {sortedColumn === SORT_FIELD.NAME ? (!sortDirection ? '↑' : '↓') : ''}
@@ -255,12 +256,14 @@ function TopTokenList({ tokens, itemMax = 10 }) {
           <ClickableText
             area="vol"
             onClick={(e) => {
-              setSortedColumn(SORT_FIELD.VOL)
-              setSortDirection(sortedColumn !== SORT_FIELD.VOL ? true : !sortDirection)
+              setSortedColumn(useTracked ? SORT_FIELD.VOL_UT : SORT_FIELD.VOL)
+              setSortDirection(
+                sortedColumn !== (useTracked ? SORT_FIELD.VOL_UT : SORT_FIELD.VOL) ? true : !sortDirection
+              )
             }}
           >
             Volume (24hrs)
-            {sortedColumn === SORT_FIELD.VOL ? (!sortDirection ? '↑' : '↓') : ''}
+            {sortedColumn === (useTracked ? SORT_FIELD.VOL_UT : SORT_FIELD.VOL) ? (!sortDirection ? '↑' : '↓') : ''}
           </ClickableText>
         </Flex>
         {!below1080 && (

diff --git a/src/components/TokenLogo/index.js b/src/components/TokenLogo/index.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { isAddress } from '../../utils/index.js'
-import PlaceHolder from '../../assets/placeholder.png'
 import EthereumLogo from '../../assets/eth.png'
 
 const BAD_IMAGES = {}
@@ -41,7 +40,9 @@ export default function TokenLogo({ address, header = false, size = '24px', ...r
   if (error || BAD_IMAGES[address]) {
     return (
       <Inline>
-        <Image {...rest} alt={''} src={PlaceHolder} size={size} />
+        <span {...rest} alt={''} style={{ fontSize: size }} role="img" aria-label="face">
+          🤔
+        </span>
       </Inline>
     )
   }

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -31,3 +31,5 @@ export const PAIR_BLACKLIST = ['0xb6a741f37d6e455ebcc9f17e2c16d0586c3f57a5']
  * For tokens that cause erros on fee calculations
  */
 export const FEE_WARNING_TOKENS = ['0xd46ba6d942050d489dbd938a2c909a5d5039a161']
+
+export const UNTRACKED_COPY = 'Derived USD values may be inaccurate without liquid stablecoin or ETH pairings.'
diff --git a/src/contexts/PairData.js b/src/contexts/PairData.js
@@ -267,16 +267,22 @@ function parseData(data, oneDayData, twoDayData, oneWeekData, ethPrice, oneDayBl
     oneDayData?.untrackedVolumeUSD ? parseFloat(oneDayData?.untrackedVolumeUSD) : 0,
     twoDayData?.untrackedVolumeUSD ? twoDayData?.untrackedVolumeUSD : 0
   )
+
   const oneWeekVolumeUSD = parseFloat(oneWeekData ? data?.volumeUSD - oneWeekData?.volumeUSD : data.volumeUSD)
 
+  const oneWeekVolumeUntracked = parseFloat(
+    oneWeekData ? data?.untrackedVolumeUSD - oneWeekData?.untrackedVolumeUSD : data.untrackedVolumeUSD
+  )
+
   // set volume properties
   data.oneDayVolumeUSD = parseFloat(oneDayVolumeUSD)
   data.oneWeekVolumeUSD = oneWeekVolumeUSD
   data.volumeChangeUSD = volumeChangeUSD
   data.oneDayVolumeUntracked = oneDayVolumeUntracked
+  data.oneWeekVolumeUntracked = oneWeekVolumeUntracked
   data.volumeChangeUntracked = volumeChangeUntracked
 
-  // set liquiditry properties
+  // set liquidity properties
   data.trackedReserveUSD = data.trackedReserveETH * ethPrice
   data.liquidityChangeUSD = getPercentChange(data.reserveUSD, oneDayData?.reserveUSD)