@xyo-network/react-wallet 2.54.1 → 2.55.0

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

@@ -1,12 +1,13 @@
 import { Meta, StoryFn } from '@storybook/react'
 import { HDWallet } from '@xyo-network/account'
+import { usePromise } from '@xyo-network/react-shared'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
+import { WalletInstance } from '@xyo-network/wallet-model'
 
-import { WalletProvider, WalletRootPath } from '../../contexts'
+import { WalletProvider } from '../../contexts'
+import { useAccounts } from '../../hooks'
 import { WalletAccountSelectBar } from './SelectBar'
 
-const defaultWallet = HDWallet.fromMnemonic(DefaultSeedPhrase)
-
 const StorybookEntry = {
   argTypes: {},
   component: WalletAccountSelectBar,
@@ -23,6 +24,7 @@ const Template: StoryFn<typeof WalletAccountSelectBar> = (args) => {
 }
 
 const WithWalletTemplate: StoryFn<typeof WalletAccountSelectBar> = (args) => {
+  const [defaultWallet] = usePromise(() => HDWallet.fromMnemonic(DefaultSeedPhrase))
   return (
     <WalletProvider defaultWallet={defaultWallet}>
       <WalletAccountSelectBar {...args} />
@@ -30,6 +32,31 @@ const WithWalletTemplate: StoryFn<typeof WalletAccountSelectBar> = (args) => {
   )
 }
 
+const WithFavoritesTemplate: StoryFn<typeof WalletAccountSelectBar> = (args) => {
+  const [defaultWallet] = usePromise(() => HDWallet.fromMnemonic(DefaultSeedPhrase))
+  const [wallets] = useAccounts({ account: defaultWallet, paths: ['0', '3', '5'] })
+  const castWallets = wallets as WalletInstance[]
+  return (
+    <WalletProvider defaultWallet={defaultWallet}>
+      <WalletAccountSelectBar
+        addressNames={
+          wallets
+            ? {
+                [castWallets[0]?.address]: 'first address',
+                [castWallets[1]?.address]: undefined,
+                [castWallets[2]?.address]: 'sixth address',
+              }
+            : {}
+        }
+        icons={true}
+        maxAccounts={10}
+        showFavorite
+        {...args}
+      />
+    </WalletProvider>
+  )
+}
+
 const Default = Template.bind({})
 Default.args = {}
 
@@ -42,18 +69,7 @@ WithWalletIcon.args = { icons: true }
 const WithAdditionalAccounts = WithWalletTemplate.bind({})
 WithAdditionalAccounts.args = { icons: true, maxAccounts: 10 }
 
-const WithAccountFavorites = WithWalletTemplate.bind({})
-const defaultWalletAtIndex = defaultWallet.derivePath(WalletRootPath)
-WithAccountFavorites.args = {
-  addressNames: {
-    [defaultWalletAtIndex.derivePath('0').addressValue.hex]: 'first address',
-    [defaultWalletAtIndex.derivePath('3').addressValue.hex]: undefined,
-    [defaultWalletAtIndex.derivePath('5').addressValue.hex]: 'sixth address',
-  },
-  icons: true,
-  maxAccounts: 10,
-  showFavorite: true,
-}
+const WithAccountFavorites = WithFavoritesTemplate.bind({})
 
 export { Default, WithAccountFavorites, WithAdditionalAccounts, WithWallet, WithWalletIcon }
 

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

@@ -1,5 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react'
 import { HDWallet } from '@xyo-network/account'
+import { usePromise } from '@xyo-network/react-shared'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 
 import { WalletProvider } from '../../contexts'
@@ -17,8 +18,9 @@ const StorybookEntry = {
 } as Meta<typeof WalletAccountSelect>
 
 const Template: StoryFn<typeof WalletAccountSelect> = (args) => {
+  const [wallet] = usePromise(() => HDWallet.fromMnemonic(DefaultSeedPhrase) as Promise<HDWallet>)
   return (
-    <WalletProvider defaultWallet={HDWallet.fromMnemonic(DefaultSeedPhrase)}>
+    <WalletProvider defaultWallet={wallet}>
       <WalletAccountSelect {...args}></WalletAccountSelect>
     </WalletProvider>
   )

package/src/contexts/Account/MemoryProvider.tsx

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

package/src/contexts/Account/State.ts

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

package/src/contexts/Account/use.ts

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

package/src/contexts/Wallet/Provider.tsx

@@ -1,5 +1,8 @@
+import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { WithChildren } from '@xylabs/react-shared'
 import { HDWallet } from '@xyo-network/account'
+import { usePromise } from '@xyo-network/react-shared'
+import { WalletInstance } from '@xyo-network/wallet-model'
 import { useEffect, useState } from 'react'
 
 import { AccountContext } from '../Account'
@@ -10,13 +13,15 @@ import { useWallet } from './use'
 export interface WalletProviderProps {
   basePath?: string
   defaultActiveAccountIndex?: number
-  defaultWallet?: HDWallet
+  defaultWallet?: WalletInstance
 }
 
 const AccountWalletProvider: React.FC<WithChildren> = (props) => {
   const { wallet, activeAccountIndex = 0 } = useWallet()
 
-  return <AccountContext.Provider value={{ account: wallet?.derivePath(activeAccountIndex.toString()), provided: true }} {...props} />
+  const [account] = usePromise(() => wallet?.derivePath(activeAccountIndex.toString()))
+
+  return <AccountContext.Provider value={{ account, provided: true }} {...props} />
 }
 
 export const WalletProvider: React.FC<WithChildren<WalletProviderProps>> = ({
@@ -35,21 +40,25 @@ export const WalletProvider: React.FC<WithChildren<WalletProviderProps>> = ({
     }
   }, [defaultActiveAccountIndex])
 
-  useEffect(() => {
-    // ensure the wallet has the proper base
-    if (defaultWallet) {
-      if (!wallet?.path.includes(basePath)) {
-        try {
-          const walletWithBasePath = defaultWallet?.derivePath(basePath)
-          setWallet(walletWithBasePath)
-        } catch (e) {
-          console.error('Error setting proper wallet base path', e)
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      // ensure the wallet has the proper base
+      if (defaultWallet) {
+        if (!wallet?.path.includes(basePath)) {
+          try {
+            const walletWithBasePath = (await defaultWallet?.derivePath(basePath)) as HDWallet
+            setWallet(walletWithBasePath)
+          } catch (e) {
+            console.error('Error setting proper wallet base path', e)
+          }
         }
+      } else {
+        throw Error('WalletProvider requires a default HDWallet')
       }
-    } else {
-      throw Error('WalletProvider requires a default HDWallet')
-    }
-  }, [basePath, defaultWallet, wallet?.path])
+    },
+    [basePath, defaultWallet, wallet?.path],
+  )
 
   return (
     <WalletContext.Provider

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useAccount'
+export * from './useAccounts'

package/src/hooks/useAccount.tsx

@@ -0,0 +1,23 @@
+import { HDWallet } from '@xyo-network/account'
+import { DataLike } from '@xyo-network/core'
+import { usePromise } from '@xyo-network/react-shared'
+import { WalletInstance } from '@xyo-network/wallet-model'
+
+import { useAccountFromContext } from '../contexts'
+
+export interface AccountHookParams {
+  account?: WalletInstance
+  mnemonic?: string
+  path?: string
+  required?: boolean
+  seed?: DataLike
+}
+
+export const useAccount = ({ mnemonic, account, path, required, seed }: AccountHookParams = {}) => {
+  const [contextAccount] = useAccountFromContext(!account && required)
+  const [activeAccount] = usePromise(
+    async () => (account ?? mnemonic ? await HDWallet.fromMnemonic(mnemonic as string) : seed ? await HDWallet.fromSeed(seed) : contextAccount),
+    [account, mnemonic, contextAccount, seed],
+  )
+  return usePromise(async () => (path ? await activeAccount?.derivePath?.(path) : activeAccount))
+}

package/src/hooks/useAccounts.tsx

@@ -0,0 +1,16 @@
+import { usePromise } from '@xyo-network/react-shared'
+import { WalletInstance } from '@xyo-network/wallet-model'
+
+import { useAccountFromContext } from '../contexts'
+
+export interface AccountsHookParams {
+  account?: WalletInstance
+  paths?: string[]
+  required?: boolean
+}
+
+export const useAccounts = ({ account, paths, required }: AccountsHookParams = {}) => {
+  const [contextAccount] = useAccountFromContext(!account && required)
+  const activeAccount = account ?? contextAccount
+  return usePromise(async () => (paths ? await Promise.all(paths.map((path) => activeAccount?.derivePath?.(path))) : activeAccount))
+}

package/src/index.ts

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