@xyo-network/react-shared 3.0.1 → 3.0.3

package/src/components/Ampersand.tsx

@@ -1,4 +1,5 @@
-import { Typography, TypographyProps } from '@mui/material'
+import type { TypographyProps } from '@mui/material'
+import { Typography } from '@mui/material'
 import React from 'react'
 
 export const Ampersand: React.FC<TypographyProps> = (props) => {

package/src/components/BasicHero/BasicHero.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -7,11 +7,7 @@ import BackgroundImage from './default-desktop.svg'
 const StorybookEntry = {
   argTypes: {},
   component: BasicHero,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/BasicHero',
 } as Meta<typeof BasicHero>
 

package/src/components/BasicHero/BasicHero.tsx

@@ -1,8 +1,12 @@
-import { Container, Grid, Typography } from '@mui/material'
+import {
+  Container, Grid, Typography,
+} from '@mui/material'
 import { ButtonEx } from '@xylabs/react-button'
-import { FlexBoxProps, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
 import { LinkEx } from '@xylabs/react-link'
-import React, { ReactElement } from 'react'
+import type { ReactElement } from 'react'
+import React from 'react'
 
 import { useGradientStyles, useIsSmall } from '../../hooks/index.ts'
 
@@ -41,11 +45,16 @@ interface ButtonSectionProps {
   href?: string
   to?: string
 }
-const SubLinkSection: React.FC<SubLinkSectionProps> = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
+const SubLinkSection: React.FC<SubLinkSectionProps> = ({
+  backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2,
+}) => {
   return (
     <FlexGrowRow
       width="100%"
-      sx={{ flexDirection: { md: 'row', xs: 'column' }, justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' } }}
+      sx={{
+        flexDirection: { md: 'row', xs: 'column' },
+        justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' },
+      }}
     >
       {subLinkIcon
         ? (
@@ -66,7 +75,9 @@ const SubLinkSection: React.FC<SubLinkSectionProps> = ({ backgroundImageAlignmen
   )
 }
 
-const ButtonSection: React.FC<ButtonSectionProps> = ({ href, to, buttonText }) => {
+const ButtonSection: React.FC<ButtonSectionProps> = ({
+  href, to, buttonText,
+}) => {
   const isMobile = useIsSmall()
   return (
     <ButtonEx
@@ -116,7 +127,9 @@ export const BasicHero: React.FC<BasicHeroProps> = ({
     <FlexGrowCol
       sx={{
         backgroundImage: `url(${backgroundImage})`,
-        backgroundPosition: { lg: 'bottom', md: 'center left', xs: 'top left' },
+        backgroundPosition: {
+          lg: 'bottom', md: 'center left', xs: 'top left',
+        },
         minHeight: {
           md: '500px',
           sm: '400px',
@@ -163,7 +176,11 @@ export const BasicHero: React.FC<BasicHeroProps> = ({
               <Typography variant="body1" component="h2" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>
                 {desc}
               </Typography>
-              <FlexGrowRow sx={{ flexDirection: { lg: 'row', xs: 'column' } }} width="100%" marginTop={1}>
+              <FlexGrowRow
+                sx={{ flexDirection: { lg: 'row', xs: 'column' } }}
+                width="100%"
+                marginTop={1}
+              >
                 <ButtonSection href={button1Href} to={button1To} buttonText={button1Text} />
                 <ButtonSection href={button2Href} to={button2To} buttonText={button2Text} />
               </FlexGrowRow>

package/src/components/Ellipsize.tsx

@@ -1,6 +1,13 @@
-import { Box, BoxProps, styled, Typography, TypographyProps, TypographyTypeMap } from '@mui/material'
-import { WithChildren } from '@xylabs/react-shared'
-import React, { forwardRef, useCallback, useState } from 'react'
+import type {
+  BoxProps, TypographyProps, TypographyTypeMap,
+} from '@mui/material'
+import {
+  Box, styled, Typography,
+} from '@mui/material'
+import type { WithChildren } from '@xylabs/react-shared'
+import React, {
+  forwardRef, useCallback, useState,
+} from 'react'
 
 import { useShareForwardedRef } from '../hooks/index.ts'
 
@@ -37,15 +44,15 @@ const EllipsizeRoot = styled(Box, {
 const EllipsizeInnerWrap = styled(Box, {
   name: ComponentName,
   slot: 'innerWrap',
-})(() => ({
-  position: 'relative',
-}))
+})(() => ({ position: 'relative' }))
 
 const EllipsizeContentWrap = styled(Typography, {
   name: ComponentName,
   shouldForwardProp: prop => prop !== 'ellipsisPosition',
   slot: 'contentWrap',
-})<TypographyWithComponentProps>(({ theme, ellipsisPosition, fontFamily }) => {
+})<TypographyWithComponentProps>(({
+  theme, ellipsisPosition, fontFamily,
+}) => {
   return theme.unstable_sx({
     fontFamily: fontFamily ?? 'monospace',
     left: 0,
@@ -86,7 +93,9 @@ export interface EllipsizeBoxProps extends BoxProps {
 }
 
 export const EllipsizeBox = forwardRef<HTMLDivElement, WithChildren<EllipsizeBoxProps>>(
-  ({ children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props }, ref) => {
+  ({
+    children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props
+  }, ref) => {
     // Allow syncing of :before pseudo element height with contentWrapHeight
     const { contentWrapRef, contentWrapHeight } = useClientHeight()
     const sharedRef = useShareForwardedRef(ref)

package/src/components/ErrorBoundary.tsx

@@ -1,6 +1,7 @@
 import { Typography } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
-import React, { Component, ErrorInfo, ReactNode } from 'react'
+import type { ErrorInfo, ReactNode } from 'react'
+import React, { Component } from 'react'
 
 export interface ErrorBoundaryProps {
   children: ReactNode

package/src/components/LabeledTextFieldWrapper.tsx

@@ -1,11 +1,14 @@
-import { Stack, StackProps, Typography } from '@mui/material'
+import type { StackProps } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import React from 'react'
 
 export interface LabeledTextFieldWrapperProps extends StackProps {
   label: string
 }
 
-export const LabeledTextFieldWrapper: React.FC<LabeledTextFieldWrapperProps> = ({ children, label, ...props }) => {
+export const LabeledTextFieldWrapper: React.FC<LabeledTextFieldWrapperProps> = ({
+  children, label, ...props
+}) => {
   return (
     <Stack flexDirection="column" {...props}>
       <Typography gutterBottom variant="caption">

package/src/components/ListItemButtonEx.tsx

@@ -1,6 +1,9 @@
-import { ListItemButton, ListItemButtonProps } from '@mui/material'
-import React, { MouseEvent } from 'react'
-import { NavigateOptions, To, useNavigate } from 'react-router-dom'
+import type { ListItemButtonProps } from '@mui/material'
+import { ListItemButton } from '@mui/material'
+import type { MouseEvent } from 'react'
+import React from 'react'
+import type { NavigateOptions, To } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 export interface ListItemButtonExProps extends ListItemButtonProps {
   target?: string
@@ -8,7 +11,9 @@ export interface ListItemButtonExProps extends ListItemButtonProps {
   toOptions?: NavigateOptions
 }
 
-export const ListItemButtonExTo: React.FC<ListItemButtonExProps> = ({ to, toOptions, onClick, ...props }) => {
+export const ListItemButtonExTo: React.FC<ListItemButtonExProps> = ({
+  to, toOptions, onClick, ...props
+}) => {
   const navigate = useNavigate()
   const localOnClick = (event: MouseEvent<HTMLDivElement>) => {
     onClick?.(event)

package/src/components/LoadResult.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 import { LoadResult } from './LoadResult.tsx'
@@ -6,11 +6,7 @@ import { LoadResult } from './LoadResult.tsx'
 const StorybookEntry: Meta = {
   argTypes: {},
   component: LoadResult,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'webapp/LoadResult',
 }
 
@@ -30,6 +26,8 @@ ApiError.args = { children: <h1>Shown in case of error</h1>, error: true }
 const SearchResult = Template.bind({})
 SearchResult.args = { children: <h1>Shown when there is a valid result</h1>, searchResult: 'foo' }
 
-export { ApiError, Default, NotFound, SearchResult }
+export {
+  ApiError, Default, NotFound, SearchResult,
+}
 
 export default StorybookEntry

package/src/components/LoadResult.tsx

@@ -1,5 +1,6 @@
 import { FlexGrowRow } from '@xylabs/react-flexbox'
-import React, { PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
+import React from 'react'
 
 import { NotFound } from './NotFound.tsx'
 
@@ -13,7 +14,9 @@ export interface LoadResultProps<T> {
 }
 
 export function LoadResult<T>(props: PropsWithChildren<LoadResultProps<T>>) {
-  const { notFound, error, searchResult, children } = props
+  const {
+    notFound, error, searchResult, children,
+  } = props
   if (notFound) {
     return <NotFound />
   }

package/src/components/NotFound.tsx

@@ -1,5 +1,6 @@
 import { Typography } from '@mui/material'
-import { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexGrowCol } from '@xylabs/react-flexbox'
 import React from 'react'
 
 const NotFound: React.FC<FlexBoxProps> = (props) => {

package/src/components/Pipe.tsx

@@ -1,4 +1,5 @@
-import { Typography, TypographyProps } from '@mui/material'
+import type { TypographyProps } from '@mui/material'
+import { Typography } from '@mui/material'
 import React from 'react'
 
 export const Pipe: React.FC<TypographyProps> = (props) => {

package/src/components/ScrollTableOnSm.tsx

@@ -1,11 +1,9 @@
 import { styled } from '@mui/material'
-import { WithChildren } from '@xylabs/react-shared'
+import type { WithChildren } from '@xylabs/react-shared'
 import React from 'react'
 
 const StyledScrollTableOnSm = styled('div')(({ theme }) => ({
-  [theme.breakpoints.down('md')]: {
-    overflowX: 'scroll',
-  },
+  [theme.breakpoints.down('md')]: { overflowX: 'scroll' },
   display: 'flex',
   flexGrow: 1,
 }))

package/src/components/SectionSpacingRow/SectionSpacingRow.stories.tsx

@@ -1,5 +1,5 @@
 import { Divider, Typography } from '@mui/material'
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -7,11 +7,7 @@ import { SectionSpacingRow } from './SectionSpacingRow.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: SectionSpacingRow,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/SectionSpacingRow',
 } as Meta<typeof SectionSpacingRow>
 

package/src/components/SectionSpacingRow/SectionSpacingRow.tsx

@@ -1,8 +1,11 @@
 import { useTheme } from '@mui/material'
-import { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexGrowRow } from '@xylabs/react-flexbox'
 import React, { forwardRef } from 'react'
 
-export const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({ children, sx, ...props }, ref) => {
+export const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({
+  children, sx, ...props
+}, ref) => {
   const theme = useTheme()
   return (
     <FlexGrowRow

package/src/components/StyleGuide/AppBars.example.tsx

@@ -1,5 +1,7 @@
 import { Menu as MenuIcon } from '@mui/icons-material'
-import { Button, IconButton, Toolbar, Typography } from '@mui/material'
+import {
+  Button, IconButton, Toolbar, Typography,
+} from '@mui/material'
 import { AppBarEx } from '@xylabs/react-appbar'
 import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'

package/src/components/StyleGuide/Buttons.example.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonTypeMap, Typography } from '@mui/material'
+import type { ButtonTypeMap } from '@mui/material'
+import { Button, Typography } from '@mui/material'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import React, { Fragment } from 'react'
 

package/src/components/StyleGuide/StyleGuide.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 import { StyleGuideExample } from './StyleGuide.example.tsx'
@@ -6,11 +6,7 @@ import { StyleGuideExample } from './StyleGuide.example.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: StyleGuideExample,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/StyleGuide',
 } as Meta<typeof StyleGuideExample>
 

package/src/components/StyleGuide/Texts.example.tsx

@@ -1,4 +1,5 @@
-import { Typography, TypographyVariant } from '@mui/material'
+import type { TypographyVariant } from '@mui/material'
+import { Typography } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'
 

package/src/components/TableCell/AddressTableCell.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react'
 
-import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell.tsx'
+import type { EllipsisTableCellProps } from './EllipsisTableCell.tsx'
+import { EllipsisTableCell } from './EllipsisTableCell.tsx'
 
 export interface AddressTableCellProps extends Omit<EllipsisTableCellProps, 'ref'> {
   /** @deprecated - archives are no longer supported */
@@ -10,7 +11,9 @@ export interface AddressTableCellProps extends Omit<EllipsisTableCellProps, 'ref
   link?: boolean
 }
 
-const AddressTableCell = forwardRef<HTMLElement, AddressTableCellProps>(({ value, archive, exploreDomain, link, ...props }, ref) => {
+const AddressTableCell = forwardRef<HTMLElement, AddressTableCellProps>(({
+  value, archive, exploreDomain, link, ...props
+}, ref) => {
   const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : undefined
   const to = exploreDomain === undefined && archive ? `/archive/${archive}/address/${value}` : undefined
 

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -1,7 +1,8 @@
-import { styled, TableCell, TableCellProps } from '@mui/material'
+import type { TableCellProps } from '@mui/material'
+import { styled, TableCell } from '@mui/material'
 import { LinkEx } from '@xylabs/react-link'
 import React, { forwardRef, useMemo } from 'react'
-import { To } from 'react-router-dom'
+import type { To } from 'react-router-dom'
 
 import { EllipsizeBox } from '../Ellipsize.tsx'
 
@@ -9,9 +10,7 @@ const EllipsisTableCellRoot = styled(TableCell, {
   name: 'EllipsisTableCell',
   shouldForwardProp: prop => prop !== 'width',
   slot: 'Root',
-})(({ width = '100%' }) => ({
-  width,
-}))
+})(({ width = '100%' }) => ({ width }))
 
 export interface EllipsisTableCellProps extends Omit<TableCellProps, 'ref'> {
   href?: string
@@ -28,7 +27,9 @@ export interface EllipsisTableCellProps extends Omit<TableCellProps, 'ref'> {
 }
 
 export const EllipsisTableCellWithRef = forwardRef<HTMLElement, EllipsisTableCellProps>(
-  ({ children, href, link = false, to, value, ...props }, ref) => {
+  ({
+    children, href, link = false, to, value, ...props
+  }, ref) => {
     const data = useMemo(() => {
       if (children) {
         return children

package/src/components/TableCell/EllipsisTableCellDeprecated.tsx

@@ -1,7 +1,10 @@
-import { TableCell, TableCellProps, useTheme } from '@mui/material'
+import type { TableCellProps } from '@mui/material'
+import { TableCell, useTheme } from '@mui/material'
 import { LinkEx } from '@xylabs/react-link'
-import React, { useEffect, useRef, useState } from 'react'
-import { To } from 'react-router-dom'
+import React, {
+  useEffect, useRef, useState,
+} from 'react'
+import type { To } from 'react-router-dom'
 
 import { getActualPaddingX } from '../../lib/index.ts'
 import { findParent } from './findParent.ts'
@@ -16,7 +19,9 @@ export interface EllipsisTableCellProps extends TableCellProps {
 }
 
 /** @deprecated - use new EllipsisTableCell */
-export const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps> = ({ children, value, to, forCell, href, ...props }) => {
+export const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps> = ({
+  children, value, to, forCell, href, ...props
+}) => {
   const [calcCellWidth, setCalcCellWidth] = useState<number>(0)
   const hashDivRef = useRef<HTMLDivElement>(null)
   const theme = useTheme()

package/src/components/TableCell/EllipsizeTableCell.stories.tsx

@@ -1,5 +1,9 @@
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
-import { Decorator, Meta, StoryFn } from '@storybook/react'
+import {
+  Table, TableBody, TableCell, TableHead, TableRow,
+} from '@mui/material'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -96,4 +100,6 @@ WithMultiple.args = {}
 const WithMultipleRows = TemplateWithMultipleRows.bind({})
 WithMultipleRows.args = {}
 
-export { Default, WithMultiple, WithMultipleRows }
+export {
+  Default, WithMultiple, WithMultipleRows,
+}

package/src/components/TableCell/HashTableCell.tsx

@@ -1,8 +1,9 @@
-import { Hash } from '@xylabs/hex'
+import type { Hash } from '@xylabs/hex'
 import { useEvent } from '@xyo-network/react-event'
 import React, { useRef } from 'react'
 
-import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell.tsx'
+import type { EllipsisTableCellProps } from './EllipsisTableCell.tsx'
+import { EllipsisTableCell } from './EllipsisTableCell.tsx'
 
 export interface HashTableCellProps extends EllipsisTableCellProps {
   archive?: string
@@ -12,7 +13,9 @@ export interface HashTableCellProps extends EllipsisTableCellProps {
   onHashClick?: (value: Hash) => void
 }
 
-export const HashTableCell: React.FC<HashTableCellProps> = ({ value, archive, dataType, network, exploreDomain, onHashClick, ...props }) => {
+export const HashTableCell: React.FC<HashTableCellProps> = ({
+  value, archive, dataType, network, exploreDomain, onHashClick, ...props
+}) => {
   const ref = useRef<HTMLTableCellElement | null>(null)
   const [tableCellRef, dispatch] = useEvent<HTMLTableCellElement>(undefined, ref)
   const hashPath = `/${dataType}/hash/${value}?network=${network ?? 'main'}`

package/src/components/ThemeTokenAvatar/ThemeTokenAvatar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -7,11 +7,7 @@ import { ThemeTokenAvatar } from './ThemeTokenAvatar.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: ThemeTokenAvatar,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/ThemeTokenAvatar',
 } as Meta<typeof ThemeTokenAvatar>
 

package/src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx

@@ -1,4 +1,5 @@
-import { Avatar, AvatarProps, useTheme } from '@mui/material'
+import type { AvatarProps } from '@mui/material'
+import { Avatar, useTheme } from '@mui/material'
 import React from 'react'
 
 export const ThemeTokenAvatar: React.FC<AvatarProps> = ({ ...props }) => {

package/src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -7,11 +7,7 @@ import { ThemeTokenAvatarGroup } from './ThemeTokenAvatarGroup.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: ThemeTokenAvatarGroup,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/ThemeTokenAvatarGroup',
 } as Meta<typeof ThemeTokenAvatarGroup>
 

package/src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx

@@ -1,4 +1,5 @@
-import { AvatarGroup, AvatarGroupProps } from '@mui/material'
+import type { AvatarGroupProps } from '@mui/material'
+import { AvatarGroup } from '@mui/material'
 import React from 'react'
 
 import { ThemeTokenAvatar } from '../ThemeTokenAvatar/index.ts'

package/src/components/TokenBar/TokenBar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import { QuickTipButton } from '@xylabs/react-quick-tip-button'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
@@ -7,11 +7,7 @@ import { TokenBar } from './TokenBar.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: TokenBar,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/TokenBar',
 } as Meta<typeof TokenBar>
 
@@ -25,7 +21,9 @@ const WithData = Template.bind({})
 WithData.args = { text1: 'Hello', text2: 'World' }
 
 const WithSuffixes = Template.bind({})
-WithSuffixes.args = { text1: 'ETH', text2: '0.062342', text2Suffix: <QuickTipButton title="0.06234298345834958" /> }
+WithSuffixes.args = {
+  text1: 'ETH', text2: '0.062342', text2Suffix: <QuickTipButton title="0.06234298345834958" />,
+}
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

package/src/components/TokenBar/TokenBar.tsx

@@ -1,6 +1,8 @@
-import { Paper, PaperProps, Typography, TypographyProps } from '@mui/material'
+import type { PaperProps, TypographyProps } from '@mui/material'
+import { Paper, Typography } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
-import React, { ReactNode } from 'react'
+import type { ReactNode } from 'react'
+import React from 'react'
 export interface TokenBarProps extends PaperProps {
   text1?: ReactNode
   text1Props?: TypographyProps
@@ -10,7 +12,9 @@ export interface TokenBarProps extends PaperProps {
   text2Suffix?: ReactNode
 }
 
-export const TokenBar: React.FC<TokenBarProps> = ({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
+export const TokenBar: React.FC<TokenBarProps> = ({
+  text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props
+}) => {
   return (
     <Paper elevation={0} className="TokenBar-root" {...props}>
       <FlexRow justifyContent="space-between">

package/src/components/TokenData/useGetTokenData.tsx

@@ -1,5 +1,6 @@
 import { TokenData } from './TokenData.ts'
 
+// eslint-disable-next-line @eslint-react/hooks-extra/ensure-custom-hooks-using-other-hooks
 export const useGetTokenData = (symbols: (string | undefined)[]) => {
   return symbols?.map((symbol) => {
     const additionalTokenData = TokenData.find(x => x.tokenSymbol === symbol)

package/src/components/TokenSummary/TokenSummary.stories.tsx

@@ -1,5 +1,5 @@
 import { Link } from '@mui/material'
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -8,11 +8,7 @@ import { TokenSummary } from './TokenSummary.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: TokenSummary,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/TokenSummary',
 } as Meta<typeof TokenSummary>
 

package/src/components/TokenSummary/TokenSummary.tsx

@@ -1,5 +1,7 @@
-import { AvatarProps, CardHeader, CardHeaderProps, Typography } from '@mui/material'
-import React, { ReactNode } from 'react'
+import type { AvatarProps, CardHeaderProps } from '@mui/material'
+import { CardHeader, Typography } from '@mui/material'
+import type { ReactNode } from 'react'
+import React from 'react'
 
 import { ThemeTokenAvatar } from '../ThemeTokenAvatar/index.ts'
 
@@ -10,7 +12,9 @@ export interface TokenSummaryProps extends CardHeaderProps {
   symbolElement?: ReactNode
 }
 
-export const TokenSummary: React.FC<TokenSummaryProps> = ({ icon, symbol, symbolElement, children, ...props }) => {
+export const TokenSummary: React.FC<TokenSummaryProps> = ({
+  icon, symbol, symbolElement, children, ...props
+}) => {
   return (
     <>
       <CardHeader

package/src/components/TypographyEx.tsx

@@ -1,4 +1,5 @@
-import { Typography, TypographyProps } from '@mui/material'
+import type { TypographyProps } from '@mui/material'
+import { Typography } from '@mui/material'
 import React from 'react'
 
 import { useGradientStyles } from '../hooks/index.ts'