@xylabs/sdk-react 2.9.36 → 2.10.3

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

@@ -5,6 +5,7 @@ export * from './Facebook';
 export * from './Google';
 export * from './Reddit';
 export * from './Snapchat';
+export * from './Tapjoy';
 export * from './Tiktok';
 export * from './Xy';
 export { Referrer, XyoUserEventHandler };

package/package.json

@@ -9,27 +9,30 @@
     "url": "https://github.com/xylabs/sdk-react/issues"
   },
   "dependencies": {
-    "@types/react-helmet": "^6.1.5",
-    "@xylabs/sdk-js": "^2.4.2",
-    "axios": "^0.26.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@ethersproject/abstract-signer": "^5.6.0",
+    "@ethersproject/providers": "^5.6.1",
+    "@mui/icons-material": "^5.5.1",
+    "@mui/material": "^5.5.2",
+    "@mui/styles": "^5.5.1",
+    "@xylabs/pixel": "^1.3.7",
+    "@xylabs/sdk-js": "^2.4.3",
+    "axios": "^0.26.1",
     "bn.js": "^5.2.0",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "numeral": "^2.0.6",
     "query-string": "^7.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.3.1"
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^6.2.2"
   },
   "description": "Common React library for all XY Labs projects that use React",
   "devDependencies": {
-    "@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.3",
-    "@mui/styles": "^5.4.2",
+    "@babel/core": "^7.17.8",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -43,35 +46,32 @@
     "@storybook/core-events": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@types/bn.js": "^5.1.0",
-    "@types/lodash": "^4.14.178",
+    "@types/lodash": "^4.14.180",
     "@types/md5": "^2.3.2",
-    "@types/node": "^17.0.21",
+    "@types/node": "^17.0.22",
     "@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.44",
+    "@types/react": "^17.0.41",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-helmet": "^6.1.5",
+    "@xylabs/eslint-config-react": "^2.1.3",
+    "@xylabs/rollup-config": "^1.1.10",
+    "@xylabs/ts-scripts": "^1.0.48",
     "@xylabs/tsconfig": "^1.0.12",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.4",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.9.0",
+    "eslint": "^8.11.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.0",
+    "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.1",
+    "prettier": "^2.6.0",
     "rimraf": "^3.0.2",
-    "rollbar": "^2.24.0",
-    "rollup": "^2.68.0",
+    "rollbar": "^2.24.1",
+    "rollup": "^2.70.1",
     "rollup-plugin-svg": "^2.0.0",
-    "ts-node": "^10.5.0",
+    "ts-node": "^10.7.0",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.5",
-    "webpack": "^5.69.1"
+    "typescript": "^4.6.2",
+    "webpack": "^5.70.0"
   },
   "esm5": "dist/esm5/index.js",
   "exports": {
@@ -95,20 +95,6 @@
   "main": "dist/node/index.js",
   "module": "dist/index.js",
   "name": "@xylabs/sdk-react",
-  "peerDependencies": {
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@ethersproject/abstract-signer": "^5",
-    "@ethersproject/providers": "^5",
-    "@mui/icons-material": "^5",
-    "@mui/material": "^5",
-    "@mui/styles": "^5",
-    "@xylabs/pixel": "^1",
-    "@xylabs/sdk-js": "^2",
-    "react": "^17",
-    "react-dom": "^17",
-    "react-router-dom": "^6"
-  },
   "publishConfig": {
     "access": "public"
   },
@@ -123,11 +109,8 @@
     "start": "start-storybook -p 6006",
     "test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha -r ts-node/register 'src/**/*.spec.ts'"
   },
-  "resolutions": {
-    "eslint-plugin-react": "7.28.0"
-  },
   "sideEffects": false,
   "types": "dist/index.d.ts",
-  "version": "2.9.36",
+  "version": "2.10.3",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Background.tsx

@@ -7,4 +7,5 @@ const Background: React.FC<FlexBoxProps> = (props) => {
   return <FlexRow {...props} />
 }
 
+// eslint-disable-next-line deprecation/deprecation
 export { Background }

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

@@ -21,12 +21,10 @@ const Template: ComponentStory<typeof BasePage> = (args) => (
 )
 
 const AppBar = () => <div>AppBar</div>
