@xyo-network/react-wallet 2.26.34 → 2.26.37

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/77726df/packages/wallet/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eeec410/packages/wallet/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -21,8 +21,8 @@
     "@xylabs/react-shared": "^2.14.10",
     "@xylabs/sdk-js": "^2.6.2",
     "@xyo-network/account": "^2.22.15",
-    "@xyo-network/react-network": "^2.26.34",
-    "@xyo-network/react-shared": "^2.26.34",
+    "@xyo-network/react-network": "^2.26.37",
+    "@xyo-network/react-shared": "^2.26.37",
     "@xyo-network/wallet": "^2.22.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -35,7 +35,7 @@
     "@babel/preset-env": "^7.18.9",
     "@storybook/react": "^6.5.9",
     "@xylabs/sdk-js": "^2.6.2",
-    "@xylabs/tsconfig-dom": "^2.5.2"
+    "@xylabs/tsconfig-dom": "^2.5.3"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -86,5 +86,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.34"
+  "version": "2.26.37"
 }

package/babel.config.json

@@ -1,5 +0,0 @@
-{
-    "presets": [
-        "@babel/preset-env"
-    ]
-}

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

@@ -1,31 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { WalletAccountDetails } from './WalletAccountDetails'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountDetails,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'wallet/WalletAccountDetails',
-} as ComponentMeta<typeof WalletAccountDetails>
-
-const Template: ComponentStory<typeof WalletAccountDetails> = (args) => {
-  return (
-    <BrowserRouter>
-      <WalletAccountDetails {...args}></WalletAccountDetails>
-    </BrowserRouter>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/WalletAccountDetails/WalletAccountDetails.tsx

@@ -1,31 +0,0 @@
-import { EthAccountButton } from '@xylabs/react-crypto'
-import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import { NumberStatus } from '@xylabs/react-number-status'
-import { EthAddress } from '@xylabs/sdk-js'
-import { XyoAccount } from '@xyo-network/account'
-import { useNetwork } from '@xyo-network/react-network'
-
-import { useAccount } from '../../contexts'
-
-export interface WalletAccountDetailsProps extends FlexBoxProps {
-  account?: XyoAccount
-  exploreUrl?: string
-}
-
-export const WalletAccountDetails: React.FC<WalletAccountDetailsProps> = ({ exploreUrl = 'https://explore.xyo.network', account: accountProp, ...props }) => {
-  const { account = accountProp } = useAccount()
-  const { network } = useNetwork()
-  const exploreAddressUrl = `${exploreUrl}/recent?account=${account?.addressValue.hex}&network=${network?.name ?? 'main'}`
-
-  return (
-    <FlexCol {...props}>
-      <EthAccountButton address={EthAddress.fromString(account?.addressValue.hex)} />
-      <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,35 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { XyoWalletBase } from '@xyo-network/wallet'
-import { BrowserRouter } from 'react-router-dom'
-
-import { WalletProvider } from '../../contexts'
-import { WalletAccountDetails } from './WalletAccountDetails'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountDetails,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'wallet/WalletAccountDetailsWithProvider',
-} as ComponentMeta<typeof WalletAccountDetails>
-
-const Template: ComponentStory<typeof WalletAccountDetails> = (args) => {
-  return (
-    <BrowserRouter>
-      <WalletProvider defaultWallet={new XyoWalletBase('test me')}>
-        <WalletAccountDetails {...args}></WalletAccountDetails>
-      </WalletProvider>
-    </BrowserRouter>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/WalletAccountDetails/index.ts

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

package/src/components/WalletAccountSelect/Select.tsx

@@ -1,56 +0,0 @@
-import { MenuItem, SelectProps } from '@mui/material'
-import { SelectEx } from '@xylabs/react-common'
-import { EthAccountBox } from '@xylabs/react-crypto'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { Identicon } from '@xylabs/react-identicon'
-import { EthAddress } from '@xylabs/sdk-js'
-
-import { useWallet } from '../../contexts'
-
-export interface WalletAccountSelectProps extends SelectProps<number> {
-  iconOnly?: boolean
-  icons?: boolean
-  iconSize?: number
-}
-
-const arrayRange = (length: number, start = 0) => {
-  return Array.from(Array(length).keys()).map((x) => x + start)
-}
-
-export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({ size, iconSize = 24, icons, iconOnly, ...props }) => {
-  const { wallet, activeAccountIndex = 0, setActiveAccountIndex } = useWallet()
-
-  return (
-    <SelectEx
-      renderValue={(selected) => {
-        const account = wallet?.getAccount(parseInt(`${selected}`))
-        return (
-          <FlexRow justifyContent="flex-start" gap={1}>
-            {icons ? (
-              <FlexRow>
-                <Identicon size={iconSize} value={account?.addressValue.hex} />
-              </FlexRow>
-            ) : null}
-            <EthAccountBox alignItems="stretch" iconOnly={iconOnly} address={EthAddress.fromString(account?.addressValue.hex)} />
-          </FlexRow>
-        )
-      }}
-      value={activeAccountIndex}
-      onChange={(event) => setActiveAccountIndex?.(parseInt(`${event.target.value}`))}
-      size={size}
-      variant="outlined"
-      {...props}
-    >
-      {wallet
-        ? arrayRange(10).map((index) => {
-            const account = wallet?.getAccount(index)
-            return (
-              <MenuItem key={index} value={index}>
-                <EthAccountBox iconSize={iconSize} icon={icons} address={EthAddress.fromString(account.addressValue.hex)} />
-              </MenuItem>
-            )
-          })
-        : null}
-    </SelectEx>
-  )
-}

package/src/components/WalletAccountSelect/SelectBar.tsx

@@ -1,21 +0,0 @@
-import { Paper } from '@mui/material'
-import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
-
-import { WalletAccountSelect } from './Select'
-
-export interface WalletAccountSelectBarProps extends FlexBoxProps {
-  size?: 'small' | 'medium'
-  iconOnly?: boolean
-  icons?: boolean
-  iconSize?: number
-}
-
-export const WalletAccountSelectBar: React.FC<WalletAccountSelectBarProps> = ({ iconOnly, icons, iconSize, size = 'small', ...props }) => {
-  return (
-    <FlexCol alignItems="stretch" {...props}>
-      <Paper variant="elevation" elevation={0}>
-        <WalletAccountSelect fullWidth iconSize={iconSize} iconOnly={iconOnly} icons={icons} size={size ?? 'small'} />
-      </Paper>
-    </FlexCol>
-  )
-}

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

@@ -1,40 +0,0 @@
-/* eslint-disable import/no-internal-modules */
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { XyoWalletBase } from '@xyo-network/wallet'
-
-import { WalletProvider } from '../../contexts'
-import { WalletAccountSelect } from './Select'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountSelect,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'wallet/WalletAccountSelect',
-} as ComponentMeta<typeof WalletAccountSelect>
-
-const Template: ComponentStory<typeof WalletAccountSelect> = (args) => {
-  return <WalletAccountSelect {...args}></WalletAccountSelect>
-}
-
-const WithWalletTemplate: ComponentStory<typeof WalletAccountSelect> = (args) => {
-  return (
-    <WalletProvider defaultWallet={new XyoWalletBase('test me')}>
-      <WalletAccountSelect {...args}></WalletAccountSelect>
-    </WalletProvider>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithWallet = WithWalletTemplate.bind({})
-WithWallet.args = {}
-
-export { Default, WithWallet }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

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

@@ -1,43 +0,0 @@
-/* eslint-disable import/no-internal-modules */
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { XyoWalletBase } from '@xyo-network/wallet'
-
-import { WalletProvider } from '../../contexts'
-import { WalletAccountSelectBar } from './SelectBar'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountSelectBar,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'wallet/WalletAccountSelectBar',
-} as ComponentMeta<typeof WalletAccountSelectBar>
-
-const Template: ComponentStory<typeof WalletAccountSelectBar> = (args) => {
-  return <WalletAccountSelectBar {...args}></WalletAccountSelectBar>
-}
-
-const WithWalletTemplate: ComponentStory<typeof WalletAccountSelectBar> = (args) => {
-  return (
-    <WalletProvider defaultWallet={new XyoWalletBase('test me')}>
-      <WalletAccountSelectBar {...args}></WalletAccountSelectBar>
-    </WalletProvider>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithWallet = WithWalletTemplate.bind({})
-WithWallet.args = {}
-
-const WithWalletIcon = WithWalletTemplate.bind({})
-WithWalletIcon.args = { icons: true }
-
-export { Default, WithWallet, WithWalletIcon }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

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

@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { XyoWalletBase } from '@xyo-network/wallet'
-
-import { WalletProvider } from '../../contexts'
-import { WalletAccountSelect } from './Select'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WalletAccountSelect,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'wallet/WalletAccountSelectWithProvider',
-} as ComponentMeta<typeof WalletAccountSelect>
-
-const Template: ComponentStory<typeof WalletAccountSelect> = (args) => {
-  return (
-    <WalletProvider defaultWallet={new XyoWalletBase('test me')}>
-      <WalletAccountSelect {...args}></WalletAccountSelect>
-    </WalletProvider>
-  )
-}
-
-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 }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/WalletAccountSelect/index.ts

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

package/src/components/index.ts

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

package/src/contexts/Account/Context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xyo-network/react-shared'
-
-import { AccountContextState } from './State'
-
-export const AccountContext = createContextEx<AccountContextState>()

package/src/contexts/Account/MemoryProvider.tsx

@@ -1,15 +0,0 @@
-import { WithChildren } from '@xylabs/react-shared'
-import { XyoAccount } from '@xyo-network/account'
-import { useState } from 'react'
-
-import { AccountContext } from './Context'
-
-export interface AccountMemoryProviderProps {
-  defaultAccount?: XyoAccount
-}
-
-export const AccountMemoryProvider: React.FC<WithChildren<AccountMemoryProviderProps>> = ({ defaultAccount, ...props }) => {
-  const [account, setAccount] = useState<XyoAccount | undefined>(defaultAccount)
-
-  return <AccountContext.Provider value={{ account: account, provided: true, setAccount }} {...props} />
-}

package/src/contexts/Account/State.ts

@@ -1,8 +0,0 @@
-import { XyoAccount } from '@xyo-network/account'
-import { ContextExState } from '@xyo-network/react-shared'
-import { Dispatch } from 'react'
-
-export interface AccountContextState extends ContextExState {
-  account?: XyoAccount
-  setAccount?: Dispatch<XyoAccount>
-}

package/src/contexts/Account/index.ts

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

package/src/contexts/Account/use.ts

@@ -1,7 +0,0 @@
-import { useContextEx } from '@xyo-network/react-shared'
-
-import { AccountContext } from './Context'
-
-export const useAccount = (required = false) => {
-  return useContextEx(AccountContext, 'Account', required)
-}

package/src/contexts/Wallet/Context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xyo-network/react-shared'
-
-import { WalletContextState } from './State'
-
-export const WalletContext = createContextEx<WalletContextState>()

package/src/contexts/Wallet/Provider.tsx

@@ -1,38 +0,0 @@
-import { WithChildren } from '@xylabs/react-shared'
-import { XyoWalletBase } from '@xyo-network/wallet'
-import { useState } from 'react'
-
-import { AccountContext } from '../Account'
-import { WalletContext } from './Context'
-import { useWallet } from './use'
-
-export interface WalletProviderProps {
-  defaultWallet?: XyoWalletBase
-  defaultActiveAccountIndex?: number
-}
-
-const AccountWalletProvider: React.FC<WithChildren> = (props) => {
-  const { wallet, activeAccountIndex = 0 } = useWallet()
-
-  return <AccountContext.Provider value={{ account: wallet?.getAccount(activeAccountIndex), provided: true }} {...props} />
-}
-
-export const WalletProvider: React.FC<WithChildren<WalletProviderProps>> = ({ defaultWallet, defaultActiveAccountIndex = 0, children, ...props }) => {
-  const [wallet, setWallet] = useState<XyoWalletBase | undefined>(defaultWallet)
-  const [activeAccountIndex, setActiveAccountIndex] = useState(defaultActiveAccountIndex)
-
-  return (
-    <WalletContext.Provider
-      value={{
-        activeAccountIndex,
-        provided: true,
-        setActiveAccountIndex,
-        setWallet,
-        wallet,
-      }}
-      {...props}
-    >
-      <AccountWalletProvider>{children}</AccountWalletProvider>
-    </WalletContext.Provider>
-  )
-}

package/src/contexts/Wallet/State.ts

@@ -1,10 +0,0 @@
-import { ContextExState } from '@xyo-network/react-shared'
-import { XyoWalletBase } from '@xyo-network/wallet'
-import { Dispatch } from 'react'
-
-export interface WalletContextState extends ContextExState {
-  wallet?: XyoWalletBase
-  setWallet?: Dispatch<XyoWalletBase>
-  activeAccountIndex?: number
-  setActiveAccountIndex?: Dispatch<number>
-}

package/src/contexts/Wallet/index.ts

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

package/src/contexts/Wallet/use.ts

@@ -1,7 +0,0 @@
-import { useContextEx } from '@xyo-network/react-shared'
-
-import { WalletContext } from './Context'
-
-export const useWallet = (required = false) => {
-  return useContextEx(WalletContext, 'Wallet', required)
-}

package/src/contexts/index.ts

@@ -1,2 +0,0 @@
-export * from './Account'
-export * from './Wallet'

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './components'
-export * from './contexts'