Pools: support quote_token fdv and market_cap values (#2546)

mocks/pools/pool.ts

@@ -9,8 +9,10 @@ export const base: Pool = {
   quote_token_address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
   quote_token_symbol: 'WETH',
   quote_token_icon_url: 'https://localhost:3000/secondary_utia.jpg',
-  fully_diluted_valuation_usd: '75486579078',
-  market_cap_usd: '139312819076.195',
+  base_token_fully_diluted_valuation_usd: '75486579078',
+  base_token_market_cap_usd: '139312819076.195',
+  quote_token_fully_diluted_valuation_usd: '486579078',
+  quote_token_market_cap_usd: '312819076.195',
   liquidity: '2099941.2238',
   dex: { id: 'sushiswap', name: 'SushiSwap' },
   fee: '0.03',

stubs/pools.ts

@@ -7,8 +7,10 @@ export const POOL = {
   quote_token_address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
   quote_token_symbol: 'WETH',
   quote_token_icon_url: 'https://coin-images.coingecko.com/coins/images/2518/small/weth.png?1696503332',
-  fully_diluted_valuation_usd: '15211385',
-  market_cap_usd: '15211385',
+  base_token_fully_diluted_valuation_usd: '15211385',
+  base_token_market_cap_usd: '15211385',
+  quote_token_fully_diluted_valuation_usd: '15211385',
+  quote_token_market_cap_usd: '15211385',
   liquidity: '394101.2428',
   dex: { id: 'uniswap_v2', name: 'Uniswap V2' },
   coin_gecko_terminal_url: 'https://www.geckoterminal.com/eth/pools/0x6a1041865b76d1dc33da0257582591227c57832c',

types/api/pools.tsx

@@ -15,8 +15,10 @@ export type Pool = {
   quote_token_address: string;
   quote_token_symbol: string;
   quote_token_icon_url: string | null;
-  fully_diluted_valuation_usd: string;
-  market_cap_usd: string;
+  base_token_fully_diluted_valuation_usd: string;
+  base_token_market_cap_usd: string;
+  quote_token_fully_diluted_valuation_usd: string;
+  quote_token_market_cap_usd: string;
   liquidity: string;
   dex: {
     id: string;

ui/pool/PoolInfo.tsx

@@ -18,7 +18,7 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => {
     <Grid
       columnGap={ 8 }
       rowGap={{ base: 1, lg: 3 }}
-      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 220px) minmax(0, 1fr)' }}
       overflow="hidden"
     >
       <DetailsInfoItem.Label
@@ -63,23 +63,47 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => {
         isLoading={ isPlaceholderData }
         hint="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation"
       >
-        FDV
+        Base token FDV
       </DetailsInfoItem.Label>
       <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
-          ${ Number(data.fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+          ${ Number(data.base_token_fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
         </Skeleton>
       </DetailsInfoItem.Value>
 
       <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
-        hint="Current market capitalization of the pool"
+        hint="Current market capitalization of the base token"
       >
-        Market cap
+        Base token market cap
       </DetailsInfoItem.Label>
       <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
-          ${ Number(data.market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+          ${ Number(data.base_token_market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation"
+      >
+        Quote token FDV
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          ${ Number(data.quote_token_fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Current market capitalization of the base token"
+      >
+        Quote token market cap
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          ${ Number(data.quote_token_market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
         </Skeleton>
       </DetailsInfoItem.Value>
 

ui/pools/PoolsListItem.tsx

@@ -30,20 +30,6 @@ const UserOpsListItem = ({ item, isLoading }: Props) => {
         <AddressEntity address={{ hash: item.contract_address }} noIcon isLoading={ isLoading }/>
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>FDV</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading }>
-          ${ Number(item.fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
-        </Skeleton>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Market cap</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading }>
-          ${ Number(item.market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
-        </Skeleton>
-      </ListItemMobileGrid.Value>
-
       <ListItemMobileGrid.Label isLoading={ isLoading }>Liquidity</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <Skeleton isLoaded={ !isLoading }>

ui/pools/PoolsTable.tsx

@@ -1,10 +1,9 @@
-import { Table, Tbody, Th, Tr, Flex } from '@chakra-ui/react';
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Pool } from 'types/api/pools';
 
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import Hint from 'ui/shared/Hint';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import PoolsTableItem from './PoolsTableItem';
@@ -23,17 +22,6 @@ const PoolsTable = ({ items, page, isLoading, top }: Props) => {
         <Tr>
           <Th width="70%">Pool</Th>
           <Th width="30%">DEX </Th>
-          <Th width="130px" isNumeric>
-            <Flex alignItems="center" justifyContent="end">
-              FDV
-              <Hint
-                label="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation"
-                boxSize={ 5 }
-                ml={ 1 }
-              />
-            </Flex>
-          </Th>
-          <Th width="130px" isNumeric>Market cap</Th>
           <Th width="130px" isNumeric>Liquidity</Th>
           <Th width="75px" isNumeric>View in</Th>
         </Tr>

ui/pools/PoolsTableItem.tsx

@@ -46,16 +46,6 @@ const PoolsTableItem = ({
       <Td>
         <Skeleton isLoaded={ !isLoading }>{ item.dex.name }</Skeleton>
       </Td>
-      <Td isNumeric>
-        <Skeleton isLoaded={ !isLoading }>
-          ${ Number(item.fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
-        </Skeleton>
-      </Td>
-      <Td isNumeric>
-        <Skeleton isLoaded={ !isLoading }>
-          ${ Number(item.market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
-        </Skeleton>
-      </Td>
       <Td isNumeric>
         <Skeleton isLoaded={ !isLoading }>
           ${ Number(item.liquidity).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }