Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added switch between usd/eth on main page #19

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added switch between usd/eth on main page #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/components/GlobalChart/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -100,6 +100,8 @@ const GlobalChart = ({ display }) => {
field="totalLiquidityUSD"
width={width}
type={CHART_TYPES.AREA}
handlePrice={handlePrice}
showETH={showETH}
/>
</ResponsiveContainer>
)}
Expand Down Expand Up @@ -128,6 +130,8 @@ const GlobalChart = ({ display }) => {
width={width}
type={CHART_TYPES.BAR}
useWeekly={volumeWindow === VOLUME_WINDOW.WEEKLY}
handlePrice={handlePrice}
showETH={showETH}
/>
</ResponsiveContainer>
)}
Expand Down
13 changes: 7 additions & 6 deletions src/components/PairList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)");
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -208,12 +208,12 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
<DataText area="vol">{volume}</DataText>
{!below1080 && (
<DataText area="volWeek">
{formattedNum(pairData.oneWeekVolumeUSD, true)}
{handlePrice ? handlePrice(pairData.oneWeekVolumeUSD) : formattedNum(pairData.oneWeekVolumeUSD, true)}
</DataText>
)}
{!below1080 && (
<DataText area="fees">
{formattedNum(pairData.oneDayVolumeUSD * feeRate, true)}
{handlePrice ? handlePrice(pairData.oneDayVolumeUSD * feeRate) : formattedNum(pairData.oneDayVolumeUSD * feeRate, true)}
</DataText>
)}
{!below1080 && <DataText area="apy">{apy}</DataText>}
Expand Down Expand Up @@ -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}
/>
<Divider />
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/TokenList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -209,14 +209,14 @@ function TopTokenList({ tokens, itemMax = 10 }) {
</DataText>
)}
<DataText area="liq">
{formattedNum(item.totalLiquidityUSD, true)}
{handlePrice ? handlePrice(item.totalLiquidityUSD) : formattedNum(item.totalLiquidityUSD, true)}
</DataText>
<DataText area="vol">
{formattedNum(item.oneDayVolumeUSD, true)}
{handlePrice ? handlePrice(item.oneDayVolumeUSD) : formattedNum(item.oneDayVolumeUSD, true)}
</DataText>
{!below1080 && (
<DataText area="price" color="text" fontWeight="500">
{formattedNum(item.priceUSD, true)}
{handlePrice ? handlePrice(item.priceUSD) : formattedNum(item.priceUSD, true)}
</DataText>
)}
{!below1080 && (
Expand Down
15 changes: 9 additions & 6 deletions src/components/TradingviewChart/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ const TradingViewChart = ({
title,
width,
useWeekly = false,
handlePrice,
showETH
}) => {
// reference for DOM element to create with chart
const ref = useRef()
Expand All @@ -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]),
}
})

Expand Down Expand Up @@ -126,7 +128,7 @@ const TradingViewChart = ({
},
},
localization: {
priceFormatter: (val) => formattedNum(val, true),
priceFormatter: (val) => showETH ? `${formattedNum(val, false)} ETH` : formattedNum(val, true),
},
})

