Implement your position rewarded idication

src/components/Modals/PromotedPoolPopover/PromotedPoolPopover.tsx

@@ -2,13 +2,15 @@ import { BN } from '@coral-xyz/anchor'
 import useStyles from './style'
 import { Popover, Typography } from '@mui/material'
 import { formatNumberWithCommas, printBN } from '@utils/utils'
+import { LEADERBOARD_DECIMAL } from '@pages/LeaderboardPage/config'
 
 export interface IPromotedPoolPopover {
   open: boolean
   anchorEl: HTMLElement | null
   onClose: () => void
-  apr: number
-  apy: number
+  apr?: BN
+  apy?: number
+  estPoints?: BN
   points: BN
 }
 
@@ -18,6 +20,7 @@ export const PromotedPoolPopover = ({
   anchorEl,
   apr,
   apy,
+  estPoints,
   points
 }: IPromotedPoolPopover) => {
   const { classes } = useStyles()
@@ -57,18 +60,30 @@ export const PromotedPoolPopover = ({
               {formatNumberWithCommas(printBN(points, 0))}
             </Typography>
           </div>
-          <div className={classes.insideBox}>
-            <Typography className={classes.greyText}>
-              APY
-              <span className={classes.apr}>APR</span>
-            </Typography>{' '}
-            <Typography className={classes.whiteText}>
-              {`${apy > 1000 ? '>1000%' : apy === 0 ? '' : apy.toFixed(2) + '%'}`}
-              <span className={classes.apr}>
-                {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : apr.toFixed(2) + '%'}`}
-              </span>
-            </Typography>
-          </div>
+          {estPoints ? (
+            <div className={classes.insideBox}>
+              <Typography className={classes.greyText}>Your Points</Typography>
+              <Typography className={classes.whiteText}>{printBN(estPoints, 0)}</Typography>
+            </div>
+          ) : null}
+
+          {apr && apy ? (
+            <>
+              <div className={classes.insideBox}>
+                <Typography className={classes.greyText}>
+                  APY
+                  <span className={classes.apr}>APR</span>
+                </Typography>{' '}
+                <Typography className={classes.whiteText}>
+                  {`${apy > 1000 ? '>1000%' : apy === 0 ? '' : apy.toFixed(2) + '%'}`}
+                  <span className={classes.apr}>
+                    {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : apr.toFixed(2) + '%'}`}
+                  </span>
+                  {printBN(apr, LEADERBOARD_DECIMAL)}
+                </Typography>
+              </div>
+            </>
+          ) : null}
         </div>
       </div>
     </Popover>

src/components/PositionsList/PositionItem/PositionItem.stories.tsx

@@ -2,6 +2,8 @@ import { NetworkType } from '@store/consts/static'
 import { PositionItem } from './PositionItem'
 
 import type { Meta, StoryObj } from '@storybook/react'
