fix: single attribute per line

yearn · Oct 4, 2023 · fc1da4f · fc1da4f
1 parent 5bdc5cf
commit fc1da4f
Show file tree

Hide file tree

Showing 105 changed files with 2,053 additions and 469 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -24,7 +24,6 @@ module.exports = {
 				ImportDeclaration: {multiline: true, consistent: true},
 				ExportDeclaration: {multiline: true, minProperties: 3}
 			}
-		],
-		'react/jsx-max-props-per-line': 'off'
+		]
 	}
 };
diff --git a/.prettierrc b/.prettierrc
@@ -6,5 +6,6 @@
 	"trailingComma": "none",
 	"bracketSpacing": false,
 	"arrowParens": "avoid",
-	"bracketSameLine": true
+	"bracketSameLine": true,
+	"singleAttributePerLine": true
 }
diff --git a/apps/common/components/AppHeader.tsx b/apps/common/components/AppHeader.tsx
@@ -33,8 +33,14 @@ function Logo(): ReactElement {
 			<VaultsHeader pathname={pathname} />
 			<VeYfiHeader pathname={pathname} />
 			<YBribeHeader pathname={pathname} />
-			<MotionDiv name={'yearn'} animate={pathname === '/' ? 'enter' : 'exit'}>
-				<LogoYearn className={'h-8 w-8'} back={'text-neutral-900'} front={'text-neutral-0'} />
+			<MotionDiv
+				name={'yearn'}
+				animate={pathname === '/' ? 'enter' : 'exit'}>
+				<LogoYearn
+					className={'h-8 w-8'}
+					back={'text-neutral-900'}
+					front={'text-neutral-0'}
+				/>
 			</MotionDiv>
 		</>
 	);
