Skip to content

Commit

Permalink
fix: line length
Browse files Browse the repository at this point in the history
  • Loading branch information
Majorfi committed Oct 4, 2023
1 parent f003b0f commit 5bdc5cf
Show file tree
Hide file tree
Showing 138 changed files with 815 additions and 3,229 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@ trim_trailing_whitespace = true
insert_final_newline = true
indent_style = tab
indent_size = 4
max_line_length = 120
max_line_length = 180
22 changes: 3 additions & 19 deletions apps/common/components/AmountInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,7 @@ type TAmountInputProps = {
onMaxClick?: () => void;
};

export function AmountInput({
amount,
maxAmount,
label,
placeholder,
legend,
error,
disabled,
loading,
onAmountChange,
onLegendClick,
onMaxClick
}: TAmountInputProps): ReactElement {
export function AmountInput({amount, maxAmount, label, placeholder, legend, error, disabled, loading, onAmountChange, onLegendClick, onMaxClick}: TAmountInputProps): ReactElement {
let displayedAmount = amount.toString();
if (isZero(displayedAmount) && !disabled) {
displayedAmount = '';
Expand All @@ -43,9 +31,7 @@ export function AmountInput({
{label && <p className={'mb-1 w-full truncate text-base text-neutral-600'}>{label}</p>}
<div className={'relative flex w-full items-center justify-center'}>
<input
className={`h-10 w-full p-2 font-mono text-base font-normal outline-none ${
maxAmount && !disabled ? 'pr-12' : null
} ${
className={`h-10 w-full p-2 font-mono text-base font-normal outline-none ${maxAmount && !disabled ? 'pr-12' : null} ${
error ? 'border border-solid border-[#EA5204] focus:border-[#EA5204]' : 'border-0 border-none'
} ${disabled ? 'bg-neutral-300 text-neutral-600' : 'bg-neutral-0'}`}
type={'number'}
Expand All @@ -59,9 +45,7 @@ export function AmountInput({
<Renderable shouldRender={!!maxAmount && !disabled}>
<button
onClick={onMaxClick ? (): void => onMaxClick() : undefined}
className={
'absolute right-2 ml-2 h-6 cursor-pointer border-none bg-neutral-900 px-2 py-1 text-xs text-neutral-0 transition-colors hover:bg-neutral-700'
}>
className={'absolute right-2 ml-2 h-6 cursor-pointer border-none bg-neutral-900 px-2 py-1 text-xs text-neutral-0 transition-colors hover:bg-neutral-700'}>
{'Max'}
</button>
</Renderable>
Expand Down
18 changes: 4 additions & 14 deletions apps/common/components/AppHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,7 @@ 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>
Expand All @@ -80,24 +77,17 @@ function LogoPopover(): ReactElement {
leave={'transition ease-in duration-150'}
leaveFrom={'opacity-100 translate-y-0'}
leaveTo={'opacity-0 translate-y-1'}>
<Popover.Panel
className={'absolute left-1/2 z-10 mt-6 w-80 -translate-x-1/2 px-4 pt-4 sm:px-0 md:w-96'}>
<Popover.Panel className={'absolute left-1/2 z-10 mt-6 w-80 -translate-x-1/2 px-4 pt-4 sm:px-0 md:w-96'}>
<div className={'overflow-hidden border border-neutral-200 shadow-lg'}>
<div className={'relative grid grid-cols-2 bg-neutral-0 md:grid-cols-3'}>
{[...Object.values(APPS), YETH]
.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'
}>
className={'flex cursor-pointer flex-col items-center p-4 transition-colors hover:bg-neutral-200'}>
<div>{cloneElement(icon)}</div>
<div className={'pt-2 text-center'}>
<b className={'text-base'}>{name}</b>
Expand Down
22 changes: 2 additions & 20 deletions apps/common/components/Apps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,33 +46,15 @@ export const APPS: {[key in AppName]: TApp} = {
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,
Expand Down
89 changes: 27 additions & 62 deletions apps/common/components/BalanceReminderPopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,7 @@ function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement
const {safeChainID} = useChainID();
const balance = useBalance(element.address);

async function addTokenToMetamask(
address: TAddress,
symbol: string,
decimals: number,
image: string
): Promise<void> {
async function addTokenToMetamask(address: TAddress, symbol: string, decimals: number, image: string): Promise<void> {
if (!provider) {
return;
}
Expand Down Expand Up @@ -68,9 +63,7 @@ function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement
width={32}
height={32}
quality={90}
src={`${process.env.BASE_YEARN_ASSETS_URI}/${safeChainID}/${toAddress(
element.address
)}/logo-128.png`}
src={`${process.env.BASE_YEARN_ASSETS_URI}/${safeChainID}/${toAddress(element.address)}/logo-128.png`}
/>
</div>
<span className={'ml-2'}>{element.symbol}</span>
Expand All @@ -85,14 +78,10 @@ function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement
element.address,
element.symbol,
element.decimals,
`${process.env.BASE_YEARN_ASSETS_URI}/${safeChainID}/${toAddress(
element.address
)}/logo-128.png`
`${process.env.BASE_YEARN_ASSETS_URI}/${safeChainID}/${toAddress(element.address)}/logo-128.png`
);
}}
className={
'ml-4 h-4 w-4 cursor-pointer text-neutral-400 transition-colors hover:text-neutral-900'
}
className={'ml-4 h-4 w-4 cursor-pointer text-neutral-400 transition-colors hover:text-neutral-900'}
/>
</span>
</span>
Expand All @@ -106,34 +95,28 @@ export function BalanceReminderPopover(): ReactElement {
const {vaults} = useYearn();

const nonNullBalances = useMemo((): TDict<TBalanceData> => {
const nonNullBalances = Object.entries(balances).reduce(
(acc: TDict<TBalanceData>, [address, balance]): TDict<TBalanceData> => {
if (toBigInt(balance?.raw) > 0n) {
acc[toAddress(address)] = balance;
}
return acc;
},
{}
);
const nonNullBalances = Object.entries(balances).reduce((acc: TDict<TBalanceData>, [address, balance]): TDict<TBalanceData> => {
if (toBigInt(balance?.raw) > 0n) {
acc[toAddress(address)] = balance;
}
return acc;
}, {});
return nonNullBalances;
}, [balances]);

const nonNullBalancesForVault = useMemo((): TBalanceReminderElement[] => {
const nonNullBalancesForVault = Object.entries(nonNullBalances).reduce(
(acc: TBalanceReminderElement[], [address, balance]): TBalanceReminderElement[] => {
const currentVault = vaults?.[toAddress(address)];
if (currentVault) {
acc.push({
address: toAddress(address),
normalizedBalance: balance.normalized,
decimals: balance.decimals,
symbol: currentVault.symbol
});
}
return acc;
},
[]
);
const nonNullBalancesForVault = Object.entries(nonNullBalances).reduce((acc: TBalanceReminderElement[], [address, balance]): TBalanceReminderElement[] => {
const currentVault = vaults?.[toAddress(address)];
if (currentVault) {
acc.push({
address: toAddress(address),
normalizedBalance: balance.normalized,
decimals: balance.decimals,
symbol: currentVault.symbol
});
}
return acc;
}, []);
return nonNullBalancesForVault;
}, [nonNullBalances, vaults]);

Expand All @@ -159,36 +142,18 @@ export function BalanceReminderPopover(): ReactElement {
leave={'transition ease-in duration-150'}
leaveFrom={'opacity-100 translate-y-0'}
leaveTo={'opacity-0 translate-y-1'}>
<Popover.Panel
className={
'yearn--shadow absolute right-0 top-6 z-[1000] mt-3 w-screen max-w-xs md:-right-4 md:top-4'
}>
<Popover.Panel className={'yearn--shadow absolute right-0 top-6 z-[1000] mt-3 w-screen max-w-xs md:-right-4 md:top-4'}>
<div className={'overflow-hidden'}>
<div className={'relative bg-neutral-0 p-0'}>
<div
className={
'flex items-center justify-center border-b border-neutral-300 py-4 text-center'
}>
<b>
{isActive && address && ens
? ens
: isActive && address
? truncateHex(address, 5)
: 'Connect wallet'}
</b>
<div className={'flex items-center justify-center border-b border-neutral-300 py-4 text-center'}>
<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} />
Expand Down
57 changes: 8 additions & 49 deletions apps/common/components/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,12 @@ const DropdownOption = (option: TDropdownOption): ReactElement => {
<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>
<p className={`font-normal text-neutral-900 ${icon ? 'pl-2' : 'pl-0'}`}>{label}</p>
{description && (
<p className={`text-xxs font-normal text-neutral-600 ${icon ? 'pl-2' : 'pl-0'}`}>
{description}
</p>
)}
{description && <p className={`text-xxs font-normal text-neutral-600 ${icon ? 'pl-2' : 'pl-0'}`}>{description}</p>}
</div>
</div>
)}
Expand Down Expand Up @@ -78,22 +67,12 @@ export type TDropdownProps = {
className?: string;
};

export const Dropdown = ({
selected,
options,
onChange,
label,
legend,
isDisabled,
className
}: TDropdownProps): ReactElement => {
export const Dropdown = ({selected, options, onChange, label, legend, isDisabled, className}: TDropdownProps): ReactElement => {
const [isOpen, set_isOpen] = useThrottledState(false, 400);
const [search, set_search] = useState('');

const isSearching = search !== '';
const filteredOptions = isSearching
? options.filter(({label}): boolean => label.toLowerCase().includes(search.toLowerCase()))
: options;
const filteredOptions = isSearching ? options.filter(({label}): boolean => label.toLowerCase().includes(search.toLowerCase())) : options;

return (
<div className={className}>
Expand Down Expand Up @@ -131,14 +110,7 @@ export const Dropdown = ({
<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
Expand All @@ -148,9 +120,7 @@ export const Dropdown = ({
isDisabled ? 'text-neutral-600' : 'text-neutral-900'
)}>
<Combobox.Input
className={
'w-full cursor-default overflow-x-scroll border-none bg-transparent p-0 outline-none scrollbar-none'
}
className={'w-full cursor-default overflow-x-scroll border-none bg-transparent p-0 outline-none scrollbar-none'}
displayValue={(option?: TDropdownOption): string => option?.label ?? '-'}
spellCheck={false}
onChange={(event): void => {
Expand All @@ -163,12 +133,7 @@ export const Dropdown = ({
</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
Expand All @@ -192,13 +157,7 @@ export const Dropdown = ({
) : (
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} />
)
)
)}
Expand Down
Loading

0 comments on commit 5bdc5cf

Please sign in to comment.