@xylabs/sdk-react 2.12.12 → 2.13.3

package/src/contexts/Ethers/MyEtherWallet.tsx

@@ -1,110 +0,0 @@
-import { InfuraProvider, JsonRpcSigner, Provider, Web3Provider } from '@ethersproject/providers'
-import { EthAddress } from '@xylabs/sdk-js'
-import React, { PropsWithChildren, useEffect, useState } from 'react'
-
-import { useAsyncEffect } from '../../lib'
-import { EthersContext } from './Context'
-import { infuraKey } from './Infura'
-
-interface Props {
-  enabled?: boolean
-}
-
-export const MyEtherWalletEthersLoader: React.FC<PropsWithChildren<Props>> = (props) => {
-  const { children } = props
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const global = window as any
-  const ethereum = global.ethereum
-  const [error, setError] = useState<Error>()
-  const [localAddress, setLocalAddress] = useState<EthAddress>()
-  const [providerName, setProviderName] = useState<string>()
-
-  if (ethereum) {
-    ethereum.autoRefreshOnNetworkChange = false
-  }
-
-  const connect = async () => {
-    await global.ethereum?.enable()
-    return localAddress ? [localAddress.toString()] : []
-  }
-
-  const [isConnected, setIsConnected] = useState<boolean>()
-
-  const [walletProvider, setWalletProvider] = useState<Web3Provider | null>()
-  const [provider, setProvider] = useState<Provider>()
-  const [signer, setSigner] = useState<JsonRpcSigner | null>()
-  useEffect(() => {
-    const walletProvider = ethereum ? new Web3Provider(ethereum) : null
-    let provider = null
-    let providerName = null
-    if (walletProvider) {
-      provider = walletProvider
-      providerName = 'MyEtherWallet'
-    } else {
-      provider = new InfuraProvider(1, infuraKey)
-      providerName = 'Infura (Default)'
-    }
-    setProvider(provider)
-    setProviderName(providerName)
-    setWalletProvider(walletProvider)
-    let signer = null
-    try {
-      signer = walletProvider?.getSigner()
-    } catch (ex) {
-      console.error(ex)
-    }
-    setSigner(signer)
-  }, [ethereum, isConnected])
-
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (isMounted) => {
-      if (signer) {
-        try {
-          const localAddress = EthAddress.fromString(await signer.getAddress())
-          if (isMounted()) {
-            setLocalAddress(localAddress)
-            setIsConnected(true)
-          }
-        } catch (ex) {
-          if (isMounted()) {
-            setError(Error(`localAddress: ${ex}`))
-            setLocalAddress(undefined)
-            setIsConnected(false)
-          }
-        }
-      }
-    },
-    [signer]
-  )
-
-  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
-      setChainId(chainId)
-    },
-    [provider]
-  )
-
-  return (
-    <EthersContext.Provider
-      value={{
-        busy: false,
-        chainId,
-        connect,
-        error,
-        isConnected,
-        localAddress,
-        provider,
-        providerName,
-        signer: isConnected ? signer : undefined,
-        walletProvider,
-      }}
-    >
-      {children}
-    </EthersContext.Provider>
-  )
-}

package/src/contexts/Ethers/Opera.tsx

@@ -1,68 +0,0 @@
-import { JsonRpcProvider, JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
-import { EthAddress } from '@xylabs/sdk-js'
-import { PropsWithChildren, useState } from 'react'
-
-import { useAsyncEffect } from '../../lib'
-import { EthersContext } from './Context'
-
-interface Props {
-  enabled?: boolean
-}
-
-export const OperaEthersLoader: React.FC<PropsWithChildren<Props>> = (props) => {
-  const { children } = props
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const global = window as any
-  const ethereum = global.ethereum
-  const [error, setError] = useState<Error>()
-  const [signer, setSigner] = useState<JsonRpcSigner>()
-  const [provider, setProvider] = useState<JsonRpcProvider>()
-  const [localAddress, setLocalAddress] = useState<EthAddress | undefined | null>(
-    (global.ethereum?.addresses?.length ?? 0) > 0 ? EthAddress.fromString(global.ethereum?.addresses?.[0]) : null
-  )
-
-  const chainId = ethereum?.chainId ? parseInt(ethereum?.chainId) : 1
-  const isConnected = ethereum?.isConnected() ?? false
-
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    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 (mounted()) {
-            setSigner(signer)
-            setProvider(provider)
-            setLocalAddress(localAddress)
-          }
-        } catch (ex) {
-          if (mounted()) {
-            setError(Error(`localAddress: ${ex}`))
-          }
-        }
-      }
-    },
-    [ethereum]
-  )
-
-  return (
-    <EthersContext.Provider
-      value={{
-        busy: false,
-        chainId,
-        error,
-        isConnected,
-        localAddress,
-        provider,
-        signer,
-      }}
-    >
-      {children}
-    </EthersContext.Provider>
-  )
-}

