@xyo-network/react-wallet 7.5.8 → 7.5.11

package/src/components/WalletAccountSelect/WalletInfo.tsx

@@ -1,121 +0,0 @@
-import { Circle as LoadingIcon, ErrorOutlined as ErrorIcon } from '@mui/icons-material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { Identicon } from '@xylabs/react-identicon'
-import { QuickTipButton } from '@xylabs/react-quick-tip-button'
-import type { AccountInstance } from '@xyo-network/account-model'
-import React from 'react'
-
-import { useRootWallet, useSelectedWalletAccount } from '../../contexts/index.ts'
-import { useAccount, useWallet } from '../../hooks/index.ts'
-
-/** @public */
-export interface WalletErrorProps {
-  error?: Error
-}
-
-/** @public */
-export const WalletError: React.FC<WalletErrorProps> = ({ error }) => {
-  return error
-    ? (
-        <div>
-          <ErrorIcon
-            style={{ fontSize: '12px', position: 'absolute' }}
-            color="error"
-          />
-          <QuickTipButton
-            size="small"
-            style={{
-              color: '#ffffff00', fontSize: '12px', padding: 0, position: 'absolute',
-            }}
-            hoverText={error.message}
-            disableDialog
-          />
-        </div>
-      )
-    : null
-}
-
-/** @public */
-export interface WalletIdenticonProps {
-  account?: AccountInstance | null
-  name: string
-}
-
-/** @public */
-export const WalletIdenticon: React.FC<WalletIdenticonProps> = ({ account, name }) => {
-  return (
-    <div style={{ width: 20 }}>
-      {account
-        ? (
-            <Identicon
-              size={8}
-              value={account.address}
-              style={{
-                position: 'absolute', right: 2, top: 2,
-              }}
-            />
-          )
-        : (
-            <LoadingIcon
-              style={{
-                fontSize: '10px', padding: 0, position: 'absolute', right: 2, top: 2,
-              }}
-              color="disabled"
-            />
-          )}
-      <QuickTipButton
-        size="small"
-        style={{
-          color: '#ffffff00', fontSize: '12px', padding: 0, position: 'absolute',
-        }}
-        hoverText={`${name ?? ''}: ${account?.address ?? 'no address'}`}
-        disableDialog
-      />
-    </div>
-  )
-}
-
-/** @public */
-export const RootWalletInfo: React.FC<FlexBoxProps> = (props) => {
-  const [wallet, error] = useRootWallet()
-  return (
-    <FlexCol width={12} {...props}>
-      {error ? null : <WalletIdenticon name="Root" account={wallet} />}
-      <WalletError error={error} />
-    </FlexCol>
-  )
-}
-
-/** @public */
-export const SelectedWalletInfo: React.FC<FlexBoxProps> = (props) => {
-  const [wallet, error] = useSelectedWalletAccount()
-  return (
-    <FlexCol width={12} {...props}>
-      {error ? null : <WalletIdenticon name="Selected" account={wallet} />}
-      <WalletError error={error} />
-    </FlexCol>
-  )
-}
-
-/** @public */
-export const WalletInfo: React.FC<FlexBoxProps> = (props) => {
-  const [wallet, error] = useWallet()
-  return (
-    <FlexCol width={12} {...props}>
-      {error ? null : <WalletIdenticon name="Wallet" account={wallet} />}
-      <WalletError error={error} />
-    </FlexCol>
-  )
-}
-
-/** @public */
-export const AccountInfo: React.FC<FlexBoxProps> = (props) => {
-  const [account, error] = useAccount()
-  return (
-    <FlexCol width={12} {...props}>
-      {error ? null : <WalletIdenticon name="Account" account={account} />}
-      <WalletError error={error} />
-    </FlexCol>
-  )
-}

package/src/components/WalletAccountSelect/index.ts

@@ -1,2 +0,0 @@
-export * from './Select.tsx'
-export * from './SelectBar.tsx'

package/src/components/WalletAccountSelect/stories/WalletProviderDecorator.tsx

