@xylabs/sdk-react 2.7.17 → 2.7.21

package/dist/node-esm/src/lib/index.d.ts

@@ -0,0 +1,10 @@
+import { ComponentSizes } from './ComponentSizes';
+import { getApiStage } from './getApiStage';
+import { isLocalhost } from './isLocalHost';
+import { useAsyncEffect } from './useAsyncEffect';
+export * from './profile';
+export * from './safeLocalStorage';
+export * from './safeSessionStorage';
+export * from './Tracking';
+export { getApiStage, isLocalhost, useAsyncEffect };
+export type { ComponentSizes };

package/dist/node-esm/src/lib/isLocalHost.d.ts

@@ -0,0 +1,2 @@
+declare const isLocalhost: boolean;
+export { isLocalhost };

package/dist/node-esm/src/lib/profile.d.ts

@@ -0,0 +1,9 @@
+interface ProfileResult {
+    endTime: number;
+    name: string;
+    startTime: number;
+}
+export declare const enableProfileLogging: (enabled: boolean) => void;
+export declare const profileResults: Array<ProfileResult>;
+export declare const profileBlock: (name: string, closure: () => Promise<unknown>) => Promise<void>;
+export {};

package/dist/node-esm/src/lib/safeLocalStorage.d.ts

@@ -0,0 +1,3 @@
+import { Log } from '@xylabs/sdk-js';
+export declare const getLocalStorageObject: <T>(key: string, log?: Log | undefined) => T;
+export declare const setLocalStorageObject: <T>(key: string, value: T, log?: Log | undefined) => void;

package/dist/node-esm/src/lib/safeSessionStorage.d.ts

@@ -0,0 +1,3 @@
+import { Log } from '@xylabs/sdk-js';
+export declare const getSessionStorageObject: (key: string, log?: Log | undefined) => {};
+export declare const setSessionStorageObject: (key: string, value: Record<string, unknown>, log?: Log | undefined) => void;

package/dist/node-esm/src/lib/useAsyncEffect.d.ts

@@ -0,0 +1,5 @@
+declare type EffectFuncWithMounted = (isMounted: () => boolean) => Promise<(() => void) | void>;
+declare type EffectFuncWithoutMounted = () => Promise<(() => void) | void>;
+declare type EffectFunc = EffectFuncWithMounted | EffectFuncWithoutMounted;
+declare function useAsyncEffect(effect: EffectFunc, inputs?: unknown[]): void;
+export { useAsyncEffect };

package/dist/node-esm/src/mergeBoxlikeStyles.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '@mui/material';
+import { BoxlikeComponentProps } from './BoxlikeComponentProps';
+declare const mergeBoxlikeStyles: <T extends BoxlikeComponentProps>(theme: Theme, props: BoxlikeComponentProps, defaultProps?: BoxlikeComponentProps | undefined) => T;
+export { mergeBoxlikeStyles };

package/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@types/numeral": "^2.0.2",
-    "@types/react-helmet": "^6.1.4",
+    "@types/react-helmet": "^6.1.5",
     "axios": "^0.24.0",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
@@ -21,15 +21,16 @@
   },
   "description": "Common React library for all XY Labs projects that use React",
   "devDependencies": {
+    "@babel/core": "^7.16.7",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@ethersproject/abstract-signer": "^5.5.0",
     "@ethersproject/providers": "^5.5.1",
-    "@mui/icons-material": "^5.2.4",
-    "@mui/material": "^5.2.4",
+    "@mui/icons-material": "^5.2.5",
+    "@mui/material": "^5.2.6",
     "@mui/styles": "^5.2.3",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-replace": "^3.0.1",
     "@rollup/plugin-strip": "^2.1.0",
     "@storybook/addon-actions": "^6.4.9",
     "@storybook/addon-docs": "^6.4.9",
@@ -38,30 +39,34 @@
     "@storybook/components": "^6.4.9",
     "@storybook/core-events": "^6.4.9",
     "@storybook/react": "^6.4.9",
+    "@types/bluebird": "^3.5.36",
     "@types/bn.js": "^5.1.0",
     "@types/lodash": "^4.14.178",
     "@types/md5": "^2.3.1",
-    "@types/node": "^17.0.0",
+    "@types/node": "^17.0.5",
     "@types/react": "^17",
     "@xylabs/eslint-config-react": "^2",
-    "@xylabs/pixel": "^1.1.6",
+    "@xylabs/pixel": "^1.2.5",
     "@xylabs/sdk-js": "^2.3.19",
     "@xylabs/ts-scripts": "^1.0.24",
+    "@xylabs/tsconfig": "^1.0.5",
     "babel-loader": "^8.2.3",
     "bn.js": "^5.2.0",
     "copyfiles": "^2.4.1",
     "eslint": "^8",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6",
     "rollbar": "^2",
-    "rollup": "^2.61.0",
+    "rollup": "^2.62.0",
+    "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.31.1",
     "ts-node": "^10.4.0",
+    "ts-toolbelt": "^9.6.0",
     "typescript": "^4.5.4",
     "webpack": "^5"
   },