package/src/contexts/Ethers/Trust.tsx

@@ -1,59 +0,0 @@
-import { Web3Provider } from '@ethersproject/providers'
-import { EthAddress } from '@xylabs/sdk-js'
-import { PropsWithChildren, useState } from 'react'
-
-import { useAsyncEffect } from '../../lib'
-import { EthersContext } from './Context'
-
-interface Props {
-  enabled?: boolean
-}
-
-export const TrustEthersLoader: React.FC<PropsWithChildren<Props>> = (props) => {
-  const { children } = props
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const global = window as any
-  const [error, setError] = useState<Error>()
-  const [localAddress, setLocalAddress] = useState<EthAddress>()
-
-  const trustProvider = new Web3Provider(global.ethereum)
-  const signer = trustProvider.getSigner()
-
-  const chainId = 1
-
-  const provider = trustProvider
-
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
-      if (signer) {
-        try {
-          const localAddress = EthAddress.fromString(await signer.getAddress())
-          if (mounted()) {
-            setLocalAddress(localAddress)
-          }
-        } catch (ex) {
-          if (mounted()) {
-            setError(Error(`localAddress: ${ex}`))
-          }
-        }
-      }
-    },
-    [signer]
-  )
-
-  return (
-    <EthersContext.Provider
-      value={{
-        busy: false,
-        chainId,
-        error,
-        localAddress,
-        provider,
-        signer,
-      }}
-    >
-      {children}
-    </EthersContext.Provider>
-  )
-}

package/src/contexts/Ethers/global.d.ts

@@ -1,8 +0,0 @@
-import { BaseProvider } from '@metamask/providers'
-
-declare global {
-  interface Window {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ethereum: BaseProvider
-  }
-}

package/src/contexts/Ethers/index.ts

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

package/src/contexts/NetworkSettings/Context.ts

@@ -1,10 +0,0 @@
-import { EthAddress } from '@xylabs/sdk-js'
-import { createContext } from 'react'
-
-const NetworkSettingsContext = createContext<{
-  xyStakingConsensusAddress?: EthAddress
-  xyBondAddress?: EthAddress
-  xyGovernanceAddress?: EthAddress
-  xyFhrMerkleSendAddress?: EthAddress
-}>({})
-export { NetworkSettingsContext }

package/src/contexts/NetworkSettings/Loader.tsx

@@ -1,25 +0,0 @@
-import { EthAddress } from '@xylabs/sdk-js'
-import { PropsWithChildren } from 'react'
-
-import { NetworkSettingsContext } from './Context'
-
-export interface NetworkSettingsLoaderProps {
-  enabled?: boolean
-}
-
-export const NetworkSettingsLoader: React.FC<PropsWithChildren<NetworkSettingsLoaderProps>> = (props) => {
-  const { children } = props
-
-  return (
-    <NetworkSettingsContext.Provider
-      value={{
-        xyBondAddress: EthAddress.fromString('0x1a024A698EEBdB86ccf3fCaF2F589839bdc066AD'),
-        xyFhrMerkleSendAddress: EthAddress.fromString('0x46FEEBDffC8076D9E5fd8a11CF1508810472A79f'),
-        xyGovernanceAddress: EthAddress.fromString('0x01925d0fFE4a6a6162B51ba611e3D4780Fc2dF42'),
-        xyStakingConsensusAddress: EthAddress.fromString('0x0242514106114DEaA99Fd81574142c36Edb03B6D'),
-      }}
-    >
-      {children}
-    </NetworkSettingsContext.Provider>
-  )
-}

package/src/contexts/NetworkSettings/index.ts

@@ -1,3 +0,0 @@
-import { NetworkSettingsContext } from './Context'
-export * from './Loader'
-export { NetworkSettingsContext }

package/src/contexts/UserEvents/Context.ts