@@ -61,7 +67,10 @@ function LogoPopover(): ReactElement {
 	};
 
 	return (
-		<Popover onMouseEnter={(): void => set_isShowing(true)} onMouseLeave={(): void => set_isShowing(false)} className={'relative'}>
+		<Popover
+			onMouseEnter={(): void => set_isShowing(true)}
+			onMouseLeave={(): void => set_isShowing(false)}
+			className={'relative'}>
 			<Popover.Button className={'flex items-center'}>
 				<Link href={'/'}>
 					<span className={'sr-only'}>{'Back to home'}</span>
@@ -84,7 +93,11 @@ function LogoPopover(): ReactElement {
 								.filter(({isDisabled}): boolean => !isDisabled)
 								.map(({name, href, icon}): ReactElement => {
 									return (
-										<Link prefetch={false} key={name} href={href} onClick={(): void => set_isShowing(false)}>
+										<Link
+											prefetch={false}
+											key={name}
+											href={href}
+											onClick={(): void => set_isShowing(false)}>
 											<div
 												onClick={(): void => set_isShowing(false)}
 												className={'flex cursor-pointer flex-col items-center p-4 transition-colors hover:bg-neutral-200'}>

diff --git a/apps/common/components/Apps.tsx b/apps/common/components/Apps.tsx
@@ -39,35 +39,71 @@ export const APPS: {[key in AppName]: TApp} = {
 		href: '/vaults',
 		menu: VAULTS_MENU,
 		manifest: vaultsManifest,
-		icon: <LogoYearn className={'h-8 w-8'} back={'text-pink-400'} front={'text-white'} />
+		icon: (
+			<LogoYearn
+				className={'h-8 w-8'}
+				back={'text-pink-400'}
+				front={'text-white'}
+			/>
+		)
 	},
 	yCRV: {
 		name: AppName.YCRV,
 		href: '/ycrv',
 		menu: YCRV_MENU,
 		manifest: ycrvManifest,
-		icon: <ImageWithFallback alt={'yCRV'} width={32} height={32} src={`${process.env.BASE_YEARN_ASSETS_URI}/1/${YCRV_TOKEN_ADDRESS}/logo-128.png`} loading={'eager'} priority />
+		icon: (
+			<ImageWithFallback
+				alt={'yCRV'}
+				width={32}
+				height={32}
+				src={`${process.env.BASE_YEARN_ASSETS_URI}/1/${YCRV_TOKEN_ADDRESS}/logo-128.png`}
+				loading={'eager'}
+				priority
+			/>
+		)
 	},
 	yBal: {
 		name: AppName.YBAL,
 		href: '/ybal',
 		menu: YBAL_MENU,
 		manifest: yBalManifest,
 		isDisabled: true,
-		icon: <ImageWithFallback alt={'yBal'} width={32} height={32} src={`${process.env.BASE_YEARN_ASSETS_URI}/1/${YBAL_TOKEN_ADDRESS}/logo-128.png`} loading={'eager'} priority />
+		icon: (
+			<ImageWithFallback
+				alt={'yBal'}
+				width={32}
+				height={32}
+				src={`${process.env.BASE_YEARN_ASSETS_URI}/1/${YBAL_TOKEN_ADDRESS}/logo-128.png`}
+				loading={'eager'}
+				priority
+			/>
+		)
 	},
 	veYFI: {
 		name: AppName.VEYFI,
 		menu: VEYFI_MENU,
 		href: '/veyfi',
 		manifest: veyfiManifest,
-		icon: <LogoYearn className={'h-8 w-8'} back={'text-primary'} front={'text-white'} />
+		icon: (
+			<LogoYearn
+				className={'h-8 w-8'}
+				back={'text-primary'}
+				front={'text-white'}
+			/>
+		)
 	},
 	yBribe: {
 		name: AppName.YBRIBE,
 		href: '/ybribe',
 		menu: YBRIBE_MENU,
 		manifest: ybribeManifest,
-		icon: <LogoYearn className={'h-8 w-8'} back={'text-neutral-900'} front={'text-neutral-0'} />
+		icon: (
+			<LogoYearn
+				className={'h-8 w-8'}
+				back={'text-neutral-900'}
+				front={'text-neutral-0'}
+			/>
+		)
 	}
 };
diff --git a/apps/common/components/BalanceReminderPopover.tsx b/apps/common/components/BalanceReminderPopover.tsx
@@ -149,14 +149,21 @@ export function BalanceReminderPopover(): ReactElement {
 										<b>{isActive && address && ens ? ens : isActive && address ? truncateHex(address, 5) : 'Connect wallet'}</b>
 									</div>
 									<div className={'absolute right-4 top-4'}>
-										<button onClick={onDesactivate} className={'flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200/50'}>
+										<button
+											onClick={onDesactivate}
+											className={'flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200/50'}>
 											<IconCross className={'h-4 w-4 text-neutral-600'} />
 										</button>
 									</div>
-									<Renderable shouldRender={nonNullBalancesForVault.length > 0} fallback={renderNoTokenFallback(isLoading)}>
+									<Renderable
+										shouldRender={nonNullBalancesForVault.length > 0}
+										fallback={renderNoTokenFallback(isLoading)}>
 										{nonNullBalancesForVault.map(
 											(element): ReactElement => (
-												<TokenItem key={element.address} element={element} />
+												<TokenItem
+													key={element.address}
+													element={element}
+												/>
 											)
 										)}
 									</Renderable>

diff --git a/apps/common/components/Dropdown.tsx b/apps/common/components/Dropdown.tsx
@@ -14,10 +14,19 @@ const DropdownOption = (option: TDropdownOption): ReactElement => {
 	return (
 		<Combobox.Option value={option}>
 			{({active}): ReactElement => (
-				<div data-active={active} className={'yearn--dropdown-menu-item w-full hover:bg-neutral-0/40'}>
+				<div
+					data-active={active}
+					className={'yearn--dropdown-menu-item w-full hover:bg-neutral-0/40'}>
 					{icon && (
 						<div className={'h-6 w-6 rounded-full'}>
-							<ImageWithFallback alt={label} width={24} height={24} quality={90} src={icon} loading={'eager'} />
+							<ImageWithFallback
+								alt={label}
+								width={24}
+								height={24}
+								quality={90}
+								src={icon}
+								loading={'eager'}
+							/>
 						</div>
 					)}
 					<div>
@@ -110,7 +119,14 @@ export const Dropdown = ({selected, options, onChange, label, legend, isDisabled
 								<div className={'relative flex flex-row items-center'}>
 									{selected?.icon && (
 										<div className={'h-6 w-6 rounded-full'}>
-											<ImageWithFallback alt={selected.label} width={24} height={24} quality={90} src={selected.icon} loading={'eager'} />
+											<ImageWithFallback
+												alt={selected.label}
+												width={24}
+												height={24}
+												quality={90}
+												src={selected.icon}
+												loading={'eager'}
+											/>
 										</div>
 									)}
 									<p
@@ -133,7 +149,10 @@ export const Dropdown = ({selected, options, onChange, label, legend, isDisabled
 									</p>
 								</div>
 								<div className={'absolute right-2 md:right-3'}>
-									<IconChevron aria-hidden={'true'} className={`h-6 w-6 transition-transform ${isOpen ? '-rotate-180' : 'rotate-0'}`} />
+									<IconChevron
+										aria-hidden={'true'}
+										className={`h-6 w-6 transition-transform ${isOpen ? '-rotate-180' : 'rotate-0'}`}
+									/>
 								</div>
 							</Combobox.Button>
 							<Transition
@@ -157,7 +176,13 @@ export const Dropdown = ({selected, options, onChange, label, legend, isDisabled
 									) : (
 										filteredOptions.map(
 											({id, label, description, icon}): ReactElement => (
-												<DropdownOption key={id} id={id} label={label} description={description} icon={icon} />
+												<DropdownOption
+													key={id}
+													id={id}
+													label={label}
+													description={description}
+													icon={icon}
+												/>
 											)
 										)
 									)}

diff --git a/apps/common/components/GaugeDropdown.tsx b/apps/common/components/GaugeDropdown.tsx
@@ -11,7 +11,9 @@ function DropdownItem({option}: TDropdownGaugeItemProps): ReactElement {
 	return (
 		<Combobox.Option value={option}>
 			{({active}): ReactElement => (
-				<div data-active={active} className={'yearn--dropdown-menu-item w-full hover:bg-neutral-0/40'}>
+				<div
+					data-active={active}
+					className={'yearn--dropdown-menu-item w-full hover:bg-neutral-0/40'}>
 					<div className={'h-6 w-6 flex-none rounded-full'}>{option?.icon ? cloneElement(option.icon) : null}</div>
 					<div className={'flex w-full flex-row items-center justify-between'}>
 						<p className={`${option.icon ? 'pl-2' : 'pl-0'} font-normal text-neutral-900`}>{option.label}</p>
@@ -82,13 +84,17 @@ export function Dropdown({options, selected, onSelect, placeholder = ''}: TDropd
 				/>
 			</Renderable>
 
-			<Combobox value={selected} onChange={onSelect}>
+			<Combobox
+				value={selected}
+				onChange={onSelect}>
 				<>
 					<Combobox.Button
 						onClick={(): void => set_isOpen(!isOpen)}
 						className={'flex h-10 w-full items-center justify-between bg-neutral-0 p-2 text-base text-neutral-900 md:px-3'}>
 						<div className={'relative flex flex-row items-center'}>
-							<div key={selected?.label} className={'h-6 w-6 flex-none rounded-full'}>
+							<div
+								key={selected?.label}
+								className={'h-6 w-6 flex-none rounded-full'}>
 								{selected?.icon ? cloneElement(selected.icon) : <div className={'h-6 w-6 flex-none rounded-full bg-neutral-500'} />}
 							</div>
 							<p className={'max-w-[90%] overflow-x-hidden text-ellipsis whitespace-nowrap pl-2 font-normal text-neutral-900 scrollbar-none md:max-w-full'}>
@@ -102,7 +108,10 @@ export function Dropdown({options, selected, onSelect, placeholder = ''}: TDropd
 							</p>
 						</div>
 						<div className={'absolute right-2 md:right-3'}>
-							<IconChevron aria-hidden={'true'} className={`h-6 w-6 transition-transform ${isOpen ? '-rotate-180' : 'rotate-0'}`} />
+							<IconChevron
+								aria-hidden={'true'}
+								className={`h-6 w-6 transition-transform ${isOpen ? '-rotate-180' : 'rotate-0'}`}
+							/>
 						</div>
 					</Combobox.Button>
 					<Transition
@@ -115,11 +124,18 @@ export function Dropdown({options, selected, onSelect, placeholder = ''}: TDropd
 						leaveFrom={'transform scale-100 opacity-100'}
 						leaveTo={'transform scale-95 opacity-0'}
 						afterLeave={(): void => set_query('')}>
-						<Combobox.Options static className={'yearn--dropdown-menu z-50'}>
-							<Renderable shouldRender={filteredOptions.length > 0} fallback={<DropdownEmpty query={query} />}>
+						<Combobox.Options
+							static
+							className={'yearn--dropdown-menu z-50'}>
+							<Renderable
+								shouldRender={filteredOptions.length > 0}
+								fallback={<DropdownEmpty query={query} />}>
 								{filteredOptions.map(
 									(option): ReactElement => (
-										<DropdownItem key={option.label} option={option} />
+										<DropdownItem
+											key={option.label}
+											option={option}
+										/>
 									)
 								)}
 							</Renderable>

diff --git a/apps/common/components/HeroTimer.tsx b/apps/common/components/HeroTimer.tsx
@@ -19,7 +19,9 @@ export function HeroTimer({endTime}: TProps): ReactElement {
 			<div className={'mx-auto flex w-full max-w-6xl flex-col items-center justify-center'}>
 				<div className={'mt-10 w-[300px] md:w-full'}>
 					<div className={'flex w-full items-center justify-center text-center text-4xl font-bold uppercase text-neutral-900 md:text-8xl'}>
-						<b className={'font-number'} suppressHydrationWarning>
+						<b
+							className={'font-number'}
+							suppressHydrationWarning>
 							{time}
 						</b>
 					</div>

diff --git a/apps/common/components/Input.tsx b/apps/common/components/Input.tsx
@@ -32,7 +32,9 @@ export function Input(props: TAmountInputProps): ReactElement {
 				/>
 			</div>
 			{(error ?? legend) && (
-				<legend className={`mt-1 pl-2 text-xs md:mr-0 ${error ? 'text-[#EA5204]' : 'text-neutral-600'}`} suppressHydrationWarning>
+				<legend
+					className={`mt-1 pl-2 text-xs md:mr-0 ${error ? 'text-[#EA5204]' : 'text-neutral-600'}`}
+					suppressHydrationWarning>
 					{error ?? legend}
 				</legend>
 			)}

diff --git a/apps/common/components/ListHead.tsx b/apps/common/components/ListHead.tsx
@@ -45,7 +45,9 @@ export function ListHead({items, dataClassName, wrapperClassName, tokenClassName
 				<p className={'yearn--table-head-label max-w-[32px]'}>{chain.label}</p>
 
 				<div className={cl('yearn--table-head-token-section', tokenClassName)}>
-					<button onClick={(): void => onSort(token.value, toggleSortDirection(token.value))} className={'yearn--table-head-label-wrapper group'}>
+					<button
+						onClick={(): void => onSort(token.value, toggleSortDirection(token.value))}
+						className={'yearn--table-head-label-wrapper group'}>
 						<p className={'yearn--table-head-label'}>{token.label}</p>
 						{renderChevron(sortBy === token.value)}
 					</button>

diff --git a/apps/common/components/ListHero.tsx b/apps/common/components/ListHero.tsx
@@ -54,10 +54,15 @@ function DesktopCategories<T>({categories, onSelect}: TListHeroDesktopCategories
 
 	return (
 		<div className={'w-full'}>
-			<div suppressHydrationWarning className={'mt-1 flex flex-row space-x-4'}>
+			<div
+				suppressHydrationWarning
+				className={'mt-1 flex flex-row space-x-4'}>
 				{(categories || []).map(
 					(currentCategory, index: number): ReactElement => (
-						<div key={`${index}-${isClientLoaded}`} suppressHydrationWarning className={'flex flex-row space-x-0 divide-x border-x border-neutral-900'}>
+						<div
+							key={`${index}-${isClientLoaded}`}
+							suppressHydrationWarning
+							className={'flex flex-row space-x-0 divide-x border-x border-neutral-900'}>
 							{currentCategory.map(
 								(item): ReactElement => (
 									<Button
@@ -98,7 +103,10 @@ function Switch(props: TSwitchProps): ReactElement {
 				onKeyDown={({keyCode}: {keyCode: number}): unknown => (keyCode === 13 ? safeOnSwitch() : null)}
 				className={'yearn--next-switch'}>
 				<span className={'sr-only'}>{'Use setting'}</span>
-				<div aria-hidden={'true'} className={(onSwitch ? isEnabled : isEnabledState) ? 'translate-x-[14px]' : 'translate-x-0'} />
+				<div
+					aria-hidden={'true'}
+					className={(onSwitch ? isEnabled : isEnabledState) ? 'translate-x-[14px]' : 'translate-x-0'}
+				/>
 			</HeadlessSwitch>
 		</div>
 	);
@@ -155,13 +163,18 @@ export function ListHero<T extends string>({
 	return (
 		<div className={'flex flex-col items-start justify-between space-x-0 px-4 pb-2 pt-4 md:px-10 md:pb-8 md:pt-10'}>
 			<div className={'mb-6'}>
-				<h2 suppressHydrationWarning className={'text-lg font-bold md:text-3xl'}>
+				<h2
+					suppressHydrationWarning
+					className={'text-lg font-bold md:text-3xl'}>
 					{headLabel}
 				</h2>
 			</div>
 
 			<div className={'hidden w-full flex-row items-center justify-between space-x-4 md:flex'}>
-				<DesktopCategories categories={categories} onSelect={onSelect} />
+				<DesktopCategories
+					categories={categories}
+					onSelect={onSelect}
+				/>
 
 				<MultiSelectDropdown
 					defaultOption={OPTIONS[0]}
@@ -173,7 +186,11 @@ export function ListHero<T extends string>({
 					}}
 				/>
 
-				<SearchBar searchPlaceholder={searchPlaceholder} searchValue={searchValue} set_searchValue={set_searchValue} />
+				<SearchBar
+					searchPlaceholder={searchPlaceholder}
+					searchValue={searchValue}
+					set_searchValue={set_searchValue}
+				/>
 
 				{!!switchProps && (
 					<div className={'mr-4 mt-7 flex h-full min-w-fit flex-row'}>
@@ -197,7 +214,10 @@ export function ListHero<T extends string>({
 							(currentCategory): ReactNode =>
 								currentCategory.map(
 									(item): ReactElement => (
-										<option suppressHydrationWarning key={item.value} value={item.value}>
+										<option
+											suppressHydrationWarning
+											key={item.value}
+											value={item.value}>
 											{item.label}
 										</option>
 									)