@@ -1,31 +0,0 @@
-import type { Decorator } from '@storybook/react-vite'
-import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-import React, { useEffect, useState } from 'react'
-
-import { WalletProvider } from '../../../contexts/index.ts'
-import { useWallet } from '../../../hooks/index.ts'
-
-export const WalletProviderDecorator: Decorator = (Story, context) => {
-  const [rootWallet] = useWallet({ mnemonic: DefaultSeedPhrase })
-  const [wallet, setWallet] = useState<WalletInstance>()
-
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout>
-    if (rootWallet) {
-      timeout = setTimeout(() => {
-        setWallet(rootWallet)
-      }, 1000)
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout)
-      }
-    }
-  }, [rootWallet])
-  return (
-    <WalletProvider rootWallet={wallet}>
-      <Story {...context} />
-    </WalletProvider>
-  )
-}

package/src/components/WalletAccountSelect/stories/index.ts

@@ -1 +0,0 @@
-export * from './WalletProviderDecorator.tsx'

package/src/components/index.ts

@@ -1,4 +0,0 @@
-export * from './MaxAccounts/index.ts'
-export * from './SeedPhrase/index.ts'
-export * from './WalletAccountDetails/index.ts'
-export * from './WalletAccountSelect/index.ts'

package/src/contexts/SeedPhrase/Context.ts

@@ -1,6 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { SeedPhraseContextState } from './State.ts'
-
-/** @public */
-export const SeedPhraseContext = createContextEx<SeedPhraseContextState>()

package/src/contexts/SeedPhrase/Provider.tsx

@@ -1,103 +0,0 @@
-import { generateMnemonic, validateMnemonic } from '@scure/bip39'
-import { wordlist } from '@scure/bip39/wordlists/english.js'
-import { useResetState } from '@xylabs/react-hooks'
-import type { PropsWithChildren } from 'react'
-import React, {
-  useCallback, useEffect, useMemo, useState,
-} from 'react'
-
-import { SeedPhraseContext } from './Context.ts'
-import type { SeedPhraseContextState } from './State.ts'
-
-/** @public */
-export interface SeedPhraseProviderProps extends PropsWithChildren {
-  defaultPhrase?: string
-  handleChangeSeedPhrase?: (phrase: string) => void
-  open?: boolean
-  saveCallback?: () => void
-  seedPhrase?: string
-}
-
-const validate = (passedPhrase?: string) => {
-  if (!passedPhrase) {
-    return null
-  }
-  return validateMnemonic(passedPhrase, wordlist)
-}
-
-/** @public */
-export const SeedPhraseProvider: React.FC<SeedPhraseProviderProps> = ({
-  children,
-  defaultPhrase,
-  handleChangeSeedPhrase,
-  saveCallback,
-  seedPhrase,
-  open,
-}) => {
-  const [phrase, setPhrase] = useResetState<string | undefined>(defaultPhrase)
-  const [overwriteWarning, setOverwriteWarning] = useState(false)
-
-  useEffect(() => {
-    if (seedPhrase || open) {
-      setPhrase?.(seedPhrase ?? '')
-    }
-  }, [seedPhrase, open, setPhrase])
-
-  const handleGenerate = useCallback(() => {
-    const mnemonic = generateMnemonic(wordlist, 256)
-    setPhrase?.(mnemonic)
-    setOverwriteWarning?.(false)
-  }, [setPhrase])
-
-  const handleCancelOverwrite = useCallback(() => {
-    setOverwriteWarning(false)
-  }, [setOverwriteWarning])
-
-  const handleClear = useCallback(() => {
-    setPhrase('')
-    setOverwriteWarning(false)
-  }, [setPhrase, setOverwriteWarning])
-
-  const handleSave = useCallback(() => {
-    if (!overwriteWarning && seedPhrase && seedPhrase !== phrase) {
-      setOverwriteWarning?.(true)
-    } else {
-      handleChangeSeedPhrase?.(phrase ?? '')
-      saveCallback?.()
-    }
-  }, [handleChangeSeedPhrase, overwriteWarning, phrase, saveCallback, seedPhrase])
-
-  useEffect(() => {
-    if (!open) {
-      handleCancelOverwrite()
-    }
-  }, [handleCancelOverwrite, open])
-
-  const validSeedPhrase = useMemo(() => validate?.(seedPhrase), [seedPhrase])
-  const validPhrase = useMemo(() => validate?.(phrase), [phrase])
-
-  const value: SeedPhraseContextState = useMemo(() => ({
-    handleCancelOverwrite,
-    handleChangeSeedPhrase,
-    handleClear,
-    handleGenerate,
-    handleSave,
-    overwriteWarning,
-    phrase,
-    provided: true,
-    seedPhrase,
-    setOverwriteWarning,
-    setPhrase,
-    validPhrase,
-    validSeedPhrase,
-    validate,
-  }), [handleCancelOverwrite, handleChangeSeedPhrase, handleClear, handleGenerate, handleSave, overwriteWarning, phrase, seedPhrase, setOverwriteWarning, setPhrase, validPhrase, validSeedPhrase])
-
-  return (
-    <SeedPhraseContext
-      value={value}
-    >
-      {children}
-    </SeedPhraseContext>
-  )
-}