-const FilterBar = () => <div>FilterBar</div>
 
 const Default = Template.bind({})
 Default.args = {
   appBar: <AppBar />,
-  filterBar: <FilterBar />,
   title: 'Default',
 }
 

package/src/components/BasePage/BasePage.tsx

@@ -19,9 +19,7 @@ const BasePage: React.FC<BasePageProps> = ({
   appFooter,
   appBar,
   cookieConsent,
-  filterBar,
   hideAppBar,
-  hideFilterBar,
   noindex = false,
   scrollToTopButton = false,
   title,
@@ -44,7 +42,6 @@ const BasePage: React.FC<BasePageProps> = ({
       <Helmet title={title}>{noindex ? <meta content="noindex" name="robots" /> : null}</Helmet>
       {scrollToTopButton ? <div id={scrollToTopAnchorId} /> : null}
       {hideAppBar ? null : appBar}
-      {hideFilterBar ? null : filterBar}
       {beta ? (
         <FlexRow
           margin={1}

package/src/components/BasePage/BasePageProps.ts

@@ -9,9 +9,7 @@ interface BasePageProps extends BoxProps {
   beta?: boolean
   container?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
   disableGutters?: boolean
-  filterBar?: ReactElement
   hideAppBar?: boolean
-  hideFilterBar?: boolean
   hideFooter?: boolean
   noindex?: boolean
   cookieConsent?: ReactNode

package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx

@@ -27,6 +27,7 @@ export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (
   scoped = false,
   invert = false,
   noResponsiveFonts,
+  // eslint-disable-next-line deprecation/deprecation
   darkTheme,
   darkOptions,
   lightOptions,

package/src/components/LinkEx/LinkToEx.tsx

@@ -17,4 +17,5 @@ const LinkEx: React.FC<Props> = ({ to, ...props }) => {
 /** @deprecated use LinkEx instead */
 const LinkToEx = LinkEx
 
+// eslint-disable-next-line deprecation/deprecation
 export { LinkEx, LinkToEx }

package/src/components/index.ts

@@ -26,4 +26,5 @@ export * from './ScrollToTop'
 export * from './SelectEx'
 export * from './TokenAmount'
 
+// eslint-disable-next-line deprecation/deprecation
 export { Background, CoverProgress, HoverScale, Identicon, RedirectWithQuery, ScrollToTopButton }

package/src/contexts/Ethers/MetaMask.tsx

@@ -84,6 +84,7 @@ export const MetaMaskEthersLoader: React.FC<PropsWithChildren<Props>> = (props)
   }, [ethereum, isConnected, enabled])
 
   useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     async (isMounted) => {
       if (signer && enabled) {
         try {
@@ -107,6 +108,7 @@ export const MetaMaskEthersLoader: React.FC<PropsWithChildren<Props>> = (props)
 
   const [chainId, setChainId] = useState<number>()
   useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     async (isMounted) => {
       if (enabled) {
         const chainId = (await provider?.getNetwork())?.chainId

package/src/contexts/Ethers/MyEtherWallet.tsx

@@ -57,6 +57,7 @@ export const MyEtherWalletEthersLoader: React.FC<PropsWithChildren<Props>> = (pr
   }, [ethereum, isConnected])
 
   useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     async (isMounted) => {
       if (signer) {
         try {
@@ -79,6 +80,7 @@ export const MyEtherWalletEthersLoader: React.FC<PropsWithChildren<Props>> = (pr
 
   const [chainId, setChainId] = useState<number>()
   useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     async (isMounted) => {
       const chainId = (await provider?.getNetwork())?.chainId
       if (!isMounted()) return

package/src/contexts/Ethers/Opera.tsx

@@ -25,6 +25,7 @@ export const OperaEthersLoader: React.FC<PropsWithChildren<Props>> = (props) =>
   const isConnected = ethereum?.isConnected() ?? false
 
   useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     async (mounted) => {
       if (ethereum) {
         ethereum.enable()

package/src/contexts/Ethers/Trust.tsx

@@ -24,6 +24,7 @@ export const TrustEthersLoader: React.FC<PropsWithChildren<Props>> = (props) =>
   const provider = trustProvider
 
   useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     async (mounted) => {
       if (signer) {
         try {

package/src/contexts/UserEvents/Provider.tsx

@@ -0,0 +1,17 @@
+import { UserEventHandler } from '@xylabs/pixel'
+import React from 'react'
+
+import { XyoUserEventHandler } from '../../lib'
+import { UserEventsContext } from './Context'
+
+interface Props<T> {
+  userEvents: UserEventHandler<T>
+}
+
+export const UserEventsProvider: React.FC<Props<unknown>> = ({ userEvents, children }) => {
+  return (
+    <UserEventsContext.Provider value={{ userEvents: userEvents ?? XyoUserEventHandler.get() }}>
+      {children}
+    </UserEventsContext.Provider>
+  )
+}

package/src/contexts/UserEvents/index.ts

@@ -1,2 +1,2 @@
 export * from './Context'
-export * from './Loader'
+export * from './Provider'

package/src/hooks/useWebP.tsx

@@ -7,6 +7,7 @@ let supportsWebP: boolean | undefined = undefined
 export const useWebP = (webp: string, alt: string) => {
   const [img, setImg] = useState<string>()
   useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     async (mounted) => {
       if (supportsWebP === undefined) {
         supportsWebP = await getSupportsWebP()
@@ -15,7 +16,7 @@ export const useWebP = (webp: string, alt: string) => {
         setImg(supportsWebP ? webp : alt)
       }
     },
-    [supportsWebP]
+    [alt, webp]
   )
   return img
 }

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

@@ -1,6 +1,7 @@
 import { FacebookCustomEvent } from './CustomEvent'
 import { Fbq } from './Fbq'
 export * from './StandardEvents'
+export * from './UserEventHandler'
 
 export interface FacebookUserClick {
   elementName: string

package/src/lib/Tracking/Tapjoy/BaseEvent.ts

@@ -0,0 +1,19 @@
+import { assertEx, delay } from '@xylabs/sdk-js'
+
+import { EF } from './EF'
+
+class TapjoyBaseEvent<T> {
+  public ef: EF
+  public name: string
+
+  constructor(name: string) {
+    this.name = name
+    this.ef = assertEx(EF.instance, 'Missing Tapjoy Eventflow')
+  }
+
+  async send(_data: T) {
+    await delay(0)
+  }
+}
+
+export { TapjoyBaseEvent }

package/src/lib/Tracking/Tapjoy/EF.ts

@@ -0,0 +1,41 @@
+import { global } from '../../global'
+class EF {
+  public static instance: EF
+  public static init() {
+    try {
+      EF.instance = new EF()
+    } catch (ex) {
+      console.error(`EF.init: ${ex}`)
+    }
+  }
+  public static getEF() {
+    if (global.EF) {
+      return global.EF
+    }
+    console.warn('Missing EF')
+  }
+
+  public track(event: string, data?: Record<string, unknown>) {
+    switch (event) {
+      case 'Purchase':
+        this.sendConversion(data)
+        break
+      default:
+        console.error(`EF.track: missing event ${event}`)
+    }
+  }
+
+  private sendConversion(data?: Record<string, unknown>) {
+    try {
+      //data: have session_id, tracking_id, order_id, amount
+      const ef = EF.getEF()
+      ef.conversion({
+        ...data,
+      })
+    } catch (ex) {
+      console.error(`EF.conversion: ${ex}`)
+    }
+  }
+}
+
+export { EF }

package/src/lib/Tracking/Tapjoy/StandardEvent.ts

@@ -0,0 +1,11 @@
+import { delay } from '@xylabs/sdk-js'
+
+import { TapjoyBaseEvent } from './BaseEvent'
+class TapjoyStandardEvent<T extends Record<string, unknown>> extends TapjoyBaseEvent<T> {
+  async send(data: T) {
+    this.ef.track(this.name, data)
+    await delay(0)
+  }
+}
+
+export { TapjoyStandardEvent }

package/src/lib/Tracking/Tapjoy/StandardEvents.ts

@@ -0,0 +1,9 @@
+import { TapjoyStandardEvent } from './StandardEvent'
+
+class TapjoyStandardEvents<T extends Record<string, unknown>> {
+  public purchase() {
+    return new TapjoyStandardEvent<T>('Purchase')
+  }
+}
+
+export { TapjoyStandardEvents }

package/src/lib/Tracking/Tapjoy/index.ts

@@ -0,0 +1,3 @@
+export * from './EF'
+export * from './StandardEvent'
+export * from './StandardEvents'

package/src/lib/Tracking/XyoUserEventHandler.ts

@@ -6,11 +6,14 @@ import {
   ViewContentFields,
 } from '@xylabs/pixel'
 
-class XyoUserEventHandler<T> extends UserEventHandler<T> {
+import { FacebookUserEventHandler } from './Facebook'
+import { GoogleUserEventHandler } from './Google'
+
+class XyoUserEventHandler<T extends Record<string, unknown>> extends UserEventHandler<T> {
   protected handlers: UserEventHandler<T>[]
   private constructor(handlers: UserEventHandler<T>[] = []) {
     super()
-    this.handlers = handlers
+    this.handlers = handlers ?? [new FacebookUserEventHandler<T>(), new GoogleUserEventHandler<T>()]
   }
 
   async testStarted(data: T | TestStartedFields) {
@@ -28,6 +31,12 @@ class XyoUserEventHandler<T> extends UserEventHandler<T> {
   async userClick(data: T | UserClickFields) {
     await Promise.allSettled(this.handlers.map((handler) => handler.userClick(data)))
   }
+
+  static instance: XyoUserEventHandler<Record<string, unknown>>
+  static get() {
+    this.instance = this.instance ?? new XyoUserEventHandler()
+    return this.instance
+  }
 }
 
 export { XyoUserEventHandler }

package/src/lib/Tracking/index.ts

@@ -6,6 +6,7 @@ export * from './Facebook'
 export * from './Google'
 export * from './Reddit'
 export * from './Snapchat'
+export * from './Tapjoy'
 export * from './Tiktok'
 export * from './Xy'
 

package/dist/contexts/UserEvents/Loader.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { UserEventsContext } from './Context';
-export const UserEventsLoader = ({ userEvents, children }) => {
-    return _jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents } }, { children: children }), void 0);
-};
-//# sourceMappingURL=Loader.js.map

package/dist/contexts/UserEvents/Loader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/Loader.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAM7C,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrF,OAAO,KAAC,iBAAiB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,UAAU,EAAE,gBAAG,QAAQ,YAA8B,CAAA;AACnG,CAAC,CAAA"}

package/dist/esm5/contexts/UserEvents/Loader.d.ts

@@ -1,7 +0,0 @@
-import { UserEventHandler } from '@xylabs/pixel';
-import React from 'react';
-interface Props<T> {
-    userEvents: UserEventHandler<T>;
-}
-export declare const UserEventsLoader: React.FC<Props<unknown>>;
-export {};

package/dist/node/contexts/UserEvents/Loader.d.ts

@@ -1,7 +0,0 @@
-import { UserEventHandler } from '@xylabs/pixel';
-import React from 'react';
-interface Props<T> {
-    userEvents: UserEventHandler<T>;
-}
-export declare const UserEventsLoader: React.FC<Props<unknown>>;
-export {};

package/dist/node-esm/contexts/UserEvents/Loader.d.ts

@@ -1,7 +0,0 @@
-import { UserEventHandler } from '@xylabs/pixel';
-import React from 'react';
-interface Props<T> {
-    userEvents: UserEventHandler<T>;
-}
-export declare const UserEventsLoader: React.FC<Props<unknown>>;
-export {};

package/src/contexts/UserEvents/Loader.tsx

@@ -1,12 +0,0 @@
-import { UserEventHandler } from '@xylabs/pixel'
-import React from 'react'
-
-import { UserEventsContext } from './Context'
-
-interface Props<T> {
-  userEvents: UserEventHandler<T>
-}
-
-export const UserEventsLoader: React.FC<Props<unknown>> = ({ userEvents, children }) => {
-  return <UserEventsContext.Provider value={{ userEvents }}>{children}</UserEventsContext.Provider>
-}