+import { Keypair } from '@solana/web3.js'
+import { BN } from '@coral-xyz/anchor'
 
 const meta = {
   title: 'Components/PositionItem',
@@ -23,7 +25,39 @@ export const Primary: Story = {
     max: 149.6,
     fee: 0.05,
     valueX: 10000.45,
+
     valueY: 2137.4,
+    liquidity: new BN(0),
+    poolAddress: Keypair.generate().publicKey,
+
+    poolData: {
+      address: Keypair.generate().publicKey,
+      bump: 0,
+      currentTickIndex: 0,
+      fee: new BN(0),
+      feeGrowthGlobalX: new BN(0),
+      feeProtocolTokenX: new BN(0),
+      feeProtocolTokenY: new BN(0),
+      feeReceiver: Keypair.generate().publicKey,
+      lastTimestamp: new BN(0),
+      oracleAddress: Keypair.generate().publicKey,
+      oracleInitialized: true,
+      liquidity: new BN(0),
+      poolIndex: 0,
+      positionIterator: new BN(0),
+      protocolFee: new BN(0),
+      secondsPerLiquidityGlobal: new BN(0),
+      sqrtPrice: new BN(0),
+      startTimestamp: new BN(0),
+      tickmap: Keypair.generate().publicKey,
+      tickSpacing: 0,
+      tokenX: Keypair.generate().publicKey,
+      tokenY: Keypair.generate().publicKey,
+      tokenXReserve: Keypair.generate().publicKey,
+      tokenYReserve: Keypair.generate().publicKey,
+      feeGrowthGlobalY: new BN(0)
+    },
+
     id: '0',
     address: '',
     tokenXLiq: 5000,

src/components/PositionsList/PositionItem/PositionItem.tsx

@@ -1,22 +1,32 @@
-import { Grid, Hidden, Tooltip, Typography, useMediaQuery } from '@mui/material'
+import { Box, Grid, Hidden, Tooltip, Typography, useMediaQuery } from '@mui/material'
 import SwapList from '@static/svg/swap-list.svg'
 import { theme } from '@static/theme'
 import { formatNumber } from '@utils/utils'
 import classNames from 'classnames'
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useStyles } from './style'
 import { TooltipHover } from '@components/TooltipHover/TooltipHover'
 import { initialXtoY, tickerToAddress } from '@utils/utils'
 import { NetworkType } from '@store/consts/static'
 import lockIcon from '@static/svg/lock.svg'
 import unlockIcon from '@static/svg/unlock.svg'
+import icons from '@static/icons'
+import { PublicKey } from '@solana/web3.js'
+import { useSelector } from 'react-redux'
+import { leaderboardSelectors } from '@store/selectors/leaderboard'
+import PromotedPoolPopover from '@components/Modals/PromotedPoolPopover/PromotedPoolPopover'
+import { BN } from '@coral-xyz/anchor'
+import { estimatePointsForLiquidity } from '@invariant-labs/points-sdk'
+import { PoolStructure } from '@invariant-labs/sdk-eclipse/lib/market'
+import { PoolWithAddressAndIndex } from '@store/selectors/positions'
 
 export interface IPositionItem {
   tokenXName: string
   tokenYName: string
   tokenXIcon: string
   tokenYIcon: string
   tokenXLiq: number
+  poolAddress: PublicKey
   tokenYLiq: number
   fee: number
   min: number
@@ -30,18 +40,23 @@ export interface IPositionItem {
   network: NetworkType
   isFullRange: boolean
   isLocked: boolean
+  poolData: PoolWithAddressAndIndex
+  liquidity: BN
 }
 
 export const PositionItem: React.FC<IPositionItem> = ({
   tokenXName,
   tokenYName,
   tokenXIcon,
+  poolAddress,
   tokenYIcon,
   fee,
   min,
   max,
   valueX,
   valueY,
+  liquidity,
+  poolData,
   isActive = false,
   currentPrice,
   tokenXLiq,
@@ -51,6 +66,18 @@ export const PositionItem: React.FC<IPositionItem> = ({
   isLocked
 }) => {
   const { classes } = useStyles()
+  const airdropIconRef = useRef<any>(null)
+
+  const { promotedPools } = useSelector(leaderboardSelectors.config)
+  const [isPromotedPoolPopoverOpen, setIsPromotedPoolPopoverOpen] = useState(false)
+
+  const { isPromoted, pointsPerSecond } = useMemo(() => {
+    if (!poolAddress) return { isPromoted: false, pointsPerSecond: '00' }
+    const promotedPool = promotedPools.find(pool => pool.address === poolAddress.toString())
+
+    if (!promotedPool) return { isPromoted: false, pointsPerSecond: '00' }
+    return { isPromoted: true, pointsPerSecond: promotedPool.pointsPerSecond }
+  }, [promotedPools, poolAddress])
 
   const isXs = useMediaQuery(theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery(theme.breakpoints.up('lg'))
@@ -134,6 +161,15 @@ export const PositionItem: React.FC<IPositionItem> = ({
     ),
     [valueX, valueY, tokenXName, classes, isXs, isDesktop, tokenYName, xToY]
   )
+  const estimation = useMemo(() => {
+    const estOfPoints = estimatePointsForLiquidity(
+      new BN(liquidity, 'hex'),
+      poolData as PoolStructure,
+      new BN(pointsPerSecond, 'hex'),
+      false
+    ) as BN
+    return estOfPoints
+  }, [liquidity, poolData, pointsPerSecond])
 
   return (
     <Grid
@@ -172,11 +208,40 @@ export const PositionItem: React.FC<IPositionItem> = ({
             {xToY ? tokenXName : tokenYName} - {xToY ? tokenYName : tokenXName}
           </Typography>
         </Grid>
-
-        <Hidden mdUp>{feeFragment}</Hidden>
       </Grid>
 
       <Grid container item className={classes.mdInfo} direction='row'>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          {isPromoted && (
+            <>
+              <div
+                ref={airdropIconRef}
+                className={classes.actionButton}
+                onPointerLeave={() => {
+                  setIsPromotedPoolPopoverOpen(false)
+                }}
+                onPointerEnter={() => {
+                  setIsPromotedPoolPopoverOpen(true)
+                }}>
+                <img
+                  src={icons.airdropRainbow}
+                  alt={'Airdrop'}
+                  style={{ height: '32px', marginRight: '16px' }}
+                />
+              </div>
+              <PromotedPoolPopover
+                anchorEl={airdropIconRef.current}
+                open={isPromotedPoolPopoverOpen}
+                onClose={() => {
+                  setIsPromotedPoolPopoverOpen(false)
+                }}
+                estPoints={estimation}
+                points={new BN(pointsPerSecond, 'hex').muln(24).muln(60).muln(60)}
+              />
+            </>
+          )}
+          <Hidden mdUp>{feeFragment}</Hidden>
+        </Box>
         <Hidden mdDown>{feeFragment}</Hidden>
         <Grid
           container

src/components/PositionsList/PositionItem/style.tsx

@@ -40,6 +40,26 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       width: 28
     }
   },
+  actionButton: {
+    background: 'none',
+    padding: 0,
+    margin: 0,
+    border: 'none',
+    display: 'inline-flex',
+    position: 'relative',
+    color: colors.invariant.black,
+    textTransform: 'none',
+
+    transition: 'filter 0.2s linear',
+
+    '&:hover': {
+      filter: 'brightness(1.2)',
+      cursor: 'pointer',
+      '@media (hover: none)': {
+        filter: 'none'
+      }
+    }
+  },
   arrows: {
     width: 36,
     marginLeft: 4,