From f0d404b8035a500df07b36d809e337cbd832ae0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3za=20Nagy?= <rozanagy88@gmail.com>
Date: Mon, 4 Nov 2024 14:58:37 +0100
Subject: [PATCH] fix: adjust height of points box and fix decimal format

---
 .../components/points-table/components/points-table-item.tsx  | 4 ++--
 .../points/components/points-table/points-table.tsx           | 2 +-
 src/app/components/points/points.tsx                          | 4 ++--
 src/shared/utils.ts                                           | 4 ++++
 4 files changed, 9 insertions(+), 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
index da067c3d..283ce66f 100644
--- 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
index f6aa7a2c..e26a52da 100644
--- 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
index dacd3040..30ada3e0 100644
--- 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
index bdf6bdc2..ad7f592b 100644
--- 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'];