@xylabs/sdk-react 2.9.31 → 2.9.34

package/package.json

@@ -22,19 +22,19 @@
   },
   "description": "Common React library for all XY Labs projects that use React",
   "devDependencies": {
-    "@babel/core": "^7.17.4",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
+    "@babel/core": "^7.17.5",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@ethersproject/abstract-signer": "^5.5.0",
     "@ethersproject/providers": "^5.5.3",
     "@mui/icons-material": "^5.4.2",
-    "@mui/material": "^5.4.2",
+    "@mui/material": "^5.4.3",
     "@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-replace": "^4.0.0",
     "@rollup/plugin-strip": "^2.1.0",
-    "@rollup/plugin-typescript": "^8.3.0",
+    "@rollup/plugin-typescript": "^8.3.1",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-docs": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
@@ -45,14 +45,14 @@
     "@types/bn.js": "^5.1.0",
     "@types/lodash": "^4.14.178",
     "@types/md5": "^2.3.2",
-    "@types/node": "^17.0.18",
+    "@types/node": "^17.0.21",
     "@types/numeral": "^2.0.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@xylabs/eslint-config-react": "^2.1.2",
     "@xylabs/pixel": "^1.3.7",
     "@xylabs/rollup-config": "^1.1.7",
-    "@xylabs/ts-scripts": "^1.0.43",
+    "@xylabs/ts-scripts": "^1.0.44",
     "@xylabs/tsconfig": "^1.0.12",
     "babel-loader": "^8.2.3",
     "copyfiles": "^2.4.1",
@@ -66,12 +66,12 @@
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
     "rollbar": "^2.24.0",
-    "rollup": "^2.67.2",
+    "rollup": "^2.68.0",
     "rollup-plugin-svg": "^2.0.0",
     "ts-node": "^10.5.0",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5",
-    "webpack": "^5.69.0"
+    "webpack": "^5.69.1"
   },
   "esm5": "dist/esm5/index.js",
   "exports": {
@@ -125,6 +125,6 @@
   },
   "sideEffects": false,
   "types": "dist/index.d.ts",
-  "version": "2.9.31",
+  "version": "2.9.34",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/LinkEx/LinkToEx.tsx

@@ -3,11 +3,18 @@ import React from 'react'
 import { Link as RouterLink, To } from 'react-router-dom'
 
 interface Props extends LinkProps {
-  to: To
+  to?: To
 }
 
-const LinkToEx: React.FC<Props> = ({ to, ...props }) => {
-  return <Link component={RouterLink} to={to} {...props} />
+const LinkEx: React.FC<Props> = ({ to, ...props }) => {
+  if (to) {
+    return <Link component={RouterLink} to={to} {...props} />
+  } else {
+    return <Link {...props} />
+  }
 }
 
-export { LinkToEx }
+/** @deprecated use LinkEx instead */
+const LinkToEx = LinkEx
+
+export { LinkEx, LinkToEx }

package/src/components/LinkEx/index.ts

@@ -1,3 +1 @@
-import { LinkToEx } from './LinkToEx'
-
-export { LinkToEx }
+export * from './LinkToEx'

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
+}