@xylabs/sdk-react 2.7.3 → 2.7.7

package/src/components/Errors/ErrorViewer.stories.tsx

@@ -10,7 +10,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'ErrorViewer',
+  title: 'Components/ErrorViewer',
 } as ComponentMeta<typeof ErrorViewer>
 
 const Template: ComponentStory<typeof ErrorViewer> = (args) => <ErrorViewer {...args}></ErrorViewer>

package/src/components/Errors/ErrorsViewer.stories.tsx

@@ -10,7 +10,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'ErrorsViewer',
+  title: 'Components/ErrorsViewer',
 } as ComponentMeta<typeof ErrorsViewer>
 
 const Template: ComponentStory<typeof ErrorsViewer> = (args) => <ErrorsViewer {...args}></ErrorsViewer>

package/src/components/EthAccount/EthAccount.stories.tsx

@@ -11,7 +11,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'EthAccount',
+  title: 'Components/EthAccount',
 } as ComponentMeta<typeof EthAccount>
 
 const Template: ComponentStory<typeof EthAccount> = (args) => <EthAccount {...args}></EthAccount>

package/src/components/EthAccount/EthAccountBase.tsx

@@ -1,7 +1,8 @@
-import { Typography, useMediaQuery, useTheme } from '@mui/material'
+import { Typography, useTheme } from '@mui/material'
 import { MouseEvent, useContext } from 'react'
 
 import { EthersContext } from '../../contexts'
+import { useMediaQuery } from '../../hooks'
 import { ButtonEx } from '../ButtonEx'
 import { FlexGrowRow, FlexRow } from '../FlexBox'
 import { Identicon } from '../Identicon'

package/src/components/FlexBox/BusyBox.stories.tsx

@@ -10,7 +10,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'BusyBox',
+  title: 'Components/BusyBox',
 } as ComponentMeta<typeof BusyBox>
 
 const BusyBoxTemplate: ComponentStory<typeof BusyBox> = (args) => <BusyBox {...args}></BusyBox>

package/src/components/FlexBox/FlexCol.stories.tsx

@@ -11,7 +11,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'FlexCol',
+  title: 'Components/FlexCol',
 } as ComponentMeta<typeof FlexCol>
 
 const Template: ComponentStory<typeof FlexCol> = (args) => <FlexCol {...args}></FlexCol>

package/src/components/FlexBox/FlexRow.stories.tsx

@@ -11,7 +11,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'FlexRow',
+  title: 'Components/FlexRow',
 } as ComponentMeta<typeof FlexRow>
 
 const Template: ComponentStory<typeof FlexRow> = (args) => <FlexRow {...args}></FlexRow>

package/src/components/InvertableThemeProvider/InvertableThemeProvider.stories.tsx

