Merge pull request #410 from balancer/feat/add-points-icon-pool-list

feat: add points icon in pool list
balancer · Jan 15, 2025 · da9eea3 · da9eea3
2 parents b6d044c + 492dd11
commit da9eea3
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 13 deletions.
diff --git a/apps/beets-frontend-v3/public/images/icons/pool-points.svg b/apps/beets-frontend-v3/public/images/icons/pool-points.svg
diff --git a/apps/frontend-v3/public/images/icons/pool-points.svg b/apps/frontend-v3/public/images/icons/pool-points.svg
diff --git a/packages/lib/modules/pool/PoolList/PoolListTable/PoolListTable.tsx b/packages/lib/modules/pool/PoolList/PoolListTable/PoolListTable.tsx
@@ -4,7 +4,7 @@ import { PaginatedTable } from '@repo/lib/shared/components/tables/PaginatedTabl
 import { PoolListTableHeader } from './PoolListTableHeader'
 import { PoolListTableRow } from './PoolListTableRow'
 import { getPaginationProps } from '@repo/lib/shared/components/pagination/getPaginationProps'
-import { PoolListItem } from '../../pool.types'
+import { POOL_TAG_MAP, PoolListItem } from '../../pool.types'
 import { Card, Skeleton } from '@chakra-ui/react'
 import { useIsMounted } from '@repo/lib/shared/hooks/useIsMounted'
 import { usePoolList } from '../PoolListProvider'
@@ -37,6 +37,10 @@ export function PoolListTable({ pools, count, loading }: Props) {
 
   if (!isMounted) return <Skeleton height="500px" w="full" />
 
+  const needsMarginForPoints = pools.some(pool =>
+    pool.tags?.some(tag => tag && POOL_TAG_MAP.POINTS.includes(tag))
+  )
+
   return (
     <Card
       alignItems="flex-start"
@@ -53,7 +57,14 @@ export function PoolListTable({ pools, count, loading }: Props) {
         paginationProps={paginationProps}
         renderTableHeader={() => <PoolListTableHeader {...rowProps} />}
         renderTableRow={(item: PoolListItem, index) => {
-          return <PoolListTableRow keyValue={index} pool={item} {...rowProps} />
+          return (
+            <PoolListTableRow
+              keyValue={index}
+              needsMarginForPoints={needsMarginForPoints}
+              pool={item}
+              {...rowProps}
+            />
+          )
         }}
         showPagination={showPagination}
       />

diff --git a/packages/lib/modules/pool/PoolList/PoolListTable/PoolListTableRow.tsx b/packages/lib/modules/pool/PoolList/PoolListTable/PoolListTableRow.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, GridItem, GridProps, HStack, Text } from '@chakra-ui/react'
+import { Box, Grid, GridItem, GridProps, HStack, Text, Image } from '@chakra-ui/react'
 import { PollListTableDetailsCell } from '@repo/lib/modules/pool/PoolList/PoolListTable/PollListTableDetailsCell'
 import { TokenIcon } from '@repo/lib/modules/tokens/TokenIcon'
 import FadeInOnView from '@repo/lib/shared/components/containers/FadeInOnView'
@@ -8,7 +8,7 @@ import { useCurrency } from '@repo/lib/shared/hooks/useCurrency'
 import Link from 'next/link'
 import { memo } from 'react'
 import { usePoolMetadata } from '../../metadata/usePoolMetadata'
-import { PoolListDisplayType, PoolListItem } from '../../pool.types'
+import { POOL_TAG_MAP, PoolListDisplayType, PoolListItem } from '../../pool.types'
 import { getPoolPath } from '../../pool.utils'
 import { getUserTotalBalanceUsd } from '../../user-balance.helpers'
 import { usePoolList } from '../PoolListProvider'
@@ -18,6 +18,7 @@ import { getUserReferenceTokens } from '../../pool-tokens.utils'
 interface Props extends GridProps {
   pool: PoolListItem
   keyValue: number
+  needsMarginForPoints?: boolean
 }
 
 const MemoizedMainAprTooltip = memo(MainAprTooltip)
@@ -47,15 +48,16 @@ function PoolName({ pool }: { pool: PoolListItem }) {
   )
 }
 
-export function PoolListTableRow({ pool, keyValue, ...rest }: Props) {
+export function PoolListTableRow({ pool, keyValue, needsMarginForPoints, ...rest }: Props) {
   const {
     queryState: { userAddress },
     displayType,
   } = usePoolList()
   const { name } = usePoolMetadata(pool)
-
   const { toCurrency } = useCurrency()
 
+  const hasPoints = pool.tags?.some(tag => tag && POOL_TAG_MAP.POINTS.includes(tag))
+
   return (
     <FadeInOnView>
       <Box
@@ -115,13 +117,24 @@ export function PoolListTableRow({ pool, keyValue, ...rest }: Props) {
               </Text>
             </GridItem>
             <GridItem justifySelf="end" pr={{ base: 'md', xl: '0' }}>
-              <MemoizedMainAprTooltip
-                aprItems={pool.dynamicData.aprItems}
-                height="auto"
-                pool={pool}
-                poolId={pool.id}
-                textProps={{ fontWeight: 'medium', textAlign: 'right' }}
-              />
+              <HStack gap="xxs" mr={needsMarginForPoints && !hasPoints ? '12px' : '0'}>
+                <MemoizedMainAprTooltip
+                  aprItems={pool.dynamicData.aprItems}
+                  height="auto"
+                  pool={pool}
+                  poolId={pool.id}
+                  textProps={{ fontWeight: 'medium', textAlign: 'right' }}
+                />
+                {hasPoints && (
+                  <Image
+                    alt="points"
+                    h="15px"
+                    ml="0.5"
+                    src="/images/icons/pool-points.svg"
+                    w="10px"
+                  />
+                )}
+              </HStack>
             </GridItem>
           </Grid>
         </Link>

diff --git a/packages/lib/modules/pool/pool.types.ts b/packages/lib/modules/pool/pool.types.ts
@@ -121,6 +121,7 @@ export const POOL_TAG_MAP: { [key in PoolTagType]: string[] } = {
     'POINTS_RENZO',
     'POINTS_SWELL',
     'POINTS_MODE',
+    'POINTS_RINGS',
   ],
   VE8020: ['VE8020'],
   BOOSTED: ['BOOSTED'],