Skip to content

F
frontend
Commit 079cffa4 authored by Igor Stuev's avatar Igor Stuev Committed by GitHub
Browse files
Options

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

parent 3c318f7e
Show whitespace changes
Inline Side-by-side
Showing with 43 additions and 49 deletions
mocks/pools/pool.ts
View file @ 079cffa4
...@@ -9,8 +9,10 @@ export const base: Pool = { ...@@ -9,8 +9,10 @@ export const base: Pool = {
quote_token_address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', quote_token_address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
quote_token_symbol: 'WETH', quote_token_symbol: 'WETH',
quote_token_icon_url: 'https://localhost:3000/secondary_utia.jpg', quote_token_icon_url: 'https://localhost:3000/secondary_utia.jpg',
fully_diluted_valuation_usd: '75486579078', base_token_fully_diluted_valuation_usd: '75486579078',
market_cap_usd: '139312819076.195', base_token_market_cap_usd: '139312819076.195',
quote_token_fully_diluted_valuation_usd: '486579078',
quote_token_market_cap_usd: '312819076.195',
liquidity: '2099941.2238', liquidity: '2099941.2238',
dex: { id: 'sushiswap', name: 'SushiSwap' }, dex: { id: 'sushiswap', name: 'SushiSwap' },
fee: '0.03', fee: '0.03',
......
stubs/pools.ts
View file @ 079cffa4
...@@ -7,8 +7,10 @@ export const POOL = { ...@@ -7,8 +7,10 @@ export const POOL = {
quote_token_address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', quote_token_address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
quote_token_symbol: 'WETH', quote_token_symbol: 'WETH',
quote_token_icon_url: 'https://coin-images.coingecko.com/coins/images/2518/small/weth.png?1696503332', quote_token_icon_url: 'https://coin-images.coingecko.com/coins/images/2518/small/weth.png?1696503332',
fully_diluted_valuation_usd: '15211385', base_token_fully_diluted_valuation_usd: '15211385',
market_cap_usd: '15211385', base_token_market_cap_usd: '15211385',
quote_token_fully_diluted_valuation_usd: '15211385',
quote_token_market_cap_usd: '15211385',
liquidity: '394101.2428', liquidity: '394101.2428',
dex: { id: 'uniswap_v2', name: 'Uniswap V2' }, dex: { id: 'uniswap_v2', name: 'Uniswap V2' },
coin_gecko_terminal_url: 'https://www.geckoterminal.com/eth/pools/0x6a1041865b76d1dc33da0257582591227c57832c', coin_gecko_terminal_url: 'https://www.geckoterminal.com/eth/pools/0x6a1041865b76d1dc33da0257582591227c57832c',
......
types/api/pools.tsx
View file @ 079cffa4
...@@ -15,8 +15,10 @@ export type Pool = { ...@@ -15,8 +15,10 @@ export type Pool = {
quote_token_address: string; quote_token_address: string;
quote_token_symbol: string; quote_token_symbol: string;
quote_token_icon_url: string | null; quote_token_icon_url: string | null;
fully_diluted_valuation_usd: string; base_token_fully_diluted_valuation_usd: string;
market_cap_usd: string; base_token_market_cap_usd: string;
quote_token_fully_diluted_valuation_usd: string;
quote_token_market_cap_usd: string;
liquidity: string; liquidity: string;
dex: { dex: {
id: string; id: string;
......
ui/pool/PoolInfo.tsx
View file @ 079cffa4
...@@ -18,7 +18,7 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => { ...@@ -18,7 +18,7 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => {
<Grid <Grid
columnGap={ 8 } columnGap={ 8 }
rowGap={{ base: 1, lg: 3 }} 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" overflow="hidden"
> >
<DetailsInfoItem.Label <DetailsInfoItem.Label
...@@ -63,23 +63,47 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => { ...@@ -63,23 +63,47 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => {
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation" hint="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation"
> >
FDV Base token FDV
</DetailsInfoItem.Label> </DetailsInfoItem.Label>
<DetailsInfoItem.Value> <DetailsInfoItem.Value>
<Skeleton isLoaded={ !isPlaceholderData }> <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> </Skeleton>
</DetailsInfoItem.Value> </DetailsInfoItem.Value>
<DetailsInfoItem.Label <DetailsInfoItem.Label
isLoading={ isPlaceholderData } 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.Label>
<DetailsInfoItem.Value> <DetailsInfoItem.Value>
<Skeleton isLoaded={ !isPlaceholderData }> <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> </Skeleton>
</DetailsInfoItem.Value> </DetailsInfoItem.Value>
......
ui/pools/PoolsListItem.tsx
View file @ 079cffa4
...@@ -30,20 +30,6 @@ const UserOpsListItem = ({ item, isLoading }: Props) => { ...@@ -30,20 +30,6 @@ const UserOpsListItem = ({ item, isLoading }: Props) => {
<AddressEntity address={{ hash: item.contract_address }} noIcon isLoading={ isLoading }/> <AddressEntity address={{ hash: item.contract_address }} noIcon isLoading={ isLoading }/>
</ListItemMobileGrid.Value> </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.Label isLoading={ isLoading }>Liquidity</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading }> <Skeleton isLoaded={ !isLoading }>
......
ui/pools/PoolsTable.tsx
View file @ 079cffa4
import { Table, Tbody, Th, Tr, Flex } from '@chakra-ui/react'; import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { Pool } from 'types/api/pools'; import type { Pool } from 'types/api/pools';
import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
import Hint from 'ui/shared/Hint';
import { default as Thead } from 'ui/shared/TheadSticky'; import { default as Thead } from 'ui/shared/TheadSticky';
import PoolsTableItem from './PoolsTableItem'; import PoolsTableItem from './PoolsTableItem';
...@@ -23,17 +22,6 @@ const PoolsTable = ({ items, page, isLoading, top }: Props) => { ...@@ -23,17 +22,6 @@ const PoolsTable = ({ items, page, isLoading, top }: Props) => {
<Tr> <Tr>
<Th width="70%">Pool</Th> <Th width="70%">Pool</Th>
<Th width="30%">DEX </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="130px" isNumeric>Liquidity</Th>
<Th width="75px" isNumeric>View in</Th> <Th width="75px" isNumeric>View in</Th>
</Tr> </Tr>
......
ui/pools/PoolsTableItem.tsx
View file @ 079cffa4
...@@ -46,16 +46,6 @@ const PoolsTableItem = ({ ...@@ -46,16 +46,6 @@ const PoolsTableItem = ({
<Td> <Td>
<Skeleton isLoaded={ !isLoading }>{ item.dex.name }</Skeleton> <Skeleton isLoaded={ !isLoading }>{ item.dex.name }</Skeleton>
</Td> </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> <Td isNumeric>
<Skeleton isLoaded={ !isLoading }> <Skeleton isLoaded={ !isLoading }>
${ Number(item.liquidity).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) } ${ Number(item.liquidity).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment