Merge pull request #301 from invariant-labs/dev

Update staging env

src/components/Header/HeaderButton/YourPointsButton.tsx

@@ -7,7 +7,7 @@ import YourPointsModal from '@components/Modals/YourPointsModal/YourPointsModals
 import { theme } from '@static/theme'
 import { useSelector } from 'react-redux'
 import { leaderboardSelectors } from '@store/selectors/leaderboard'
-import { formatLargeNumber } from '@utils/formatBigNumber'
+import { formatLargeNumber } from '@utils/formatLargeNumber'
 import { LEADERBOARD_DECIMAL } from '@pages/LeaderboardPage/config'
 import { printBN, trimZeros } from '@utils/utils'
 import { BN } from '@coral-xyz/anchor'

src/components/Modals/YourPointsModal/YourPointsModals.tsx

@@ -7,7 +7,7 @@ import { leaderboardSelectors } from '@store/selectors/leaderboard'
 import { status } from '@store/selectors/solanaWallet'
 import { Status } from '@store/reducers/solanaWallet'
 import { colors, typography } from '@static/theme'
-import { formatLargeNumber } from '@utils/formatBigNumber'
+import { formatLargeNumber } from '@utils/formatLargeNumber'
 import { LEADERBOARD_DECIMAL } from '@pages/LeaderboardPage/config'
 import { printBN, trimZeros } from '@utils/utils'
 import { BN } from '@coral-xyz/anchor'

src/components/PopularPools/Card/Card.tsx