@@ -1,19 +0,0 @@
-import { UserEventHandler } from '@xylabs/pixel'
-import { createContext } from 'react'
-
-export interface UserEventsProps {
-  userEvents?: UserEventHandler<unknown>
-}
-export const UserEventsContext = createContext<UserEventsProps>({})
-
-export interface DebugUserEventsProps {
-  isDebugging: boolean
-  setIsDebugging: (value: boolean) => void
-}
-
-export const DebugUserEventsContext = createContext<DebugUserEventsProps>({
-  isDebugging: false,
-  setIsDebugging: (value) => {
-    console.warn('set is debugging is not set', value)
-  },
-})

package/src/contexts/UserEvents/Provider.tsx

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

package/src/contexts/UserEvents/index.ts

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

package/src/contexts/index.ts

@@ -1,4 +0,0 @@
-export * from './CookieConsent'
-export * from './Ethers'
-export * from './NetworkSettings'
-export * from './UserEvents'

package/src/hooks/index.ts

@@ -1,11 +0,0 @@
-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/useBreakpoint.ts

@@ -1,24 +0,0 @@
-import { useTheme } from '@mui/material'
-
-import { useMediaQuery } from './useMediaQuery'
-
-export const useBreakpoint = () => {
-  const theme = useTheme()
-  const xs = useMediaQuery(theme.breakpoints.only('xs'))
-  const sm = useMediaQuery(theme.breakpoints.only('sm'))
-  const md = useMediaQuery(theme.breakpoints.only('md'))
-  const lg = useMediaQuery(theme.breakpoints.only('lg'))
-  const xl = useMediaQuery(theme.breakpoints.only('xl'))
-
-  if (xs) {
-    return 'xs'
-  } else if (sm) {
-    return 'sm'
-  } else if (md) {
-    return 'md'
-  } else if (lg) {
-    return 'lg'
-  } else if (xl) {
-    return 'xl'
-  }
-}

package/src/hooks/useExperiment.ts

@@ -1,31 +0,0 @@
-import { ReactNode, useState } from 'react'
-
-import { ExperimentsHelper } from '../common'
-import { VariantData } from '../components'
-import { useUserEvents } from './useUserEvents'
-
-const selectVariant = (current?: string) => (variants: Record<string, ReactNode>, defaultNode: ReactNode) => {
-  if (current && current in variants) {
-    return variants[current]
-  }
-  return defaultNode
-}
-
-const selectVariantForExperiment = (name: string, variants: Record<string, ReactNode>, defaultNode: ReactNode) => {
-  const variant = ExperimentsHelper.getSelectedVariant(name)
-  if (variants[variant?.name ?? '']) {
-    return variants[variant?.name ?? '']
-  }
-  return defaultNode
-}
-
-const useExperiments = (name: string, experiments: VariantData[]) => {
-  const [activeExperiment] = useState(ExperimentsHelper.calculateExperiment(name, true, experiments, useUserEvents()))
-
-  return {
-    experimentName: name,
-    selectVariant: selectVariant(activeExperiment?.name),
-  }
-}
-
-export { selectVariantForExperiment, useExperiments }

package/src/hooks/useExperiments.stories.tsx

@@ -1,43 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { selectVariantForExperiment, useExperiments } from './useExperiment'
-
-const View: React.FC = () => {
-  const { experimentName, selectVariant } = useExperiments('Storybook Test', [
-    { name: 'a/legacy', weight: 33 },
-    { name: 'b/testing', weight: 33 },
-    { name: 'c/testing', weight: 33 },
-  ])
-  const texts = { 'a/legacy': <p>a</p>, 'b/testing': <p>b</p>, 'c/testing': <p>c</p> }
-  const test0 = selectVariantForExperiment('Storybook Test Does not exists', texts, <p>DefaultNode</p>)
-  const test1 = selectVariant({ 'a/legacy': <p>a</p>, 'b/testing': <p>b</p>, 'c/testing': <p>c</p> }, <p>default node</p>)
-  const test2 = selectVariantForExperiment(experimentName, texts, <p>DefaultNode</p>)
-  return (
-    <div>
-      <div>{test0}</div>
-      <div>{test1}</div>
-      <div>{test2}</div>
-    </div>
-  )
-}
-
-const StorybookEntry = {
-  argTypes: {},
-  component: View,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Hooks/useExperiments',
-} as ComponentMeta<typeof View>
-
-const Template: ComponentStory<typeof View> = (args) => <View {...args} />
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/hooks/useInterval.ts

