@xyo-network/react-wallet 7.5.8 → 7.5.12

package/src/components/SeedPhrase/dialog/components/fields/validation-messages/index.ts

@@ -1,3 +0,0 @@
-export * from './colorParser.ts'
-export * from './InvalidPhrase.tsx'
-export * from './PhraseHeaderBox.tsx'

package/src/components/SeedPhrase/dialog/components/index.ts

@@ -1,3 +0,0 @@
-export * from './DialogActionButtons.tsx'
-export * from './fields/index.ts'
-export * from './OverwriteWarning.tsx'

package/src/components/SeedPhrase/dialog/index.ts

@@ -1,2 +0,0 @@
-export * from './components/index.ts'
-export * from './SeedPhraseDialog.tsx'

package/src/components/SeedPhrase/index.ts

@@ -1,4 +0,0 @@
-export * from './_shared/index.ts'
-export * from './DefaultSeedPhrase.tsx'
-export * from './dialog/index.ts'
-export * from './settings/index.ts'

package/src/components/SeedPhrase/settings/SeedPhraseTableRow.stories.tsx

@@ -1,31 +0,0 @@
-import { Table, TableBody } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { SeedPhraseTableRow } from './SeedPhraseTableRow.tsx'
-
-const changeSeedPhrase = (phrase?: string) => alert(`Changed Seed Phrase to: ${phrase}`)
-
-export default {
-  component: SeedPhraseTableRow,
-  title: 'Wallet/SeedPhraseTableRow',
-} as Meta
-
-const Template: StoryFn<typeof SeedPhraseTableRow> = props => (
-  <Table>
-    <TableBody>
-      <SeedPhraseTableRow {...props} />
-    </TableBody>
-  </Table>
-)
-
-const Default = Template.bind({})
-Default.args = { changeSeedPhrase }
-
-const WithSeedPhrase = Template.bind({})
-WithSeedPhrase.args = {
-  changeSeedPhrase,
-  seedPhrase: 'test me',
-}
-
-export { Default, WithSeedPhrase }

package/src/components/SeedPhrase/settings/SeedPhraseTableRow.tsx

@@ -1,48 +0,0 @@
-import { Cancel as CancelIcon, RadioButtonChecked as RadioButtonCheckedIcon } from '@mui/icons-material'
-import type { TableRowProps } from '@mui/material'
-import {
-  Button, ButtonGroup, TableCell, TableRow,
-} from '@mui/material'
-import React, { useState } from 'react'
-
-import { SeedPhraseIconButton } from '../_shared/index.ts'
-import { SeedPhraseDialog } from '../dialog/index.ts'
-
-/** @public */
-export interface SeedPhraseTableRowProps extends TableRowProps {
-  changeSeedPhrase?: (seedPhrase: string) => void
-  seedPhrase?: string
-}
-
-/** @public */
-export const SeedPhraseTableRow: React.FC<SeedPhraseTableRowProps> = ({
-  changeSeedPhrase, seedPhrase, ...props
-}) => {
-  const [open, setOpen] = useState(false)
-
-  const handleOpen = () => {
-    setOpen(true)
-  }
-  return (
-    <TableRow {...props}>
-      <TableCell>
-        Seed Phrase
-        {' '}
-        <SeedPhraseIconButton />
-      </TableCell>
-      <TableCell align="center">
-        {seedPhrase
-          ? <RadioButtonCheckedIcon color="success" />
-          : <CancelIcon color="error" />}
-      </TableCell>
-      <TableCell>
-        <SeedPhraseDialog changeSeedPhrase={changeSeedPhrase} open={open} onClose={() => setOpen(false)} seedPhrase={seedPhrase} />
-        <ButtonGroup fullWidth>
-          <Button variant="contained" size="small" onClick={handleOpen}>
-            Update
-          </Button>
-        </ButtonGroup>
-      </TableCell>
-    </TableRow>
-  )
-}

package/src/components/SeedPhrase/settings/index.ts

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

