@xyo-network/react-wallet 3.0.2 → 3.0.3

package/package.json

@@ -1,17 +1,50 @@
 {
   "name": "@xyo-network/react-wallet",
+  "version": "3.0.3",
+  "description": "Common React library for all XYO projects that use React",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "homepage": "https://xyo.network",
+  "bugs": {
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues",
+    "email": "support@xyo.network"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "license": "LGPL-3.0-only",
   "author": {
-    "email": "support@xyo.network",
     "name": "XYO Development Team",
+    "email": "support@xyo.network",
     "url": "https://xyo.network"
   },
-  "bugs": {
-    "email": "support@xyo.network",
-    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/browser/index.d.ts",
+        "default": "./dist/browser/index.mjs"
+      },
+      "types": "./dist/browser/index.d.ts",
+      "default": "./dist/browser/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "module": "dist/browser/index.mjs",
+  "types": "dist/browser/index.d.ts",
+  "scripts": {
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\"",
+    "lint-pkg": "npmPkgJsonLint ."
   },
   "dependencies": {
     "@scure/bip39": "^1.3.0",
-    "@xylabs/eth-address": "^4.0.2",
+    "@xylabs/eth-address": "^4.0.5",
     "@xylabs/react-button": "^4.0.3",
     "@xylabs/react-crypto": "^4.0.3",
     "@xylabs/react-flexbox": "^4.0.3",
@@ -21,14 +54,28 @@
     "@xylabs/react-quick-tip-button": "^4.0.3",
     "@xylabs/react-select": "^4.0.3",
     "@xylabs/react-shared": "^4.0.3",
-    "@xyo-network/account": "^3.0.3",
-    "@xyo-network/account-model": "^3.0.3",
-    "@xyo-network/react-address-render": "^3.0.2",
-    "@xyo-network/react-network": "^3.0.2",
-    "@xyo-network/react-shared": "^3.0.2",
-    "@xyo-network/wallet-model": "^3.0.3",
+    "@xyo-network/account": "^3.0.15",
+    "@xyo-network/account-model": "^3.0.15",
+    "@xyo-network/react-address-render": "^3.0.3",
+    "@xyo-network/react-network": "^3.0.3",
+    "@xyo-network/react-shared": "^3.0.3",
+    "@xyo-network/wallet-model": "^3.0.15",
     "async-mutex": "^0.5.0"
   },
+  "devDependencies": {
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
+    "@storybook/react": "^8.2.9",
+    "@xylabs/ts-scripts-yarn3": "^4.0.7",
+    "@xylabs/tsconfig-react": "^4.0.7",
+    "@xyo-network/react-storybook": "^3.0.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
+    "storybook": "^8.2.9",
+    "typescript": "^5.5.4"
+  },
   "peerDependencies": {
     "@mui/icons-material": "^5",
     "@mui/material": "^5",
@@ -36,49 +83,8 @@
     "react": "^18",
     "react-dom": "^18"
   },
-  "description": "Common React library for all XYO projects that use React",
-  "devDependencies": {
-    "@storybook/react": "^8.2.9",
-    "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.20",
-    "@xylabs/tsconfig-react": "^4.0.0-rc.20",
-    "@xyo-network/react-storybook": "^3.0.2",
-    "react-router-dom": "^6.26.1",
-    "typescript": "^5.5.4"
-  },
-  "docs": "dist/docs.json",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/browser/index.d.ts",
-        "default": "./dist/browser/index.mjs"
-      },
-      "types": "./dist/browser/index.d.ts",
-      "default": "./dist/browser/index.mjs"
-    },
-    "./package.json": "./package.json"
-  },
-  "module": "dist/browser/index.mjs",
-  "homepage": "https://xyo.network",
-  "keywords": [
-    "xyo",
-    "utility",
-    "typescript",
-    "react"
-  ],
-  "license": "LGPL-3.0-only",
   "publishConfig": {
     "access": "public"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
-  },
-  "scripts": {
-    "lint-pkg": "npmPkgJsonLint .",
-    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
-  },
-  "sideEffects": false,
-  "types": "dist/browser/index.d.ts",
-  "version": "3.0.2",
-  "type": "module"
+  "docs": "dist/docs.json"
 }

package/src/components/MaxAccounts/MaxAccountsTableRow.tsx

