fix: strategies ui (#616)

* fix: strategies ui * fix: grid
yearn · Dec 18, 2024 · 6f432f8 · 6f432f8
1 parent b08fdf7
commit 6f432f8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 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,12 @@ 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-1 text-nowrap'
+								},
 								{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 +141,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/VaultsV3ListRow.tsx b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
@@ -529,7 +529,7 @@ function VaultRiskScoreTag({riskLevel}: {riskLevel: number}): ReactElement {
 				{'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={{

diff --git a/apps/vaults/components/list/VaultsListRow.tsx b/apps/vaults/components/list/VaultsListRow.tsx
@@ -443,7 +443,7 @@ export function VaultsListRow({currentVault}: {currentVault: TYDaemonVault}): Re
 
 				<div className={'col-span-1'} />
 
-				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-10 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')}>
 					<div
 						className={'yearn--table-data-section-item col-span-2 flex-row md:flex-col'}
 						datatype={'number'}>