From 3d9305669bdd0d1b8e7b383109d12acca01e9b37 Mon Sep 17 00:00:00 2001 From: tyleroooo Date: Wed, 22 May 2024 15:39:01 -0400 Subject: [PATCH] chore: eslint everywhere else (#567) --- .eslintignore | 6 - .eslintrc.json | 2 + src/components/Accordion.tsx | 1 + src/components/AlertMessage.tsx | 6 +- src/components/AssetIcon.tsx | 2 +- src/components/Button.tsx | 22 +- src/components/Checkbox.tsx | 2 +- src/components/CollapsibleTabs.tsx | 2 +- src/components/ComboboxMenu.tsx | 1 - src/components/Details.tsx | 5 + src/components/Dialog.tsx | 13 +- src/components/DiffArrow.tsx | 4 +- src/components/DropdownHeaderMenu.stories.tsx | 2 +- src/components/DropdownMenu.stories.tsx | 1 + src/components/DropdownSelectMenu.tsx | 55 +++-- src/components/ErrorBoundary.tsx | 7 +- src/components/FormInput.tsx | 2 +- src/components/Input.tsx | 22 +- src/components/Link.tsx | 1 + src/components/Loading/LoadingDots.tsx | 2 +- src/components/Loading/LoadingSpinner.tsx | 16 +- src/components/MarginUsageRing.stories.tsx | 8 +- src/components/NavigationMenu.stories.tsx | 12 +- src/components/NavigationMenu.tsx | 6 +- src/components/Notification.tsx | 3 +- src/components/OrderSideTag.stories.tsx | 16 +- src/components/Output.tsx | 219 +++++++++--------- .../PageMenu/PageMenuNavigationItem.tsx | 2 +- src/components/PositionSideTag.stories.tsx | 24 +- src/components/PositionSideTag.tsx | 4 +- src/components/QrCode.tsx | 2 +- src/components/RadioButtonCards.stories.tsx | 10 +- src/components/RelativeTime.tsx | 1 + src/components/Ring.stories.tsx | 4 +- src/components/ScrollAreas.stories.tsx | 2 +- src/components/SearchInput.stories.tsx | 2 +- src/components/SearchSelectMenu.tsx | 10 +- src/components/SelectMenu.stories.tsx | 10 +- src/components/Separator.tsx | 46 ++-- src/components/StepIndicator.tsx | 1 + src/components/Table.tsx | 13 -- src/components/Table/AssetTableCell.tsx | 3 +- src/components/Table/MarketTableCell.tsx | 2 +- src/components/Tabs.tsx | 10 +- src/components/Tag.tsx | 2 +- src/components/TimoutButton.stories.tsx | 1 + src/components/Toast.tsx | 2 +- src/components/TriangleIndicator.stories.tsx | 4 +- src/components/TriangleIndicator.tsx | 2 +- src/components/WithReceipt.tsx | 2 +- src/components/WithTooltip.tsx | 2 +- src/components/visx/SparklineChart.tsx | 1 + src/components/visx/TimeSeriesChart.tsx | 91 ++++---- .../visx/XYChartTooltipWithBounds.tsx | 36 +-- .../visx/XYChartWithPointerEvents.tsx | 10 +- src/hooks/useAccountBalance.ts | 1 - src/hooks/useSelectedNetwork.ts | 2 +- src/pages/token/rewards/MigratePanel.tsx | 3 - src/views/PositionTile.stories.tsx | 2 - src/views/charts/FundingChart/index.tsx | 1 - src/views/charts/PnlChart.tsx | 1 - .../dialogs/OnboardingDialog/GenerateKeys.tsx | 4 - .../TradeForm/LeverageSlider.stories.tsx | 1 - .../TriggersForm/OrderSizeSlider.stories.tsx | 1 - src/views/forms/TriggersForm/TriggersForm.tsx | 4 +- src/views/tables/FillsTable.tsx | 9 +- src/views/tables/FundingPaymentsTable.tsx | 3 +- src/views/tables/MarketsCompactTable.tsx | 4 +- src/views/tables/MarketsTable.tsx | 4 +- src/views/tables/OrdersTable.tsx | 11 +- .../tables/OrdersTable/OrderActionsCell.tsx | 2 +- src/views/tables/PositionsTable.tsx | 3 +- .../PositionsTable/PositionsActionsCell.tsx | 2 +- .../PositionsTable/PositionsTriggersCell.tsx | 2 +- .../tables/TradingRewardHistoryTable.tsx | 3 +- src/views/tables/TransferHistoryTable.tsx | 4 +- 76 files changed, 415 insertions(+), 389 deletions(-) diff --git a/.eslintignore b/.eslintignore index cc86ec570..07e3f0007 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,9 +3,3 @@ vite-env.d.ts polyfills.ts vite.config.ts commitlint.config.ts - -# components dir is being worked on -/src/components/* - -# unignored components -!/src/components/Table.tsx \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json index 97098d8b1..9d4bec370 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -22,6 +22,8 @@ "rules": { "class-methods-use-this": "off", "import/extensions": "off", + // let prettier handle + "import/order": "off", "import/no-extraneous-dependencies": [ "error", { diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx index 99056f093..1f7ac8254 100644 --- a/src/components/Accordion.tsx +++ b/src/components/Accordion.tsx @@ -18,6 +18,7 @@ export type AccordionProps = { export const Accordion = ({ items, className }: AccordionProps) => ( <$Root className={className} type="single" collapsible> {items.map(({ header, content }, idx) => ( + // eslint-disable-next-line react/no-array-index-key <$Item key={idx} value={idx.toString()}>
<$Trigger> diff --git a/src/components/AlertMessage.tsx b/src/components/AlertMessage.tsx index d66f1a52f..45e7fe8ab 100644 --- a/src/components/AlertMessage.tsx +++ b/src/components/AlertMessage.tsx @@ -15,7 +15,11 @@ type ElementProps = { export type AlertMessageProps = ElementProps & StyleProps; -export const AlertMessage: React.FC = ({ className, children, type }) => { +export const AlertMessage: React.FC = ({ + className, + children, + type, +}: AlertMessageProps) => { return ( {children} diff --git a/src/components/AssetIcon.tsx b/src/components/AssetIcon.tsx index 1470b67a4..0aaaaa0e8 100644 --- a/src/components/AssetIcon.tsx +++ b/src/components/AssetIcon.tsx @@ -106,7 +106,7 @@ const assetIcons = { } as const; const isAssetSymbol = (symbol: Nullable): symbol is AssetSymbol => - symbol != null && assetIcons.hasOwnProperty(symbol); + symbol != null && Object.hasOwn(assetIcons, symbol); export const AssetIcon = ({ symbol, diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 9ccadf5f5..533785710 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -61,20 +61,18 @@ export const Button = forwardRef - <> - {state[ButtonState.Loading] ? ( - - ) : ( - <> - {slotLeft} - {children} - {slotRight} - - )} - + {state[ButtonState.Loading] ? ( + + ) : ( + <> + {slotLeft} + {children} + {slotRight} + + )} ); } diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index acd081945..123ac5180 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -25,7 +25,7 @@ export const Checkbox: React.FC = ({ id, label, disabled, -}) => ( +}: CheckboxProps) => ( <$Container> <$Root className={className} diff --git a/src/components/CollapsibleTabs.tsx b/src/components/CollapsibleTabs.tsx index e68f2ff1f..1218c29d9 100644 --- a/src/components/CollapsibleTabs.tsx +++ b/src/components/CollapsibleTabs.tsx @@ -78,7 +78,7 @@ export const CollapsibleTabs = ({ <$Toolbar> - {currentTab?.slotToolbar || slotToolbar} + {currentTab?.slotToolbar ?? slotToolbar} <$IconButton iconName={IconName.Caret} isToggle /> diff --git a/src/components/ComboboxMenu.tsx b/src/components/ComboboxMenu.tsx index 16ea87548..25ba3bb6a 100644 --- a/src/components/ComboboxMenu.tsx +++ b/src/components/ComboboxMenu.tsx @@ -47,7 +47,6 @@ export const ComboboxMenu = < withItemBorders, withStickyLayout, }: ComboboxMenuProps) => { - const [highlightedCommand, setHighlightedCommand] = useState(); const [searchValue, setSearchValue] = useState(''); return ( diff --git a/src/components/Details.tsx b/src/components/Details.tsx index ddc3e2b03..e319df631 100644 --- a/src/components/Details.tsx +++ b/src/components/Details.tsx @@ -12,11 +12,13 @@ import { WithSeparators } from '@/components/Separator'; import { WithTooltip } from '@/components/WithTooltip'; export type DetailsItem = { + // eslint-disable-next-line react/no-unused-prop-types key: string; tooltip?: string; tooltipParams?: Record; label: string | JSX.Element; value?: Nullable | JSX.Element | undefined; + // eslint-disable-next-line react/no-unused-prop-types subitems?: DetailsItem[]; withTooltipIcon?: boolean; allowUserSelection?: boolean; @@ -47,8 +49,11 @@ type ElementProps = { type StyleProps = { layout?: 'column' | 'row' | 'rowColumns' | 'grid' | 'stackColumn'; justifyItems?: 'start' | 'end'; + // I don't know why we're getting false positives for these props + // eslint-disable-next-line react/no-unused-prop-types withSeparators?: boolean; withOverflow?: boolean; + // eslint-disable-next-line react/no-unused-prop-types className?: string; }; diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index c2aa756b1..f9b32c3c6 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import { PropsWithChildren, useRef } from 'react'; import { Close, @@ -58,19 +58,14 @@ const DialogPortal = ({ withPortal, container, children, -}: { +}: PropsWithChildren<{ withPortal: boolean; container?: HTMLElement; - children: React.ReactNode; -}) => { +}>) => { const { dialogAreaRef: { current }, } = useDialogArea() ?? { dialogAreaRef: {} }; - return withPortal ? ( - {children} - ) : ( - <>{children} - ); + return withPortal ? {children} : children; }; export const Dialog = ({ diff --git a/src/components/DiffArrow.tsx b/src/components/DiffArrow.tsx index 330ad12f8..f6ee81e6a 100644 --- a/src/components/DiffArrow.tsx +++ b/src/components/DiffArrow.tsx @@ -1,4 +1,4 @@ -import styled, { AnyStyledComponent, css } from 'styled-components'; +import styled, { css } from 'styled-components'; import { NumberSign } from '@/constants/numbers'; @@ -60,5 +60,5 @@ const $DiffArrowContainer = styled.span` down: css` transform: rotate(90deg); `, - }[direction || 'right'])} + }[direction ?? 'right'])} `; diff --git a/src/components/DropdownHeaderMenu.stories.tsx b/src/components/DropdownHeaderMenu.stories.tsx index cd3664289..54113e376 100644 --- a/src/components/DropdownHeaderMenu.stories.tsx +++ b/src/components/DropdownHeaderMenu.stories.tsx @@ -9,7 +9,7 @@ import { DropdownHeaderMenu } from '@/components/DropdownHeaderMenu'; import { StoryWrapper } from '.ladle/components'; -export const DropdownHeaderMenuStory: Story> = (args) => { +export const DropdownHeaderMenuStory: Story> = () => { const [view, setView] = useState(); const exampleItems = [ diff --git a/src/components/DropdownMenu.stories.tsx b/src/components/DropdownMenu.stories.tsx index abe57cf72..b9d3b1857 100644 --- a/src/components/DropdownMenu.stories.tsx +++ b/src/components/DropdownMenu.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-alert */ import type { Story } from '@ladle/react'; import { DropdownMenu } from '@/components/DropdownMenu'; diff --git a/src/components/DropdownSelectMenu.tsx b/src/components/DropdownSelectMenu.tsx index d98813952..0f050a35f 100644 --- a/src/components/DropdownSelectMenu.tsx +++ b/src/components/DropdownSelectMenu.tsx @@ -75,30 +75,41 @@ export const DropdownSelectMenu = ({ onValueChange(value as MenuItemValue) : undefined + onValueChange != null + ? (innerValue) => onValueChange(innerValue as MenuItemValue) + : undefined } > - {items.map(({ value, label, slotBefore, slotAfter, tag, disabled }) => ( - <$RadioItem key={value} value={value} disabled={disabled}> - {slotBefore} - - <$ItemLabel> - {label} - {tag && ( - <> - {' '} - {tag} - - )} - - - {slotAfter} - - <$ItemIndicator> - - - - ))} + {items.map( + ({ + value: innerValue, + label, + slotBefore, + slotAfter, + tag, + disabled: innerDisabled, + }) => ( + <$RadioItem key={innerValue} value={innerValue} disabled={innerDisabled}> + {slotBefore} + + <$ItemLabel> + {label} + {tag && ( + <> + {' '} + {tag} + + )} + + + {slotAfter} + + <$ItemIndicator> + + + + ) + )} diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx index 28cf98ad0..7085afcc7 100644 --- a/src/components/ErrorBoundary.tsx +++ b/src/components/ErrorBoundary.tsx @@ -5,15 +5,12 @@ import { log } from '@/lib/telemetry'; type ErrorBoundaryProps = { children: React.ReactNode }; export class ErrorBoundary extends React.Component { - constructor(props: ErrorBoundaryProps) { - super(props); - } - componentDidCatch(error: Error): void { log('ErrorBoundary', error); } render() { - return this.props.children; + const { children } = this.props; + return children; } } diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx index b7671ddf1..14e7d872c 100644 --- a/src/components/FormInput.tsx +++ b/src/components/FormInput.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react'; -import styled, { AnyStyledComponent, css } from 'styled-components'; +import styled, { css } from 'styled-components'; import { AlertType } from '@/constants/alerts'; diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 0be56bddc..b2f76cdbd 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -70,7 +70,7 @@ export const Input = forwardRef( { className, allowNegative = false, - decimals, + decimals: inDecimals, disabled, id, max, @@ -107,7 +107,7 @@ export const Input = forwardRef( [InputType.Search]: null, }[type]; - decimals = decimals !== undefined ? decimals : numberFormatConfig?.defaultDecimals; + const decimals = inDecimals ?? numberFormatConfig?.defaultDecimals; const defaultNumberPlaceholder = `${numberFormatConfig?.prefix ?? ''}${BIG_NUMBERS.ZERO.toFixed( decimals !== undefined ? decimals : USD_DECIMALS @@ -153,7 +153,7 @@ export const Input = forwardRef( decimalScale={decimals} decimalSeparator={LOCALE_DECIMAL_SEPARATOR} isAllowed={({ floatValue }: NumberFormatValues) => - floatValue ? floatValue <= (max || Number.MAX_VALUE) : true + floatValue ? floatValue <= (max ?? Number.MAX_VALUE) : true } prefix={numberFormatConfig?.prefix} suffix={numberFormatConfig?.suffix} @@ -163,20 +163,22 @@ export const Input = forwardRef( onFocus={onFocus} onInput={(e: SyntheticInputEvent) => { if (!onInput) return; - const value = e.target.value; - const { prefix = '', suffix = '' } = numberFormatConfig || {}; + const newValue = e.target.value; + const { prefix = '', suffix = '' } = numberFormatConfig ?? {}; // Remove prefix and suffix, replace commas with periods - const formattedValue = value.replace(prefix, '').replace(suffix, ''); + const newFormattedValue = newValue.replace(prefix, '').replace(suffix, ''); - const floatValue: number | undefined = isNaN(Number(formattedValue.replace(',', '.'))) + const floatValue: number | undefined = Number.isNaN( + Number(newFormattedValue.replace(',', '.')) + ) ? undefined - : Number(formattedValue.replace(',', '.')); + : Number(newFormattedValue.replace(',', '.')); - onInput?.({ value, floatValue, formattedValue, ...e }); + onInput?.({ value: newValue, floatValue, formattedValue: newFormattedValue, ...e }); }} // Native disabled={disabled} - placeholder={placeholder || defaultNumberPlaceholder} + placeholder={placeholder ?? defaultNumberPlaceholder} value={formattedValue} autoComplete="off" autoCorrect="off" diff --git a/src/components/Link.tsx b/src/components/Link.tsx index e66253039..5531379f8 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -40,6 +40,7 @@ export const Link = forwardRef( href={href} onClick={(e: React.MouseEvent) => { if (analyticsConfig) { + // eslint-disable-next-line no-console console.log(analyticsConfig); } diff --git a/src/components/Loading/LoadingDots.tsx b/src/components/Loading/LoadingDots.tsx index 7d8b94af1..dac3d7681 100644 --- a/src/components/Loading/LoadingDots.tsx +++ b/src/components/Loading/LoadingDots.tsx @@ -6,7 +6,7 @@ export type LoadingDotsProps = { }; // Component -export const LoadingDots: React.FC = ({ size = 1 }) => ( +export const LoadingDots: React.FC = ({ size = 1 }: LoadingDotsProps) => ( diff --git a/src/components/Loading/LoadingSpinner.tsx b/src/components/Loading/LoadingSpinner.tsx index d462ad3ed..b27bd1276 100644 --- a/src/components/Loading/LoadingSpinner.tsx +++ b/src/components/Loading/LoadingSpinner.tsx @@ -2,13 +2,18 @@ import styled, { keyframes } from 'styled-components'; import { layoutMixins } from '@/styles/layoutMixins'; -// In some strange cases, hiding a spinner on one part of the page causes the linearGradient to -// be hidden on all other instances of the page. An id can be passed in to prevent this. -export const LoadingSpinner: React.FC<{ +type LoadingSpinnerProps = { id?: string; className?: string; disabled?: boolean; -}> = ({ id, className, disabled = false }) => { +}; +// In some strange cases, hiding a spinner on one part of the page causes the linearGradient to +// be hidden on all other instances of the page. An id can be passed in to prevent this. +export const LoadingSpinner: React.FC = ({ + id, + className, + disabled = false, +}: LoadingSpinnerProps) => { return ( <$Spinner className={className}> <$LoadingSpinnerSvg @@ -40,7 +45,8 @@ export const LoadingSpinner: React.FC<{ ); }; -export const LoadingSpace: React.FC<{ className?: string; id: string }> = ({ className, id }) => ( +type LoadingSpaceProps = { className?: string; id: string }; +export const LoadingSpace: React.FC = ({ className, id }: LoadingSpaceProps) => ( <$LoadingSpaceContainer className={className}> diff --git a/src/components/MarginUsageRing.stories.tsx b/src/components/MarginUsageRing.stories.tsx index 3b2aaa94d..2ac5cc70d 100644 --- a/src/components/MarginUsageRing.stories.tsx +++ b/src/components/MarginUsageRing.stories.tsx @@ -7,11 +7,11 @@ import { MarginUsageRing } from '@/components/MarginUsageRing'; import { StoryWrapper } from '.ladle/components'; -export const MarginUsageRingStory: Story<{ value: number }> = (args) => { +export const MarginUsageRingStory: Story<{ value: number }> = ({ value }: { value: number }) => { return ( <$Container> - + ); @@ -21,11 +21,11 @@ MarginUsageRingStory.args = { value: 0, }; -export const MarginUsageRingStyled: Story<{ value: number }> = (args) => { +export const MarginUsageRingStyled: Story<{ value: number }> = ({ value }: { value: number }) => { return ( <$Container> - <$MarginUsageRing value={args.value / 100} /> + <$MarginUsageRing value={value / 100} /> ); diff --git a/src/components/NavigationMenu.stories.tsx b/src/components/NavigationMenu.stories.tsx index b3738b0d4..20c736ce1 100644 --- a/src/components/NavigationMenu.stories.tsx +++ b/src/components/NavigationMenu.stories.tsx @@ -10,13 +10,11 @@ export const NavigationMenuStory: Story< > = (args) => { return ( - - Menu - - } - /> + + + Menu + + ); }; diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx index b595557f3..c52e2131e 100644 --- a/src/components/NavigationMenu.tsx +++ b/src/components/NavigationMenu.tsx @@ -389,10 +389,10 @@ const $SubMenuTrigger = styled(Trigger)` } `; -type navItemStyleProps = { orientation: 'horizontal' | 'vertical' }; -const NavItemTypeTemp = getSimpleStyledOutputType(NavItem, {} as navItemStyleProps); +type NavItemStyleProps = { orientation: 'horizontal' | 'vertical' }; +const NavItemTypeTemp = getSimpleStyledOutputType(NavItem, {} as NavItemStyleProps); -const $NavItem = styled(NavItem)` +const $NavItem = styled(NavItem)` ${({ subitems }) => subitems?.length ? css` diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx index 7daac8319..28c0e52f7 100644 --- a/src/components/Notification.tsx +++ b/src/components/Notification.tsx @@ -1,4 +1,4 @@ -import React, { type MouseEvent } from 'react'; +import React from 'react'; import styled, { css } from 'styled-components'; @@ -8,6 +8,7 @@ import { type Notification as NotificationDataType, } from '@/constants/notifications'; +// eslint-disable-next-line import/no-cycle import { useNotifications } from '@/hooks/useNotifications'; import { layoutMixins } from '@/styles/layoutMixins'; diff --git a/src/components/OrderSideTag.stories.tsx b/src/components/OrderSideTag.stories.tsx index f9f2715b3..87ff686fb 100644 --- a/src/components/OrderSideTag.stories.tsx +++ b/src/components/OrderSideTag.stories.tsx @@ -5,10 +5,14 @@ import { OrderSideTag } from '@/components/OrderSideTag'; import { StoryWrapper } from '.ladle/components'; -export const BuyTagStory: Story<{ orderSide: OrderSide }> = (args) => { +export const BuyTagStory: Story<{ orderSide: OrderSide }> = ({ + orderSide, +}: { + orderSide: OrderSide; +}) => { return ( - + ); }; @@ -17,10 +21,14 @@ BuyTagStory.args = { orderSide: OrderSide.BUY, }; -export const SellTagStory: Story<{ orderSide: OrderSide }> = (args) => { +export const SellTagStory: Story<{ orderSide: OrderSide }> = ({ + orderSide, +}: { + orderSide: OrderSide; +}) => { return ( - + ); }; diff --git a/src/components/Output.tsx b/src/components/Output.tsx index d1fd52c57..037369ac6 100644 --- a/src/components/Output.tsx +++ b/src/components/Output.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/no-unstable-nested-components */ import { useContext } from 'react'; import BigNumber from 'bignumber.js'; @@ -43,7 +44,9 @@ export enum OutputType { Percent = 'Percent', SmallPercent = 'SmallPercent', Multiple = 'Multiple', + // eslint-disable-next-line @typescript-eslint/no-shadow RelativeTime = 'RelativeTime', + // eslint-disable-next-line @typescript-eslint/no-shadow DateTime = 'DateTime', Date = 'Date', Time = 'Time', @@ -236,6 +239,108 @@ export const Output = ({ : {}), }; + const numberRenderers = { + [OutputType.CompactNumber]: () => { + if (!isNumber(value)) { + throw new Error('value must be a number for compact number output'); + } + + return ( + + ); + }, + [OutputType.Number]: () => ( + + ), + [OutputType.Fiat]: () => ( + + ), + [OutputType.SmallFiat]: () => ( + + ), + [OutputType.CompactFiat]: () => { + if (!isNumber(value)) { + throw new Error('value must be a number for compact fiat output'); + } + + return ( + + ); + }, + [OutputType.Asset]: () => ( + + ), + [OutputType.Percent]: () => ( + + ), + [OutputType.SmallPercent]: () => ( + + ), + [OutputType.Multiple]: () => ( + + ), + }; return ( <$Number key={value?.toString()} @@ -253,111 +358,7 @@ export const Output = ({ > {slotLeft} {sign && <$Sign>{sign}} - {hasValue && - { - [OutputType.CompactNumber]: () => { - if (!isNumber(value)) { - throw new Error('value must be a number for compact number output'); - } - - return ( - - ); - }, - [OutputType.Number]: () => ( - - ), - [OutputType.Fiat]: () => ( - - ), - [OutputType.SmallFiat]: () => ( - - ), - [OutputType.CompactFiat]: () => { - if (!isNumber(value)) { - throw new Error('value must be a number for compact fiat output'); - } - - return ( - - ); - }, - [OutputType.Asset]: () => ( - - ), - [OutputType.Percent]: () => ( - - ), - [OutputType.SmallPercent]: () => ( - - ), - [OutputType.Multiple]: () => ( - - ), - }[type]()} + {hasValue && numberRenderers[type]()} {slotRight} {tag && <$Tag>{tag}} @@ -368,7 +369,7 @@ export const Output = ({ } }; -const _OUTPUT_STYLES = styled.output<{ withParentheses?: boolean }>` +const $Text = styled.output<{ withParentheses?: boolean }>` --output-beforeString: ''; --output-afterString: ''; --output-sign-color: currentColor; @@ -401,8 +402,6 @@ const _OUTPUT_STYLES = styled.output<{ withParentheses?: boolean }>` `} `; -const $Output = _OUTPUT_STYLES; - const $Tag = styled(Tag)` margin-left: 0.5ch; `; @@ -411,9 +410,7 @@ const $Sign = styled.span` color: var(--output-sign-color); `; -const $Text = styled(_OUTPUT_STYLES)``; - -const $Number = styled(_OUTPUT_STYLES)<{ withBaseFont?: boolean }>` +const $Number = styled($Text)<{ withBaseFont?: boolean }>` ${({ withBaseFont }) => !withBaseFont && css` diff --git a/src/components/PageMenu/PageMenuNavigationItem.tsx b/src/components/PageMenu/PageMenuNavigationItem.tsx index 63ec896e1..b588e0bbe 100644 --- a/src/components/PageMenu/PageMenuNavigationItem.tsx +++ b/src/components/PageMenu/PageMenuNavigationItem.tsx @@ -16,7 +16,7 @@ export const PageMenuNavigationItem = < label, labelRight, }: MenuItem) => ( - + <$MenuItem>
{label}
<$RightRow> diff --git a/src/components/PositionSideTag.stories.tsx b/src/components/PositionSideTag.stories.tsx index dcaf1abf7..7f3720a94 100644 --- a/src/components/PositionSideTag.stories.tsx +++ b/src/components/PositionSideTag.stories.tsx @@ -6,10 +6,14 @@ import { PositionSideTag } from '@/components/PositionSideTag'; import { StoryWrapper } from '.ladle/components'; -export const LongTagStory: Story<{ positionSide: PositionSide }> = (args) => { +export const LongTagStory: Story<{ positionSide: PositionSide }> = ({ + positionSide, +}: { + positionSide: PositionSide; +}) => { return ( - + ); }; @@ -18,10 +22,14 @@ LongTagStory.args = { positionSide: PositionSide.Long, }; -export const ShortTagStory: Story<{ positionSide: PositionSide }> = (args) => { +export const ShortTagStory: Story<{ positionSide: PositionSide }> = ({ + positionSide, +}: { + positionSide: PositionSide; +}) => { return ( - + ); }; @@ -30,10 +38,14 @@ ShortTagStory.args = { positionSide: PositionSide.Short, }; -export const NoneTagStory: Story<{ positionSide: PositionSide }> = (args) => { +export const NoneTagStory: Story<{ positionSide: PositionSide }> = ({ + positionSide, +}: { + positionSide: PositionSide; +}) => { return ( - + ); }; diff --git a/src/components/PositionSideTag.tsx b/src/components/PositionSideTag.tsx index 5a2322196..cfba66f63 100644 --- a/src/components/PositionSideTag.tsx +++ b/src/components/PositionSideTag.tsx @@ -25,9 +25,9 @@ export const PositionSideTag = ({ positionSide, size }: ElementProps & StyleProp - {stringGetter({ key: POSITION_SIDE_STRINGS[positionSide || PositionSide.None] })} + {stringGetter({ key: POSITION_SIDE_STRINGS[positionSide ?? PositionSide.None] })} ); }; diff --git a/src/components/QrCode.tsx b/src/components/QrCode.tsx index c00225b26..17812eb47 100644 --- a/src/components/QrCode.tsx +++ b/src/components/QrCode.tsx @@ -61,7 +61,7 @@ export const QrCode = ({ className, value, hasLogo, size = 300 }: ElementProps & ); useEffect(() => { - qrCode.append(ref.current || undefined); + qrCode.append(ref.current ?? undefined); }, []); useEffect(() => { diff --git a/src/components/RadioButtonCards.stories.tsx b/src/components/RadioButtonCards.stories.tsx index 7ba1a3f53..708196b71 100644 --- a/src/components/RadioButtonCards.stories.tsx +++ b/src/components/RadioButtonCards.stories.tsx @@ -31,11 +31,17 @@ const exampleItems = [ }, ]; -export const RadioButtonCardsStory: Story<{ +type RadioButtonCardStoryProps = { bgColor?: string; withSlotTop?: boolean; withSlotBottom?: boolean; -}> = ({ bgColor, withSlotTop, withSlotBottom }) => { +}; + +export const RadioButtonCardsStory: Story = ({ + bgColor, + withSlotTop, + withSlotBottom, +}: RadioButtonCardStoryProps) => { const [item, setItem] = useState(exampleItems[0].value); return ( diff --git a/src/components/RelativeTime.tsx b/src/components/RelativeTime.tsx index e9571a1a8..f9076ed2b 100644 --- a/src/components/RelativeTime.tsx +++ b/src/components/RelativeTime.tsx @@ -17,6 +17,7 @@ export const RelativeTime = ({ }) => { const locale = useSelector(getSelectedLocale); + // eslint-disable-next-line @typescript-eslint/no-unused-vars const [now, setNow] = useState(Date.now()); useEffect(() => { diff --git a/src/components/Ring.stories.tsx b/src/components/Ring.stories.tsx index 3c8b4cad4..aa7247e5d 100644 --- a/src/components/Ring.stories.tsx +++ b/src/components/Ring.stories.tsx @@ -4,10 +4,10 @@ import { Ring } from '@/components/Ring'; import { StoryWrapper } from '.ladle/components'; -export const RingStory: Story<{ value: number }> = (args) => { +export const RingStory: Story<{ value: number }> = ({ value }: { value: number }) => { return ( - + ); }; diff --git a/src/components/ScrollAreas.stories.tsx b/src/components/ScrollAreas.stories.tsx index f90515a16..ec8a88452 100644 --- a/src/components/ScrollAreas.stories.tsx +++ b/src/components/ScrollAreas.stories.tsx @@ -5,7 +5,7 @@ import { layoutMixins } from '@/styles/layoutMixins'; import { StoryWrapper } from '.ladle/components'; -export const ScrollAreasStory: Story<{}> = (args) => ( +export const ScrollAreasStory: Story<{}> = () => ( <$ScrollArea width="500px" height="700px">

diff --git a/src/components/SearchInput.stories.tsx b/src/components/SearchInput.stories.tsx index a2af01362..5a2ac8bac 100644 --- a/src/components/SearchInput.stories.tsx +++ b/src/components/SearchInput.stories.tsx @@ -8,7 +8,7 @@ import { SearchInput } from '@/components/SearchInput'; import { InputType } from './Input'; import { StoryWrapper } from '.ladle/components'; -export const SearchInputStory: Story[0]> = (args) => ( +export const SearchInputStory: Story[0]> = () => ( <$Container> diff --git a/src/components/SearchSelectMenu.tsx b/src/components/SearchSelectMenu.tsx index 1fd5ef3d7..b803bd467 100644 --- a/src/components/SearchSelectMenu.tsx +++ b/src/components/SearchSelectMenu.tsx @@ -22,10 +22,8 @@ import { getSimpleStyledOutputType } from '@/lib/genericFunctionalComponentUtils type ElementProps = { asChild?: boolean; children: ReactNode; - disabled?: boolean; label?: string; items: MenuConfig; - slotEmpty?: ReactNode; withSearch?: boolean; withReceiptItems?: DetailsItem[]; }; @@ -49,7 +47,7 @@ export const SearchSelectMenu = ({ const searchSelectMenuRef = useRef(null); useOnClickOutside({ - onClickOutside(e: MouseEvent) { + onClickOutside() { setOpen(false); }, ref: searchSelectMenuRef, @@ -128,10 +126,10 @@ const $Popover = styled(Popover)` box-shadow: none; `; -type comboboxMenuStyleProps = { $withSearch?: boolean }; -const ComboboxMenuStyleType = getSimpleStyledOutputType(ComboboxMenu, {} as comboboxMenuStyleProps); +type ComboboxMenuStyleProps = { $withSearch?: boolean }; +const ComboboxMenuStyleType = getSimpleStyledOutputType(ComboboxMenu, {} as ComboboxMenuStyleProps); -const $ComboboxMenu = styled(ComboboxMenu)` +const $ComboboxMenu = styled(ComboboxMenu)` ${layoutMixins.withInnerHorizontalBorders} --comboboxMenu-backgroundColor: var(--color-layer-4); diff --git a/src/components/SelectMenu.stories.tsx b/src/components/SelectMenu.stories.tsx index 70e6a9970..7998339d4 100644 --- a/src/components/SelectMenu.stories.tsx +++ b/src/components/SelectMenu.stories.tsx @@ -28,7 +28,7 @@ const exampleItems: { value: string; label: string }[] = [ }, ]; -export const SelectMenuStory: Story[0]> = (args) => { +export const SelectMenuStory: Story[0]> = () => { const [value, setValue] = useState(exampleItems[0].value); const [value2, setValue2] = useState(exampleItems[2].value); @@ -36,14 +36,14 @@ export const SelectMenuStory: Story[0]> = (args) = <$Container> - {exampleItems.map(({ value, label }) => ( - + {exampleItems.map(({ value: innerValue, label }) => ( + ))} - {exampleItems.map(({ value, label }) => ( - + {exampleItems.map(({ value: innerValue, label }) => ( + ))} diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx index a8f23e121..777453400 100644 --- a/src/components/Separator.tsx +++ b/src/components/Separator.tsx @@ -48,30 +48,28 @@ export const WithSeparators = ({ layout: 'column' | 'row'; children: React.ReactNode; withSeparators?: boolean; -}) => ( - <> - {withSeparators - ? [children].flat().map((child, i, { length }) => ( - - {child} - {i < length - 1 && ( - - )} - - )) - : children} - -); +}) => + withSeparators + ? [children].flat().map((child, i, { length }) => ( + // eslint-disable-next-line react/no-array-index-key + + {child} + {i < length - 1 && ( + + )} + + )) + : children; export const HorizontalSeparatorWithText = styled(HorizontalSeparator)<{ contents?: string }>` --contents: ''; diff --git a/src/components/StepIndicator.tsx b/src/components/StepIndicator.tsx index 2d4ab2da6..0a540d53e 100644 --- a/src/components/StepIndicator.tsx +++ b/src/components/StepIndicator.tsx @@ -19,6 +19,7 @@ export const StepIndicator = ({ className, currentStepIndex, totalSteps }: StepI progress={((currentStepIndex - 1) / (totalSteps - 1)) * 100} > {[...Array(totalSteps)].map((_, i) => ( + // eslint-disable-next-line react/no-array-index-key <$Step key={i} isActive={i === currentStepIndex - 1} isFilled={i <= currentStepIndex - 1} /> ))} diff --git a/src/components/Table.tsx b/src/components/Table.tsx index e2bd20dcc..46528180a 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -39,19 +39,6 @@ import { Icon, IconName } from './Icon'; import { PAGE_SIZES, PageSize, TablePaginationRow } from './Table/TablePaginationRow'; import { Tag } from './Tag'; -export { ActionsTableCell } from './Table/ActionsTableCell'; - -// TODO: fix circular dependencies -// eslint-disable-next-line import/no-cycle -export { AssetTableCell } from './Table/AssetTableCell'; - -// TODO: remove barrel files: https://www.npmjs.com/package/eslint-plugin-no-barrel-files -// Reasoning why: https://dev.to/tassiofront/barrel-files-and-why-you-should-stop-using-them-now-bc4 -// eslint-disable-next-line import/no-cycle -export { MarketTableCell } from './Table/MarketTableCell'; -export { TableCell } from './Table/TableCell'; -export { TableColumnHeader } from './Table/TableColumnHeader'; - export type CustomRowConfig = { key: string; slotCustomRow: (..._: Parameters) => React.ReactNode; diff --git a/src/components/Table/AssetTableCell.tsx b/src/components/Table/AssetTableCell.tsx index aab160df0..80c9ac9f1 100644 --- a/src/components/Table/AssetTableCell.tsx +++ b/src/components/Table/AssetTableCell.tsx @@ -5,9 +5,10 @@ import type { Asset } from '@/constants/abacus'; import { breakpoints } from '@/styles'; import { AssetIcon } from '@/components/AssetIcon'; -import { TableCell } from '@/components/Table'; import { Tag } from '@/components/Tag'; +import { TableCell } from './TableCell'; + interface AssetTableCellProps { asset?: Asset; className?: string; diff --git a/src/components/Table/MarketTableCell.tsx b/src/components/Table/MarketTableCell.tsx index 1354c5c60..7a71aaa49 100644 --- a/src/components/Table/MarketTableCell.tsx +++ b/src/components/Table/MarketTableCell.tsx @@ -6,9 +6,9 @@ import { breakpoints } from '@/styles'; import { AssetIcon } from '@/components/AssetIcon'; import { Icon, IconName } from '@/components/Icon'; -import { TableCell } from '@/components/Table'; import { Output, OutputType, ShowSign } from '../Output'; +import { TableCell } from './TableCell'; export const MarketTableCell = ({ asset, diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index fe0ac7e25..f823e0fdc 100644 --- a/src/components/Tabs.tsx +++ b/src/components/Tabs.tsx @@ -111,13 +111,13 @@ export const Tabs = ({ {sharedContent ?? ( <$Stack> - {items.map(({ asChild, value, content, forceMount }) => ( + {items.map(({ asChild, value: childValue, content, forceMount }) => ( <$Content - key={value} + key={childValue} asChild={asChild} - value={value} - forceMount={!!forceMount ? true : undefined} - $hide={forceMount && currentItem?.value !== value} + value={childValue} + forceMount={forceMount ? true : undefined} + $hide={forceMount && currentItem?.value !== childValue} $withTransitions={withTransitions} > {content} diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index 76a924669..3489335b9 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -54,7 +54,7 @@ export const Tag = styled.span` font: var(--font-mini-book); `, - }[size || TagSize.Small])} + }[size ?? TagSize.Small])} ${({ sign }) => sign !== undefined && diff --git a/src/components/TimoutButton.stories.tsx b/src/components/TimoutButton.stories.tsx index 1fd9b14a2..9937f9a56 100644 --- a/src/components/TimoutButton.stories.tsx +++ b/src/components/TimoutButton.stories.tsx @@ -6,6 +6,7 @@ import { StoryWrapper } from '.ladle/components'; export const TimeoutButtonStory: Story = (args) => { return ( + {/* eslint-disable-next-line no-alert */} alert('Timeout button clicked!')}> Continue diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index 39aa20abb..349c72778 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState, type MouseEvent } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { Action, Close, Root } from '@radix-ui/react-toast'; import styled, { keyframes } from 'styled-components'; diff --git a/src/components/TriangleIndicator.stories.tsx b/src/components/TriangleIndicator.stories.tsx index 2c77567ff..8bdb78672 100644 --- a/src/components/TriangleIndicator.stories.tsx +++ b/src/components/TriangleIndicator.stories.tsx @@ -11,8 +11,8 @@ import { MustBigNumber } from '@/lib/numbers'; import { StoryWrapper } from '.ladle/components'; -export const TriangleIndicatorStory: Story<{ value: number }> = (args) => { - const [valueBN] = useState(MustBigNumber(args.value)); +export const TriangleIndicatorStory: Story<{ value: number }> = ({ value }: { value: number }) => { + const [valueBN] = useState(MustBigNumber(value)); return ( diff --git a/src/components/TriangleIndicator.tsx b/src/components/TriangleIndicator.tsx index 49560644b..4b66e71a4 100644 --- a/src/components/TriangleIndicator.tsx +++ b/src/components/TriangleIndicator.tsx @@ -1,5 +1,5 @@ import BigNumber from 'bignumber.js'; -import styled, { AnyStyledComponent, css } from 'styled-components'; +import styled, { css } from 'styled-components'; import { NumberSign } from '@/constants/numbers'; diff --git a/src/components/WithReceipt.tsx b/src/components/WithReceipt.tsx index 1794d3ae9..b6572ff54 100644 --- a/src/components/WithReceipt.tsx +++ b/src/components/WithReceipt.tsx @@ -21,7 +21,7 @@ export const WithReceipt = ({ children, }: ElementProps & StyleProps) => { if (!slotReceipt) { - return <>{children}; + return children; } const receipt = <$SlotReceipt>{slotReceipt}; diff --git a/src/components/WithTooltip.tsx b/src/components/WithTooltip.tsx index d7a6c7038..9339d32dc 100644 --- a/src/components/WithTooltip.tsx +++ b/src/components/WithTooltip.tsx @@ -45,7 +45,7 @@ export const WithTooltip = ({ const urlConfigs = useURLConfigs(); const getTooltipStrings = tooltip && tooltipStrings[tooltip]; - if (!getTooltipStrings && !tooltipString && !slotTooltip) return <>{children}; + if (!getTooltipStrings && !tooltipString && !slotTooltip) return children; let tooltipTitle; let tooltipBody; diff --git a/src/components/visx/SparklineChart.tsx b/src/components/visx/SparklineChart.tsx index 2fa8b7c7c..8c1e5a885 100644 --- a/src/components/visx/SparklineChart.tsx +++ b/src/components/visx/SparklineChart.tsx @@ -24,6 +24,7 @@ export const SparklineChart = (props: SparklineChartProps + {/* eslint-disable-next-line react/no-unused-prop-types */} {({ height, width }: { width: number; height: number }) => ( = Parameters< type ThresholdProps = Parameters>[0]; type ElementProps = { - id: string; selectedLocale: string; yAxisScaleType?: ScaleConfig['type']; data: Datum[]; @@ -95,12 +94,11 @@ type StyleProps = { }; export const TimeSeriesChart = ({ - id, selectedLocale, yAxisScaleType = 'linear', data, series, - tickFormatX = (timestamp, { zoomDomain, numTicks }) => + tickFormatX = (timestamp, { zoomDomain }) => formatAbsoluteTime(timestamp, { resolutionUnit: objectEntries(allTimeUnits) @@ -158,14 +156,14 @@ export const TimeSeriesChart = ({ useAnimationFrame( (elapsedMilliseconds) => { if (zoomDomainAnimateTo) { - setZoomDomain((zoomDomain) => { - if (!zoomDomain) return zoomDomain; + setZoomDomain((oldZoomDomain) => { + if (!oldZoomDomain) return oldZoomDomain; const newZoomDomain = - zoomDomain * (zoomDomainAnimateTo / zoomDomain) ** (elapsedMilliseconds * 0.01); + oldZoomDomain * (zoomDomainAnimateTo / oldZoomDomain) ** (elapsedMilliseconds * 0.01); // clamp according to direction - return zoomDomainAnimateTo > zoomDomain + return zoomDomainAnimateTo > oldZoomDomain ? Math.min(newZoomDomain, zoomDomainAnimateTo) : Math.max(newZoomDomain, zoomDomainAnimateTo); }); @@ -175,7 +173,7 @@ export const TimeSeriesChart = ({ ); // Computations - const { zoom, domain, range, visibleData } = useMemo(() => { + const calculatedValues = useMemo(() => { if (!zoomDomain) return { zoom: 1, @@ -197,7 +195,7 @@ export const TimeSeriesChart = ({ const range = visibleData .map((datum) => yAccessor(datum)) - .reduce((range, y) => [Math.min(range[0], y), Math.max(range[1], y)] as const, [ + .reduce((calcRange, y) => [Math.min(calcRange[0], y), Math.max(calcRange[1], y)] as const, [ Infinity, -Infinity, ] as const); @@ -205,6 +203,8 @@ export const TimeSeriesChart = ({ return { zoom, domain, range, visibleData }; }, [data, zoomDomain, minZoomDomain]); + const { domain, range, visibleData, zoom } = calculatedValues; + useEffect(() => { if (visibleData) { onVisibleDataChange?.(visibleData); @@ -212,7 +212,7 @@ export const TimeSeriesChart = ({ }, [visibleData]); // Events - const onWheel = ({ deltaX, deltaY }: React.WheelEvent) => { + const onWheel = ({ deltaY }: React.WheelEvent) => { if (!zoomDomain) return; setZoomDomain( @@ -255,6 +255,7 @@ export const TimeSeriesChart = ({ > <$ParentSize> + {/* eslint-disable-next-line react/no-unused-prop-types */} {({ width, height }: { width: number; height: number }) => { const numTicksX = (width - (margin?.left ?? 0) - (margin?.right ?? 0)) / tickSpacingX; @@ -274,72 +275,74 @@ export const TimeSeriesChart = ({ }} /> - {series.map((series) => ( - - {series.threshold && ( + {series.map((childSeries) => ( + + {childSeries.threshold && ( <> id={`${Math.random()}`} data={data} - x={series.xAccessor} - y0={series.yAccessor} - y1={series.threshold.yAccessor} + x={childSeries.xAccessor} + y0={childSeries.yAccessor} + y1={childSeries.threshold.yAccessor} clipAboveTo={margin?.top ?? 0} clipBelowTo={height - (margin?.bottom ?? 0)} - curve={series.getCurve?.({ zoom, zoomDomain }) ?? series.curve} + curve={ + childSeries.getCurve?.({ zoom, zoomDomain }) ?? childSeries.curve + } aboveAreaProps={{ fill: 'url(#XYChartThresholdAbove)', - fillOpacity: series.threshold.aboveAreaProps?.fillOpacity, - strokeWidth: series.threshold.aboveAreaProps?.strokeWidth, - stroke: series.threshold.aboveAreaProps?.stroke, + fillOpacity: childSeries.threshold.aboveAreaProps?.fillOpacity, + strokeWidth: childSeries.threshold.aboveAreaProps?.strokeWidth, + stroke: childSeries.threshold.aboveAreaProps?.stroke, }} belowAreaProps={{ fill: 'url(#XYChartThresholdBelow)', - fillOpacity: series.threshold.belowAreaProps?.fillOpacity, - strokeWidth: series.threshold.belowAreaProps?.strokeWidth, - stroke: series.threshold.belowAreaProps?.stroke, + fillOpacity: childSeries.threshold.belowAreaProps?.fillOpacity, + strokeWidth: childSeries.threshold.belowAreaProps?.strokeWidth, + stroke: childSeries.threshold.belowAreaProps?.stroke, }} /> )} 'transparent' : series.colorAccessor + childSeries.threshold ? () => 'transparent' : childSeries.colorAccessor } - onPointerMove={series?.onPointerMove} - onPointerOut={series?.onPointerOut} + onPointerMove={childSeries?.onPointerMove} + onPointerOut={childSeries?.onPointerOut} /> - {(series.glyphSize || series.getGlyphSize) && ( + {(childSeries.glyphSize || childSeries.getGlyphSize) && ( series.getGlyphSize?.({ datum, zoom }) || 0 - : series.glyphSize || 0 + childSeries.getGlyphSize + ? (datum) => childSeries.getGlyphSize?.({ datum, zoom }) ?? 0 + : childSeries.glyphSize ?? 0 } /> )} diff --git a/src/components/visx/XYChartTooltipWithBounds.tsx b/src/components/visx/XYChartTooltipWithBounds.tsx index 952be1633..fe376221b 100644 --- a/src/components/visx/XYChartTooltipWithBounds.tsx +++ b/src/components/visx/XYChartTooltipWithBounds.tsx @@ -1,6 +1,6 @@ // Forked from original XYChart Tooltip to use TooltipWithBounds instead of TooltipInPortal: // https://github.com/airbnb/visx/blob/master/packages/visx-xychart/src/components/Tooltip.tsx -import React, { Fragment, useCallback, useContext, useEffect } from 'react'; +import React, { useCallback, useContext, useEffect } from 'react'; import { Group } from '@visx/group'; import { PickD3Scale } from '@visx/scale'; @@ -64,19 +64,25 @@ export type TooltipProps = { onTooltipContext?: (tooltipContext: TooltipContextType) => void; }; -const DefaultGlyph = (props: RenderTooltipGlyphProps) => { +const DefaultGlyph = ({ + x, + y, + size, + color, + glyphStyle, +}: RenderTooltipGlyphProps) => { const { theme } = useContext(DataContext) || {}; return ( ); }; @@ -132,8 +138,8 @@ const TooltipInner = ({ const showTooltip = tooltipContext?.tooltipOpen && tooltipContent != null; - let computedTooltipLeft = tooltipContext?.tooltipLeft || 0; - let computedTooltipTop = tooltipContext?.tooltipTop || 0; + let computedTooltipLeft = tooltipContext?.tooltipLeft ?? 0; + let computedTooltipTop = tooltipContext?.tooltipTop ?? 0; let crosshairLeft = computedTooltipLeft; let crosshairTop = computedTooltipTop; @@ -280,9 +286,7 @@ const TooltipInner = ({ )} - {glyphProps.map(({ x, y, ...props }, i) => ( - {renderGlyph({ x, y, ...props })} - ))} + {glyphProps.map(({ x, y, ...props }) => renderGlyph({ x, y, ...props }))} @@ -293,11 +297,13 @@ const TooltipInner = ({ ) : null; }; +const Tooltip = (props: TooltipProps) => { + return ; +}; + /** * This is a wrapper component which bails early if tooltip is not visible. * If many charts with Tooltips are rendered on a page, * this avoids creating many resize observers / hitting browser limits. */ -export default function Tooltip(props: TooltipProps) { - return ; -} +export default Tooltip; diff --git a/src/components/visx/XYChartWithPointerEvents.tsx b/src/components/visx/XYChartWithPointerEvents.tsx index 14fcd5a6e..50385cad4 100644 --- a/src/components/visx/XYChartWithPointerEvents.tsx +++ b/src/components/visx/XYChartWithPointerEvents.tsx @@ -22,14 +22,14 @@ export const XYChartWithPointerEvents = ({ const pointerContainerPosition = lastPointerMoveEvent ? localPoint(lastPointerMoveEvent) : null; const pointerChartPosition = - xScale && - yScale && - pointerContainerPosition && + xScale != null && + yScale != null && + pointerContainerPosition != null && new Point({ // @ts-expect-error invert supposedly doesn't exist on AxisScale - x: xScale.invert(pointerContainerPosition?.x - getScaleBandwidth(xScale) / 2), + x: xScale.invert(pointerContainerPosition.x - getScaleBandwidth(xScale) / 2), // @ts-expect-error invert supposedly doesn't exist on AxisScale - y: yScale.invert(pointerContainerPosition?.y - getScaleBandwidth(yScale) / 2), + y: yScale.invert(pointerContainerPosition.y - getScaleBandwidth(yScale) / 2), }); return ( diff --git a/src/hooks/useAccountBalance.ts b/src/hooks/useAccountBalance.ts index be9c500b5..2a1ea1d42 100644 --- a/src/hooks/useAccountBalance.ts +++ b/src/hooks/useAccountBalance.ts @@ -9,7 +9,6 @@ import { useBalance } from 'wagmi'; import { EvmAddress } from '@/constants/wallets'; import { getBalances, getStakingBalances } from '@/state/accountSelectors'; -import { getSelectedNetwork } from '@/state/appSelectors'; import { convertBech32Address } from '@/lib/addressUtils'; import { MustBigNumber } from '@/lib/numbers'; diff --git a/src/hooks/useSelectedNetwork.ts b/src/hooks/useSelectedNetwork.ts index 45103a31f..5b7e1a314 100644 --- a/src/hooks/useSelectedNetwork.ts +++ b/src/hooks/useSelectedNetwork.ts @@ -7,13 +7,13 @@ import { LocalStorageKey } from '@/constants/localStorage'; import { DEFAULT_APP_ENVIRONMENT, DydxNetwork } from '@/constants/networks'; import { setSelectedNetwork } from '@/state/app'; +import { getSelectedNetwork } from '@/state/appSelectors'; import { validateAgainstAvailableEnvironments } from '@/lib/network'; import { useAccounts } from './useAccounts'; import { useEnvConfig } from './useEnvConfig'; import { useLocalStorage } from './useLocalStorage'; -import { getSelectedNetwork } from '@/state/appSelectors'; export const useSelectedNetwork = (): { switchNetwork: (network: DydxNetwork) => void; diff --git a/src/pages/token/rewards/MigratePanel.tsx b/src/pages/token/rewards/MigratePanel.tsx index 7f4ef45ab..380438155 100644 --- a/src/pages/token/rewards/MigratePanel.tsx +++ b/src/pages/token/rewards/MigratePanel.tsx @@ -1,4 +1,3 @@ -import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons'; @@ -21,8 +20,6 @@ import { VerticalSeparator } from '@/components/Separator'; import { Tag } from '@/components/Tag'; import { WithReceipt } from '@/components/WithReceipt'; -import { getSelectedNetwork } from '@/state/appSelectors'; - import { MustBigNumber } from '@/lib/numbers'; const TOKEN_MIGRATION_LEARN_MORE_LINK = diff --git a/src/views/PositionTile.stories.tsx b/src/views/PositionTile.stories.tsx index b215cf648..9d7f11340 100644 --- a/src/views/PositionTile.stories.tsx +++ b/src/views/PositionTile.stories.tsx @@ -4,8 +4,6 @@ import styled from 'styled-components'; import { breakpoints } from '@/styles'; import { PositionTile } from './PositionTile'; -// eslint and prettier seem to conflict on ordering or something -// eslint-disable-next-line import/order import { StoryWrapper } from '.ladle/components'; export const PositionTileStory: Story[0]> = (args) => ( diff --git a/src/views/charts/FundingChart/index.tsx b/src/views/charts/FundingChart/index.tsx index 185de7679..f1da1602f 100644 --- a/src/views/charts/FundingChart/index.tsx +++ b/src/views/charts/FundingChart/index.tsx @@ -63,7 +63,6 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => { return ( [0]> = (args) => { diff --git a/src/views/forms/TriggersForm/OrderSizeSlider.stories.tsx b/src/views/forms/TriggersForm/OrderSizeSlider.stories.tsx index 97932794f..c87c0be6b 100644 --- a/src/views/forms/TriggersForm/OrderSizeSlider.stories.tsx +++ b/src/views/forms/TriggersForm/OrderSizeSlider.stories.tsx @@ -8,7 +8,6 @@ import { TOKEN_DECIMALS } from '@/constants/numbers'; import { breakpoints } from '@/styles'; import { OrderSizeSlider } from './OrderSizeSlider'; -// eslint-disable-next-line import/order import { StoryWrapper } from '.ladle/components'; export const OrderSizeSliderStory: Story[0]> = () => { diff --git a/src/views/forms/TriggersForm/TriggersForm.tsx b/src/views/forms/TriggersForm/TriggersForm.tsx index cfe98d707..e8674916f 100644 --- a/src/views/forms/TriggersForm/TriggersForm.tsx +++ b/src/views/forms/TriggersForm/TriggersForm.tsx @@ -143,8 +143,8 @@ export const TriggersForm = ({ key: inputAlert?.actionStringKey ?? STRING_KEYS.UNAVAILABLE, }) : existingStopLossOrder || existingTakeProfitOrder - ? stringGetter({ key: STRING_KEYS.ENTER_TRIGGERS }) - : stringGetter({ key: STRING_KEYS.ADD_TRIGGERS })} + ? stringGetter({ key: STRING_KEYS.ENTER_TRIGGERS }) + : stringGetter({ key: STRING_KEYS.ADD_TRIGGERS })} diff --git a/src/views/tables/FillsTable.tsx b/src/views/tables/FillsTable.tsx index 76810645a..c16b27537 100644 --- a/src/views/tables/FillsTable.tsx +++ b/src/views/tables/FillsTable.tsx @@ -21,8 +21,10 @@ import { AssetIcon } from '@/components/AssetIcon'; import { Icon, IconName } from '@/components/Icon'; import { OrderSideTag } from '@/components/OrderSideTag'; import { Output, OutputType } from '@/components/Output'; -import { Table, TableCell, TableColumnHeader, type ColumnDef } from '@/components/Table'; +import { ColumnDef, Table } from '@/components/Table'; import { MarketTableCell } from '@/components/Table/MarketTableCell'; +import { TableCell } from '@/components/Table/TableCell'; +import { TableColumnHeader } from '@/components/Table/TableColumnHeader'; import { PageSize } from '@/components/Table/TablePaginationRow'; import { TagSize } from '@/components/Tag'; @@ -70,13 +72,11 @@ export type FillTableRow = { const getFillsTableColumnDef = ({ key, - isTablet = false, stringGetter, symbol = '', width, }: { key: FillsTableColumnKey; - isTablet?: boolean; stringGetter: StringGetterFunction; symbol?: Nullable; width?: ColumnSize; @@ -307,7 +307,7 @@ export const FillsTable = ({ }: ElementProps & StyleProps) => { const stringGetter = useStringGetter(); const dispatch = useDispatch(); - const { isMobile, isTablet } = useBreakpoints(); + const { isMobile } = useBreakpoints(); const marketFills = useSelector(getCurrentMarketFills, shallowEqual) ?? EMPTY_ARR; const allFills = useSelector(getSubaccountFills, shallowEqual) ?? EMPTY_ARR; @@ -355,7 +355,6 @@ export const FillsTable = ({ columns={columnKeys.map((key: FillsTableColumnKey) => getFillsTableColumnDef({ key, - isTablet, stringGetter, symbol, width: columnWidths?.[key], diff --git a/src/views/tables/FundingPaymentsTable.tsx b/src/views/tables/FundingPaymentsTable.tsx index 225238098..25a90aef0 100644 --- a/src/views/tables/FundingPaymentsTable.tsx +++ b/src/views/tables/FundingPaymentsTable.tsx @@ -11,8 +11,9 @@ import { useStringGetter } from '@/hooks/useStringGetter'; import { tradeViewMixins } from '@/styles/tradeViewMixins'; import { Output, OutputType } from '@/components/Output'; -import { Table, TableCell, type ColumnDef } from '@/components/Table'; +import { Table, type ColumnDef } from '@/components/Table'; import { MarketTableCell } from '@/components/Table/MarketTableCell'; +import { TableCell } from '@/components/Table/TableCell'; import { PageSize } from '@/components/Table/TablePaginationRow'; import { diff --git a/src/views/tables/MarketsCompactTable.tsx b/src/views/tables/MarketsCompactTable.tsx index 620db306a..044ff6e71 100644 --- a/src/views/tables/MarketsCompactTable.tsx +++ b/src/views/tables/MarketsCompactTable.tsx @@ -18,7 +18,9 @@ import { tradeViewMixins } from '@/styles/tradeViewMixins'; import { Icon, IconName } from '@/components/Icon'; import { LoadingSpace } from '@/components/Loading/LoadingSpinner'; import { Output, OutputType } from '@/components/Output'; -import { AssetTableCell, Table, TableCell, type ColumnDef } from '@/components/Table'; +import { Table, type ColumnDef } from '@/components/Table'; +import { AssetTableCell } from '@/components/Table/AssetTableCell'; +import { TableCell } from '@/components/Table/TableCell'; import { TriangleIndicator } from '@/components/TriangleIndicator'; import { MustBigNumber } from '@/lib/numbers'; diff --git a/src/views/tables/MarketsTable.tsx b/src/views/tables/MarketsTable.tsx index bc7b22ac7..c5a39447e 100644 --- a/src/views/tables/MarketsTable.tsx +++ b/src/views/tables/MarketsTable.tsx @@ -21,7 +21,9 @@ import { tradeViewMixins } from '@/styles/tradeViewMixins'; import { Button } from '@/components/Button'; import { Output, OutputType } from '@/components/Output'; -import { AssetTableCell, Table, TableCell, type ColumnDef } from '@/components/Table'; +import { Table, type ColumnDef } from '@/components/Table'; +import { AssetTableCell } from '@/components/Table/AssetTableCell'; +import { TableCell } from '@/components/Table/TableCell'; import { Toolbar } from '@/components/Toolbar'; import { TriangleIndicator } from '@/components/TriangleIndicator'; import { SparklineChart } from '@/components/visx/SparklineChart'; diff --git a/src/views/tables/OrdersTable.tsx b/src/views/tables/OrdersTable.tsx index fd5ec6d9b..b2a6b9c11 100644 --- a/src/views/tables/OrdersTable.tsx +++ b/src/views/tables/OrdersTable.tsx @@ -24,13 +24,10 @@ import { AssetIcon } from '@/components/AssetIcon'; import { Icon, IconName } from '@/components/Icon'; import { OrderSideTag } from '@/components/OrderSideTag'; import { Output, OutputType } from '@/components/Output'; -import { - MarketTableCell, - Table, - TableCell, - TableColumnHeader, - type ColumnDef, -} from '@/components/Table'; +import { ColumnDef, Table } from '@/components/Table'; +import { MarketTableCell } from '@/components/Table/MarketTableCell'; +import { TableCell } from '@/components/Table/TableCell'; +import { TableColumnHeader } from '@/components/Table/TableColumnHeader'; import { PageSize } from '@/components/Table/TablePaginationRow'; import { TagSize } from '@/components/Tag'; import { WithTooltip } from '@/components/WithTooltip'; diff --git a/src/views/tables/OrdersTable/OrderActionsCell.tsx b/src/views/tables/OrdersTable/OrderActionsCell.tsx index 1890e1ec3..22f1b8dc9 100644 --- a/src/views/tables/OrdersTable/OrderActionsCell.tsx +++ b/src/views/tables/OrdersTable/OrderActionsCell.tsx @@ -12,7 +12,7 @@ import { useSubaccount } from '@/hooks/useSubaccount'; import { IconName } from '@/components/Icon'; import { IconButton } from '@/components/IconButton'; -import { ActionsTableCell } from '@/components/Table'; +import { ActionsTableCell } from '@/components/Table/ActionsTableCell'; import { clearOrder } from '@/state/account'; diff --git a/src/views/tables/PositionsTable.tsx b/src/views/tables/PositionsTable.tsx index 9f7b0e7d4..ba866638f 100644 --- a/src/views/tables/PositionsTable.tsx +++ b/src/views/tables/PositionsTable.tsx @@ -27,9 +27,10 @@ import { tradeViewMixins } from '@/styles/tradeViewMixins'; import { AssetIcon } from '@/components/AssetIcon'; import { Icon, IconName } from '@/components/Icon'; import { Output, OutputType, ShowSign } from '@/components/Output'; -import { Table, TableColumnHeader, type ColumnDef } from '@/components/Table'; +import { ColumnDef, Table } from '@/components/Table'; import { MarketTableCell } from '@/components/Table/MarketTableCell'; import { TableCell } from '@/components/Table/TableCell'; +import { TableColumnHeader } from '@/components/Table/TableColumnHeader'; import { PageSize } from '@/components/Table/TablePaginationRow'; import { diff --git a/src/views/tables/PositionsTable/PositionsActionsCell.tsx b/src/views/tables/PositionsTable/PositionsActionsCell.tsx index 631754a21..ea4b8492c 100644 --- a/src/views/tables/PositionsTable/PositionsActionsCell.tsx +++ b/src/views/tables/PositionsTable/PositionsActionsCell.tsx @@ -13,7 +13,7 @@ import { useEnvFeatures } from '@/hooks/useEnvFeatures'; import { IconName } from '@/components/Icon'; import { IconButton } from '@/components/IconButton'; -import { ActionsTableCell } from '@/components/Table'; +import { ActionsTableCell } from '@/components/Table/ActionsTableCell'; import { closeDialogInTradeBox, openDialog, openDialogInTradeBox } from '@/state/dialogs'; import { getActiveTradeBoxDialog } from '@/state/dialogsSelectors'; diff --git a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx index e4e1844b1..305ba3d9c 100644 --- a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx +++ b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx @@ -22,7 +22,7 @@ import { Button } from '@/components/Button'; import { Icon, IconName } from '@/components/Icon'; import { IconButton } from '@/components/IconButton'; import { Output, OutputType } from '@/components/Output'; -import { TableCell } from '@/components/Table'; +import { TableCell } from '@/components/Table/TableCell'; import { WithHovercard } from '@/components/WithHovercard'; import { openDialog } from '@/state/dialogs'; diff --git a/src/views/tables/TradingRewardHistoryTable.tsx b/src/views/tables/TradingRewardHistoryTable.tsx index a0cc46b61..e0ce9af6a 100644 --- a/src/views/tables/TradingRewardHistoryTable.tsx +++ b/src/views/tables/TradingRewardHistoryTable.tsx @@ -13,7 +13,8 @@ import { layoutMixins } from '@/styles/layoutMixins'; import { AssetIcon } from '@/components/AssetIcon'; import { Output, OutputType } from '@/components/Output'; -import { Table, TableCell, type ColumnDef } from '@/components/Table'; +import { Table, type ColumnDef } from '@/components/Table'; +import { TableCell } from '@/components/Table/TableCell'; import { getHistoricalTradingRewardsForPeriod } from '@/state/accountSelectors'; diff --git a/src/views/tables/TransferHistoryTable.tsx b/src/views/tables/TransferHistoryTable.tsx index 31862ae48..fd6173b7a 100644 --- a/src/views/tables/TransferHistoryTable.tsx +++ b/src/views/tables/TransferHistoryTable.tsx @@ -16,7 +16,9 @@ import { Button } from '@/components/Button'; import { CopyButton } from '@/components/CopyButton'; import { Link } from '@/components/Link'; import { Output, OutputType } from '@/components/Output'; -import { Table, TableCell, TableColumnHeader, type ColumnDef } from '@/components/Table'; +import { ColumnDef, Table } from '@/components/Table'; +import { TableCell } from '@/components/Table/TableCell'; +import { TableColumnHeader } from '@/components/Table/TableColumnHeader'; import { PageSize } from '@/components/Table/TablePaginationRow'; import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';