@@ -1,5 +1,7 @@
 import type { TableRowProps } from '@mui/material'
-import { ButtonGroup, TableCell, TableRow, Typography } from '@mui/material'
+import {
+  ButtonGroup, TableCell, TableRow, Typography,
+} from '@mui/material'
 import { ButtonEx } from '@xylabs/react-button'
 import React, { useState } from 'react'
 
@@ -11,7 +13,9 @@ export interface MaxAccountsTableRow extends TableRowProps {
   maxAccounts?: number
 }
 
-export const MaxAccountsTableRow: React.FC<MaxAccountsTableRow> = ({ activeAccountIndex, changeMaxAccounts, maxAccounts }) => {
+export const MaxAccountsTableRow: React.FC<MaxAccountsTableRow> = ({
+  activeAccountIndex, changeMaxAccounts, maxAccounts,
+}) => {
   const [desiredMaximumAccounts, setDesiredMaximumAccounts] = useState<number | undefined>()
   const [showSnackBar, setShowSnackBar] = useState(false)
 

package/src/components/MaxAccounts/OutOfBoundsSnackBar.tsx

@@ -1,5 +1,7 @@
 import type { SnackbarProps } from '@mui/material'
-import { Alert, AlertTitle, Snackbar } from '@mui/material'
+import {
+  Alert, AlertTitle, Snackbar,
+} from '@mui/material'
 import type { Dispatch, SetStateAction } from 'react'
 import React from 'react'
 

package/src/components/SeedPhrase/DefaultSeedPhrase.stories.tsx

@@ -11,14 +11,10 @@ export default {
 const Template: StoryFn<typeof DefaultSeedPhrase> = props => <DefaultSeedPhrase {...props} />
 
 const Default = Template.bind({})
-Default.args = {
-  seedPhrase: 'test me',
-}
+Default.args = { seedPhrase: 'test me' }
 
 const WithoutDefaultSeedPhrase = Template.bind({})
-WithoutDefaultSeedPhrase.args = {
-  changeSeedPhrase: (mnemonic?: string) => alert(`Generated Default Seed Phrase: ${mnemonic}`),
-}
+WithoutDefaultSeedPhrase.args = { changeSeedPhrase: (mnemonic?: string) => alert(`Generated Default Seed Phrase: ${mnemonic}`) }
 
 const WithHiddenDefaultSeedPhrase = Template.bind({})
 WithHiddenDefaultSeedPhrase.args = {
@@ -26,4 +22,6 @@ WithHiddenDefaultSeedPhrase.args = {
   ...WithoutDefaultSeedPhrase.args,
 }
 
-export { Default, WithHiddenDefaultSeedPhrase, WithoutDefaultSeedPhrase }
+export {
+  Default, WithHiddenDefaultSeedPhrase, WithoutDefaultSeedPhrase,
+}

package/src/components/SeedPhrase/DefaultSeedPhrase.tsx

@@ -1,4 +1,6 @@
-import { Alert, AlertTitle, Snackbar } from '@mui/material'
+import {
+  Alert, AlertTitle, Snackbar,
+} from '@mui/material'
 import { generateMnemonic } from '@scure/bip39'
 // eslint-disable-next-line import-x/no-internal-modules
 import { wordlist } from '@scure/bip39/wordlists/english'
@@ -11,7 +13,9 @@ export interface DefaultSeedPhraseProps extends WithChildren {
   seedPhrase?: string
 }
 
-export const DefaultSeedPhrase: React.FC<DefaultSeedPhraseProps> = ({ changeSeedPhrase, children, hideDefaultSeedPhraseMessage, seedPhrase }) => {
+export const DefaultSeedPhrase: React.FC<DefaultSeedPhraseProps> = ({
+  changeSeedPhrase, children, hideDefaultSeedPhraseMessage, seedPhrase,
+}) => {
   const [showSnackBar, setShowSnackBar] = useState(false)
 
   useEffect(() => {

package/src/components/SeedPhrase/_shared/SeedPhraseIconButton.tsx

@@ -1,6 +1,5 @@
 import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material'
-import type {
-  IconButtonProps } from '@mui/material'
+import type { IconButtonProps } from '@mui/material'
 import {
   Button,
   Dialog,

package/src/components/SeedPhrase/dialog/SeedPhraseDialog.tsx

@@ -1,5 +1,7 @@
 import type { DialogProps } from '@mui/material'
-import { Dialog, DialogContent, DialogTitle, FormLabel } from '@mui/material'
+import {
+  Dialog, DialogContent, DialogTitle, FormLabel,
+} from '@mui/material'
 import React from 'react'
 
 import { SeedPhraseProvider, useSeedPhrase } from '../../../contexts/index.ts'
@@ -18,7 +20,9 @@ export interface SeedPhraseDialogProps extends DialogProps {
   seedPhrase?: string
 }
 
-export const SeedPhraseDialog: React.FC<SeedPhraseDialogProps> = ({ changeSeedPhrase, seedPhrase, ...props }) => {
+export const SeedPhraseDialog: React.FC<SeedPhraseDialogProps> = ({
+  changeSeedPhrase, seedPhrase, ...props
+}) => {
   return (
     <SeedPhraseProvider
       seedPhrase={seedPhrase}
@@ -32,7 +36,9 @@ export const SeedPhraseDialog: React.FC<SeedPhraseDialogProps> = ({ changeSeedPh
 }
 
 export const SeedPhraseDialogInner: React.FC<SeedPhraseDialogProps> = (props) => {
-  const { overwriteWarning, seedPhrase, validPhrase } = useSeedPhrase()
+  const {
+    overwriteWarning, seedPhrase, validPhrase,
+  } = useSeedPhrase()
 
   return (
     <Dialog aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" fullWidth maxWidth="sm" {...props}>
@@ -41,7 +47,10 @@ export const SeedPhraseDialogInner: React.FC<SeedPhraseDialogProps> = (props) =>
         {' '}
         <SeedPhraseIconButton />
       </DialogTitle>
-      <DialogContent sx={{ display: 'flex', flexDirection: 'column', rowGap: 2 }}>
+      <DialogContent sx={{
+        display: 'flex', flexDirection: 'column', rowGap: 2,
+      }}
+      >
         <NewPhraseTextField>
           <FormLabel>
             <PhraseHeaderBox conditional={validPhrase}>New Seed Phrase</PhraseHeaderBox>

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

@@ -11,11 +11,21 @@ export interface NewPhraseTextFieldProps extends StandardTextFieldProps {
   disableColor?: boolean
 }
 
-export const NewPhraseTextField: React.FC<NewPhraseTextFieldProps> = ({ children, disableColor, ...props }) => {
-  const { phrase, setPhrase, validPhrase } = useSeedPhrase()
+export const NewPhraseTextField: React.FC<NewPhraseTextFieldProps> = ({
+  children, disableColor, ...props
+}) => {
+  const {
+    phrase, setPhrase, validPhrase,
+  } = useSeedPhrase()
   return (
     <>
-      <FormControl fullWidth size="small" sx={{ display: 'flex', flexDirection: 'column', rowGap: 1 }}>
+      <FormControl
+        fullWidth
+        size="small"
+        sx={{
+          display: 'flex', flexDirection: 'column', rowGap: 1,
+        }}
+      >
         {children}
         <TextField
           focused

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

@@ -4,7 +4,9 @@ import React from 'react'
 import { useSeedPhrase } from '../../../../../contexts/index.ts'
 
 export const PhraseDialogActions = () => {
-  const { handleClear, handleGenerate, overwriteWarning } = useSeedPhrase()
+  const {
+    handleClear, handleGenerate, overwriteWarning,
+  } = useSeedPhrase()
   return (
     <DialogActions sx={{ justifyContent: 'center' }}>
       <Button disabled={overwriteWarning} variant="outlined" onClick={handleGenerate}>

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

@@ -1,5 +1,7 @@
 import type { StandardTextFieldProps } from '@mui/material'
-import { Chip, FormControl, FormLabel, TextField } from '@mui/material'
+import {
+  Chip, FormControl, FormLabel, TextField,
+} from '@mui/material'
 import React, { useState } from 'react'
 
 import { useSeedPhrase } from '../../../../../contexts/index.ts'
@@ -10,13 +12,21 @@ export interface SavedPhraseTextFieldProps extends StandardTextFieldProps {
   showPhraseHeader?: boolean
 }
 
-export const SavedPhraseTextField: React.FC<SavedPhraseTextFieldProps> = ({ fullWidth, showPhraseHeader, ...props }) => {
+export const SavedPhraseTextField: React.FC<SavedPhraseTextFieldProps> = ({
+  fullWidth, showPhraseHeader, ...props
+}) => {
   const { validSeedPhrase, seedPhrase } = useSeedPhrase()
 
   const [visible, setVisible] = useState(false)
 
   return (
-    <FormControl fullWidth={fullWidth} size="small" sx={{ display: 'flex', flexDirection: 'column', rowGap: 1 }}>
+    <FormControl
+      fullWidth={fullWidth}
+      size="small"
+      sx={{
+        display: 'flex', flexDirection: 'column', rowGap: 1,
+      }}
+    >
       <Chip
         label={visible ? 'Hide Saved Seed Phrase' : 'Reveal Saved Seed Phrase'}
         onClick={() => setVisible(!visible)}

package/src/components/SeedPhrase/dialog/components/fields/validation-messages/PhraseHeaderBox.tsx

@@ -8,7 +8,9 @@ interface PhraseHeaderBox extends FlexBoxProps, WithChildren {
   conditional?: boolean | null
 }
 
-export const PhraseHeaderBox: React.FC<PhraseHeaderBox> = ({ children, conditional, ...props }) => {
+export const PhraseHeaderBox: React.FC<PhraseHeaderBox> = ({
+  children, conditional, ...props
+}) => {
   const state = useMemo(() => {
     switch (conditional) {
       case true: {

package/src/components/SeedPhrase/settings/SeedPhraseTableRow.stories.tsx

@@ -20,9 +20,7 @@ const Template: StoryFn<typeof SeedPhraseTableRow> = props => (
 )
 
 const Default = Template.bind({})
-Default.args = {
-  changeSeedPhrase,
-}
+Default.args = { changeSeedPhrase }
 
 const WithSeedPhrase = Template.bind({})
 WithSeedPhrase.args = {

package/src/components/SeedPhrase/settings/SeedPhraseTableRow.tsx

@@ -1,6 +1,8 @@
 import { Cancel as CancelIcon, RadioButtonChecked as RadioButtonCheckedIcon } from '@mui/icons-material'
 import type { TableRowProps } from '@mui/material'
-import { Button, ButtonGroup, TableCell, TableRow } from '@mui/material'
+import {
+  Button, ButtonGroup, TableCell, TableRow,
+} from '@mui/material'
 import React, { useState } from 'react'
 
 import { SeedPhraseIconButton } from '../_shared/index.ts'
@@ -11,7 +13,9 @@ export interface SeedPhraseTableRowProps extends TableRowProps {
   seedPhrase?: string
 }
 
-export const SeedPhraseTableRow: React.FC<SeedPhraseTableRowProps> = ({ changeSeedPhrase, seedPhrase, ...props }) => {
+export const SeedPhraseTableRow: React.FC<SeedPhraseTableRowProps> = ({
+  changeSeedPhrase, seedPhrase, ...props
+}) => {
   const [open, setOpen] = useState(false)
 
   const handleOpen = () => {

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

@@ -7,11 +7,7 @@ import { WalletAccountDetails } from './WalletAccountDetails.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: WalletAccountDetails,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'wallet/WalletAccountDetails',
 } as Meta<typeof WalletAccountDetails>
 

package/src/components/WalletAccountDetails/WalletAccountDetails.tsx

@@ -14,7 +14,9 @@ export interface WalletAccountDetailsProps extends FlexBoxProps {
   exploreUrl?: string
 }
 
-export const WalletAccountDetails: React.FC<WalletAccountDetailsProps> = ({ exploreUrl = 'https://explore.xyo.network', account, ...props }) => {
+export const WalletAccountDetails: React.FC<WalletAccountDetailsProps> = ({
+  exploreUrl = 'https://explore.xyo.network', account, ...props
+}) => {
   const [accountToUse] = useAccount({ account })
   const { network } = useNetwork()
   const exploreAddressUrl = `${exploreUrl}/recent?account=${accountToUse?.address}&network=${network?.name ?? 'main'}`

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

@@ -10,11 +10,7 @@ import { WalletAccountDetails } from './WalletAccountDetails.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: WalletAccountDetails,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'wallet/WalletAccountDetailsWithProvider',
 } as Meta<typeof WalletAccountDetails>
 

package/src/components/WalletAccountSelect/Select.tsx

@@ -32,7 +32,9 @@ export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({
   variant = 'outlined',
   ...props
 }) => {
-  const { activeAccountIndex = 0, setActiveAccountIndex, rootWallet } = useWalletContext()
+  const {
+    activeAccountIndex = 0, setActiveAccountIndex, rootWallet,
+  } = useWalletContext()
   const disabled = !rootWallet || activeAccountIndex === undefined
 
   return (
@@ -49,7 +51,12 @@ export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({
                   const customName = selectedAccount ? addressNames?.[selectedAccount.address] : undefined
                   const favorite = !!selectedAccount && selectedAccount.address in (addressNames ?? {})
                   return (
-                    <MenuItem value={selectedAccountIndex} sx={{ minHeight: 0, paddingBottom: 0, paddingTop: 0 }}>
+                    <MenuItem
+                      value={selectedAccountIndex}
+                      sx={{
+                        minHeight: 0, paddingBottom: 0, paddingTop: 0,
+                      }}
+                    >
                       <AddressRenderRowBox
                         disableSharedRef={true}
                         flexGrow={1}
@@ -79,7 +86,13 @@ export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({
                   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 }}>
+                    <MenuItem
+                      key={account?.address}
+                      value={index}
+                      sx={{
+                        minHeight: 0, paddingBottom: 0, paddingTop: 0,
+                      }}
+                    >
                       <AddressRenderRowBox
                         disableSharedRef={true}
                         flexGrow={1}

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

@@ -4,17 +4,15 @@ import React from 'react'
 
 import { WalletAccountSelect } from './Select.tsx'
 import { WalletProviderDecorator } from './stories/index.ts'
-import { AccountInfo, RootWalletInfo, SelectedWalletInfo, WalletInfo } from './WalletInfo.tsx'
+import {
+  AccountInfo, RootWalletInfo, SelectedWalletInfo, WalletInfo,
+} from './WalletInfo.tsx'
 
 const StorybookEntry = {
   argTypes: {},
   component: WalletAccountSelect,
   decorators: [WalletProviderDecorator],
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'wallet/WalletAccountSelect',
 } as Meta<typeof WalletAccountSelect>
 

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

@@ -12,11 +12,7 @@ const StorybookEntry = {
   argTypes: {},
   component: WalletAccountSelectBar,
   decorators: [WalletProviderDecorator],
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'wallet/WalletAccountSelectBar',
 } as Meta<typeof WalletAccountSelectBar>
 
@@ -60,6 +56,8 @@ WithAdditionalAccounts.args = { icons: true, maxAccounts: 10 }
 
 const WithAccountFavorites = WithFavoritesTemplate.bind({})
 
-export { Default, WithAccountFavorites, WithAdditionalAccounts, WithWallet, WithWalletIcon }
+export {
+  Default, WithAccountFavorites, WithAdditionalAccounts, WithWallet, WithWalletIcon,
+}
 
 export default StorybookEntry

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

@@ -8,11 +8,7 @@ const StorybookEntry = {
   argTypes: {},
   component: WalletAccountSelect,
   decorators: [WalletProviderDecorator],
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'wallet/WalletAccountSelectWithProvider',
 } as Meta<typeof WalletAccountSelect>
 
@@ -36,8 +32,12 @@ const IconsOnly = Template.bind({})
 IconsOnly.args = { iconOnly: true, icons: true }
 
 const IconsOnlySmall = Template.bind({})
-IconsOnlySmall.args = { iconOnly: true, icons: true, size: 'small' }
+IconsOnlySmall.args = {
+  iconOnly: true, icons: true, size: 'small',
+}
 
-export { Default, DefaultIcons, DefaultSmall, DefaultSmallIcon, IconsOnly, IconsOnlySmall }
+export {
+  Default, DefaultIcons, DefaultSmall, DefaultSmallIcon, IconsOnly, IconsOnlySmall,
+}
 
 export default StorybookEntry

package/src/components/WalletAccountSelect/WalletInfo.tsx

@@ -17,10 +17,15 @@ export const WalletError: React.FC<WalletErrorProps> = ({ error }) => {
   return error
     ? (
         <div>
-          <ErrorIcon style={{ fontSize: '12px', position: 'absolute' }} color="error" />
+          <ErrorIcon
+            style={{ fontSize: '12px', position: 'absolute' }}
+            color="error"
+          />
           <QuickTipButton
             size="small"
-            style={{ color: '#ffffff00', fontSize: '12px', padding: 0, position: 'absolute' }}
+            style={{
+              color: '#ffffff00', fontSize: '12px', padding: 0, position: 'absolute',
+            }}
             hoverText={error.message}
             disableDialog
           />
@@ -38,11 +43,28 @@ export const WalletIdenticon: React.FC<WalletIdenticonProps> = ({ account, name
   return (
     <div style={{ width: 20 }}>
       {account
-        ? <Identicon size={8} value={account.address} style={{ position: 'absolute', right: 2, top: 2 }} />
-        : <LoadingIcon style={{ fontSize: '10px', padding: 0, position: 'absolute', right: 2, top: 2 }} color="disabled" />}
+        ? (
+            <Identicon
+              size={8}
+              value={account.address}
+              style={{
+                position: 'absolute', right: 2, top: 2,
+              }}
+            />
+          )
+        : (
+            <LoadingIcon
+              style={{
+                fontSize: '10px', padding: 0, position: 'absolute', right: 2, top: 2,
+              }}
+              color="disabled"
+            />
+          )}
       <QuickTipButton
         size="small"
-        style={{ color: '#ffffff00', fontSize: '12px', padding: 0, position: 'absolute' }}
+        style={{
+          color: '#ffffff00', fontSize: '12px', padding: 0, position: 'absolute',
+        }}
         hoverText={`${name ?? ''}: ${account?.address ?? 'no address'}`}
         disableDialog
       />

package/src/contexts/SeedPhrase/Provider.tsx

@@ -2,7 +2,9 @@ import { generateMnemonic, validateMnemonic } from '@scure/bip39'
 // eslint-disable-next-line import-x/no-internal-modules
 import { wordlist } from '@scure/bip39/wordlists/english'
 import type { WithChildren } from '@xylabs/react-shared'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, {
+  useCallback, useEffect, useMemo, useState,
+} from 'react'
 
 import { SeedPhraseContext } from './Context.ts'
 
@@ -75,7 +77,8 @@ export const SeedPhraseProvider: React.FC<SeedPhraseProviderProps> = ({
   const validSeedPhrase = useMemo(() => validate?.(seedPhrase), [seedPhrase])
   const validPhrase = useMemo(() => validate?.(phrase), [phrase])
 
-  const value = useMemo(() => ({ handleCancelOverwrite,
+  const value = useMemo(() => ({
+    handleCancelOverwrite,
     handleChangeSeedPhrase,
     handleClear,
     handleGenerate,
@@ -88,7 +91,8 @@ export const SeedPhraseProvider: React.FC<SeedPhraseProviderProps> = ({
     setPhrase,
     validPhrase,
     validSeedPhrase,
-    validate }), [handleCancelOverwrite,
+    validate,
+  }), [handleCancelOverwrite,
     handleChangeSeedPhrase,
     handleClear,
     handleGenerate,

package/src/contexts/Wallet/Provider.tsx

@@ -1,7 +1,9 @@
 import { usePromise } from '@xylabs/react-promise'
 import type { WithChildren } from '@xylabs/react-shared'
 import type { WalletInstance } from '@xyo-network/wallet-model'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
 import { WalletContext } from './Context.ts'
 
@@ -26,11 +28,13 @@ export const WalletProvider: React.FC<WithChildren<WalletProviderProps>> = ({
 
   const [activeAccount = null] = usePromise(async () => await rootWallet?.derivePath(activeAccountIndex.toString()), [activeAccountIndex, rootWallet])
 
-  const value = useMemo(() => ({ activeAccount,
+  const value = useMemo(() => ({
+    activeAccount,
     activeAccountIndex,
     provided: true,
     rootWallet,
-    setActiveAccountIndex }), [activeAccount,
+    setActiveAccountIndex,
+  }), [activeAccount,
     activeAccountIndex,
     rootWallet,
     setActiveAccountIndex])

package/src/contexts/Wallet/usePromise.ts

@@ -2,7 +2,9 @@
 
 import { Mutex } from 'async-mutex'
 import type { DependencyList } from 'react'
-import { useEffect, useMemo, useState } from 'react'
+import {
+  useEffect, useMemo, useState,
+} from 'react'
 
 export enum State {
   pending = 'pending',