fix: adjust height of points box and fix decimal format

DLC-link · Nov 4, 2024 · f0d404b · f0d404b
1 parent c58c46d
commit f0d404b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/src/app/components/points/components/points-table/components/points-table-item.tsx b/src/app/components/points/components/points-table/components/points-table-item.tsx
@@ -3,7 +3,7 @@ import { CustomSkeleton } from '@components/custom-skeleton/custom-skeleton';
 import { ProtocolRewards } from '@models/points.models';
 import { unshiftValue } from 'dlc-btc-lib/utilities';
 
-import { formatNumber } from '@shared/utils';
+import { formatNumber, formatToThreeDecimals } from '@shared/utils';
 
 export function PointsTableItem(pointsTableItem: ProtocolRewards): React.JSX.Element {
   const isMobile = useBreakpointValue({ base: true, md: false });
@@ -49,7 +49,7 @@ export function PointsTableItem(pointsTableItem: ProtocolRewards): React.JSX.Ele
           <HStack w={'25%'}>
             <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlc BTC logo'} boxSize={'25px'} />
             <Text color={'white'} fontSize={'sm'} fontWeight={800}>
-              {unshiftValue(currentTokens)}
+              {formatToThreeDecimals(unshiftValue(currentTokens))}
             </Text>
           </HStack>
           <HStack w={'50%'}>

diff --git a/src/app/components/points/components/points-table/points-table.tsx b/src/app/components/points/components/points-table/points-table.tsx
@@ -11,7 +11,7 @@ interface PointsTableProps {
 }
 
 export function PointsTable({ items }: PointsTableProps): React.JSX.Element {
-  const dynamicHeight = items ? items.length * 59 + 20 : 20;
+  const dynamicHeight = items ? items.length * 59 + 50 : 20;
   const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (

diff --git a/src/app/components/points/points.tsx b/src/app/components/points/points.tsx
@@ -70,7 +70,7 @@ export function Points(): React.JSX.Element {
           <TokenStatsBoardLayout>
             <Stack
               w={'100%'}
-              alignItems={'flex-start'}
+              alignItems={'center'}
               direction={isMobile ? 'column' : 'row'}
               p={isMobile ? '15px' : '0px'}
               gap={isMobile ? '10px' : '0px'}
@@ -103,7 +103,7 @@ export function Points(): React.JSX.Element {
               <Divider
                 orientation={isMobile ? 'horizontal' : 'vertical'}
                 px={isMobile ? '0px' : '5px'}
-                height={isMobile ? '1px' : '300px'}
+                height={isMobile ? '1px' : '320px'}
                 variant={'thick'}
               />
               <PointsTable items={userPoints?.protocols} />

diff --git a/src/shared/utils.ts b/src/shared/utils.ts
@@ -51,5 +51,9 @@ export function formatEvent(event: DetailedEvent): FormattedEvent {
   };
 }
 
+export function formatToThreeDecimals(value: number): number {
+  return parseFloat(value.toFixed(3));
+}
+
 export const breakpoints = ['300px', '400px', '600px', '850px', '1280px', '1400px'];
 export const titleTextSize = ['2xl', '2xl', '4xl', '6xl'];