@xyo-network/react-wallet 2.23.7

package/src/components/WalletAccountSelect/Select.tsx

@@ -0,0 +1,47 @@
+import { MenuItem, SelectProps, useTheme } from '@mui/material'
+import { EthAddress } from '@xylabs/sdk-js'
+import { EthAccountBox, SelectEx } from '@xylabs/sdk-react'
+
+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, icons, iconOnly, ...props }) => {
+  const { wallet, activeAccountIndex = 0, setActiveAccountIndex } = useWallet()
+
+  const theme = useTheme()
+
+  return (
+    <SelectEx
+      SelectDisplayProps={{ style: { paddingBottom: 0, paddingLeft: icons ? 0 : theme.spacing(1), paddingTop: 0 } }}
+      renderValue={(selected) => {
+        const account = wallet?.getAccount(parseInt(`${selected}`))
+        return <EthAccountBox height={size === 'small' ? 40 : 56} iconOnly={iconOnly} icon={icons} address={EthAddress.fromString(account?.addressValue.hex)} />
+      }}
+      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,15 @@
+import { FlexBoxProps, FlexRow } from '@xylabs/sdk-react'
+
+import { WalletAccountSelect } from './Select'
+
+export interface WalletAccountSelectBarProps extends FlexBoxProps {
+  size?: 'small' | 'medium'
+}
+
+export const WalletAccountSelectBar: React.FC<WalletAccountSelectBarProps> = ({ size = 'small', ...props }) => {
+  return (
+    <FlexRow paper alignItems="stretch" {...props}>
+      <WalletAccountSelect size={size} fullWidth />
+    </FlexRow>
+  )
+}

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/sdk-react'
+import { XyoAccount } from '@xyo-network/core'
+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/core'
+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/sdk-react'
+import { XyoWalletBase } from '@xyo-network/core'
+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 { XyoWalletBase } from '@xyo-network/core'
+import { ContextExState } from '@xyo-network/react-shared'
+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'