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

* add tvl to token details page

* remove mcap, add explanation of market entities

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -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>

src/graphql/data/Token.ts

@@ -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

src/pages/TokenDetails/index.tsx

@@ -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>