@xylabs/sdk-react 2.7.20 → 2.7.24

package/dist/node-esm/lib/Tracking/Tiktok/CustomEvent.d.ts

@@ -0,0 +1,5 @@
+import { TiktokBaseEvent } from './BaseEvent';
+declare class TiktokCustomEvent<T extends Record<string, unknown>> extends TiktokBaseEvent<T> {
+    send(data: T): Promise<void>;
+}
+export { TiktokCustomEvent };

package/dist/node-esm/lib/Tracking/Tiktok/StandardEvent.d.ts

@@ -0,0 +1,5 @@
+import { TiktokBaseEvent } from './BaseEvent';
+declare class TiktokStandardEvent<T extends Record<string, unknown>> extends TiktokBaseEvent<T> {
+    send(data: T): Promise<void>;
+}
+export { TiktokStandardEvent };

package/dist/node-esm/lib/Tracking/Tiktok/StandardEvents.d.ts

@@ -0,0 +1,19 @@
+import { TiktokStandardEvent } from './StandardEvent';
+export declare class TiktokStandardEvents<T extends Record<string, unknown>> {
+    pageView(): TiktokStandardEvent<T>;
+    viewContent(): TiktokStandardEvent<T>;
+    addToCart(): TiktokStandardEvent<T>;
+    checkout(): TiktokStandardEvent<T>;
+    purchase(): TiktokStandardEvent<T>;
+    registration(): TiktokStandardEvent<T>;
+    startCheckout(): TiktokStandardEvent<T>;
+    addBilling(): TiktokStandardEvent<T>;
+    search(): TiktokStandardEvent<T>;
+    viewForm(): TiktokStandardEvent<T>;
+    clickForm(): TiktokStandardEvent<T>;
+    submitForm(): TiktokStandardEvent<T>;
+    viewDownloadPage(): TiktokStandardEvent<T>;
+    clickInDownloadPage(): TiktokStandardEvent<T>;
+    clickToDownload(): TiktokStandardEvent<T>;
+    clickButton(): TiktokStandardEvent<T>;
+}

package/dist/node-esm/lib/Tracking/Tiktok/StandardProperties.d.ts

@@ -0,0 +1,4 @@
+interface TiktokStandardProperties {
+    user_email?: string;
+}
+export type { TiktokStandardProperties };

package/dist/node-esm/lib/Tracking/Tiktok/Ttq.d.ts

@@ -0,0 +1,8 @@
+declare class Ttq {
+    static instance: Ttq;
+    static init(pixelId: string): void;
+    static getTtq(): any;
+    static page(): void;
+    track(event: string, data?: Record<string, unknown>): void;
+}
+export { Ttq };

package/dist/node-esm/lib/Tracking/Tiktok/index.d.ts

@@ -0,0 +1,4 @@
+import { TiktokCustomEvent } from './CustomEvent';
+import { Ttq } from './Ttq';
+export * from './StandardEvents';
+export { TiktokCustomEvent, Ttq };

package/dist/node-esm/lib/Tracking/Xy/BaseEvent.d.ts

@@ -0,0 +1,6 @@
+declare class XyBaseEvent<T extends Record<string, unknown>> {
+    private name;
+    constructor(name: string);
+    send(fields: T): Promise<void>;
+}
+export { XyBaseEvent };

package/dist/node-esm/lib/Tracking/Xy/CustomEvent.d.ts

@@ -0,0 +1,4 @@
+import { XyBaseEvent } from './BaseEvent';
+declare class XyCustomEvent<T extends Record<string, unknown>> extends XyBaseEvent<T> {
+}
+export { XyCustomEvent };

package/dist/node-esm/lib/Tracking/Xy/StandardEvent.d.ts

@@ -0,0 +1,4 @@
+import { XyBaseEvent } from './BaseEvent';
+declare class XyStandardEvent<T extends Record<string, unknown>> extends XyBaseEvent<T> {
+}
+export { XyStandardEvent };

package/dist/node-esm/lib/Tracking/Xy/UserEventHandler.d.ts