@@ -1,19 +0,0 @@
-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/useLocalStorage.ts

@@ -1,34 +0,0 @@
-import { useState } from 'react'
-
-import { getLocalStorageObject, setLocalStorageObject } from '../lib'
-
-export const useLocalStorage = <T>(key: string, defaultValue: T): [T, (value: T) => void] => {
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    try {
-      const item = getLocalStorageObject<T>(key)
-      if (typeof defaultValue === 'boolean') {
-        if (typeof item === 'boolean') {
-          return item
-        } else {
-          return defaultValue
-        }
-      } else if (Array.isArray(item)) {
-        return item
-      } else if (Object.keys(item).length) {
-        return item
-      } else {
-        return defaultValue
-      }
-    } catch (ex) {
-      //Error is already logged
-      return defaultValue
-    }
-  })
-
-  const setValue = (value: T) => {
-    setStoredValue(value)
-    setLocalStorageObject(key, value)
-  }
-
-  return [storedValue, setValue]
-}

package/src/hooks/useMediaQuery.ts

@@ -1,6 +0,0 @@
-/* eslint-disable import/no-deprecated */
-import { useMediaQuery } from '@mui/material'
-
-export { useMediaQuery }
-
-/* file exists to deal with false warning */

package/src/hooks/useMounted.tsx

@@ -1,15 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export const useMounted = () => {
-  const [mounted, setMounted] = useState(true)
-  useEffect(() => {
-    setMounted(true)
-    return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      setMounted(false)
-    }
-  }, [])
-  return () => {
-    return mounted
-  }
-}

package/src/hooks/useNavigateToEthAddress.ts

@@ -1,20 +0,0 @@
-import { EthAddress } from '@xylabs/sdk-js'
-import { NavigateOptions, To, useNavigate } from 'react-router-dom'
-
-export const useNavigateToEthAddress = () => {
-  const navigate = useNavigate()
-  const navigateToEthAddress = (address: EthAddress, event: React.MouseEvent, page?: string, to?: To, toOptions?: NavigateOptions, toEtherScan?: boolean) => {
-    const openInEtherScan = toEtherScan || (!to && !page)
-    if (openInEtherScan) {
-      window.open(`https://etherscan.io/address/${address.toString()}`, '_blank')
-    } else {
-      const path = to?.toString() ?? `/${page}/${address.toString()}`
-      if (event.metaKey || toEtherScan) {
-        window.open(path, '_blank')
-      } else {
-        navigate(to ?? path, toOptions)
-      }
-    }
-  }
-  return { navigateToEthAddress }
-}

package/src/hooks/useSpacing.tsx

@@ -1,6 +0,0 @@
-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/useTimeout.ts

@@ -1,19 +0,0 @@
-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
-}

package/src/hooks/useUserEvents.ts

@@ -1,12 +0,0 @@
-import { UserEventHandler } from '@xylabs/pixel'
-import { useContext } from 'react'
-
-import { UserEventsContext } from '../contexts'
-
-export const useUserEvents = <T>() => {
-  const { userEvents } = useContext(UserEventsContext)
-  if (!userEvents) {
-    console.error('useUserEvents must be called inside a UserEventsContext')
-  }
-  return userEvents as UserEventHandler<T>
-}

package/src/hooks/useWebP.tsx

@@ -1,31 +0,0 @@
-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>()
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
-      if (supportsWebP === undefined) {
-        supportsWebP = await getSupportsWebP()
-      }
-      if (mounted()) {
-        setImg(supportsWebP ? webp : alt)
-      }
-    },
-    [alt, webp]
-  )
-  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

@@ -1,26 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export interface Size {
-  height?: number
-  width?: number
-}
-
-export function useWindowSize(): Size {
-  const [windowSize, setWindowSize] = useState<Size>({
-    height: undefined,
-    width: undefined,
-  })
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize({
-        height: window.innerHeight,
-        width: window.innerWidth,
-      })
-    }
-    window.addEventListener('resize', handleResize)
-    handleResize()
-
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-  return windowSize
-}

package/src/lib/ComponentSizes.ts

@@ -1,3 +0,0 @@
-type ComponentSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-export type { ComponentSizes }