fix: overflow

apps/common/components/RenderAmount.tsx

@@ -12,7 +12,7 @@ export function RenderAmount(props: TAmount & {shouldHideTooltip?: boolean}): Re
 			options: {
 				...props.options,
 				minimumFractionDigits: 2,
-				maximumFractionDigits: Math.max(2, Number(props.decimals)),
+				maximumFractionDigits: props?.options?.maximumFractionDigits || Math.max(2, Number(props.decimals)),
 				shouldDisplaySymbol: true,
 				shouldCompactValue: false
 			}

apps/vaults/Wrapper.tsx

@@ -24,7 +24,7 @@ export function Wrapper({children, router}: {children: ReactElement; router: Nex
 								initial={'initial'}
 								animate={'enter'}
 								exit={'exit'}
-								className={'my-0 h-full md:mb-0 md:mt-16'}
+								className={'my-0 h-full bg-neutral-0 md:mb-0 md:mt-16'}
 								variants={variants}>
 								{children}
 							</motion.div>

apps/vaults/components/list/VaultsListEmpty.tsx

@@ -8,10 +8,12 @@ import type {TYDaemonVaults} from '@common/schemas/yDaemonVaultsSchemas';
 export function VaultsListEmpty({
 	sortedVaultsToDisplay,
 	currentCategory,
+	currentChains,
 	isLoading
 }: {
 	sortedVaultsToDisplay: TYDaemonVaults;
 	currentCategory: string;
+	currentChains: number[];
 	isLoading: boolean;
 }): ReactElement {
 	const {searchValue, category, set_category} = useAppSettings();
@@ -60,6 +62,21 @@ export function VaultsListEmpty({
 			</div>
 		);
 	}
+	if (!isLoading && currentChains.length === 0) {
+		return (
+			<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center gap-4 px-10 py-2 md:w-3/4'}>
+				<b className={'text-center text-lg'}>{'No data, reeeeeeeeeeee'}</b>
+				<>
+					<p className={'text-center text-neutral-600'}>{`Please, select a chain. At least one, just one.`}</p>
+					<Button
+						className={'w-full md:w-48'}
+						onClick={(): void => set_category('All Vaults')}>
+						{'Search all vaults'}
+					</Button>
+				</>
+			</div>
+		);
+	}
 	return <div />;
 }
 

apps/vaults/components/list/VaultsListRow.tsx

@@ -259,7 +259,7 @@ export function VaultsListRow({currentVault}: {currentVault: TYDaemonVault}): Re
 								value={availableToDeposit}
 								symbol={currentVault.token.symbol}
 								decimals={currentVault.token.decimals}
-								options={{shouldDisplaySymbol: false}}
+								options={{shouldDisplaySymbol: false, maximumFractionDigits: 4}}
 							/>
 						</p>
 					</div>
@@ -273,7 +273,7 @@ export function VaultsListRow({currentVault}: {currentVault: TYDaemonVault}): Re
 								value={staked}
 								symbol={currentVault.token.symbol}
 								decimals={currentVault.token.decimals}
-								options={{shouldDisplaySymbol: false}}
+								options={{shouldDisplaySymbol: false, maximumFractionDigits: 4}}
 							/>
 						</p>
 					</div>

package.json

@@ -22,7 +22,7 @@
 		"@rainbow-me/rainbowkit": "^1.1.1",
 		"@wagmi/chains": "1.8.0",
 		"@wagmi/core": "^1.4.3",
-		"@yearn-finance/web-lib": "^3.0.49",
+		"@yearn-finance/web-lib": "^3.0.50",
 		"axios": "^1.5.0",
 		"dayjs": "^1.11.9",
 		"eslint-config-prettier": "^9.0.0",

pages/vaults/[chainID]/[address].tsx

@@ -59,7 +59,7 @@ function Index(): ReactElement | null {
 
 	if (isLoadingVault || !router.query.address) {
 		return (
-			<div className={'relative flex min-h-[100dvh] flex-col bg-neutral-0 px-4 text-center'}>
+			<div className={'relative flex min-h-[100dvh] flex-col px-4 text-center'}>
 				<div className={'mt-[20%] flex h-10 items-center justify-center'}>
 					<span className={'loader'} />
 				</div>
@@ -69,7 +69,7 @@ function Index(): ReactElement | null {
 
 	if (!currentVault) {
 		return (
-			<div className={'relative flex h-14 flex-col items-center justify-center bg-neutral-0 px-4 text-center'}>
+			<div className={'relative flex h-14 flex-col items-center justify-center px-4 text-center'}>
 				<div className={'flex h-10 items-center justify-center'}>
 					<p className={'text-sm text-neutral-900'}>{"We couln't find this vault on the connected network."}</p>
 				</div>

pages/vaults/index.tsx

@@ -251,15 +251,17 @@ function Index(): ReactElement {
 					isLoading={isLoadingVaultList}
 					sortedVaultsToDisplay={sortedVaultsToDisplay}
 					currentCategory={category}
+					currentChains={chainsFromJSON}
 				/>
 			);
 		}
-		if (isLoadingVaultList || isZero(sortedVaultsToDisplay.length)) {
+		if (isLoadingVaultList || isZero(sortedVaultsToDisplay.length) || chainsFromJSON.length === 0) {
 			return (
 				<VaultsListEmpty
 					isLoading={isLoadingVaultList}
 					sortedVaultsToDisplay={sortedVaultsToDisplay}
 					currentCategory={category}
+					currentChains={chainsFromJSON}
 				/>
 			);
 		}
@@ -282,7 +284,7 @@ function Index(): ReactElement {
 		<section className={'mt-4 grid w-full grid-cols-12 gap-y-10 pb-10 md:mt-20 md:gap-x-10 md:gap-y-20'}>
 			<HeaderUserPosition />
 
-			<div className={'relative col-span-12 flex w-full flex-col overflow-x-hidden bg-neutral-100'}>
+			<div className={'relative col-span-12 flex w-full flex-col overflow-x-hidden bg-neutral-100 md:overflow-x-visible'}>
 				<div className={'absolute right-5 top-3 md:right-8 md:top-8'}>
 					<VaultListOptions />
 				</div>

yarn.lock

@@ -3411,10 +3411,10 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@yearn-finance/web-lib@^3.0.49":
-  version "3.0.49"
-  resolved "https://registry.yarnpkg.com/@yearn-finance/web-lib/-/web-lib-3.0.49.tgz#256c6ae937e4be9b3519d43e4eb08e32a2d3c2a9"
-  integrity sha512-ttIgthGSnPBnB0TIZmtBJdLT/tMCe1nsV+dbRhngUDCwtjJftyu5ScG/h4OQ34ANRWyZeSxqGjENMVA4vrNEkQ==
+"@yearn-finance/web-lib@^3.0.50":
+  version "3.0.50"
+  resolved "https://registry.yarnpkg.com/@yearn-finance/web-lib/-/web-lib-3.0.50.tgz#e0d22913b845efcf676474bc9a5d4699c487e652"
+  integrity sha512-UlzTukHOEUXnyt8hVvJtIQk59hGrUXA550Vw50QHIr0unDvlqNJChA2q3fM3bF//uvBEPl6K+t8sqtxb2rLLwQ==
   dependencies:
     "@babel/core" "^7.23.0"
     "@headlessui/react" "^1.7.17"