@@ -0,0 +1,8 @@
+import { FunnelStartedFields, UserClickFields, UserEventHandler, ViewContentFields } from '@xylabs/pixel';
+declare class XyUserEventHandler<T extends Record<string, unknown>> implements UserEventHandler<T> {
+    testStarted(data: T): Promise<void>;
+    funnelStarted(data: FunnelStartedFields | T): Promise<void>;
+    viewContent(data: ViewContentFields | T): Promise<void>;
+    userClick(data: UserClickFields | T): Promise<void>;
+}
+export { XyUserEventHandler };

package/dist/node-esm/lib/Tracking/Xy/index.d.ts

@@ -0,0 +1,4 @@
+import { XyBaseEvent } from './BaseEvent';
+import { XyCustomEvent } from './CustomEvent';
+import { XyUserEventHandler } from './UserEventHandler';
+export { XyBaseEvent, XyCustomEvent, XyUserEventHandler };

package/dist/node-esm/lib/Tracking/XyoUserEventHandler.d.ts

@@ -0,0 +1,10 @@
+import { FunnelStartedFields, TestStartedFields, UserClickFields, UserEventHandler, ViewContentFields } from '@xylabs/pixel';
+declare class XyoUserEventHandler<T> extends UserEventHandler<T> {
+    protected handlers: UserEventHandler<T>[];
+    private constructor();
+    testStarted(data: T | TestStartedFields): Promise<void>;
+    funnelStarted(data: T | FunnelStartedFields): Promise<void>;
+    viewContent(data: T | ViewContentFields): Promise<void>;
+    userClick(data: T | UserClickFields): Promise<void>;
+}
+export { XyoUserEventHandler };

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

@@ -0,0 +1,10 @@
+import { Referrer } from './Referrer';
+import { XyoUserEventHandler } from './XyoUserEventHandler';
+export * from './Drip';
+export * from './Facebook';
+export * from './Google';
+export * from './Reddit';
+export * from './Snapchat';
+export * from './Tiktok';
+export * from './Xy';
+export { Referrer, XyoUserEventHandler };

package/dist/node-esm/lib/getApiStage.d.ts

@@ -0,0 +1,2 @@
+declare const getApiStage: () => import("@xylabs/sdk-js/dist/ApiStage").ApiStage;
+export { getApiStage };

package/dist/node-esm/lib/global.d.ts

@@ -0,0 +1,2 @@
+declare const global: any;
+export { global };

package/dist/node-esm/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/lib/isLocalHost.d.ts

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

package/dist/node-esm/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/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/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/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/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

@@ -15,22 +15,25 @@
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "numeral": "^2.0.6",
-    "query-string": "^7.0.1",
+    "query-string": "^7.1.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1"
   },
   "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.5",
-    "@mui/material": "^5.2.6",
+    "@mui/material": "^5.2.7",
     "@mui/styles": "^5.2.3",
+    "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^3.0.1",
     "@rollup/plugin-strip": "^2.1.0",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@storybook/addon-actions": "^6.4.9",
     "@storybook/addon-docs": "^6.4.9",
     "@storybook/addon-essentials": "^6.4.9",
@@ -41,13 +44,13 @@
     "@types/bn.js": "^5.1.0",
     "@types/lodash": "^4.14.178",
     "@types/md5": "^2.3.1",
-    "@types/node": "^17.0.5",
+    "@types/node": "^17.0.8",
     "@types/react": "^17",
     "@xylabs/eslint-config-react": "^2",
     "@xylabs/pixel": "^1.2.5",
-    "@xylabs/sdk-js": "^2.3.19",
+    "@xylabs/sdk-js": "^2.3.23",
     "@xylabs/ts-scripts": "^1.0.24",
-    "@xylabs/tsconfig": "^1.0.5",
+    "@xylabs/tsconfig": "^1.0.8",
     "babel-loader": "^8.2.3",
     "bn.js": "^5.2.0",
     "copyfiles": "^2.4.1",
@@ -60,10 +63,10 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6",
     "rollbar": "^2",
-    "rollup": "^2.62.0",
+    "rollup": "^2.63.0",
     "rollup-plugin-svg": "^2.0.0",
-    "rollup-plugin-typescript2": "^0.31.1",
     "ts-node": "^10.4.0",