@@ -112,11 +117,13 @@
   },
   "scripts": {
     "build-storybook": "build-storybook",
-    "compile": "rm -r -f dist && tsc -p tsconfig.build.json && yarn copy-svg && yarn copy-png && yarn copy-jpg && yarn copy-gif",
+    "compile": "rm -r -f dist && yarn compile-rollup && yarn compile-tsc && yarn copy-svg && yarn copy-png && yarn copy-jpg && yarn copy-gif",
     "copy-gif": "yarn copyfiles -u 1 \"./src/**/*.gif\" dist",
     "copy-jpg": "yarn copyfiles -u 1 \"./src/**/*.jpg\" dist",
     "copy-png": "yarn copyfiles -u 1 \"./src/**/*.png\" dist",
     "copy-svg": "yarn copyfiles -u 1 \"./src/**/*.svg\" dist",
+    "compile-rollup": "rollup -c",
+    "compile-tsc": "tsc -p tsconfig.build.json",
     "lint-pkg": "npmPkgJsonLint .",
     "start": "start-storybook -p 6006",
     "test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha -r ts-node/register 'src/**/*.spec.ts'"
@@ -124,5 +131,5 @@
   "sideEffects": false,
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "2.7.17"
+  "version": "2.7.21"
 }

package/rollup.config.js

@@ -1,6 +1,7 @@
 import json from '@rollup/plugin-json'
 import replace from '@rollup/plugin-replace'
 import strip from '@rollup/plugin-strip'
+import svg from 'rollup-plugin-svg'
 import typescriptPlugin from 'rollup-plugin-typescript2'
 import typescript from 'typescript'
 
@@ -37,6 +38,7 @@ function generateBuildTargetReplaceConfig(moduleFormat, languageTarget) {
 
   return {
     [BUILD_TARGET_MAGIC_STRING]: buildTarget,
+    preventAssignment: true,
   }
 }
 
@@ -55,6 +57,7 @@ function emitModulePackageFile() {
 
 const es5BuildPlugins = [
   json(),
+  svg(),
   strip({
     functions: ['debugAssert.*'],
   }),
@@ -65,6 +68,7 @@ const es5BuildPlugins = [
 
 const es2017BuildPlugins = [
   json(),
+  svg(),
   strip({
     functions: ['debugAssert.*'],
   }),

package/src/hooks/index.ts

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

package/src/hooks/useBreakpoint.ts

@@ -2,7 +2,7 @@ import { useTheme } from '@mui/material'
 
 import { useMediaQuery } from './useMediaQuery'
 
-const useBreakpoint = () => {
+export const useBreakpoint = () => {
   const theme = useTheme()
   const xs = useMediaQuery(theme.breakpoints.only('xs'))
   const sm = useMediaQuery(theme.breakpoints.only('sm'))
@@ -22,5 +22,3 @@ const useBreakpoint = () => {
     return 'xl'
   }
 }
-
-export { useBreakpoint }

package/src/hooks/useMounted.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-const useMounted = () => {
+export const useMounted = () => {
   const [mounted, setMounted] = useState(true)
   useEffect(() => {
     setMounted(true)
@@ -13,5 +13,3 @@ const useMounted = () => {
     return mounted
   }
 }
-
-export { useMounted }

package/src/hooks/useNavigateToEthAddress.ts

@@ -1,7 +1,7 @@
 import { EthAddress } from '@xylabs/sdk-js'
 import { NavigateOptions, To, useNavigate } from 'react-router-dom'
 
-const useNavigateToEthAddress = () => {
+export const useNavigateToEthAddress = () => {
   const navigate = useNavigate()
   const navigateToEthAddress = (
     address: EthAddress,
@@ -25,5 +25,3 @@ const useNavigateToEthAddress = () => {
   }
   return { navigateToEthAddress }
 }
-
-export { useNavigateToEthAddress }

package/src/hooks/useSpacing.tsx

@@ -0,0 +1,6 @@
+import { useTheme } from '@mui/material'
+
+export const useSpacing = (value: string | number) => {
+  const theme = useTheme()
+  return theme.spacing(typeof value === 'string' ? parseInt(value) : value)
+}

package/src/hooks/useWebP.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+
+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
+  )
+  useAsyncEffect(
+    async (mounted) => {
+      if (supportsWebP === undefined) {
+        supportsWebP = await getSupportsWebP()
+        if (mounted()) {
+          setImg(supportsWebP ? webp : alt)
+        }
+      }
+    },
+    [supportsWebP]
+  )
+  return img
+}
+
+const getSupportsWebP = async () => {
+  return await new Promise<boolean>((resolve) => {
+    const image = new Image()
+    image.onerror = () => resolve(false)
+    image.onload = () => resolve(image.width === 1)
+    image.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='
+  }).catch(() => false)
+}

package/src/hooks/useWindowSize.ts

@@ -5,7 +5,7 @@ interface Size {
   width: number | undefined
 }
 
-function useWindowSize(): Size {
+export function useWindowSize(): Size {
   const [windowSize, setWindowSize] = useState<Size>({
     height: undefined,
     width: undefined,
@@ -24,5 +24,3 @@ function useWindowSize(): Size {
   }, [])
   return windowSize
 }
-
-export { useWindowSize }