@xylabs/sdk-react 2.9.29 → 2.9.33

package/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@types/react-helmet": "^6.1.5",
     "@xylabs/sdk-js": "^2.4.2",
-    "axios": "^0.25.0",
+    "axios": "^0.26.0",
     "bn.js": "^5.2.0",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
@@ -22,30 +22,30 @@
   },
   "description": "Common React library for all XY Labs projects that use React",
   "devDependencies": {
-    "@babel/core": "^7.17.2",
+    "@babel/core": "^7.17.4",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@ethersproject/abstract-signer": "^5.5.0",
     "@ethersproject/providers": "^5.5.3",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/material": "^5.4.1",
-    "@mui/styles": "^5.4.1",
+    "@mui/icons-material": "^5.4.2",
+    "@mui/material": "^5.4.2",
+    "@mui/styles": "^5.4.2",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^3.1.0",
     "@rollup/plugin-strip": "^2.1.0",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-actions": "^6.4.18",
-    "@storybook/addon-docs": "^6.4.18",
-    "@storybook/addon-essentials": "^6.4.18",
-    "@storybook/addon-links": "^6.4.18",
-    "@storybook/components": "^6.4.18",
-    "@storybook/core-events": "^6.4.18",
-    "@storybook/react": "^6.4.18",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/components": "^6.4.19",
+    "@storybook/core-events": "^6.4.19",
+    "@storybook/react": "^6.4.19",
     "@types/bn.js": "^5.1.0",
     "@types/lodash": "^4.14.178",
     "@types/md5": "^2.3.2",
-    "@types/node": "^17.0.17",
+    "@types/node": "^17.0.18",
     "@types/numeral": "^2.0.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
@@ -71,7 +71,7 @@
     "ts-node": "^10.5.0",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5",
-    "webpack": "^5.68.0"
+    "webpack": "^5.69.0"
   },
   "esm5": "dist/esm5/index.js",
   "exports": {
@@ -125,6 +125,6 @@
   },
   "sideEffects": false,
   "types": "dist/index.d.ts",
-  "version": "2.9.29",
+  "version": "2.9.33",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/InvertableThemeProvider/InvertableTheme.tsx

@@ -2,6 +2,8 @@ import { ThemeOptions } from '@mui/material'
 
 interface InvertableTheme {
   options: ThemeOptions
+  lightOptions?: ThemeOptions
+  darkOptions?: ThemeOptions
 }
 
 export type { InvertableTheme }

package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx

@@ -28,10 +28,13 @@ export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (
   invert = false,
   noResponsiveFonts,
   darkTheme,
+  darkOptions,
+  lightOptions,
 }) => {
-  let internalDarkTheme = {}
-  const contextInvertableTheme = useContext(InvertableThemeContext)
-  const clonedOptions = cloneDeep(options ?? contextInvertableTheme.options ?? {})
+  const parentContext = useContext(InvertableThemeContext)
+  const clonedOptions = cloneDeep(options ?? parentContext.options ?? {})
+  const clonedDarkOptions = cloneDeep(darkOptions ?? darkTheme ?? parentContext.darkOptions)
+  const clonedLightOptions = cloneDeep(lightOptions ?? parentContext.lightOptions)
 
   clonedOptions.palette = clonedOptions.palette ?? {}
 
@@ -43,11 +46,9 @@ export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (
     clonedOptions.palette.mode = dark ? 'dark' : 'light'
   }
 
-  if (clonedOptions.palette.mode === 'dark' && darkTheme?.palette) {
-    internalDarkTheme = darkTheme
-  }
+  const modeOptions = clonedOptions.palette.mode === 'dark' ? clonedDarkOptions : clonedLightOptions
 
-  let themeOptions = merge(clonedOptions, internalDarkTheme)
+  let themeOptions = merge({}, clonedOptions, modeOptions)
 
   if (resolve) {
     themeOptions = resolveThemeColors(themeOptions)
@@ -55,15 +56,21 @@ export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (
 
   const theme: Theme = noResponsiveFonts ? createTheme(themeOptions) : responsiveFontSizes(createTheme(themeOptions))
 
-  return scoped ? (
-    <ScopedCssBaseline>
-      <InvertableThemeContext.Provider value={{ options: clonedOptions }}>
+  const Provider: React.FC = () => {
+    return (
+      <InvertableThemeContext.Provider
+        value={{ darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions }}
+      >
         <ThemeProvider theme={theme}>{children}</ThemeProvider>
       </InvertableThemeContext.Provider>
+    )
+  }
+
+  return scoped ? (
+    <ScopedCssBaseline>
+      <Provider />
     </ScopedCssBaseline>
   ) : (
-    <InvertableThemeContext.Provider value={{ options: clonedOptions }}>
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
-    </InvertableThemeContext.Provider>
+    <Provider />
   )
 }

package/src/components/InvertableThemeProvider/InvertableThemeProviderProps.ts

@@ -6,7 +6,12 @@ interface InvertableThemeProviderProps {
   invert?: boolean
   noResponsiveFonts?: boolean
   options?: ThemeOptions
+  /**
+   * @deprecated use darkOptions instead
+   */
   darkTheme?: ThemeOptions
+  darkOptions?: ThemeOptions
+  lightOptions?: ThemeOptions
   resolve?: boolean
 }
 

package/src/hooks/index.ts

@@ -1,9 +1,11 @@
 export * from './useBreakpoint'
+export * from './useInterval'
 export * from './useLocalStorage'
 export * from './useMediaQuery'
 export * from './useMounted'
 export * from './useNavigateToEthAddress'
 export * from './useSpacing'
+export * from './useTimeout'
 export * from './useUserEvents'
 export * from './useWebP'
 export * from './useWindowSize'

package/src/hooks/useInterval.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react'
+
+export const useInterval = (callback: () => void, delay: number) => {
+  const intervalRef = useRef<number>(-1)
+  const savedCallback = useRef(callback)
+
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  useEffect(() => {
+    const tick = () => savedCallback.current()
+    intervalRef.current = window.setInterval(tick, delay)
+
+    return () => window.clearInterval(intervalRef.current)
+  }, [delay])
+
+  return intervalRef
+}

package/src/hooks/useTimeout.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react'
+
+export const useTimeout = (callback: () => void, delay: number) => {
+  const timeoutRef = useRef<number>(-1)
+  const savedCallback = useRef(callback)
+
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  useEffect(() => {
+    const tick = () => savedCallback.current()
+    timeoutRef.current = window.setTimeout(tick, delay)
+
+    return () => window.clearTimeout(timeoutRef.current)
+  }, [delay])
+
+  return timeoutRef
+}

package/src/hooks/useWebP.tsx

@@ -5,16 +5,14 @@ import { useAsyncEffect } from '../lib'
 let supportsWebP: boolean | undefined = undefined
 
 export const useWebP = (webp: string, alt: string) => {
-  const [img, setImg] = useState<string | undefined>(
-    supportsWebP === true ? webp : supportsWebP === false ? alt : undefined
-  )
+  const [img, setImg] = useState<string>()
   useAsyncEffect(
     async (mounted) => {
       if (supportsWebP === undefined) {
         supportsWebP = await getSupportsWebP()
-        if (mounted()) {
-          setImg(supportsWebP ? webp : alt)
-        }
+      }
+      if (mounted()) {
+        setImg(supportsWebP ? webp : alt)
       }
     },
     [supportsWebP]