package/src/components/WalletAccountDetails/WalletAccountDetails.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { WalletAccountDetails } from './WalletAccountDetails.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountDetails,
-  parameters: { docs: { page: null } },
-  title: 'wallet/WalletAccountDetails',
-} as Meta<typeof WalletAccountDetails>
-
-const Template: StoryFn<typeof WalletAccountDetails> = (args) => {
-  return (
-    <BrowserRouter>
-      <WalletAccountDetails {...args}></WalletAccountDetails>
-    </BrowserRouter>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }
-
-export default StorybookEntry

package/src/components/WalletAccountDetails/WalletAccountDetails.tsx

@@ -1,37 +0,0 @@
-import { EthAddressWrapper } from '@xylabs/eth-address'
-import { EthAccountButton } from '@xylabs/react-crypto'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import { NumberStatus } from '@xylabs/react-number-status'
-import { useNetwork } from '@xyo-network/react-network'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-import React from 'react'
-
-import { useAccount } from '../../hooks/index.ts'
-
-/** @public */
-export interface WalletAccountDetailsProps extends FlexBoxProps {
-  account?: WalletInstance
-  exploreUrl?: string
-}
-
-/** @public */
-export const WalletAccountDetails: React.FC<WalletAccountDetailsProps> = ({
-  exploreUrl = 'https://explore.xyo.network', account, ...props
-}) => {
-  const [accountToUse] = useAccount({ account })
-  const { network } = useNetwork()
-  const exploreAddressUrl = `${exploreUrl}/recent?account=${accountToUse?.address}&network=${network?.name ?? 'main'}`
-
-  return (
-    <FlexCol {...props}>
-      <EthAccountButton address={EthAddressWrapper.fromString(accountToUse?.address)} />
-      <FlexRow gap={1}>
-        <NumberStatus rounded title="Tokens" value={0} to={`${exploreAddressUrl}&schema=network.xyo.account.tokens`} target="_blank" />
-        <NumberStatus rounded title="NFTs" value={0} to={`${exploreAddressUrl}&schema=network.xyo.account.nfts`} target="_blank" />
-        <NumberStatus rounded title="Signatures" value={0} to={`${exploreAddressUrl}&schema=network.xyo.account.signatures`} target="_blank" />
-        <NumberStatus rounded title="Signins" value={0} to={`${exploreAddressUrl}&schema=network.xyo.account.signins`} target="_blank" />
-      </FlexRow>
-    </FlexCol>
-  )
-}

package/src/components/WalletAccountDetails/WalletAccountDetailsWithProvider.stories.tsx

@@ -1,33 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { WalletProvider } from '../../contexts/index.ts'
-import { useWallet } from '../../hooks/index.ts'
-import { WalletAccountDetails } from './WalletAccountDetails.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountDetails,
-  parameters: { docs: { page: null } },
-  title: 'wallet/WalletAccountDetailsWithProvider',
-} as Meta<typeof WalletAccountDetails>
-
-const Template: StoryFn<typeof WalletAccountDetails> = (args) => {
-  const [wallet] = useWallet({ mnemonic: DefaultSeedPhrase })
-  return (
-    <BrowserRouter>
-      <WalletProvider rootWallet={wallet}>
-        <WalletAccountDetails {...args}></WalletAccountDetails>
-      </WalletProvider>
-    </BrowserRouter>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }
-
-export default StorybookEntry

package/src/components/WalletAccountDetails/index.ts

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

package/src/components/WalletAccountSelect/RenderedMenuItem.tsx

@@ -1,52 +0,0 @@
-import { MenuItem, type MenuItemProps } from '@mui/material'
-import { AddressRenderRowBox } from '@xyo-network/react-address-render'
-import type { WalletInstance } from '@xyo-network/wallet-model'
-import React from 'react'
-
-import { useWallet } from '../../hooks/index.ts'
-
-/** @public */
-export interface RenderedAccountMenuItemProps extends MenuItemProps {
-  addressNames?: Record<string, string | undefined>
-  iconOnly?: boolean
-  iconSize?: number
-  icons?: boolean
-  rootWallet: WalletInstance
-  selectedAccountIndex?: number
-  showFavorite?: boolean
-}
-
-/** @public */
-export const RenderedAccountMenuItem: React.FC<RenderedAccountMenuItemProps> = ({
-  selectedAccountIndex,
-  rootWallet,
-  addressNames,
-  iconOnly,
-  iconSize,
-  icons,
-  showFavorite,
-}) => {
-  const [selectedAccount] = useWallet({ path: selectedAccountIndex?.toString(), wallet: rootWallet })
-  const customName = selectedAccount ? addressNames?.[selectedAccount.address] : undefined
-  const favorite = !!selectedAccount && selectedAccount.address in (addressNames ?? {})
-  return (
-    <MenuItem
-      value={selectedAccountIndex}
-      sx={{
-        minHeight: 0, paddingBottom: 0, paddingTop: 0,
-      }}
-    >
-      <AddressRenderRowBox
-        disableSharedRef={true}
-        flexGrow={1}
-        address={selectedAccount?.address}
-        iconOnly={iconOnly}
-        iconSize={iconSize}
-        icons={icons}
-        name={customName}
-        favorite={favorite}
-        showFavorite={showFavorite}
-      />
-    </MenuItem>
-  )
-}

package/src/components/WalletAccountSelect/Select.tsx

@@ -1,84 +0,0 @@
-import type { SelectProps } from '@mui/material'
-import { CircularProgress } from '@mui/material'
-import { SelectEx } from '@xylabs/react-select'
-import type { AddressRenderRowBoxProps } from '@xyo-network/react-address-render'
-import React from 'react'
-
-import { useWalletContext } from '../../contexts/index.ts'
-import { RenderedAccountMenuItem } from './RenderedMenuItem.tsx'
-
-type SharedAddressRenderRowBoxProps = Pick<AddressRenderRowBoxProps, 'iconOnly' | 'iconSize' | 'icons' | 'showFavorite'>
-
-/** @public */
-export type WalletAccountSelectProps = SharedAddressRenderRowBoxProps
-  & Omit<SelectProps<number>, 'variant'>
-  & Partial<SelectProps<number>> & {
-    addressNames?: Record<string, string | undefined>
-    maxAccounts?: number
-  }
-
-const arrayRange = (length: number, start = 0) => {
-  return [...Array.from({ length }).keys()].map(x => x + start)
-}
-
-/** @public */
-export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({
-  addressNames,
-  iconOnly,
-  iconSize = 24,
-  icons,
-  maxAccounts = 1,
-  showFavorite = false,
-  size,
-  variant = 'outlined',
-  ...props
-}) => {
-  const {
-    activeAccountIndex, setActiveAccountIndex, rootWallet,
-  } = useWalletContext()
-  const disabled = !rootWallet || activeAccountIndex === undefined
-
-  return (
-    <>
-      {rootWallet
-        ? (
-            <SelectEx
-              margin="dense"
-              disabled={disabled}
-              renderValue={(selectedAccountIndex) => {
-                return (
-                  <RenderedAccountMenuItem
-                    addressNames={addressNames}
-                    iconOnly={iconOnly}
-                    iconSize={iconSize}
-                    icons={icons}
-                    rootWallet={rootWallet}
-                    selectedAccountIndex={selectedAccountIndex}
-                    showFavorite={showFavorite}
-                  />
-                )
-              }}
-              value={activeAccountIndex === undefined ? '' : activeAccountIndex}
-              onChange={event => setActiveAccountIndex?.(Number.parseInt(`${event.target.value}`))}
-              size={size}
-              variant={variant}
-              {...props}
-            >
-              {rootWallet && arrayRange(maxAccounts).map(index => (
-                <RenderedAccountMenuItem
-                  key={index}
-                  addressNames={addressNames}
-                  iconOnly={iconOnly}
-                  iconSize={iconSize}
-                  icons={icons}
-                  rootWallet={rootWallet}
-                  selectedAccountIndex={index}
-                  showFavorite={showFavorite}
-                />
-              ))}
-            </SelectEx>
-          )
-        : <CircularProgress size={24} />}
-    </>
-  )
-}

package/src/components/WalletAccountSelect/SelectBar.tsx

@@ -1,44 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import { WalletAccountSelect } from './Select.tsx'
-
-/** @public */
-export interface WalletAccountSelectBarProps extends FlexBoxProps {
-  addressNames?: Record<string, string | undefined>
-  iconOnly?: boolean
-  iconSize?: number
-  icons?: boolean
-  maxAccounts?: number
-  showFavorite?: boolean
-  size?: 'small' | 'medium'
-}
-
-/** @public */
-export const WalletAccountSelectBar: React.FC<WalletAccountSelectBarProps> = ({
-  addressNames,
-  iconOnly,
-  iconSize,
-  icons,
-  maxAccounts = 1,
-  showFavorite = false,
-  size = 'small',
-  ...props
-}) => {
-  return (
-    <FlexCol alignItems="stretch" {...props}>
-      <WalletAccountSelect
-        addressNames={addressNames}
-        fullWidth
-        showFavorite={showFavorite}
-        iconSize={iconSize}
-        iconOnly={iconOnly}
-        icons={icons}
-        maxAccounts={maxAccounts}
-        size={size ?? 'small'}
-        variant="outlined"
-      />
-    </FlexCol>
-  )
-}

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

@@ -1,45 +0,0 @@
-import { Stack } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { WalletAccountSelect } from './Select.tsx'
-import { WalletProviderDecorator } from './stories/index.ts'
-import {
-  AccountInfo, RootWalletInfo, SelectedWalletInfo, WalletInfo,
-} from './WalletInfo.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountSelect,
-  decorators: [WalletProviderDecorator],
-  parameters: { docs: { page: null } },
-  title: 'wallet/WalletAccountSelect',
-} as Meta<typeof WalletAccountSelect>
-
-const Template: StoryFn<typeof WalletAccountSelect> = (args) => {
-  return <WalletAccountSelect {...args} />
-}
-
-const WithWalletTemplate: StoryFn<typeof WalletAccountSelect> = (args) => {
-  return (
-    <>
-      <WalletAccountSelect {...args} />
-      <Stack direction="row" position="absolute" right={0} top={0} bgcolor="black" height={16}>
-        <RootWalletInfo />
-        <SelectedWalletInfo />
-        <WalletInfo />
-        <AccountInfo />
-      </Stack>
-    </>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithWallet = WithWalletTemplate.bind({})
-WithWallet.args = {}
-
-export { Default, WithWallet }
-
-export default StorybookEntry

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

@@ -1,61 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { useWallets } from '../../hooks/index.ts'
-import { WalletAccountSelectBar } from './SelectBar.tsx'
-import { WalletProviderDecorator } from './stories/index.ts'
-
-const PATHS = { paths: ['0', '3', '5'] }
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountSelectBar,
-  decorators: [WalletProviderDecorator],
-  parameters: { docs: { page: null } },
-  title: 'wallet/WalletAccountSelectBar',
-} as Meta<typeof WalletAccountSelectBar>
-
-const Template: StoryFn<typeof WalletAccountSelectBar> = (args) => {
-  return <WalletAccountSelectBar {...args}></WalletAccountSelectBar>
-}
-
-const WithFavoritesTemplate: StoryFn<typeof WalletAccountSelectBar> = (args) => {
-  const [wallets] = useWallets(PATHS)
-  return (
-    <WalletAccountSelectBar
-      addressNames={
-        wallets
-          ? {
-              [wallets[0]?.address]: 'first address',
-              [wallets[1]?.address]: undefined,
-              [wallets[2]?.address]: 'sixth address',
-            }
-          : {}
-      }
-      icons={true}
-      maxAccounts={10}
-      showFavorite
-      {...args}
-    />
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithWallet = Template.bind({})
-WithWallet.args = {}
-
-const WithWalletIcon = Template.bind({})
-WithWalletIcon.args = { icons: true }
-
-const WithAdditionalAccounts = Template.bind({})
-WithAdditionalAccounts.args = { icons: true, maxAccounts: 10 }
-
-const WithAccountFavorites = WithFavoritesTemplate.bind({})
-
-export {
-  Default, WithAccountFavorites, WithAdditionalAccounts, WithWallet, WithWalletIcon,
-}
-
-export default StorybookEntry

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

@@ -1,43 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { WalletAccountSelect } from './Select.tsx'
-import { WalletProviderDecorator } from './stories/index.ts'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountSelect,
-  decorators: [WalletProviderDecorator],
-  parameters: { docs: { page: null } },
-  title: 'wallet/WalletAccountSelectWithProvider',
-} as Meta<typeof WalletAccountSelect>
-
-const Template: StoryFn<typeof WalletAccountSelect> = (args) => {
-  return <WalletAccountSelect {...args}></WalletAccountSelect>
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const DefaultIcons = Template.bind({})
-DefaultIcons.args = { icons: true }
-
-const DefaultSmall = Template.bind({})
-DefaultSmall.args = { size: 'small' }
-
-const DefaultSmallIcon = Template.bind({})
-DefaultSmallIcon.args = { icons: true, size: 'small' }
-
-const IconsOnly = Template.bind({})
-IconsOnly.args = { iconOnly: true, icons: true }
-
-const IconsOnlySmall = Template.bind({})
-IconsOnlySmall.args = {
-  iconOnly: true, icons: true, size: 'small',
-}
-
-export {
-  Default, DefaultIcons, DefaultSmall, DefaultSmallIcon, IconsOnly, IconsOnlySmall,
-}
-
-export default StorybookEntry

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'