package/src/contexts/SeedPhrase/State.ts

@@ -1,19 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-import type { Dispatch, SetStateAction } from 'react'
-
-/** @public */
-export type SeedPhraseContextState = ContextExState<{
-  handleCancelOverwrite?: () => void
-  handleChangeSeedPhrase?: (value: string) => void
-  handleClear?: () => void
-  handleGenerate?: () => void
-  handleSave?: () => void
-  overwriteWarning?: boolean
-  phrase?: string
-  seedPhrase?: string
-  setOverwriteWarning?: Dispatch<SetStateAction<boolean>>
-  setPhrase?: Dispatch<SetStateAction<string | undefined>>
-  validPhrase?: boolean | null
-  validSeedPhrase?: boolean | null
-  validate?: (passedPhrase?: string) => boolean | null
-}>

package/src/contexts/SeedPhrase/index.ts

@@ -1,4 +0,0 @@
-export * from './Context.ts'
-export * from './Provider.tsx'
-export * from './State.ts'
-export * from './use.ts'

package/src/contexts/SeedPhrase/use.ts

@@ -1,6 +0,0 @@
-import { useContextEx } from '@xylabs/react-shared'
-
-import { SeedPhraseContext } from './Context.ts'
-
-/** @public */
-export const useSeedPhrase = () => useContextEx(SeedPhraseContext, 'SeedPhrase', true)

package/src/contexts/Wallet/Context.ts

@@ -1,6 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { WalletContextState } from './State.ts'
-
-/** @public */
-export const WalletContext = createContextEx<WalletContextState>()

package/src/contexts/Wallet/Provider.tsx

@@ -1,46 +0,0 @@
-import { useResetState } from '@xylabs/react-hooks'
-import { usePromise } from '@xylabs/react-promise'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-import type { PropsWithChildren } from 'react'
-import React, { useMemo } from 'react'
-
-import { WalletContext } from './Context.ts'
-import type { WalletContextState } from './State.ts'
-
-/** @public */
-export interface WalletProviderProps {
-  defaultActiveAccountIndex?: number
-  rootWallet?: WalletInstance | null
-}
-
-/** @public */
-export const WalletProvider: React.FC<PropsWithChildren<WalletProviderProps>> = ({
-  children,
-  defaultActiveAccountIndex = 0,
-  rootWallet = null,
-  ...props
-}) => {
-  const [activeAccountIndex, setActiveAccountIndex] = useResetState(defaultActiveAccountIndex)
-
-  const [activeAccount = null] = usePromise(async () => await rootWallet?.derivePath(activeAccountIndex.toString()), [activeAccountIndex, rootWallet])
-
-  const value: WalletContextState = useMemo(() => ({
-    activeAccount,
-    activeAccountIndex,
-    provided: true,
-    rootWallet,
-    setActiveAccountIndex,
-  }), [activeAccount,
-    activeAccountIndex,
-    rootWallet,
-    setActiveAccountIndex])
-
-  return (
-    <WalletContext
-      value={value}
-      {...props}
-    >
-      {children}
-    </WalletContext>
-  )
-}

package/src/contexts/Wallet/State.ts

