@xylabs/sdk-react 2.9.32 → 2.9.35

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.32",
+  "version": "2.9.35",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/BasePage/BasePage.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
 
 import { BasePage } from './BasePage'
 
@@ -13,7 +14,11 @@ const StorybookEntry = {
   title: 'Components/BasePage',
 } as ComponentMeta<typeof BasePage>
 
-const Template: ComponentStory<typeof BasePage> = (args) => <BasePage {...args}></BasePage>
+const Template: ComponentStory<typeof BasePage> = (args) => (
+  <BrowserRouter>
+    <BasePage {...args}></BasePage>
+  </BrowserRouter>
+)
 
 const AppBar = () => <div>AppBar</div>
 const FilterBar = () => <div>FilterBar</div>

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

@@ -38,6 +38,25 @@ LongEmpty.args = {
   toEtherScan: true,
 }
 
+const Medium = Template.bind({})
+Medium.args = {
+  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
+  addressLength: 'short',
+  icon: true,
+  shortenedLength: 8,
+  title: 'Sample EthAccount',
+  toEtherScan: true,
+}
+
+const MediumEmpty = Template.bind({})
+MediumEmpty.args = {
+  addressLength: 'short',
+  icon: true,
+  shortenedLength: 8,
+  title: 'Sample EthAccount',
+  toEtherScan: true,
+}
+
 const Short = Template.bind({})
 Short.args = {
   address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
@@ -72,7 +91,7 @@ AutoEmpty.args = {
   toEtherScan: true,
 }
 
-export { Auto, AutoEmpty, Long, LongEmpty, Short, ShortEmpty }
+export { Auto, AutoEmpty, Long, LongEmpty, Medium, MediumEmpty, Short, ShortEmpty }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/EthAccount/EthAccount.tsx

@@ -14,6 +14,7 @@ const EthAccount: React.FC<EthAccountProps> = ({
   icon = false,
   iconSize = 16,
   iconOnly = false,
+  shortenedLength,
   addressLength = 'auto',
   fontFamily = '"Source Code Pro",monospace',
   toEtherScan,
@@ -40,7 +41,7 @@ const EthAccount: React.FC<EthAccountProps> = ({
     addressLength === 'long'
       ? addressToDisplay.toString()
       : addressLength === 'short'
-      ? addressToDisplay.toShortString()
+      ? addressToDisplay.toShortString(shortenedLength)
       : large
       ? addressToDisplay.toString()
       : addressToDisplay.toShortString()

package/src/components/EthAccount/EthAccountProps.tsx

@@ -6,6 +6,7 @@ import { ButtonExProps } from '../ButtonEx'
 interface EthAccountProps extends ButtonExProps {
   address?: EthAddress | null
   addressLength?: 'auto' | 'short' | 'long'
+  shortenedLength?: number
   full?: boolean
   icon?: boolean
   iconSize?: number

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