fix: reflow

yearn · Oct 18, 2023 · 4bdb4e8 · 4bdb4e8
1 parent 9bd444b
commit 4bdb4e8
Show file tree

Hide file tree

Showing 16 changed files with 413 additions and 166 deletions.
diff --git a/apps/common/components/SearchBar.tsx b/apps/common/components/SearchBar.tsx
@@ -1,28 +1,38 @@
+import {cl} from '@yearn-finance/web-lib/utils/cl';
+
 import type {ChangeEvent, ReactElement} from 'react';
 
 export type TSearchBar = {
 	searchPlaceholder: string;
 	searchValue: string;
 	set_searchValue: (searchValue: string) => void;
-}
+	className?: string;
+};
 
-export function SearchBar({searchPlaceholder, searchValue, set_searchValue}: TSearchBar): ReactElement {
+export function SearchBar({searchPlaceholder, searchValue, set_searchValue, className}: TSearchBar): ReactElement {
 	return (
 		<>
-			<div className={'mt-1 flex h-10 w-full max-w-md items-center border border-neutral-0 bg-neutral-0 p-2 md:w-2/3'}>
+			<div
+				className={cl(
+					className,
+					'mt-1 flex h-10 w-full max-w-md items-center border border-neutral-0 bg-neutral-0 p-2 md:w-2/3'
+				)}>
 				<div className={'relative flex h-10 w-full flex-row items-center justify-between'}>
 					<input
 						id={'search'}
 						suppressHydrationWarning
-						className={'h-10 w-full overflow-x-scroll border-none bg-transparent px-0 py-2 text-base outline-none scrollbar-none placeholder:text-neutral-400'}
+						className={
+							'h-10 w-full overflow-x-scroll border-none bg-transparent px-0 py-2 text-base outline-none scrollbar-none placeholder:text-neutral-400'
+						}
 						type={'text'}
 						placeholder={searchPlaceholder}
 						value={searchValue}
 						onChange={(e: ChangeEvent<HTMLInputElement>): void => {
 							if (set_searchValue) {
 								set_searchValue(e.target.value);
 							}
-						}} />
+						}}
+					/>
 					<div className={'absolute right-0 text-neutral-400'}>
 						<svg
 							width={'20'}
@@ -33,11 +43,13 @@ export function SearchBar({searchPlaceholder, searchValue, set_searchValue}: TSe
 							<path
 								fillRule={'evenodd'}
 								clipRule={'evenodd'}
-								d={'M10 1C5.02972 1 1 5.02972 1 10C1 14.9703 5.02972 19 10 19C12.1249 19 14.0779 18.2635 15.6176 17.0318L21.2929 22.7071C21.6834 23.0976 22.3166 23.0976 22.7071 22.7071C23.0976 22.3166 23.0976 21.6834 22.7071 21.2929L17.0318 15.6176C18.2635 14.0779 19 12.1249 19 10C19 5.02972 14.9703 1 10 1ZM3 10C3 6.13428 6.13428 3 10 3C13.8657 3 17 6.13428 17 10C17 13.8657 13.8657 17 10 17C6.13428 17 3 13.8657 3 10Z'}
-								fill={'currentcolor'}/>
+								d={
+									'M10 1C5.02972 1 1 5.02972 1 10C1 14.9703 5.02972 19 10 19C12.1249 19 14.0779 18.2635 15.6176 17.0318L21.2929 22.7071C21.6834 23.0976 22.3166 23.0976 22.7071 22.7071C23.0976 22.3166 23.0976 21.6834 22.7071 21.2929L17.0318 15.6176C18.2635 14.0779 19 12.1249 19 10C19 5.02972 14.9703 1 10 1ZM3 10C3 6.13428 6.13428 3 10 3C13.8657 3 17 6.13428 17 10C17 13.8657 13.8657 17 10 17C6.13428 17 3 13.8657 3 10Z'
+								}
+								fill={'currentcolor'}
+							/>
 						</svg>
 					</div>
-
 				</div>
 			</div>
 		</>

diff --git a/apps/common/components/Table.tsx b/apps/common/components/Table.tsx
@@ -2,13 +2,11 @@
 import {useCallback, useMemo, useState} from 'react';
 import {sort} from '@veYFI/utils';
 import {cl} from '@yearn-finance/web-lib/utils/cl';
-import {isZero} from '@yearn-finance/web-lib/utils/isZero';
 import {Pagination} from '@common/components/Pagination';
 import {usePagination} from '@common/hooks/usePagination';
 import {IconChevronPlain} from '@common/icons/IconChevronPlain';
 
 import type {ReactElement} from 'react';
-import type {TNormalizedBN} from '@common/types/types';
 
 type TSortOrder = 'asc' | 'desc';
 
@@ -26,6 +24,7 @@ type TMetadata<T> = {
 	sortable?: boolean;
 	fullWidth?: boolean;
 	columnSpan?: number;
+	isDisabled?: (item: T) => boolean;
 	format?: (item: T) => string | number;
 	transform?: (item: T) => ReactElement;
 }
@@ -67,10 +66,11 @@ export function Table<T>({metadata, data, columns, initialSortBy, onRowClick, it
 		9: 'md:grid-cols-9',
 		10: 'md:grid-cols-10',
 		11: 'md:grid-cols-11',
-		12: 'md:grid-cols-12'
+		12: 'md:grid-cols-12',
+		13: 'md:grid-cols-13'
 	};
 
-	const numberOfColumns = Math.min(columns ?? (metadata.length), 12) as keyof typeof gridColsVariants;
+	const numberOfColumns = Math.min(columns ?? (metadata.length), 13) as keyof typeof gridColsVariants;
 
 	const colSpanVariants = {
 		1: 'md:col-span-1',
@@ -84,7 +84,8 @@ export function Table<T>({metadata, data, columns, initialSortBy, onRowClick, it
 		9: 'md:col-span-9',
 		10: 'md:col-span-10',
 		11: 'md:col-span-11',
-		12: 'md:col-span-12'
+		12: 'md:col-span-12',
+		13: 'md:col-span-13'
 	};
 
 	return (
@@ -105,7 +106,7 @@ export function Table<T>({metadata, data, columns, initialSortBy, onRowClick, it
 							className || ''
 						)}
 					>
-						<p className={'text-xs font-bold text-neutral-400'}>
+						<p className={'text-xs text-neutral-500'}>
 							{label}
 						</p>
 						{sortable && sortedBy === key && <IconChevronPlain className={`yearn--sort-chevron ${order === 'asc' ? 'rotate-180' : ''}`} />}
@@ -143,7 +144,7 @@ export function Table<T>({metadata, data, columns, initialSortBy, onRowClick, it
 					)}
 					onClick={(): void => onRowClick?.(item)}
 				>
-					{metadata.map(({key, label, className, fullWidth, columnSpan, format, transform}): ReactElement => {
+					{metadata.map(({key, label, className, fullWidth, columnSpan, format, transform, isDisabled}): ReactElement => {
 						let isNumberLike = false;
 						if (typeof item[key] === 'bigint') {
 							isNumberLike = true;
@@ -165,11 +166,7 @@ export function Table<T>({metadata, data, columns, initialSortBy, onRowClick, it
 								<div
 									className={cl(
 										(
-											isZero(item[key] as number)
-											||
-											(item[key] as TNormalizedBN)?.raw !== undefined && isZero((item[key] as TNormalizedBN).raw)
-											||
-											(item[key] === undefined || item[key] === null)
+											isDisabled && isDisabled?.(item)
 										) ? 'text-neutral-400' : 'text-neutral-900',
 										isNumber ? 'font-number' : 'font-aeonik',
 										fullWidth ? 'w-full' : undefined

diff --git a/apps/common/utils/QueryParamsProvider.tsx b/apps/common/utils/QueryParamsProvider.tsx
@@ -0,0 +1,29 @@
+import {useMemo} from 'react';
+import {usePathname, useRouter, useSearchParams} from 'next/navigation';
+
+import type {ReactElement} from 'react';
+import type {PartialLocation, QueryParamAdapterComponent} from 'use-query-params';
+
+export const NextQueryParamAdapter: QueryParamAdapterComponent = ({children}): ReactElement | null => {
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+
+	const adapter = useMemo((): any => {
+		return {
+			replace(location: PartialLocation): void {
+				router.replace(pathname + location.search);
+			},
+			push(location: PartialLocation): void {
+				router.push(pathname + location.search);
+			},
+			get location(): {search: string} {
+				return {
+					search: searchParams.toString()
+				};
+			}
+		};
+	}, [router, pathname, searchParams]);
+
+	return children(adapter);
+};
diff --git a/apps/veyfi/Wrapper.tsx b/apps/veyfi/Wrapper.tsx
@@ -21,7 +21,7 @@ export function Wrapper({children, router}: {children: ReactElement, router: Nex
 					<OptionContextApp>
 						<AnimatePresence mode={'wait'}>
 							<motion.div
-								key={router.asPath}
+								key={router.basePath}
 								initial={'initial'}
 								animate={'enter'}
 								exit={'exit'}