Merge pull request #58 from invariant-labs/refactor-stats

refactor stats

src/components/Stats/PoolListItem/PoolListItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Grid, Typography, Box, useMediaQuery, Tooltip } from '@material-ui/core'
+import { Grid, Typography, Box, useMediaQuery } from '@material-ui/core'
 import { theme } from '@static/theme'
 import { formatNumbers, showPrefix } from '@consts/utils'
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'
@@ -14,9 +14,9 @@ export enum SortType {
   VOLUME_ASC,
   VOLUME_DESC,
   TVL_ASC,
-  TVL_DESC,
-  APY_ASC,
-  APY_DESC
+  TVL_DESC
+  // APY_ASC,
+  // APY_DESC
 }
 
 interface IProps {
@@ -52,13 +52,13 @@ const PoolListItem: React.FC<IProps> = ({
   tokenIndex,
   sortType,
   onSort,
-  hideBottomLine = false,
-  apy = 0,
-  apyData = {
-    fees: 0,
-    accumulatedFarmsAvg: 0,
-    accumulatedFarmsSingleTick: 0
-  }
+  hideBottomLine = false
+  // apy = 0,
+  // apyData = {
+  //   fees: 0,
+  //   accumulatedFarmsAvg: 0,
+  //   accumulatedFarmsSingleTick: 0
+  // }
 }) => {
   const classes = useStyle()
 
@@ -85,7 +85,7 @@ const PoolListItem: React.FC<IProps> = ({
               </Typography>
             </Grid>
           </Grid>
-          {!isXs ? (
+          {/* {!isXs ? (
             <Typography>
               {`${apy > 1000 ? '>1000' : apy.toFixed(2)}%`}
               <Tooltip
@@ -122,7 +122,7 @@ const PoolListItem: React.FC<IProps> = ({
                 <span className={classes.activeLiquidityIcon}>i</span>
               </Tooltip>
             </Typography>
-          ) : null}
+          ) : null} */}
           <Typography>{fee}%</Typography>
           <Typography>{`$${formatNumbers()(volume.toString())}${showPrefix(volume)}`}</Typography>
           <Typography>{`$${formatNumbers()(TVL.toString())}${showPrefix(TVL)}`}</Typography>
@@ -150,7 +150,7 @@ const PoolListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!isXs ? (
+          {/* {!isXs ? (
             <Typography
               style={{ cursor: 'pointer' }}
               onClick={() => {
@@ -167,7 +167,7 @@ const PoolListItem: React.FC<IProps> = ({
                 <ArrowDropDownIcon className={classes.icon} />
               ) : null}
             </Typography>
-          ) : null}
+          ) : null} */}
           <Typography
             style={{ cursor: 'pointer' }}
             onClick={() => {

src/components/Stats/PoolListItem/style.ts

@@ -5,7 +5,7 @@ const useStyle = makeStyles(() => ({
   container: {
     color: colors.white.main,
     display: 'grid',
-    gridTemplateColumns: '5% 40% 15% 10% 17% 15% 15% 20%',
+    gridTemplateColumns: '5% 40% 20% 20% 20%',
     padding: '18px 0',
 
     backgroundColor: colors.invariant.component,

src/components/Stats/TokenListItem/TokenListItem.tsx

@@ -11,8 +11,8 @@ export enum SortType {
   NAME_DESC,
   PRICE_ASC,
   PRICE_DESC,
-  CHANGE_ASC,
-  CHANGE_DESC,
+  // CHANGE_ASC,
+  // CHANGE_DESC,
   VOLUME_ASC,
   VOLUME_DESC,
   TVL_ASC,
@@ -26,7 +26,7 @@ interface IProps {
   name?: string
   symbol?: string
   price?: number
-  priceChange?: number
+  // priceChange?: number
   volume?: number
   TVL?: number
   sortType?: SortType
@@ -41,15 +41,15 @@ const TokenListItem: React.FC<IProps> = ({
   name = 'Bitcoin',
   symbol = 'BTCIcon',
   price = 0,
-  priceChange = 0,
+  // priceChange = 0,
   volume = 0,
   TVL = 0,
   sortType,
   onSort,
   hideBottomLine = false
 }) => {
   const classes = useStyles()
-  const isNegative = priceChange < 0
+  // const isNegative = priceChange < 0
 
   const isXDown = useMediaQuery(theme.breakpoints.down('sm'))
   const hideName = useMediaQuery(theme.breakpoints.down('xs'))
@@ -70,11 +70,11 @@ const TokenListItem: React.FC<IProps> = ({
             </Typography>
           </Grid>
           <Typography>{`~$${formatNumbers()(price.toString())}${showPrefix(price)}`}</Typography>
-          {!hideName && (
+          {/* {!hideName && (
             <Typography style={{ color: isNegative ? colors.invariant.Error : colors.green.main }}>
               {isNegative ? `${priceChange.toFixed(2)}%` : `+${priceChange.toFixed(2)}%`}
             </Typography>
-          )}
+          )} */}
           <Typography>{`$${formatNumbers()(volume.toString())}${showPrefix(volume)}`}</Typography>
           <Typography>{`$${formatNumbers()(TVL.toString())}${showPrefix(TVL)}`}</Typography>
         </Grid>
@@ -120,7 +120,7 @@ const TokenListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!hideName && (
+          {/* {!hideName && (
             <Typography
               style={{ cursor: 'pointer' }}
               onClick={() => {
@@ -137,7 +137,7 @@ const TokenListItem: React.FC<IProps> = ({
                 <ArrowDropDownIcon className={classes.icon} />
               ) : null}
             </Typography>
-          )}
+          )} */}
           <Typography
             style={{ cursor: 'pointer' }}
             onClick={() => {

src/components/Stats/TokenListItem/style.ts

@@ -4,7 +4,7 @@ import { typography, colors } from '@static/theme'
 export const useStyles = makeStyles(theme => ({
   container: {
     display: 'grid',
-    gridTemplateColumns: '5% 35% 15% 15% 15% 15%',
+    gridTemplateColumns: '5% 35% 20% 20% 20%',
     padding: '18px 0 ',
     backgroundColor: colors.invariant.component,
     borderBottom: `1px solid ${colors.invariant.light}`,

src/components/Stats/TokensList/TokensList.tsx

@@ -10,7 +10,7 @@ export interface ITokensListData {
   name: string
   symbol: string
   price: number
-  priceChange: number
+  // priceChange: number
   volume: number
   TVL: number
 }
@@ -44,10 +44,10 @@ const TokensList: React.FC<ITokensList> = ({ data }) => {
         return data.sort((a, b) => a.price - b.price)
       case SortType.PRICE_DESC:
         return data.sort((a, b) => b.price - a.price)
-      case SortType.CHANGE_ASC:
-        return data.sort((a, b) => a.priceChange - b.priceChange)
-      case SortType.CHANGE_DESC:
-        return data.sort((a, b) => b.priceChange - a.priceChange)
+      // case SortType.CHANGE_ASC:
+      //   return data.sort((a, b) => a.priceChange - b.priceChange)
+      // case SortType.CHANGE_DESC:
+      //   return data.sort((a, b) => b.priceChange - a.priceChange)
       case SortType.VOLUME_ASC:
         return data.sort((a, b) => (a.volume === b.volume ? a.TVL - b.TVL : a.volume - b.volume))
       case SortType.VOLUME_DESC:
@@ -95,7 +95,7 @@ const TokensList: React.FC<ITokensList> = ({ data }) => {
             name={token.name}
             symbol={token.symbol}
             price={token.price}
-            priceChange={token.priceChange}
+            // priceChange={token.priceChange}
             volume={token.volume}
             TVL={token.TVL}
             hideBottomLine={pages === 1 && index + 1 === data.length}

src/containers/WrappedStats/WrappedStats.tsx

@@ -23,8 +23,8 @@ import { actions } from '@reducers/stats'
 import loader from '@static/gif/loader.gif'
 import useStyles from './styles'
 import EmptyPlaceholder from '@components/EmptyPlaceholder/EmptyPlaceholder'
-import { network } from '@selectors/solanaConnection'
-import { NetworkType } from '@consts/static'
+// import { network } from '@selectors/solanaConnection'
+// import { NetworkType } from '@consts/static'
 // import { farms } from '@selectors/farms'
 // import { actions as farmsActions } from '@reducers/farms'
 
@@ -41,7 +41,7 @@ export const WrappedStats: React.FC = () => {
   const volumePlotData = useSelector(volumePlot)
   const liquidityPlotData = useSelector(liquidityPlot)
   const isLoadingStats = useSelector(isLoading)
-  const currentNetwork = useSelector(network)
+  // const currentNetwork = useSelector(network)
   // const allFarms = useSelector(farms)
 
   // useEffect(() => {
@@ -90,11 +90,7 @@ export const WrappedStats: React.FC = () => {
 
   return (
     <Grid container className={classes.wrapper} direction='column'>
-      {currentNetwork === NetworkType.TESTNET ? (
-        <Grid container direction='column' alignItems='center'>
-          <EmptyPlaceholder desc={'We have not started collecting statistics yet'} />
-        </Grid>
-      ) : isLoadingStats ? (
+      {isLoadingStats ? (
         <img src={loader} className={classes.loading} />
       ) : liquidityPlotData.length === 0 ? (
         <Grid container direction='column' alignItems='center'>
@@ -106,36 +102,36 @@ export const WrappedStats: React.FC = () => {
           <Grid container className={classes.plotsRow} wrap='nowrap'>
             <Volume
               volume={volume24h.value}
-              percentVolume={volume24h.change}
+              percentVolume={volume24h.change ?? 0}
               data={volumePlotData}
               className={classes.plot}
             />
             <Liquidity
               liquidityVolume={tvl24h.value}
-              liquidityPercent={tvl24h.change}
+              liquidityPercent={tvl24h.change ?? 0}
               data={liquidityPlotData}
               className={classes.plot}
             />
           </Grid>
           <Grid className={classes.row}>
             <VolumeBar
               volume={volume24h.value}
-              percentVolume={volume24h.change}
+              percentVolume={volume24h.change ?? 0}
               tvlVolume={tvl24h.value}
-              percentTvl={tvl24h.change}
+              percentTvl={tvl24h.change ?? 0}
               feesVolume={fees24h.value}
-              percentFees={fees24h.change}
+              percentFees={fees24h.change ?? 0}
             />
           </Grid>
           <Typography className={classes.subheader}>Top tokens</Typography>
           <Grid container className={classes.row}>
             <TokensList
               data={tokensList.map(tokenData => ({
-                icon: tokenData.tokenDetails.logoURI,
-                name: tokenData.tokenDetails.name,
-                symbol: tokenData.tokenDetails.symbol,
+                icon: tokenData.tokenDetails?.logoURI,
+                name: tokenData.tokenDetails?.name,
+                symbol: tokenData.tokenDetails?.symbol,
                 price: tokenData.price,
-                priceChange: tokenData.priceChange,
+                // priceChange: tokenData.priceChange,
                 volume: tokenData.volume24,
                 TVL: tokenData.tvl
               }))}
@@ -144,10 +140,10 @@ export const WrappedStats: React.FC = () => {
           <Typography className={classes.subheader}>Top pools</Typography>
           <PoolList
             data={poolsList.map(poolData => ({
-              symbolFrom: poolData.tokenXDetails.symbol,
-              symbolTo: poolData.tokenYDetails.symbol,
-              iconFrom: poolData.tokenXDetails.logoURI,
-              iconTo: poolData.tokenYDetails.logoURI,
+              symbolFrom: poolData.tokenXDetails?.symbol,
+              symbolTo: poolData.tokenYDetails?.symbol,
+              iconFrom: poolData.tokenXDetails?.logoURI,
+              iconTo: poolData.tokenYDetails?.logoURI,
               volume: poolData.volume24,
               TVL: poolData.tvl,
               fee: poolData.fee,

src/store/consts/static.ts

@@ -281,3 +281,59 @@ export const ADDRESSES_TO_REVERS_TOKEN_PAIRS: string[] = [
 ] // ETH
 
 export type PositionOpeningMethod = 'range' | 'concentration'
+
+export interface SnapshotValueData {
+  tokenBNFromBeginning: string
+  usdValue24: number
+}
+
+export interface PoolSnapshot {
+  timestamp: number
+  volumeX: SnapshotValueData
+  volumeY: SnapshotValueData
+  liquidityX: SnapshotValueData
+  liquidityY: SnapshotValueData
+  feeX: SnapshotValueData
+  feeY: SnapshotValueData
+}
+
+export interface FullSnap {
+  volume24: {
+    value: number
+    change: number
+  }
+  tvl24: {
+    value: number
+    change: number
+  }
+  fees24: {
+    value: number
+    change: number
+  }
+  tokensData: TokenStatsDataWithString[]
+  poolsData: PoolStatsDataWithString[]
+  volumePlot: TimeData[]
+  liquidityPlot: TimeData[]
+}
+
+export interface TokenStatsDataWithString {
+  address: string
+  price: number
+  volume24: number
+  tvl: number
+}
+
+export interface TimeData {
+  timestamp: number
+  value: number
+}
+
+export interface PoolStatsDataWithString {
+  poolAddress: string
+  tokenX: string
+  tokenY: string
+  fee: number
+  volume24: number
+  tvl: number
+  apy: number
+}

src/store/consts/utils.ts

@@ -19,6 +19,7 @@ import { Token as SPLToken } from '@solana/spl-token'
 import {
   BTC_DEV,
   BTC_TEST,
+  FullSnap,
   MAX_U64,
   MOON_TEST,
   NetworkType,
@@ -1147,3 +1148,11 @@ export const getExplorer = (networkType: NetworkType) => {
 }
 
 export const createLoaderKey = () => (new Date().getMilliseconds() + Math.random()).toString()
+
+export const getFullSnap = async (name: string): Promise<FullSnap> => {
+  const { data } = await axios.get<FullSnap>(
+    `https://stats.invariant.app/svm/full_snap/eclipse-${name}`
+  )
+
+  return data
+}

src/store/reducers/stats.ts

@@ -15,7 +15,7 @@ export interface Value24H {
 export interface TokenStatsData {
   address: PublicKey
   price: number
-  priceChange: number
+  // priceChange: number
   volume24: number
   tvl: number
 }