@@ -1,15 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-import type { Dispatch } from 'react'
-
-/** @public */
-export type WalletContextState = ContextExState<{
-  /** Currently selected account */
-  activeAccount?: WalletInstance | null
-  /** Currently selected index */
-  activeAccountIndex?: number
-  /** The root wallet being used */
-  rootWallet?: WalletInstance | null
-  /** Set currently selected index */
-  setActiveAccountIndex?: Dispatch<number>
-}>

package/src/contexts/Wallet/index.ts

@@ -1,4 +0,0 @@
-export * from './Context.ts'
-export * from './Provider.tsx'
-export * from './State.ts'
-export * from './use.ts'

package/src/contexts/Wallet/use.ts

@@ -1,37 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import { useContextEx, useProvided } from '@xylabs/react-shared'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-
-import { WalletContext } from './Context.ts'
-
-/** @public */
-export const useWalletContext = (required = true) => {
-  return useContextEx(WalletContext, 'Wallet', required)
-}
-
-/** @public */
-export const useWalletProvided = () => {
-  return useProvided(WalletContext)
-}
-
-/** @public */
-export const useRootWallet = (required = true): [WalletInstance | null | undefined, Error | undefined] => {
-  const { rootWallet } = useWalletContext(required)
-  return [rootWallet, undefined]
-}
-
-/** @public */
-export const useIndexedWalletFromContext = (index: number, required = true): [WalletInstance | null | undefined, Error | undefined] => {
-  const { rootWallet } = useWalletContext(required)
-  const [wallet] = usePromise(async () => (await rootWallet?.derivePath(index.toString())) ?? rootWallet, [rootWallet, index])
-  return [wallet, undefined]
-}
-
-/** @public */
-export const useSelectedWalletAccount = (required = true): [WalletInstance | null | undefined, Error | undefined] => {
-  const { activeAccountIndex } = useWalletContext(required)
-  // we pass in 0 as default since we can not call the hook optionally,
-  // we resolve this false result by checking whether activeAccountIndex is defined before returning it
-  const [account] = useIndexedWalletFromContext(activeAccountIndex ?? 0, required)
-  return activeAccountIndex === undefined && account === null ? [null, undefined] : [account, undefined]
-}

package/src/contexts/index.ts

@@ -1,2 +0,0 @@
-export * from './SeedPhrase/index.ts'
-export * from './Wallet/index.ts'

package/src/hooks/index.ts

@@ -1,4 +0,0 @@
-export * from './useAccount.ts'
-export * from './useWallet.ts'
-export * from './useWallets.ts'
-export * from './useWrapperAccount.ts'

package/src/hooks/useAccount.ts

@@ -1,68 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import type { AccountInstance } from '@xyo-network/account-model'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-import { useState } from 'react'
-
-import {
-  useRootWallet, useWalletContext, useWalletProvided,
-} from '../contexts/index.ts'
-
-/** @public */
-export interface AccountHookParams {
-  account?: AccountInstance
-  index?: number
-  required?: boolean
-  wallet?: WalletInstance
-}
-
-/** @public */
-export const useAccount = ({
-  wallet, account, index, required = false,
-}: AccountHookParams = {}): [
-  AccountInstance | null | undefined,
-  Error | undefined,
-] => {
-  const walletContextProvided = useWalletProvided()
-  const [validationError, setValidationError] = useState<Error>()
-  if (wallet && account && !validationError) {
-    setValidationError(new Error('useAccount can not have both a wallet and an account in the parameters'))
-  }
-
-  if (index && account && !validationError) {
-    setValidationError(new Error('useAccount can not have both a index and an account in the parameters'))
-  }
-
-  const [error, setError] = useState<Error>()
-  const [rootWallet] = useRootWallet(!wallet && required)
-  const { activeAccountIndex } = useWalletContext(false)
-  const [activeAccount] = usePromise(async () => {
-    try {
-      if (!validationError) {
-        if (wallet) {
-          const path = `${index ?? 0}'\0`
-          return await wallet?.derivePath?.(path)
-        } else if (rootWallet) {
-          const path = `${index ?? activeAccountIndex ?? 0}'\/0`
-          return await rootWallet?.derivePath?.(path)
-        }
-      }
-    } catch (ex) {
-      const error = ex as Error
-      console.error(error.message)
-      setError(error)
-    }
-  }, [index, wallet, rootWallet, activeAccountIndex, validationError])
-  if (validationError && !error) {
-    console.error(validationError.message)
-    setError(validationError)
-  }
-
-  return [
-    error
-      ? undefined
-      : (account ?? activeAccount ?? walletContextProvided)
-          ? null
-          : undefined,
-    error,
-  ]
-}

