ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add tvl to token details page (#4692)

Browse Source 
* add tvl to token details page

* remove mcap, add explanation of market entities
This commit is contained in:
Jordan Frankfurt 2022-09-21 15:35:17 -05:00 committed by GitHub
parent d3c4ca6e09
commit 7f2cc9a3e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Tokens/TokenDetails/StatsSection.tsx
View File

@ -42,17 +42,18 @@ function Stat({ value, title }: { value: NumericStat; title: ReactNode }) {
}
type StatsSectionProps = {
marketCap?: NumericStat
volume24H?: NumericStat
priceLow52W?: NumericStat
priceHigh52W?: NumericStat
TVL?: NumericStat
volume24H?: NumericStat
}
export default function StatsSection({ marketCap, volume24H, priceLow52W, priceHigh52W }: StatsSectionProps) {
if (marketCap || volume24H || priceLow52W || priceHigh52W) {
export default function StatsSection(props: StatsSectionProps) {
const { priceLow52W, priceHigh52W, TVL, volume24H } = props
if (TVL || volume24H || priceLow52W || priceHigh52W) {
return (
<TokenStatsSection>
<StatPair>
<Stat value={marketCap} title={<Trans>Market Cap</Trans>} />
<Stat value={TVL} title={<Trans>Total Value Locked</Trans>} />
<Stat value={volume24H} title={<Trans>24H volume</Trans>} />
</StatPair>
<StatPair>

15
src/graphql/data/Token.ts
View File

@ -25,7 +25,14 @@ const tokenPricesFragment = graphql`
}
}
`
/*
The difference between Token and TokenProject:
Token: an on-chain entity referring to a contract (e.g. uni token on ethereum 0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984)
TokenProject: an off-chain, aggregated entity that consists of a token and its bridged tokens (e.g. uni token on all chains)
TokenMarket and TokenProjectMarket then are market data entities for the above.
TokenMarket is per-chain market data for contracts pulled from the graph.
TokenProjectMarket is aggregated market data (aggregated over multiple dexes and centralized exchanges) that we get from coingecko.
*/
const tokenQuery = graphql`
query TokenQuery($contract: ContractInput!, $duration: HistoryDuration!, $skip: Boolean = false) {
tokenProjects(contracts: [$contract]) @skip(if: $skip) {
@ -37,6 +44,12 @@ const tokenQuery = graphql`
chain
address
symbol
market {
totalValueLocked {
value
currency
}
}
}
prices: markets(currencies: [USD]) {
...TokenPrices

21
src/pages/TokenDetails/index.tsx
View File

@ -149,8 +149,9 @@ export default function TokenDetails() {
})
: null
const tokenData = query.tokenProjects?.[0]
const tokenDetails = tokenData?.markets?.[0]
const tokenProject = query.tokenProjects?.[0]
const tokenProjectMarket = tokenProject?.markets?.[0]
const tokenMarket = tokenProject?.tokens[0].market
// TODO: Fix this logic to not automatically redirect on refresh, yet still catch invalid addresses
//const location = useLocation()
@ -166,18 +167,18 @@ export default function TokenDetails() {
<BreadcrumbNavLink to="/tokens">
<ArrowLeft size={14} /> Tokens
</BreadcrumbNavLink>
<ChartSection token={token} tokenData={tokenData} />
<ChartSection token={token} tokenData={tokenProject} />
<StatsSection
marketCap={tokenDetails?.marketCap?.value}
volume24H={tokenDetails?.volume1D?.value}
priceHigh52W={tokenDetails?.priceHigh52W?.value}
priceLow52W={tokenDetails?.priceLow52W?.value}
TVL={tokenMarket?.totalValueLocked?.value}
volume24H={tokenProjectMarket?.volume1D?.value}
priceHigh52W={tokenProjectMarket?.priceHigh52W?.value}
priceLow52W={tokenProjectMarket?.priceLow52W?.value}
/>
<AboutSection
address={token.address}
description={tokenData?.description}
homepageUrl={tokenData?.homepageUrl}
twitterName={tokenData?.twitterName}
description={tokenProject?.description}
homepageUrl={tokenProject?.homepageUrl}
twitterName={tokenProject?.twitterName}
/>
<AddressSection address={token.address} />
</LeftPanel>