@@ -10,7 +10,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'InvertableThemeProvider',
+  title: 'Components/InvertableThemeProvider',
 } as ComponentMeta<typeof InvertableThemeProvider>
 
 const Template: ComponentStory<typeof InvertableThemeProvider> = (args) => (

package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx

@@ -6,22 +6,28 @@ import React, { useContext } from 'react'
 import { InvertableThemeContext } from './InvertableThemeContext'
 import { InvertableThemeProviderProps } from './InvertableThemeProviderProps'
 
-const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (props) => {
+const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = ({
+  options,
+  children,
+  dark,
+  scoped = false,
+  invert = false,
+  noResponsiveFonts,
+}) => {
   const contextInvertableTheme = useContext(InvertableThemeContext)
-  const { children, dark, scoped = false, invert = false, noResponsiveFonts } = props
-  const { options = clone(contextInvertableTheme.options) } = props
+  const clonedOptions = clone(options ?? contextInvertableTheme.options ?? {})
 
-  options.palette = options.palette ?? {}
+  clonedOptions.palette = clonedOptions.palette ?? {}
 
   if (invert) {
-    options.palette.mode = options.palette.mode === 'dark' ? 'light' : 'dark'
+    clonedOptions.palette.mode = clonedOptions.palette.mode === 'dark' ? 'light' : 'dark'
   }
 
   if (dark !== undefined) {
-    options.palette.mode = dark ? 'dark' : 'light'
+    clonedOptions.palette.mode = dark ? 'dark' : 'light'
   }
 
-  let theme = createTheme(options)
+  let theme = createTheme(clonedOptions)
 
   if (!noResponsiveFonts) {
     theme = responsiveFontSizes(theme)
@@ -29,12 +35,12 @@ const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (props)
 
   return scoped ? (
     <ScopedCssBaseline>
-      <InvertableThemeContext.Provider value={{ options }}>
+      <InvertableThemeContext.Provider value={{ options: clonedOptions }}>
         <ThemeProvider theme={theme}>{children}</ThemeProvider>
       </InvertableThemeContext.Provider>
     </ScopedCssBaseline>
   ) : (
-    <InvertableThemeContext.Provider value={{ options }}>
+    <InvertableThemeContext.Provider value={{ options: clonedOptions }}>
       <ThemeProvider theme={theme}>{children}</ThemeProvider>
     </InvertableThemeContext.Provider>
   )

package/src/components/NumberStatus/NumberStatus.stories.tsx

@@ -10,7 +10,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'NumberStatus',
+  title: 'Components/NumberStatus',
 } as ComponentMeta<typeof NumberStatus>
 
 const NumberStatusTemplate: ComponentStory<typeof NumberStatus> = (args) => <NumberStatus {...args}></NumberStatus>

package/src/components/QuickTipButton/QuickTipButton.stories.tsx

@@ -11,7 +11,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'QuickTipButton',
+  title: 'Components/QuickTipButton',
 } as ComponentMeta<typeof QuickTipButton>
 
 const Template: ComponentStory<typeof QuickTipButton> = (args) => <QuickTipButton {...args}></QuickTipButton>

package/src/components/ScrollToTop.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+// The point of this component it to return to the top of the page on any router navigate
+
+export const ScrollToTop = () => {
+  const { pathname } = useLocation()
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  return null
+}

package/src/components/TokenAmount/TokenAmount.stories.tsx

@@ -11,7 +11,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'TokenAmount',
+  title: 'Components/TokenAmount',
 } as ComponentMeta<typeof TokenAmount>
 
 const Template: ComponentStory<typeof TokenAmount> = (args) => <TokenAmount {...args}></TokenAmount>

package/src/components/dialogs/ErrorDialog.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { ErrorDialog } from './ErrorDialog'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ErrorDialog,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Dialogs/ErrorDialog',
+} as ComponentMeta<typeof ErrorDialog>
+
+const Template: ComponentStory<typeof ErrorDialog> = (args) => <ErrorDialog {...args}></ErrorDialog>
+
+const Default = Template.bind({})
+Default.args = {
+  error: Error('Test Error'),
+  title: 'Test Error',
+}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/dialogs/ErrorDialog.tsx

@@ -1,13 +1,13 @@
-import { Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
+import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle, Typography } from '@mui/material'
 import { AxiosError } from 'axios'
 import React from 'react'
 
 import { ButtonEx } from '../ButtonEx'
 import { FlexRow } from '../FlexBox'
 
