@xyo-network/react-wallet 7.5.4 → 7.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-wallet",
-  "version": "7.5.4",
+  "version": "7.5.6",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -44,42 +44,42 @@
   ],
   "dependencies": {
     "@scure/bip39": "~2.0.1",
-    "@xylabs/eth-address": "~5.0.79",
-    "@xylabs/react-button": "~7.1.15",
-    "@xylabs/react-crypto": "~7.1.15",
-    "@xylabs/react-flexbox": "~7.1.15",
-    "@xylabs/react-hooks": "~7.1.15",
-    "@xylabs/react-number-status": "~7.1.15",
-    "@xylabs/react-promise": "~7.1.15",
-    "@xylabs/react-select": "~7.1.15",
-    "@xylabs/react-shared": "~7.1.15",
-    "@xyo-network/account-model": "~5.3.5",
-    "@xyo-network/react-address-render": "7.5.4",
-    "@xyo-network/react-network": "7.5.4",
-    "@xyo-network/wallet": "~5.3.5",
-    "@xyo-network/wallet-model": "~5.3.5",
+    "@xylabs/eth-address": "~5.0.90",
+    "@xylabs/react-button": "~7.1.17",
+    "@xylabs/react-crypto": "~7.1.17",
+    "@xylabs/react-flexbox": "~7.1.17",
+    "@xylabs/react-hooks": "~7.1.17",
+    "@xylabs/react-number-status": "~7.1.17",
+    "@xylabs/react-promise": "~7.1.17",
+    "@xylabs/react-select": "~7.1.17",
+    "@xylabs/react-shared": "~7.1.17",
+    "@xyo-network/account-model": "~5.3.17",
+    "@xyo-network/react-address-render": "7.5.6",
+    "@xyo-network/react-network": "7.5.6",
+    "@xyo-network/wallet": "~5.3.17",
+    "@xyo-network/wallet-model": "~5.3.17",
     "async-mutex": "~0.5.0"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "~7.56.3",
-    "@mui/icons-material": "~7.3.8",
-    "@mui/material": "~7.3.8",
-    "@storybook/react-vite": "~10.2.9",
+    "@microsoft/api-extractor": "~7.57.7",
+    "@mui/icons-material": "~7.3.9",
+    "@mui/material": "~7.3.9",
+    "@storybook/react-vite": "~10.3.3",
     "@types/react": "^19.2.14",
-    "@xylabs/react-identicon": "~7.1.15",
-    "@xylabs/react-quick-tip-button": "~7.1.15",
-    "@xylabs/sdk-js": "~5.0.79",
-    "@xylabs/ts-scripts-yarn3": "~7.3.2",
-    "@xylabs/tsconfig": "~7.3.2",
-    "@xylabs/tsconfig-dom": "~7.3.2",
-    "@xylabs/tsconfig-react": "~7.3.2",
-    "@xyo-network/react-storybook": "7.5.4",
+    "@xylabs/react-identicon": "~7.1.17",
+    "@xylabs/react-quick-tip-button": "~7.1.17",
+    "@xylabs/sdk-js": "~5.0.90",
+    "@xylabs/ts-scripts-yarn3": "~7.5.6",
+    "@xylabs/tsconfig": "~7.5.6",
+    "@xylabs/tsconfig-dom": "~7.5.6",
+    "@xylabs/tsconfig-react": "~7.5.6",
+    "@xyo-network/react-storybook": "7.5.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.0",
-    "storybook": "~10.2.9",
+    "react-router-dom": "^7.13.2",
+    "storybook": "~10.3.3",
     "typescript": "^5.9.3",
-    "vite": "~7.3.1",
+    "vite": "~8.0.3",
     "zod": "^4.3.6"
   },
   "peerDependencies": {

package/src/components/SeedPhrase/DefaultSeedPhrase.tsx

@@ -3,8 +3,9 @@ import {
 } from '@mui/material'
 import { generateMnemonic } from '@scure/bip39'
 import { wordlist } from '@scure/bip39/wordlists/english.js'
+import { isUndefinedOrNull } from '@xylabs/sdk-js'
 import type { PropsWithChildren } from 'react'
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 
 /** @public */
 export interface DefaultSeedPhraseProps extends PropsWithChildren {
@@ -18,14 +19,15 @@ export const DefaultSeedPhrase: React.FC<DefaultSeedPhraseProps> = ({
   changeSeedPhrase, children, hideDefaultSeedPhraseMessage, seedPhrase,
 }) => {
   const [showSnackBar, setShowSnackBar] = useState(false)
-
-  useMemo(() => {
-    if (!seedPhrase) {
+  const [previousSeedPhrase, setPreviousSeedPhrase] = useState<string | undefined>()
+  if (seedPhrase !== previousSeedPhrase) {
+    setPreviousSeedPhrase(seedPhrase)
+    if (isUndefinedOrNull(previousSeedPhrase) && !isUndefinedOrNull(seedPhrase)) {
       const mnemonic = generateMnemonic(wordlist, 256)
       changeSeedPhrase?.(mnemonic)
       setShowSnackBar(true)
     }
-  }, [changeSeedPhrase, seedPhrase])
+  }
 
   return (
     <>

package/src/components/SeedPhrase/dialog/components/fields/SavedPhraseTextField.tsx

@@ -6,7 +6,7 @@ import {
   useTheme,
 } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 
 import { useSeedPhrase } from '../../../../../contexts/index.ts'
 import { InvalidPhraseTypography, PhraseHeaderBox } from './validation-messages/index.ts'
@@ -29,9 +29,11 @@ export const SavedPhraseTextField: React.FC<SavedPhraseTextFieldProps> = ({
 
   const [visible, setVisible] = useState(visibleProp)
 
-  useMemo(() => {
+  const [previousVisibleProp, setPreviousVisibleProp] = useState(visibleProp)
+  if (visibleProp !== previousVisibleProp) {
+    setPreviousVisibleProp(visibleProp)
     setVisible(visibleProp)
-  }, [visibleProp])
+  }
 
   const [copied, setCopied] = useState(false)
   const onCopyPhrase = async () => {

package/src/components/WalletAccountSelect/Select.tsx

@@ -1,12 +1,10 @@
 import type { SelectProps } from '@mui/material'
-import { CircularProgress, MenuItem } from '@mui/material'
+import { CircularProgress } from '@mui/material'
 import { SelectEx } from '@xylabs/react-select'
 import type { AddressRenderRowBoxProps } from '@xyo-network/react-address-render'
-import { AddressRenderRowBox } from '@xyo-network/react-address-render'
 import React from 'react'
 
 import { useWalletContext } from '../../contexts/index.ts'
-import { useWallet } from '../../hooks/index.ts'
 import { RenderedAccountMenuItem } from './RenderedMenuItem.tsx'
 
 type SharedAddressRenderRowBoxProps = Pick<AddressRenderRowBoxProps, 'iconOnly' | 'iconSize' | 'icons' | 'showFavorite'>
@@ -66,32 +64,18 @@ export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({
               variant={variant}
               {...props}
             >
-              {rootWallet && arrayRange(maxAccounts).map((index) => {
-                const [account] = useWallet({ path: index.toString(), wallet: rootWallet })
-                const customName = account ? addressNames?.[account.address] : undefined
-                const favorite = !!account && account.address in (addressNames ?? {})
-                return (
-                  <MenuItem
-                    key={account?.address}
-                    value={index}
-                    sx={{
-                      minHeight: 0, paddingBottom: 0, paddingTop: 0,
-                    }}
-                  >
-                    <AddressRenderRowBox
-                      disableSharedRef={true}
-                      flexGrow={1}
-                      address={account?.address}
-                      favorite={favorite}
-                      iconOnly={iconOnly}
-                      iconSize={iconSize}
-                      icons={icons}
-                      name={customName}
-                      showFavorite={showFavorite}
-                    />
-                  </MenuItem>
-                )
-              })}
+              {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/stories/WalletProviderDecorator.tsx

@@ -1,7 +1,7 @@
 import type { Decorator } from '@storybook/react-vite'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import type { WalletInstance } from '@xyo-network/wallet-model'
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { WalletProvider } from '../../../contexts/index.ts'
 import { useWallet } from '../../../hooks/index.ts'
@@ -10,12 +10,18 @@ export const WalletProviderDecorator: Decorator = (Story, context) => {
   const [rootWallet] = useWallet({ mnemonic: DefaultSeedPhrase })
   const [wallet, setWallet] = useState<WalletInstance>()
 
-  useMemo(() => {
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>
     if (rootWallet) {
-      setTimeout(() => {
+      timeout = setTimeout(() => {
         setWallet(rootWallet)
       }, 1000)
     }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+    }
   }, [rootWallet])
   return (
     <WalletProvider rootWallet={wallet}>

package/src/contexts/SeedPhrase/Provider.tsx

@@ -47,7 +47,7 @@ export const SeedPhraseProvider: React.FC<SeedPhraseProviderProps> = ({
     const mnemonic = generateMnemonic(wordlist, 256)
     setPhrase?.(mnemonic)
     setOverwriteWarning?.(false)
-  }, [])
+  }, [setPhrase])
 
   const handleCancelOverwrite = useCallback(() => {
     setOverwriteWarning(false)
@@ -91,19 +91,7 @@ export const SeedPhraseProvider: React.FC<SeedPhraseProviderProps> = ({
     validPhrase,
     validSeedPhrase,
     validate,
-  }), [handleCancelOverwrite,
-    handleChangeSeedPhrase,
-    handleClear,
-    handleGenerate,
-    handleSave,
-    overwriteWarning,
-    phrase,
-    seedPhrase,
-    setOverwriteWarning,
-    setPhrase,
-    validPhrase,
-    validSeedPhrase,
-    validate])
+  }), [handleCancelOverwrite, handleChangeSeedPhrase, handleClear, handleGenerate, handleSave, overwriteWarning, phrase, seedPhrase, setOverwriteWarning, setPhrase, validPhrase, validSeedPhrase])
 
   return (
     <SeedPhraseContext

package/src/contexts/Wallet/usePromise.ts

@@ -1,87 +0,0 @@
-// Inspired from https://github.com/bsonntag/react-use-promise
-
-import type { EnumValue } from '@xylabs/sdk-js'
-import { Enum } from '@xylabs/sdk-js'
-import { Mutex } from 'async-mutex'
-import type { DependencyList } from 'react'
-import {
-  useEffect, useMemo, useState,
-} from 'react'
-
-export const State = Enum({
-  pending: 'pending',
-  rejected: 'rejected',
-  resolved: 'resolved',
-})
-
-export type State = EnumValue<typeof State>
-
-/**
- * usePromise -
- */
-export const usePromise = <TResult>(
-  promise: () => Promise<TResult | undefined>,
-  dependencies: DependencyList,
-  debug: string | undefined = undefined,
-): [TResult | undefined, Error | undefined, State | undefined] => {
-  const [result, setResult] = useState<TResult>()
-  const [error, setError] = useState<Error>()
-  const [state, setState] = useState<State>(State.pending)
-  const mutex = useMemo(() => {
-    return new Mutex()
-  }, [])
-
-  if (debug) console.log(`usePromise [${debug}]: started [${typeof promise}]`)
-
-  const promiseMemo: Promise<TResult | undefined> | undefined = useMemo(() => {
-    try {
-      if (debug) console.log(`usePromise [${debug}]: re-memo [${typeof promise}]`)
-      setState(State.pending)
-      return promise?.()
-    } catch (e) {
-      if (debug) console.log(`usePromise [${debug}]: useMemo rejection [${typeof promise}]`)
-      setResult(undefined)
-      setError(e as Error)
-      setState(State.rejected)
-    }
-  }, dependencies)
-
-  if (debug) console.log(`usePromise [${debug}] Main Function`)
-
-  useEffect(() => {
-    if (debug) console.log(`usePromise [${debug}] useEffect`)
-    mutex
-      ?.acquire()
-      .then(() => {
-        promiseMemo
-          ?.then((payload) => {
-            if (debug) console.log(`usePromise [${debug}] then`)
-            setResult(payload)
-            setError(undefined)
-            setState(State.resolved)
-            mutex?.release()
-          })
-          .catch((e) => {
-            const error = e as Error
-            console.error(`usePromise: ${error.message}`)
-            setResult(undefined)
-            setError(error)
-            setState(State.rejected)
-            mutex?.release()
-          })
-      })
-      .catch((e) => {
-        const error = e as Error
-        console.error(`usePromise: ${error.message}`)
-        setResult(undefined)
-        setError(error)
-        setState(State.rejected)
-        mutex?.release()
-      })
-    return () => {
-      if (debug) console.log(`usePromise [${debug}] useEffect callback`)
-    }
-  }, [...dependencies, promiseMemo])
-  if (debug) console.log(`usePromise [${debug}] returning ${JSON.stringify([result, error, state], null, 2)}`)
-  return [result, error, state]
-}