Overview page decimals for big eth amount

features/overview/shared/overview-item/overview-item-value.tsx

@@ -3,6 +3,7 @@ import { type FC, useMemo } from 'react';
 import { InlineLoader } from 'shared/components';
 import { FormatToken } from 'shared/formatters';
 import { isBigint } from 'utils';
+import { WEI_PER_ETHER } from 'consts/tx';
 
 import { ContentText } from './styles';
 
@@ -14,14 +15,18 @@ export interface ItemValueProps {
   textSize?: 'lg' | 'xl';
 }
 
+const countMaxDecimalDigits = (amount: bigint) => {
+  return amount / WEI_PER_ETHER > 1000 ? 1 : 4;
+};
+
 export const OverviewItemValue: FC<ItemValueProps> = (props) => {
   const { content, isLoading, color, textSize = 'xl', symbol = '' } = props;
   const contentView = useMemo(
     () =>
       isBigint(content) ? (
         <FormatToken
           amount={content}
-          maxDecimalDigits={4}
+          maxDecimalDigits={countMaxDecimalDigits(content)}
           showAmountTip={false}
           symbol={symbol}
         />

shared/components/layout/styles.tsx

@@ -56,7 +56,7 @@ export const LayoutStyles = styled(Container)<{ isError: boolean }>`
   min-height: 100vh;
   height: auto;
 
-  @media ${devicesHeaderMedia.tablet} {
+  @media ${devicesHeaderMedia.laptop} {
     grid-template-columns: 200px 1fr;
     grid-template-areas: ${({ isError }) =>
       tabletTemplateAreas[isError ? 'withError' : 'default']};

styles/constants.ts

@@ -1,3 +1,4 @@
 export const NAV_MOBILE_HEIGHT = 60;
 export const NAV_MOBILE_MAX_WIDTH = 880;
 export const NAV_TABLET_MAX_WIDTH = 1024;
+export const NAV_LAPTOP_MAX_WIDTH = 1200;

styles/global.ts

@@ -2,12 +2,14 @@ import { createGlobalStyle } from 'styled-components';
 import { ThemeName } from '@lidofinance/lido-ui';
 
 import {
+  NAV_LAPTOP_MAX_WIDTH,
   NAV_MOBILE_HEIGHT,
   NAV_MOBILE_MAX_WIDTH,
   NAV_TABLET_MAX_WIDTH,
 } from './constants';
 
 export const devicesHeaderMedia = {
+  laptop: `screen and (max-width: ${NAV_LAPTOP_MAX_WIDTH}px)`,
   tablet: `screen and (max-width: ${NAV_TABLET_MAX_WIDTH}px)`,
   mobile: `screen and (max-width: ${NAV_MOBILE_MAX_WIDTH}px)`,
 };