+    "tslib": "^2.3.1",
     "typescript": "^4.5.4",
     "webpack": "^5"
   },
@@ -120,7 +123,7 @@
     "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",
+    "compile-tsc": "tsc -p tsconfig.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'"
@@ -128,5 +131,5 @@
   "sideEffects": false,
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "2.7.20"
+  "version": "2.7.24"
 }

package/rollup.config.js

@@ -1,8 +1,8 @@
+import image from '@rollup/plugin-image'
 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 typescriptPlugin from '@rollup/plugin-typescript'
 import typescript from 'typescript'
 
 import pkg from './package.json'
@@ -55,53 +55,40 @@ function emitModulePackageFile() {
   }
 }
 
-const es5BuildPlugins = [
-  json(),
-  svg(),
-  strip({
-    functions: ['debugAssert.*'],
-  }),
-  typescriptPlugin({
-    typescript,
-  }),
-]
-
-const es2017BuildPlugins = [
-  json(),
-  svg(),
-  strip({
-    functions: ['debugAssert.*'],
-  }),
-  typescriptPlugin({
-    tsconfigOverride: {
-      compilerOptions: {
-        target: 'es2017',
-      },
-    },
-    typescript,
-  }),
-]
+const getPlugIns = (outDir) => {
+  return [
+    image(),
+    json(),
+    strip({
+      functions: ['debugAssert.*'],
+    }),
+    typescriptPlugin({
+      outDir,
+      typescript,
+    }),
+  ]
+}
 
 const browserBuilds = [
   {
     external: (id) => deps.some((dep) => id === dep || id.startsWith(`${dep}/`)),
     input: {
-      index: 'index.ts',
+      index: './src/index.ts',
     },
-    output: [{ dir: 'dist/esm5', format: 'es', sourcemap: true }],
-    plugins: [...es5BuildPlugins, replace(generateBuildTargetReplaceConfig('esm', 5))],
+    output: [{ dir: './dist/esm5', format: 'es', sourcemap: true }],
+    plugins: [...getPlugIns('./dist/esm5'), replace(generateBuildTargetReplaceConfig('esm', 5))],
   },
   {
     external: (id) => deps.some((dep) => id === dep || id.startsWith(`${dep}/`)),
     input: {
-      index: 'index.ts',
+      index: './src/index.ts',
     },
     output: {
-      dir: 'dist/esm2017',
+      dir: './dist/esm2017',
       format: 'es',
       sourcemap: true,
     },
-    plugins: [...es2017BuildPlugins, replace(generateBuildTargetReplaceConfig('esm', 2017))],
+    plugins: [...getPlugIns('./dist/esm2017'), replace(generateBuildTargetReplaceConfig('esm', 2017))],
   },
 ]
 
@@ -109,18 +96,22 @@ const nodeBuilds = [
   {
     external: (id) => deps.some((dep) => id === dep || id.startsWith(`${dep}/`)),
     input: {
-      index: 'index.node.ts',
+      index: './src/index.ts',
     },
-    output: [{ dir: 'dist/node', format: 'cjs', sourcemap: true }],
-    plugins: [...es5BuildPlugins, replace(generateBuildTargetReplaceConfig('cjs', 5))],
+    output: [{ dir: './dist/node', format: 'cjs', sourcemap: true }],
+    plugins: [...getPlugIns('./dist/node'), replace(generateBuildTargetReplaceConfig('cjs', 5))],
   },
   {
     external: (id) => deps.some((dep) => id === dep || id.startsWith(`${dep}/`)),
     input: {
-      index: 'index.node.ts',
+      index: './src/index.ts',
     },
-    output: [{ dir: 'dist/node-esm', format: 'es', sourcemap: true }],
-    plugins: [...es2017BuildPlugins, replace(generateBuildTargetReplaceConfig('esm', 2017)), emitModulePackageFile()],
+    output: [{ dir: './dist/node-esm', format: 'es', sourcemap: true }],
+    plugins: [
+      ...getPlugIns('./dist/node-esm'),
+      replace(generateBuildTargetReplaceConfig('esm', 2017)),
+      emitModulePackageFile(),
+    ],
   },
 ]
 