@@ -50,11 +50,19 @@ const Card: React.FC<ICard> = ({
   const airdropIconRef = useRef<any>(null)
 
   const [isPromotedPoolPopoverOpen, setIsPromotedPoolPopoverOpen] = useState(false)
-  const { promotedPools, pointsPerSecond } = useSelector(leaderboardSelectors.config)
+  const { promotedPools } = useSelector(leaderboardSelectors.config)
   const apr = apyToApr(apy ?? 0)
 
-  const isPromoted = useMemo(() => {
-    return promotedPools?.includes(poolAddress?.toString() ?? '')
+  const { isPromoted, pointsPerSecond } = useMemo(() => {
+    if (!poolAddress) {
+      return { isPromoted: false, pointsPerSecond: '00' }
+    }
+
+    const promotedPool = promotedPools.find(pool => pool.address === poolAddress.toString())
+    return {
+      isPromoted: Boolean(promotedPool),
+      pointsPerSecond: promotedPool?.pointsPerSecond || '00'
+    }
   }, [promotedPools, poolAddress])
 
   const handleOpenPosition = () => {

src/components/Stats/Liquidity/Liquidity.tsx

@@ -6,7 +6,8 @@ import { colors, typography } from '@static/theme'
 import { useStyles } from './style'
 import { TimeData } from '@store/reducers/stats'
 import { Grid, Typography } from '@mui/material'
-import { formatNumber } from '@utils/utils'
+import { formatNumber, trimZeros } from '@utils/utils'
+import { formatLargeNumber } from '@utils/formatLargeNumber'
 
 interface LiquidityInterface {
   liquidityPercent: number | null
@@ -16,17 +17,17 @@ interface LiquidityInterface {
   isLoading: boolean
 }
 
-const GRAPH_ENTRIES = 30
+// const GRAPH_ENTRIES = 30
 
-const generateMockData = () => {
-  return Array.from({ length: GRAPH_ENTRIES }, (_, index) => ({
-    timestamp:
-      Math.floor(Date.now() / (1000 * 60 * 60 * 24)) * (1000 * 60 * 60 * 24) +
-      1000 * 60 * 60 * 12 -
-      (GRAPH_ENTRIES - index) * (1000 * 60 * 60 * 24),
-    value: Math.random() * 10000
-  }))
-}
+// const generateMockData = () => {
+//   return Array.from({ length: GRAPH_ENTRIES }, (_, index) => ({
+//     timestamp:
+//       Math.floor(Date.now() / (1000 * 60 * 60 * 24)) * (1000 * 60 * 60 * 24) +
+//       1000 * 60 * 60 * 12 -
+//       (GRAPH_ENTRIES - index) * (1000 * 60 * 60 * 24),
+//     value: Math.random() * 10000
+//   }))
+// }
 
 const Liquidity: React.FC<LiquidityInterface> = ({
   liquidityPercent,
@@ -75,7 +76,7 @@ const Liquidity: React.FC<LiquidityInterface> = ({
           data={[
             {
               id: 'liquidity',
-              data: (isLoading ? generateMockData() : data).map(({ timestamp, value }) => ({
+              data: data.map(({ timestamp, value }) => ({
                 x: new Date(timestamp).toLocaleDateString('en-GB'),
                 y: value
               }))
@@ -108,7 +109,7 @@ const Liquidity: React.FC<LiquidityInterface> = ({
                   style={{ fill: colors.invariant.textGrey, ...typography.tiny2 }}
                   textAnchor='start'
                   dominantBaseline='center'>
-                  {formatNumber(value, true)}
+                  {trimZeros(formatLargeNumber(value))}
                 </text>
               </g>
             )

src/components/Stats/Volume/Volume.tsx

@@ -7,7 +7,8 @@ import { useStyles } from './style'
 import { TimeData } from '@store/reducers/stats'
 import { Grid, Typography, useMediaQuery } from '@mui/material'
 import { Box } from '@mui/system'
-import { formatNumber } from '@utils/utils'
+import { formatNumber, trimZeros } from '@utils/utils'
+import { formatLargeNumber } from '@utils/formatLargeNumber'
 
 interface StatsInterface {
   percentVolume: number | null
@@ -17,17 +18,17 @@ interface StatsInterface {
   isLoading: boolean
 }
 
-const GRAPH_ENTRIES = 30
+// const GRAPH_ENTRIES = 30
 
-const generateMockData = () => {
-  return Array.from({ length: GRAPH_ENTRIES }, (_, index) => ({
-    timestamp:
-      Math.floor(Date.now() / (1000 * 60 * 60 * 24)) * (1000 * 60 * 60 * 24) +
-      1000 * 60 * 60 * 12 -
-      (GRAPH_ENTRIES - index) * (1000 * 60 * 60 * 24),
-    value: Math.random() * 10000
-  }))
-}
+// const generateMockData = () => {
+//   return Array.from({ length: GRAPH_ENTRIES }, (_, index) => ({
+//     timestamp:
+//       Math.floor(Date.now() / (1000 * 60 * 60 * 24)) * (1000 * 60 * 60 * 24) +
+//       1000 * 60 * 60 * 12 -
+//       (GRAPH_ENTRIES - index) * (1000 * 60 * 60 * 24),
+//     value: Math.random() * 10000
+//   }))
+// }
 
 const Volume: React.FC<StatsInterface> = ({
   percentVolume,
@@ -88,9 +89,7 @@ const Volume: React.FC<StatsInterface> = ({
       <div className={classes.barContainer}>
         <ResponsiveBar
           margin={{ top: 30, bottom: 30, left: 30 }}
-          data={
-            isLoading ? generateMockData() : (data as Array<{ timestamp: number; value: number }>)
-          }
+          data={data as Array<{ timestamp: number; value: number }>}
           keys={['value']}
           indexBy='timestamp'
           axisBottom={{
@@ -123,7 +122,7 @@ const Volume: React.FC<StatsInterface> = ({
                   style={{ fill: colors.invariant.textGrey, ...typography.tiny2 }}
                   textAnchor='start'
                   dominantBaseline='center'>
-                  {formatNumber(value, true)}
+                  {trimZeros(formatLargeNumber(value))}
                 </text>
               </g>
             )

src/containers/WrappedPoolList/WrappedPoolList.tsx

@@ -12,7 +12,7 @@ import { network } from '@store/selectors/solanaConnection'
 import { actions } from '@store/reducers/stats'
 import { actions as leaderboardActions } from '@store/reducers/leaderboard'
 import LiquidityPoolList from '@components/LiquidityPoolList/LiquidityPoolList'
-import { getPointsPerSecond, getPromotedPools } from '@store/selectors/leaderboard'
+import { getPromotedPools } from '@store/selectors/leaderboard'
 
 export const WrappedPoolList: React.FC = () => {
   const { classes } = useStyles()
@@ -22,7 +22,6 @@ export const WrappedPoolList: React.FC = () => {
   const currentNetwork = useSelector(network)
   const [searchPoolsValue, setSearchPoolsValue] = useState<string>('')
   const isLoadingStats = useSelector(isLoading)
-  const pointsPerSecond = useSelector(getPointsPerSecond)
   const promotedPools = useSelector(getPromotedPools)
   const filteredPoolsList = useMemo(() => {
     return poolsList.filter(poolData => {
@@ -117,8 +116,10 @@ export const WrappedPoolList: React.FC = () => {
           isUnknownFrom: poolData.tokenXDetails?.isUnknown ?? false,
           isUnknownTo: poolData.tokenYDetails?.isUnknown ?? false,
           poolAddress: poolData.poolAddress.toString(),
-          pointsPerSecond: pointsPerSecond,
-          isPromoted: promotedPools.some(pool => pool === poolData.poolAddress.toString())
+          pointsPerSecond:
+            promotedPools.find(pool => pool.address === poolData.poolAddress.toString())
+              ?.pointsPerSecond ?? '00',
+          isPromoted: promotedPools.some(pool => pool.address === poolData.poolAddress.toString())
         }))}
         network={currentNetwork}
         copyAddressHandler={copyAddressHandler}

src/containers/WrappedStats/WrappedStats.tsx

@@ -26,7 +26,7 @@ import SearchIcon from '@static/svg/lupaDark.svg'
 import { actions as leaderboardActions } from '@store/reducers/leaderboard'
 import { actions as snackbarActions } from '@store/reducers/snackbars'
 import { VariantType } from 'notistack'
-import { getPointsPerSecond, getPromotedPools } from '@store/selectors/leaderboard'
+import { getPromotedPools } from '@store/selectors/leaderboard'
 
 export const WrappedStats: React.FC = () => {
   const { classes } = useStyles()
@@ -42,7 +42,6 @@ export const WrappedStats: React.FC = () => {
   const liquidityPlotData = useSelector(liquidityPlot)
   const isLoadingStats = useSelector(isLoading)
   const currentNetwork = useSelector(network)
-  const pointsPerSecond = useSelector(getPointsPerSecond)
   const promotedPools = useSelector(getPromotedPools)
   const [searchTokensValue, setSearchTokensValue] = useState<string>('')
   const [searchPoolsValue, setSearchPoolsValue] = useState<string>('')
@@ -215,8 +214,12 @@ export const WrappedStats: React.FC = () => {
               isUnknownFrom: poolData.tokenXDetails?.isUnknown ?? false,
               isUnknownTo: poolData.tokenYDetails?.isUnknown ?? false,
               poolAddress: poolData.poolAddress.toString(),
-              pointsPerSecond: pointsPerSecond,
-              isPromoted: promotedPools.some(pool => pool === poolData.poolAddress.toString())
+              pointsPerSecond:
+                promotedPools.find(pool => pool.address === poolData.poolAddress.toString())
+                  ?.pointsPerSecond ?? '00',
+              isPromoted: promotedPools.some(
+                pool => pool.address === poolData.poolAddress.toString()
+              )
             }))}
             network={currentNetwork}
             copyAddressHandler={copyAddressHandler}

src/pages/LeaderboardPage/components/LeaderboardWrapper.tsx

@@ -41,7 +41,9 @@ export const LeaderboardWrapper: React.FC<LeaderboardWrapperProps> = ({
   const promotedPools = useSelector(getPromotedPools)
   const poolsList = useSelector(poolsStatsWithTokensDetails)
   const promotedPoolsData = promotedPools
-    .map(pool => poolsList.find(poolWithData => poolWithData.poolAddress.toString() === pool))
+    .map(pool =>
+      poolsList.find(poolWithData => poolWithData.poolAddress.toString() === pool.address)
+    )
     .filter(poolData => !!poolData)
   useEffect(() => {
     dispatch(actions.getLeaderboardData({ page: 1, itemsPerPage }))

src/store/reducers/leaderboard.ts

@@ -2,6 +2,7 @@ import { BN } from '@coral-xyz/anchor'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { PublicKey } from '@solana/web3.js'
 import { PayloadType } from '@store/consts/types'
+import { IConfigResponse, IPromotedPoolsResponse } from '@store/sagas/leaderboard'
 
 export interface UserStats {
   points: BN
@@ -21,12 +22,7 @@ export interface ILeaderboardStore {
   currentPage: number
   totalItems: number
   itemsPerPage: number
-  config: {
-    refreshTime: number
-    pointsPerSecond: string
-    pointsDecimal: number
-    promotedPools: string[]
-  }
+  config: IConfigResponse
 }
 
 export const defaultState: ILeaderboardStore = {
@@ -37,7 +33,7 @@ export const defaultState: ILeaderboardStore = {
   currentPage: 1,
   totalItems: 0,
   itemsPerPage: 25,
-  config: { refreshTime: 0, pointsPerSecond: '0', pointsDecimal: 0, promotedPools: [] }
+  config: { refreshTime: 0, pointsDecimal: 0, promotedPools: [] }
 }
 
 export const leaderboardSliceName = 'leaderboard'
@@ -85,14 +81,12 @@ const leaderboardSlice = createSlice({
       state,
       action: PayloadAction<{
         refreshTime: number
-        pointsPerSecond: string
         pointsDecimal: number
-        promotedPools: string[]
+        promotedPools: IPromotedPoolsResponse[]
       }>
     ) {
       state.config = {
         refreshTime: action.payload.refreshTime,
-        pointsPerSecond: action.payload.pointsPerSecond,
         pointsDecimal: action.payload.pointsDecimal,
         promotedPools: action.payload.promotedPools ?? []
       }

src/store/sagas/leaderboard.ts

@@ -9,11 +9,14 @@ interface IResponse {
   leaderboard: UserStats[]
   totalItems: number
 }
-interface IConfigResponse {
-  refreshTime: number
+export interface IPromotedPoolsResponse {
+  address: string
   pointsPerSecond: string
+}
+export interface IConfigResponse {
+  refreshTime: number
   pointsDecimal: number
-  promotedPools: string[]
+  promotedPools: IPromotedPoolsResponse[]
 }
 async function fetchLeaderboardData(
   network: string,

src/store/selectors/leaderboard.ts

@@ -7,6 +7,7 @@ import {
 } from '../reducers/leaderboard'
 import { AnyProps, keySelectors } from './helpers'
 import { PublicKey } from '@solana/web3.js'
+import { IPromotedPoolsResponse } from '@store/sagas/leaderboard'
 
 const store = (s: AnyProps) => s[leaderboardSliceName] as ILeaderboardStore
 
@@ -42,23 +43,12 @@ export const leaderboardSelectors = {
   config
 }
 
-export const getPointsPerSecond = createSelector(
-  config,
-  (config: {
-    refreshTime: number
-    pointsPerSecond: string
-    pointsDecimal: number
-    promotedPools: string[]
-  }) => config.pointsPerSecond
-)
-
 export const getPromotedPools = createSelector(
   config,
   (config: {
     refreshTime: number
-    pointsPerSecond: string
     pointsDecimal: number
-    promotedPools: string[]
+    promotedPools: IPromotedPoolsResponse[]
   }) => config.promotedPools
 )
 

src/utils/formatBigNumber.ts → src/utils/formatLargeNumber.ts

@@ -1,3 +1,5 @@
+import { trimZeros } from './utils'
+
 export const formatLargeNumber = (number: number) => {
   const suffixes = ['', 'K', 'M', 'B', 'T', 'Q']
 
@@ -8,5 +10,5 @@ export const formatLargeNumber = (number: number) => {
   const suffixIndex = Math.floor(Math.log10(number) / 3)
   const scaledNumber = number / Math.pow(1000, suffixIndex)
 
-  return `${scaledNumber.toFixed(1)}${suffixes[suffixIndex]}`
+  return `${trimZeros(scaledNumber.toFixed(1))}${suffixes[suffixIndex]}`
 }