@xyo-network/react-wallet 2.26.37 → 2.26.40

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/eeec410/packages/wallet/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0cea94b/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.37",
-    "@xyo-network/react-shared": "^2.26.37",
+    "@xyo-network/react-network": "^2.26.40",
+    "@xyo-network/react-shared": "^2.26.40",
     "@xyo-network/wallet": "^2.22.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -86,5 +86,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.37"
+  "version": "2.26.40"
 }

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

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

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

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

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

package/src/components/WalletAccountSelect/Select.tsx

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

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

@@ -0,0 +1,40 @@
+/* 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

@@ -0,0 +1,43 @@
+/* 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

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

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

package/src/components/index.ts

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

package/src/contexts/Account/Context.ts

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

package/src/contexts/Account/MemoryProvider.tsx

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

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

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

package/src/contexts/Account/use.ts

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

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

package/src/contexts/Wallet/Provider.tsx

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

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

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

package/src/contexts/Wallet/use.ts

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

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

package/src/index.ts

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