Implement your position rewarded idication

src/components/Modals/PromotedPoolPopover/PromotedPoolPopover.tsx

@@ -1,33 +1,101 @@
 import { BN } from '@coral-xyz/anchor'
 import useStyles from './style'
 import { Popover, Typography } from '@mui/material'
-import { formatNumberWithCommas, printBN } from '@utils/utils'
+import { formatNumberWithCommas, printBN, removeAdditionalDecimals } from '@utils/utils'
+import { LEADERBOARD_DECIMAL } from '@pages/LeaderboardPage/config'
+import { useRef, useCallback, useEffect } from 'react'
 
 export interface IPromotedPoolPopover {
   open: boolean
   anchorEl: HTMLElement | null
   onClose: () => void
-  apr: number
-  apy: number
+  isActive?: boolean
+  apr?: BN
+  apy?: number
+  estPoints?: BN
   points: BN
+  headerText?: string | React.ReactNode
+  pointsLabel?: string | React.ReactNode
+  showEstPointsFirst?: boolean
 }
 
 export const PromotedPoolPopover = ({
   open,
   onClose,
   anchorEl,
+  isActive,
   apr,
   apy,
-  points
+  estPoints,
+  points,
+  headerText = 'The pool distributes points:',
+  pointsLabel = 'Points per 24H',
+  showEstPointsFirst = false
 }: IPromotedPoolPopover) => {
   const { classes } = useStyles()
+  const timeoutRef = useRef<NodeJS.Timeout>()
+
+  const handleMouseEnter = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+  }, [])
+
+  const isLessThanMinimal = (value: BN) => {
+    const minimalValue = new BN(1).mul(new BN(10).pow(new BN(LEADERBOARD_DECIMAL - 2)))
+    return value.lt(minimalValue)
+  }
+
+  const handleMouseLeave = useCallback(() => {
+    timeoutRef.current = setTimeout(() => {
+      onClose()
+    }, 100)
+  }, [onClose])
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
 
   if (!anchorEl) return null
 
+  const TotalPointsSection = (
+    <div className={classes.insideBox}>
+      <Typography
+        className={classes.greyText}
+        dangerouslySetInnerHTML={
+          typeof pointsLabel === 'string' ? { __html: pointsLabel } : undefined
+        }>
+        {typeof pointsLabel !== 'string' ? pointsLabel : null}
+      </Typography>
+      <Typography className={classes.whiteText}>
+        {formatNumberWithCommas(printBN(points, 0))}
+      </Typography>
+    </div>
+  )
+  const EstPointsSection = estPoints ? (
+    <div className={classes.insideBox}>
+      <Typography className={classes.greyText}>Points earned by this position per 24H:</Typography>
+      <Typography className={classes.whiteText}>
+        {isLessThanMinimal(estPoints) && isActive
+          ? '<0.01'
+          : removeAdditionalDecimals(
+              formatNumberWithCommas(printBN(estPoints, LEADERBOARD_DECIMAL)),
+              2
+            )}
+      </Typography>
+    </div>
+  ) : null
+
   return (
     <Popover
+      onClick={e => e.stopPropagation()}
       open={open}
       anchorEl={anchorEl}
+      className='promoted-pool-popover'
       classes={{
         paper: classes.paper,
         root: classes.popover
@@ -40,7 +108,8 @@ export const PromotedPoolPopover = ({
       disableRestoreFocus
       slotProps={{
         paper: {
-          onMouseLeave: onClose
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave
         }
       }}
       transformOrigin={{
@@ -50,25 +119,43 @@ export const PromotedPoolPopover = ({
       marginThreshold={16}>
       <div className={classes.root}>
         <div className={classes.container}>
-          <Typography className={classes.greyText}>This pool distributes points: </Typography>
-          <div className={classes.insideBox}>
-            <Typography className={classes.greyText}>Points per 24H</Typography>
-            <Typography className={classes.whiteText}>
-              {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>
+          {/* Content remains the same */}
+          <Typography
+            className={classes.greyText}
+            dangerouslySetInnerHTML={
+              typeof headerText === 'string' ? { __html: headerText } : undefined
+            }>
+            {typeof headerText !== 'string' ? headerText : null}
+          </Typography>
+
+          {showEstPointsFirst ? (
+            <>
+              {EstPointsSection}
+              {TotalPointsSection}
+            </>
+          ) : (
+            <>
+              {TotalPointsSection}
+              {EstPointsSection}
+            </>
+          )}
+
+          {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>
+                </Typography>
+              </div>
+            </>
+          ) : null}
         </div>
       </div>
     </Popover>

src/components/Modals/PromotedPoolPopover/style.ts

@@ -13,7 +13,7 @@ const useStyles = makeStyles()(() => {
     },
     root: {
       background: colors.invariant.component,
-      width: 217,
+      width: 'fit-content',
       height: 'fit-content',
       borderRadius: 14,
       paddingTop: 16,

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

@@ -1,12 +1,14 @@
 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'
+import { PositionItemDesktop } from './variants/PositionItemDesktop'
 
 const meta = {
   title: 'Components/PositionItem',
-  component: PositionItem
-} satisfies Meta<typeof PositionItem>
+  component: PositionItemDesktop
+} satisfies Meta<typeof PositionItemDesktop>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -23,7 +25,53 @@ export const Primary: Story = {
     max: 149.6,
     fee: 0.05,
     valueX: 10000.45,
+    position: {
+      bump: 0,
+      feeGrowthInsideX: new BN(0),
+      feeGrowthInsideY: new BN(0),
+      id: 0,
+      lastSlot: new BN(0),
+      lowerTickIndex: new BN(0),
+      owner: Keypair.generate().publicKey,
+      pool: Keypair.generate().publicKey,
+      secondsPerLiquidityInside: new BN(0),
+      tokensOwedX: new BN(0),
+      tokensOwedY: new BN(0),
+      upperTickIndex: new BN(0),
+      liquidity: new BN(0)
+    },
     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,