From b7fc200f21ddd4b5c46a569d31f04fd1f623e170 Mon Sep 17 00:00:00 2001 From: Julian Date: Wed, 1 Sep 2021 21:59:31 -0300 Subject: [PATCH] added switch between usd/eth on main page --- src/components/GlobalChart/index.js | 6 ++- src/components/PairList/index.js | 13 +++--- src/components/TokenList/index.js | 8 ++-- src/components/TradingviewChart/index.js | 15 ++++--- src/components/TxnList/index.js | 8 ++-- src/components/UnitOptions/index.js | 44 +++++++++++++++++++ src/pages/GlobalPage.js | 56 +++++++++++++++++++----- src/utils/index.js | 15 +++++++ 8 files changed, 134 insertions(+), 31 deletions(-) create mode 100644 src/components/UnitOptions/index.js diff --git a/src/components/GlobalChart/index.js b/src/components/GlobalChart/index.js index 8668180..fde0ab7 100644 --- a/src/components/GlobalChart/index.js +++ b/src/components/GlobalChart/index.js @@ -19,7 +19,7 @@ const VOLUME_WINDOW = { WEEKLY: "WEEKLY", DAYS: "DAYS", }; -const GlobalChart = ({ display }) => { +const GlobalChart = ({ display, handlePrice, showETH }) => { // chart options const [chartView, setChartView] = useState( display === "volume" ? CHART_VIEW.VOLUME : CHART_VIEW.LIQUIDITY @@ -100,6 +100,8 @@ const GlobalChart = ({ display }) => { field="totalLiquidityUSD" width={width} type={CHART_TYPES.AREA} + handlePrice={handlePrice} + showETH={showETH} /> )} @@ -128,6 +130,8 @@ const GlobalChart = ({ display }) => { width={width} type={CHART_TYPES.BAR} useWeekly={volumeWindow === VOLUME_WINDOW.WEEKLY} + handlePrice={handlePrice} + showETH={showETH} /> )} diff --git a/src/components/PairList/index.js b/src/components/PairList/index.js index 2719e20..8a3ef6d 100644 --- a/src/components/PairList/index.js +++ b/src/components/PairList/index.js @@ -120,7 +120,7 @@ const FIELD_TO_VALUE = { [SORT_FIELD.FEES]: "oneDayVolumeUSD", }; -function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) { +function PairList({ pairs, color, disbaleLinks, maxItems = 10, handlePrice }) { const below600 = useMedia("(max-width: 600px)"); const below740 = useMedia("(max-width: 740px)"); const below1080 = useMedia("(max-width: 1080px)"); @@ -155,12 +155,12 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) { } }, [ITEMS_PER_PAGE, pairs]); - const ListItem = ({ pairAddress, index }) => { + const ListItem = ({ pairAddress, index, handlePrice }) => { const pairData = pairs[pairAddress]; if (pairData && pairData.token0 && pairData.token1) { - const liquidity = formattedNum(pairData.reserveUSD, true); - const volume = formattedNum(pairData.oneDayVolumeUSD, true); + const liquidity = handlePrice ? handlePrice(pairData.reserveUSD) : formattedNum(pairData.reserveUSD, true); + const volume = handlePrice ? handlePrice(pairData.oneDayVolumeUSD) : formattedNum(pairData.oneDayVolumeUSD, true); const feeRate = getFeeRate(pairData, selectedNetwork); const apy = formattedPercent( (pairData.oneDayVolumeUSD * feeRate * 365 * 100) / pairData.reserveUSD @@ -208,12 +208,12 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) { {volume} {!below1080 && ( - {formattedNum(pairData.oneWeekVolumeUSD, true)} + {handlePrice ? handlePrice(pairData.oneWeekVolumeUSD) : formattedNum(pairData.oneWeekVolumeUSD, true)} )} {!below1080 && ( - {formattedNum(pairData.oneDayVolumeUSD * feeRate, true)} + {handlePrice ? handlePrice(pairData.oneDayVolumeUSD * feeRate) : formattedNum(pairData.oneDayVolumeUSD * feeRate, true)} )} {!below1080 && {apy}} @@ -259,6 +259,7 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) { key={index} index={(page - 1) * ITEMS_PER_PAGE + index + 1} pairAddress={pairAddress} + handlePrice={handlePrice} /> diff --git a/src/components/TokenList/index.js b/src/components/TokenList/index.js index 12e5586..4fa028d 100644 --- a/src/components/TokenList/index.js +++ b/src/components/TokenList/index.js @@ -121,7 +121,7 @@ const SORT_FIELD = { }; // @TODO rework into virtualized list -function TopTokenList({ tokens, itemMax = 10 }) { +function TopTokenList({ tokens, itemMax = 10, handlePrice }) { // page state const [page, setPage] = useState(1); const [maxPage, setMaxPage] = useState(1); @@ -209,14 +209,14 @@ function TopTokenList({ tokens, itemMax = 10 }) { )} - {formattedNum(item.totalLiquidityUSD, true)} + {handlePrice ? handlePrice(item.totalLiquidityUSD) : formattedNum(item.totalLiquidityUSD, true)} - {formattedNum(item.oneDayVolumeUSD, true)} + {handlePrice ? handlePrice(item.oneDayVolumeUSD) : formattedNum(item.oneDayVolumeUSD, true)} {!below1080 && ( - {formattedNum(item.priceUSD, true)} + {handlePrice ? handlePrice(item.priceUSD) : formattedNum(item.priceUSD, true)} )} {!below1080 && ( diff --git a/src/components/TradingviewChart/index.js b/src/components/TradingviewChart/index.js index 7f9dae8..7d99bd1 100644 --- a/src/components/TradingviewChart/index.js +++ b/src/components/TradingviewChart/index.js @@ -35,6 +35,8 @@ const TradingViewChart = ({ title, width, useWeekly = false, + handlePrice, + showETH }) => { // reference for DOM element to create with chart const ref = useRef() @@ -56,10 +58,10 @@ const TradingViewChart = ({ }, [chartCreated, data, dataPrev, type]) // parese the data and format for tardingview consumption - const formattedData = data?.map((entry) => { + const formattedData = data?.map((entry, idx) => { return { time: dayjs.unix(entry.date).utc().format('YYYY-MM-DD'), - value: parseFloat(entry[field]), + value: handlePrice ? handlePrice(parseFloat(entry[field]), { numericFormat: true }) : parseFloat(entry[field]), } }) @@ -126,7 +128,7 @@ const TradingViewChart = ({ }, }, localization: { - priceFormatter: (val) => formattedNum(val, true), + priceFormatter: (val) => showETH ? `${formattedNum(val, false)} ETH` : formattedNum(val, true), }, }) @@ -169,12 +171,13 @@ const TradingViewChart = ({ // get the title of the chart function setLastBarText() { + let num = handlePrice ? handlePrice(base ?? 0) : formattedNum( base ?? 0, true); toolTip.innerHTML = `
${title} ${ type === CHART_TYPES.BAR && !useWeekly ? '(24hr)' : '' }
` + `
` + - formattedNum(base ?? 0, true) + + num + `${formattedPercentChange}` + '
' } @@ -202,11 +205,11 @@ const TradingViewChart = ({ .format('MMMM D, YYYY') : dayjs(param.time.year + '-' + param.time.month + '-' + param.time.day).format('MMMM D, YYYY') var price = param.seriesPrices.get(series) - + var priceValue = showETH ? `${price.toFixed(2)} ETH` : formattedNum(price, true) toolTip.innerHTML = `
${title}
` + `
` + - formattedNum(price, true) + + priceValue + '
' + '
' + dateStr + diff --git a/src/components/TxnList/index.js b/src/components/TxnList/index.js index 07f3aef..91da2f3 100644 --- a/src/components/TxnList/index.js +++ b/src/components/TxnList/index.js @@ -164,7 +164,7 @@ function getTransactionType(event, symbol0, symbol1) { } // @TODO rework into virtualized list -function TxnList({ transactions, symbol0Override, symbol1Override, color }) { +function TxnList({ transactions, symbol0Override, symbol1Override, color, handlePrice }) { const selectedNetwork = useSelectedNetwork(); // page state @@ -286,7 +286,7 @@ function TxnList({ transactions, symbol0Override, symbol1Override, color }) { const below1080 = useMedia("(max-width: 1080px)"); const below780 = useMedia("(max-width: 780px)"); - const ListItem = ({ item }) => { + const ListItem = ({ item, handlePrice }) => { return ( @@ -302,7 +302,7 @@ function TxnList({ transactions, symbol0Override, symbol1Override, color }) { )} - {formattedNum(item.amountUSD, true)} + {handlePrice ? handlePrice(item.amountUSD) : formattedNum(item.amountUSD, true)} {!below780 && ( <> @@ -490,7 +490,7 @@ function TxnList({ transactions, symbol0Override, symbol1Override, color }) { filteredList.map((item, index) => { return (
- +
); diff --git a/src/components/UnitOptions/index.js b/src/components/UnitOptions/index.js new file mode 100644 index 0000000..033b569 --- /dev/null +++ b/src/components/UnitOptions/index.js @@ -0,0 +1,44 @@ +import React from "react"; +import styled from "styled-components"; + +const Options = styled.div` + display: flex; + align-items: center; +`; + +const Option = styled.span` + padding: 0.5rem; + font-size: 14px; + font-weight: 500; + color: white; + cursor: pointer; + opacity: ${(props) => (props.selected ? 1 : 0.6)}; + &:hover { + opacity: 1; + } +`; + +const Devider = styled.span` + margin: 0; + color: white; +`; + +const UnitOptions = ({ selected, setSelected }) => { + return ( + <> + + + / + + + + ); +}; + +export default UnitOptions; \ No newline at end of file diff --git a/src/pages/GlobalPage.js b/src/pages/GlobalPage.js index 62a5510..f60d4b6 100644 --- a/src/pages/GlobalPage.js +++ b/src/pages/GlobalPage.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react' +import React, { useEffect, useState, useMemo } from 'react' import { withRouter } from 'react-router-dom' import { Box } from 'rebass' import styled from 'styled-components' @@ -17,7 +17,7 @@ import { useAllPairData } from '../contexts/PairData' import { useMedia } from 'react-use' import Panel from '../components/Panel' import { useAllTokenData } from '../contexts/TokenData' -import { formattedNum, formattedPercent } from '../utils' +import { formattedNum, formattedPercent, getTokenBySymbol } from '../utils' import { TYPE, ThemedBackground } from '../Theme' import { transparentize } from 'polished' import { CustomLink } from '../components/Link' @@ -26,6 +26,7 @@ import { PageWrapper, ContentWrapper } from '../components' import { useSelectedNetwork } from '../contexts/Network' import { NETWORK_COLORS } from '../constants' +import UnitOptions from "../components/UnitOptions" const ListOptions = styled(AutoRow)` height: 40px; @@ -55,6 +56,10 @@ function GlobalPage() { const { totalLiquidityUSD, oneDayVolumeUSD, volumeChangeUSD, liquidityChangeUSD } = useGlobalData() const network = useSelectedNetwork() + const ethTokenData = useMemo(() => getTokenBySymbol('WETH', allTokens), [allTokens]); + + const [currencySelected, setCurrencySelected] = useState('usd') // 'usd' or 'eth' + // breakpoints const below800 = useMedia('(max-width: 800px)') @@ -67,6 +72,36 @@ function GlobalPage() { }) }, []) + const handlePriceUSDETH = (value, options = { showSymbol: true, numericFormat: false }) => { + if (options?.numericFormat) { + return value / ethTokenData.priceUSD; + } + switch (currencySelected) { + case 'eth': + const num = formattedNum(value / ethTokenData.priceUSD, false); + return (options?.showSymbol) ? `${num} ETH` : num; + case 'usd': + const showSymbolUsd = options?.showSymbol; + return formattedNum(value, showSymbolUsd); + default: + return value; + } + } + + let $liquidityGlobalChart = null; + if (currencySelected === 'usd') { + $liquidityGlobalChart =
+ } else { + $liquidityGlobalChart =
+ } + + let $volumeGlobalChart = null; + if (currencySelected === 'usd') { + $volumeGlobalChart =
+ } else { + $volumeGlobalChart =
+ } + return ( + {below800 && ( // mobile card @@ -91,7 +127,7 @@ function GlobalPage() { - {formattedNum(oneDayVolumeUSD, true)} + {handlePriceUSDETH(oneDayVolumeUSD)} {formattedPercent(volumeChangeUSD)} @@ -103,7 +139,7 @@ function GlobalPage() { - {formattedNum(totalLiquidityUSD, true)} + {handlePriceUSDETH(totalLiquidityUSD)} {formattedPercent(liquidityChangeUSD)} @@ -116,17 +152,17 @@ function GlobalPage() { {!below800 && ( - + {$liquidityGlobalChart} - + {$volumeGlobalChart} )} {below800 && ( - + {$liquidityGlobalChart} )} @@ -137,7 +173,7 @@ function GlobalPage() { - + @@ -146,7 +182,7 @@ function GlobalPage() { - + @@ -155,7 +191,7 @@ function GlobalPage() { - +
diff --git a/src/utils/index.js b/src/utils/index.js index e56aeee..1b9965a 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -621,3 +621,18 @@ export function getPaidFeeRateByTokenSymbols(token0Symbol, token1Symbol, selecte return feeRate; } + +// Recommended use this with useMemo() +export function getTokenBySymbol(symbol, allTokens) { + if (!symbol || !allTokens) return; + let auxToken; + if (typeof allTokens === 'object' && Object.keys(allTokens).length !== 0 && allTokens.constructor === Object) { + for (let prop in allTokens) { + if (allTokens[prop].symbol === symbol) { + auxToken = allTokens[prop]; + break; + } + } + } + return auxToken +}