fix: strategies ui

yearn · Dec 18, 2024 · eceea27 · eceea27
1 parent b08fdf7
commit eceea27
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx b/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
@@ -27,7 +27,7 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 		for (const strategy of currentVault?.strategies || []) {
 			_vaultList.push(vaults[strategy.address]);
 		}
-		return _vaultList;
+		return _vaultList.filter(Boolean);
 	}, [vaults, currentVault]);
 
 	const strategyList = useMemo((): TYDaemonVaultStrategy[] => {
@@ -64,22 +64,26 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 	 **	sortDirection values.
 	 **********************************************************************************************/
 	const sortedVaultsToDisplay = useSortVaults([...searchedVaultsToDisplay], sortBy, sortDirection);
+	const isVaultListEmpty = sortedVaultsToDisplay.length === 0;
 
 	return (
 		<>
-			<div className={'col-span-12 w-full p-4 md:px-8 md:pb-8'}>
-				<div className={'w-1/2'}>
-					<p className={'pb-2 text-[#757CA6]'}>{'Search'}</p>
-					<SearchBar
-						className={'max-w-none rounded-lg border-none bg-neutral-300 text-neutral-900 md:w-full'}
-						iconClassName={'text-neutral-900'}
-						searchPlaceholder={'YFI Vault'}
-						searchValue={search as string}
-						onSearch={onSearch}
-					/>
+			{isVaultListEmpty ? null : (
+				<div className={'col-span-12 w-full p-4 md:px-8 md:pb-8'}>
+					<div className={'w-1/2'}>
+						<p className={'pb-2 text-[#757CA6]'}>{'Search'}</p>
+						<SearchBar
+							className={'max-w-none rounded-lg border-none bg-neutral-300 text-neutral-900 md:w-full'}
+							iconClassName={'text-neutral-900'}
+							searchPlaceholder={'YFI Vault'}
+							searchValue={search as string}
+							onSearch={onSearch}
+						/>
+					</div>
 				</div>
-			</div>
-			<div className={cl(sortedVaultsToDisplay.length === 0 ? 'hidden' : '')}>
+			)}
+
+			<div className={cl(isVaultListEmpty ? 'hidden' : '')}>
 				<div className={'grid grid-cols-12 px-8 pb-6 md:gap-6'}>
 					<div className={'col-span-12 flex w-full flex-col'}>
 						<VaultsV3ListHead
@@ -91,7 +95,7 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 							}}
 							items={[
 								{label: 'Vault', value: 'name', sortable: true, className: 'col-span-2'},
-								{label: 'Risk Level', value: 'score', sortable: true, className: 'col-span-1'},
+								{label: 'Risk Level', value: 'score', sortable: true, className: 'col-span-2'},
 								{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
 								{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
 								{label: 'Available', value: 'available', sortable: true, className: 'col-span-2'},
@@ -132,15 +136,15 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 					</div>
 				</div>
 			) : null}
-			<div className={cl(sortedVaultsToDisplay.length === 0 && search === '' ? '' : 'hidden')}>
+			<div className={cl(isVaultListEmpty && search === null ? '' : 'hidden')}>
 				<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
 					<b className={'text-center text-lg'}>{'This vault IS the strategy'}</b>
 					<p className={'text-center text-neutral-600'}>
 						{"Surprise! This vault doesn't have any strategies. It is the strategy. #brainexplosion"}
 					</p>
 				</div>
 			</div>
-			<div className={cl(sortedVaultsToDisplay.length === 0 && search !== '' ? '' : 'hidden')}>
+			<div className={cl(isVaultListEmpty && search ? '' : 'hidden')}>
 				<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
 					<b className={'text-center text-lg'}>{'No vaults found'}</b>
 					<p className={'text-center text-neutral-600'}>{'Try another search term'}</p>

diff --git a/apps/vaults-v3/components/list/VaultsV3ListHead.tsx b/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
@@ -79,7 +79,7 @@ export function VaultsV3ListHead({items, sortBy, sortDirection, onSort}: TListHe
 
 				<div />
 
-				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-11 gap-1', 'mt-4 md:mt-0')}>
+				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-1', 'mt-4 md:mt-0')}>
 					{rest.map(
 						(item, index): ReactElement => (
 							<button

diff --git a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
@@ -524,12 +524,15 @@ function VaultRiskScoreTag({riskLevel}: {riskLevel: number}): ReactElement {
 	const level = riskLevel < 0 ? 0 : riskLevel > 5 ? 5 : riskLevel;
 	const riskColor = [`transparent`, `#63C532`, `#F8A908`, `#F8A908`, `#C73203`, `#C73203`];
 	return (
-		<div className={'col-span-2 flex flex-row justify-between md:col-span-2 md:flex-col md:justify-center'}>
+		<div
+			className={
+				'col-span-2 flex flex-row justify-between md:col-span-2 md:flex-col  md:items-end md:justify-center'
+			}>
 			<p className={'inline whitespace-nowrap text-start text-xs text-neutral-800/60 md:hidden'}>
 				{'Risk Score'}
 			</p>
 			<div className={cl('flex w-fit items-center justify-end gap-4 md:justify-center', 'tooltip relative z-50')}>
-				<div className={'mt-[6px] h-3 w-10 min-w-10 rounded-sm border-2 border-neutral-400 p-[2px]'}>
+				<div className={'h-3 w-10 min-w-10 rounded-sm border-2 border-neutral-400 p-[2px]'}>
 					<div
 						className={'h-1 rounded-[1px]'}
 						style={{