package/src/components/Experiments/Experiments.tsx

@@ -88,8 +88,13 @@ const Experiments: React.FC<Props> = (props) => {
         localStorage.setItem(localStorageKey, mergeData(experimentsTestData))
       }
       if (!isLocalhost) {
-        userEvents?.testStarted({})
-        testStarted?.()
+        Promise.all([userEvents?.testStarted({}), testStarted?.()])
+          .then(() => {
+            return
+          })
+          .catch((reason) => {
+            console.log(`Experiments Excepted: ${reason}`)
+          })
       }
     }
 

package/src/components/InvertableThemeProvider/InvertableThemeContext.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { createContext } from 'react'
 
 import { InvertableTheme } from './InvertableTheme'
 
-const InvertableThemeContext = React.createContext<InvertableTheme>({
+const InvertableThemeContext = createContext<InvertableTheme>({
   options: {},
 })
 

package/src/contexts/Ethers/Context.ts

@@ -1,7 +1,7 @@
 import { Signer } from '@ethersproject/abstract-signer'
 import { Provider } from '@ethersproject/providers'
 import { EthAddress } from '@xylabs/sdk-js'
-import React from 'react'
+import { createContext } from 'react'
 
 export interface EthersData {
   busy?: boolean
@@ -18,4 +18,4 @@ export interface EthersData {
   walletProvider?: Provider | null
 }
 
-export const EthersContext = React.createContext<EthersData>({})
+export const EthersContext = createContext<EthersData>({})

package/src/contexts/Ethers/Opera.tsx

@@ -1,7 +1,8 @@
 import { JsonRpcProvider, JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
 import { EthAddress } from '@xylabs/sdk-js'
-import React, { PropsWithChildren, useState } from 'react'
+import { PropsWithChildren, useState } from 'react'
 
+import { useAsyncEffect } from '../../lib'
 import { EthersContext } from './Context'
 
 interface Props {
@@ -23,37 +24,30 @@ export const OperaEthersLoader: React.FC<PropsWithChildren<Props>> = (props) =>
   const chainId = ethereum?.chainId ? parseInt(ethereum?.chainId) : 1
   const isConnected = ethereum?.isConnected() ?? false
 
-  React.useEffect(() => {
-    let cancelled = false
-
-    if (ethereum) {
-      ethereum.enable()
-      const operaProvider = new Web3Provider(ethereum)
-      const provider = operaProvider
-      const signer = operaProvider.getSigner()
-      const load = async () => {
+  useAsyncEffect(
+    async (mounted) => {
+      if (ethereum) {
+        ethereum.enable()
+        const operaProvider = new Web3Provider(ethereum)
+        const provider = operaProvider
+        const signer = operaProvider.getSigner()
         try {
           const localAddress = EthAddress.fromString(await signer.getAddress())
           ethereum.autoRefreshOnNetworkChange = false
-          if (!cancelled) {
+          if (mounted()) {
             setSigner(signer)
             setProvider(provider)
             setLocalAddress(localAddress)
           }
         } catch (ex) {
-          if (!cancelled) {
+          if (mounted()) {
             setError(Error(`localAddress: ${ex}`))
           }
         }
       }
-
-      load()
-    }
-
-    return () => {
-      cancelled = true
-    }
-  }, [ethereum])
+    },
+    [ethereum]
+  )
 
   return (
     <EthersContext.Provider

package/src/contexts/Ethers/Trust.tsx

@@ -1,7 +1,8 @@
 import { Web3Provider } from '@ethersproject/providers'
 import { EthAddress } from '@xylabs/sdk-js'
-import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { PropsWithChildren, useState } from 'react'
 
+import { useAsyncEffect } from '../../lib'
 import { EthersContext } from './Context'
 
 interface Props {
@@ -22,30 +23,23 @@ export const TrustEthersLoader: React.FC<PropsWithChildren<Props>> = (props) =>
 
   const provider = trustProvider
 
-  useEffect(() => {
-    let cancelled = false
-
-    if (signer) {
-      const load = async () => {
+  useAsyncEffect(
+    async (mounted) => {
+      if (signer) {
         try {
           const localAddress = EthAddress.fromString(await signer.getAddress())
-          if (!cancelled) {
+          if (mounted()) {
             setLocalAddress(localAddress)
           }
         } catch (ex) {
-          if (!cancelled) {
+          if (mounted()) {
             setError(Error(`localAddress: ${ex}`))
           }
         }
       }
-
-      load()
-    }
-
-    return () => {
-      cancelled = true
-    }
-  }, [signer])
+    },
+    [signer]
+  )
 
   return (
     <EthersContext.Provider

package/src/contexts/NetworkSettings/Context.ts

@@ -1,7 +1,7 @@
 import { EthAddress } from '@xylabs/sdk-js'
-import React from 'react'
+import { createContext } from 'react'
 
-const NetworkSettingsContext = React.createContext<{
+const NetworkSettingsContext = createContext<{
   xyStakingConsensusAddress?: EthAddress
   xyBondAddress?: EthAddress
   xyGovernanceAddress?: EthAddress

package/src/contexts/UserEvents/Context.ts

@@ -1,9 +1,9 @@
 import { UserEventHandler } from '@xylabs/pixel'
-import React from 'react'
+import { createContext } from 'react'
 
 interface Props {
   userEvents?: UserEventHandler<unknown>
 }
 
-const UserEventsContext = React.createContext<Props>({})
+const UserEventsContext = createContext<Props>({})
 export { UserEventsContext }

package/src/lib/Tracking/Facebook/Fbq.ts

@@ -1,5 +1,3 @@
-import { delay } from '@xylabs/sdk-js'
-
 import { global } from '../../global'
 
 class Fbq {
@@ -36,18 +34,16 @@ class Fbq {
     return this.instance
   }
 
-  public async track(event: string, data: Record<string, unknown>) {
+  public track(event: string, data: Record<string, unknown>) {
     this.fbq('track', event, {
       ...data,
     })
-    await delay(0)
   }
 
-  public async trackCustom(event: string, data: Record<string, unknown>) {
+  public trackCustom(event: string, data: Record<string, unknown>) {
     this.fbq('trackCustom', event, {
       ...data,
     })
-    await delay(0)
   }
 }
 

package/src/lib/Tracking/Reddit/Rdt.ts

@@ -1,5 +1,3 @@
-import { delay } from '@xylabs/sdk-js'
-
 import { global } from '../../global'
 
 class Rdt {
@@ -26,12 +24,11 @@ class Rdt {
     }
   }
 
-  public async track(event: string, data?: Record<string, unknown>) {
+  public track(event: string, data?: Record<string, unknown>) {
     try {
       Rdt.getRdt()('track', event, {
         ...data,
       })
-      await delay(0)
     } catch (ex) {
       console.error(ex)
     }

package/src/lib/Tracking/Snapchat/Snaptr.ts

@@ -1,5 +1,3 @@
-import { delay } from '@xylabs/sdk-js'
-
 import { global } from '../../global'
 
 class SnapTr {
@@ -15,10 +13,9 @@ class SnapTr {
     this.track('PAGE_VIEW')
   }
 
-  public static async track<T>(event: string, data?: T) {
+  public static track<T>(event: string, data?: T) {
     this.getSnapTr()('init', this.pixelId)
     this.getSnapTr()('track', event, data)
-    await delay(0)
   }
 }
 

package/src/lib/Tracking/Tiktok/Ttq.ts

@@ -1,5 +1,3 @@
-import { delay } from '@xylabs/sdk-js'
-
 import { global } from '../../global'
 
 class Ttq {
@@ -18,21 +16,19 @@ class Ttq {
     return global.ttq
   }
 
-  public static async page() {
+  public static page() {
     try {
       Ttq.getTtq().page()
-      await delay(0)
     } catch (ex) {
       console.error(`Ttq.page: ${ex}`)
     }
   }
 
-  public async track(event: string, data?: Record<string, unknown>) {
+  public track(event: string, data?: Record<string, unknown>) {
     try {
       Ttq.getTtq().track(event, {
         ...data,
       })
-      await delay(0)
     } catch (ex) {
       console.error(`Ttq.track: ${ex}`)
     }