-interface Props {
+export interface ErrorDialogProps extends DialogProps {
   error?: Error
-  onClose?: (retry: boolean) => void
+  onAction?: (retry: boolean) => void
   title?: string
 }
 
@@ -15,22 +15,25 @@ const toAxiosError = (error: Error) => {
   return (error as AxiosError).isAxiosError ? (error as AxiosError) : undefined
 }
 
-const ErrorDialogOpen: React.FC<Props> = (props) => {
-  const { onClose, title = 'Oops. Something went wrong.', error = Error('Unknown Error') } = props
-
+const ErrorDialogOpen: React.FC<ErrorDialogProps> = ({
+  onAction,
+  title = 'Oops. Something went wrong.',
+  error = Error('Unknown Error'),
+  ...props
+}) => {
   const onCloseClicked = () => {
-    onClose?.(false)
+    onAction?.(false)
   }
 
   const onRetryClicked = () => {
-    onClose?.(true)
+    onAction?.(true)
   }
 
   const axiosError = toAxiosError(error)
   const message = error.message ?? error.toString()
 
   return (
-    <Dialog onClose={onClose} open={!!error}>
+    <Dialog {...props}>
       <DialogTitle>{title}</DialogTitle>
       <DialogContent>
         <FlexRow>
@@ -53,13 +56,10 @@ const ErrorDialogOpen: React.FC<Props> = (props) => {
   )
 }
 
-const ErrorDialog: React.FC<Props> = (props) => {
-  const { error } = props
+export const ErrorDialog: React.FC<ErrorDialogProps> = ({ open, error, ...props }) => {
   if (error) {
-    return <ErrorDialogOpen {...props} />
+    return <ErrorDialogOpen open={!!error || open} error={error} {...props} />
   } else {
     return null
   }
 }
-
-export { ErrorDialog }

package/src/components/dialogs/MessageDialog.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { MessageDialog } from './MessageDialog'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: MessageDialog,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Dialogs/MessageDialog',
+} as ComponentMeta<typeof MessageDialog>
+
+const Template: ComponentStory<typeof MessageDialog> = (args) => <MessageDialog {...args}>Test Message</MessageDialog>
+
+const Default = Template.bind({})
+Default.args = {
+  open: true,
+  title: 'Test Error',
+}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/dialogs/MessageDialog.tsx

@@ -2,12 +2,12 @@ import { Button, Dialog, DialogActions, DialogContent, DialogProps, DialogTitle
 
 import { FlexCol, FlexRow } from '../FlexBox'
 
-interface Props extends DialogProps {
+export interface MessageDialogProps extends DialogProps {
   onOk?: () => void
   onCancel?: () => void
 }
 
-const MessageDialog: React.FC<Props> = ({ onOk, onCancel, children, title, ...props }) => {
+export const MessageDialog: React.FC<MessageDialogProps> = ({ onOk, onCancel, children, title, ...props }) => {
   return (
     <Dialog {...props}>
       <DialogTitle>{title}</DialogTitle>
@@ -27,5 +27,3 @@ const MessageDialog: React.FC<Props> = ({ onOk, onCancel, children, title, ...pr
     </Dialog>
   )
 }
-
-export { MessageDialog }

package/src/components/index.ts

@@ -19,7 +19,7 @@ export * from './LinkEx'
 export * from './NumberStatus'
 export * from './QuickTipButton'
 export * from './RichResult'
+export * from './ScrollToTop'
 export * from './TokenAmount'
 
-// eslint-disable-next-line @delagen/deprecation/deprecation
 export { Background, CoverProgress, HoverScale, Identicon, RedirectWithQuery, ScrollToTopButton }

package/src/hooks/index.ts

@@ -1,6 +1,7 @@
 import { useBreakpoint } from './useBreakpoint'
+import { useMediaQuery } from './useMediaQuery'
 import { useMounted } from './useMounted'
 import { useNavigateToEthAddress } from './useNavigateToEthAddress'
 import { useWindowSize } from './useWindowSize'
 
-export { useBreakpoint, useMounted, useNavigateToEthAddress, useWindowSize }
+export { useBreakpoint, useMediaQuery, useMounted, useNavigateToEthAddress, useWindowSize }

package/src/hooks/useBreakpoint.ts

@@ -1,4 +1,6 @@
-import { useMediaQuery, useTheme } from '@mui/material'
+import { useTheme } from '@mui/material'
+
+import { useMediaQuery } from './useMediaQuery'
 
 const useBreakpoint = () => {
   const theme = useTheme()

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,6 @@
+/* eslint-disable import/no-deprecated */
+import { useMediaQuery } from '@mui/material'
+
+export { useMediaQuery }
+
+/* file exists to deal with false warning */