Expand Down Expand Up @@ -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 =
`<div style="font-size: 16px; margin: 4px 0px; color: ${textColor};">${title} ${
type === CHART_TYPES.BAR && !useWeekly ? '(24hr)' : ''
}</div>` +
`<div style="font-size: 22px; margin: 4px 0px; color:${textColor}" >` +
formattedNum(base ?? 0, true) +
num +
`<span style="margin-left: 10px; font-size: 16px; color: ${color};">${formattedPercentChange}</span>` +
'</div>'
}
Expand Down Expand Up @@ -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 =
`<div style="font-size: 16px; margin: 4px 0px; color: ${textColor};">${title}</div>` +
`<div style="font-size: 22px; margin: 4px 0px; color: ${textColor}">` +
formattedNum(price, true) +
priceValue +
'</div>' +
'<div>' +
dateStr +
Expand Down
8 changes: 4 additions & 4 deletions src/components/TxnList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 (
<DashGrid style={{ height: "48px" }}>
<DataText area="txn" fontWeight="500">
Expand All @@ -302,7 +302,7 @@ function TxnList({ transactions, symbol0Override, symbol1Override, color }) {
)}
</Link>
</DataText>
<DataText area="value">{formattedNum(item.amountUSD, true)}</DataText>
<DataText area="value">{handlePrice ? handlePrice(item.amountUSD) : formattedNum(item.amountUSD, true)}</DataText>
{!below780 && (
<>
<DataText area="amountOther">
Expand Down Expand Up @@ -490,7 +490,7 @@ function TxnList({ transactions, symbol0Override, symbol1Override, color }) {
filteredList.map((item, index) => {
return (
<div key={index}>
<ListItem key={index} index={index + 1} item={item} />
<ListItem key={index} index={index + 1} item={item} handlePrice={handlePrice} />
<Divider />
</div>
);
Expand Down
44 changes: 44 additions & 0 deletions src/components/UnitOptions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
<Options>
<Option selected={selected === 'usd'} onClick={() => setSelected('usd')}>
{" "}
USD{" "}
</Option>
<Devider> / </Devider>
<Option selected={selected === 'eth'} onClick={() => setSelected('eth')}>
{" "}
ETH{" "}
</Option>
</Options>
</>
);
};

export default UnitOptions;
56 changes: 46 additions & 10 deletions src/pages/GlobalPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -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;
Expand Down Expand Up @@ -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)')

Expand All @@ -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 = <div key="usd-liquidity"><GlobalChart display="liquidity" /></div>
} else {
$liquidityGlobalChart = <div key="eth-liquidity"><GlobalChart display="liquidity" handlePrice={handlePriceUSDETH} showETH={true} /></div>
}

let $volumeGlobalChart = null;
if (currencySelected === 'usd') {
$volumeGlobalChart = <div key="usd-volume"><GlobalChart display="volume" /></div>
} else {
$volumeGlobalChart = <div key="eth-volume"><GlobalChart display="volume" handlePrice={handlePriceUSDETH} showETH={true}/></div>
}

return (
<PageWrapper>
<ThemedBackground
Expand All @@ -79,6 +114,7 @@ function GlobalPage() {
<Search />
<GlobalStats />
</AutoColumn>
<UnitOptions selected={currencySelected} setSelected={setCurrencySelected} />
{below800 && ( // mobile card
<Box mb={20}>
<Panel>
Expand All @@ -91,7 +127,7 @@ function GlobalPage() {
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={600}>
{formattedNum(oneDayVolumeUSD, true)}
{handlePriceUSDETH(oneDayVolumeUSD)}
</TYPE.main>
<TYPE.main fontSize={12}>{formattedPercent(volumeChangeUSD)}</TYPE.main>
</RowBetween>
Expand All @@ -103,7 +139,7 @@ function GlobalPage() {
</RowBetween>
<RowBetween align="flex-end">
<TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={600}>
{formattedNum(totalLiquidityUSD, true)}
{handlePriceUSDETH(totalLiquidityUSD)}
</TYPE.main>
<TYPE.main fontSize={12}>{formattedPercent(liquidityChangeUSD)}</TYPE.main>
</RowBetween>
Expand All @@ -116,17 +152,17 @@ function GlobalPage() {
{!below800 && (
<GridRow>
<Panel style={{ height: '100%', minHeight: '300px' }}>
<GlobalChart display="liquidity" />
{$liquidityGlobalChart}
</Panel>
<Panel style={{ height: '100%' }}>
<GlobalChart display="volume" />
{$volumeGlobalChart}
</Panel>
</GridRow>
)}
{below800 && (
<AutoColumn style={{ marginTop: '6px' }} gap="24px">
<Panel style={{ height: '100%', minHeight: '300px' }}>
<GlobalChart display="liquidity" />
{$liquidityGlobalChart}
</Panel>
</AutoColumn>
)}
Expand All @@ -137,7 +173,7 @@ function GlobalPage() {
</RowBetween>
</ListOptions>
<Panel style={{ marginTop: '6px', padding: '1.125rem 0 ' }}>
<TopTokenList tokens={allTokens} />
<TopTokenList tokens={allTokens} handlePrice={handlePriceUSDETH} />
</Panel>
<ListOptions gap="10px" style={{ marginTop: '2rem', marginBottom: '.5rem' }}>
<RowBetween>
Expand All @@ -146,7 +182,7 @@ function GlobalPage() {
</RowBetween>
</ListOptions>
<Panel style={{ marginTop: '6px', padding: '1.125rem 0 ' }}>
<PairList pairs={allPairs} />
<PairList pairs={allPairs} handlePrice={handlePriceUSDETH} />
</Panel>

<span>
Expand All @@ -155,7 +191,7 @@ function GlobalPage() {
</TYPE.main>
</span>
<Panel style={{ margin: '1rem 0' }}>
<TxnList transactions={transactions} />
<TxnList transactions={transactions} handlePrice={handlePriceUSDETH}/>
</Panel>
</div>
</ContentWrapper>
Expand Down
Loading