package/src/hooks/useWallet.ts

@@ -1,46 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import { HDWallet } from '@xyo-network/wallet'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-import { useState } from 'react'
-
-import { useSelectedWalletAccount, useWalletContext } from '../contexts/index.ts'
-
-/** @public */
-export interface WalletHookParams {
-  mnemonic?: string
-  path?: string
-  required?: boolean
-  seed?: ArrayBufferLike | string
-  wallet?: WalletInstance | null
-}
-
-/** @public */
-export const useWallet = ({
-  mnemonic, wallet, path, required = false, seed,
-}: WalletHookParams = {}): [
-  WalletInstance | null | undefined,
-  Error | undefined,
-] => {
-  const walletContextProvided = useWalletContext(false)
-  const [error, setError] = useState<Error>()
-  const [contextAccount] = useSelectedWalletAccount(!wallet && required)
-  const [activeAccount] = usePromise(async () => {
-    try {
-      const newAccount = await (() => {
-        if (wallet) {
-          return wallet
-        } else if (mnemonic) {
-          return HDWallet.fromPhrase(mnemonic)
-        } else if (seed) {
-          return HDWallet.fromSeed(seed)
-        }
-        return contextAccount
-      })()
-
-      return path ? newAccount?.derivePath?.(path) : (newAccount ?? wallet)
-    } catch (ex) {
-      setError(ex as Error)
-    }
-  }, [mnemonic, contextAccount, seed, path, wallet])
-  return [activeAccount ?? (walletContextProvided ? null : activeAccount), error]
-}

package/src/hooks/useWallets.ts

@@ -1,22 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-
-import { useWalletContext } from '../contexts/index.ts'
-import { useWallet } from './useWallet.ts'
-
-/** @public */
-export interface WalletsHookParams {
-  paths: string[]
-  wallet?: WalletInstance | null
-}
-
-/** @public */
-export const useWallets = ({ wallet, paths }: WalletsHookParams): [WalletInstance[] | null | undefined, Error | undefined] => {
-  const walletContextProvided = useWalletContext(false)
-  const [foundWallet] = useWallet({ wallet })
-  const [wallets, error] = usePromise(
-    async () => (foundWallet ? await Promise.all(paths.map(path => foundWallet.derivePath(path))) : undefined),
-    [foundWallet, paths],
-  )
-  return [wallets ?? (walletContextProvided ? null : wallets), error]
-}

package/src/hooks/useWrapperAccount.ts

@@ -1,36 +0,0 @@
-import type { UsePromiseState } from '@xylabs/react-promise'
-import { usePromise } from '@xylabs/react-promise'
-import type { AccountInstance } from '@xyo-network/account-model'
-import { HDWallet } from '@xyo-network/wallet'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-import { Mutex } from 'async-mutex'
-
-let globalWrapperWallet: WalletInstance | undefined
-const globalWrapperWalletMutex = new Mutex()
-
-/** @public */
-export const useWrapperAccount = (
-  account?: AccountInstance | null,
-): [AccountInstance | null | undefined, Error | undefined, UsePromiseState | undefined] => {
-  return usePromise(async () => {
-    return await globalWrapperWalletMutex.runExclusive(async () => {
-      // if we are expecting to receive a wallet or did receive on, return the override account
-      if (account !== undefined) {
-        return account
-      }
-
-      if (globalWrapperWallet) {
-        return globalWrapperWallet
-      }
-
-      try {
-        globalWrapperWallet = await HDWallet.random()
-        console.log(`Global Wrapper Wallet Creation Success: ${globalWrapperWallet.address}`)
-      } catch (ex) {
-        const error = ex as Error
-        console.error(`Global Wrapper Wallet Creation Failed: ${error.message}`)
-      }
-      return globalWrapperWallet
-    })
-  }, [account])
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from './components/index.ts'
-export * from './contexts/index.ts'
-export * from './hooks/index.ts'