@xyo-network/react-wallet 2.47.20 → 2.47.22

package/dist/esm/components/WalletAccountSelect/Select.js

@@ -6,15 +6,19 @@ import { useWallet } from '../../contexts';
 const arrayRange = (length, start = 0) => {
     return Array.from(Array(length).keys()).map((x) => x + start);
 };
-export const WalletAccountSelect = ({ favorites, iconOnly, iconSize = 24, icons, maxAccounts = 1, showFavorite = false, size, ...props }) => {
+export const WalletAccountSelect = ({ addressNames = {}, iconOnly, iconSize = 24, icons, maxAccounts = 1, showFavorite = false, size, ...props }) => {
     const { activeAccountIndex = 0, setActiveAccountIndex, wallet } = useWallet();
     const disabled = !wallet || activeAccountIndex === undefined;
     return (_jsx(_Fragment, { children: wallet ? (_jsx(SelectEx, { disabled: disabled, renderValue: (selected) => {
                 const account = wallet.deriveAccount(selected.toString());
-                return _jsx(AddressRenderRowBox, { address: account?.addressValue.hex, iconOnly: iconOnly, iconSize: iconSize, icons: icons });
+                const customName = addressNames[account?.addressValue.hex];
+                const favorite = account?.addressValue.hex in addressNames;
+                return (_jsx(AddressRenderRowBox, { address: account?.addressValue.hex, iconOnly: iconOnly, iconSize: iconSize, icons: icons, name: customName, favorite: favorite, showFavorite: showFavorite }));
             }, value: activeAccountIndex, onChange: (event) => setActiveAccountIndex?.(parseInt(`${event.target.value}`)), size: size, variant: "outlined", ...props, children: arrayRange(maxAccounts).map((index) => {
                 const account = wallet.deriveAccount(index.toString());
-                return (_jsx(MenuItem, { value: index, children: _jsx(AddressRenderRowBox, { address: account?.addressValue.hex, favorite: favorites?.includes(index), iconOnly: iconOnly, iconSize: iconSize, icons: icons, showFavorite: showFavorite }) }, account?.addressValue.hex));
+                const customName = addressNames[account?.addressValue.hex];
+                const favorite = account?.addressValue.hex in addressNames;
+                return (_jsx(MenuItem, { value: index, children: _jsx(AddressRenderRowBox, { address: account?.addressValue.hex, favorite: favorite, iconOnly: iconOnly, iconSize: iconSize, icons: icons, name: customName, showFavorite: showFavorite }) }, account?.addressValue.hex));
             }) })) : (_jsx(CircularProgress, { size: 24 })) }));
 };
 //# sourceMappingURL=Select.js.map

package/dist/esm/components/WalletAccountSelect/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAe,MAAM,eAAe,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAgC,MAAM,mCAAmC,CAAA;AAErG,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAS1C,MAAM,UAAU,GAAG,CAAC,MAAc,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE;IAC/C,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,CAAA;AAC/D,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,EAAE,EACb,KAAK,EACL,WAAW,GAAG,CAAC,EACf,YAAY,GAAG,KAAK,EACpB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,kBAAkB,GAAG,CAAC,EAAE,qBAAqB,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAA;IAC7E,MAAM,QAAQ,GAAG,CAAC,MAAM,IAAI,kBAAkB,KAAK,SAAS,CAAA;IAE5D,OAAO,CACL,4BACG,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,QAAQ,IACP,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACxB,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;gBACzD,OAAO,KAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CAAA;YAC1H,CAAC,EACD,KAAK,EAAE,kBAAkB,EACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,qBAAqB,EAAE,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,EAC/E,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,UAAU,KACd,KAAK,YAER,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACrC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;gBACtD,OAAO,CACL,KAAC,QAAQ,IAAiC,KAAK,EAAE,KAAK,YACpD,KAAC,mBAAmB,IAClB,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,GAAG,EAClC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,GAC1B,IARW,OAAO,EAAE,YAAY,CAAC,GAAG,CAS7B,CACZ,CAAA;YACH,CAAC,CAAC,GACO,CACZ,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,CAC/B,GACA,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/Select.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/WalletAccountSelect/SelectBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FlexCol } from '@xylabs/react-flexbox';
 import { WalletAccountSelect } from './Select';
-export const WalletAccountSelectBar = ({ favorites, iconOnly, iconSize, icons, maxAccounts = 1, showFavorite = false, size = 'small', ...props }) => {
-    return (_jsx(FlexCol, { alignItems: "stretch", ...props, children: _jsx(WalletAccountSelect, { favorites: favorites, fullWidth: true, showFavorite: showFavorite, iconSize: iconSize, iconOnly: iconOnly, icons: icons, maxAccounts: maxAccounts, size: size ?? 'small' }) }));
+export const WalletAccountSelectBar = ({ addressNames = {}, iconOnly, iconSize, icons, maxAccounts = 1, showFavorite = false, size = 'small', ...props }) => {
+    return (_jsx(FlexCol, { alignItems: "stretch", ...props, children: _jsx(WalletAccountSelect, { addressNames: addressNames, fullWidth: true, showFavorite: showFavorite, iconSize: iconSize, iconOnly: iconOnly, icons: icons, maxAccounts: maxAccounts, size: size ?? 'small' }) }));
 };
 //# sourceMappingURL=SelectBar.js.map

package/dist/esm/components/WalletAccountSelect/SelectBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBar.js","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/SelectBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAY9C,MAAM,CAAC,MAAM,sBAAsB,GAA0C,CAAC,EAC5E,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,CAAC,EACf,YAAY,GAAG,KAAK,EACpB,IAAI,GAAG,OAAO,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,YACrC,KAAC,mBAAmB,IAClB,SAAS,EAAE,SAAS,EACpB,SAAS,QACT,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,IAAI,OAAO,GACrB,GACM,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SelectBar.js","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/SelectBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAY9C,MAAM,CAAC,MAAM,sBAAsB,GAA0C,CAAC,EAC5E,YAAY,GAAG,EAAE,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,CAAC,EACf,YAAY,GAAG,KAAK,EACpB,IAAI,GAAG,OAAO,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,YACrC,KAAC,mBAAmB,IAClB,YAAY,EAAE,YAAY,EAC1B,SAAS,QACT,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,IAAI,OAAO,GACrB,GACM,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/types/components/WalletAccountSelect/Select.d.ts

@@ -3,7 +3,7 @@ import { SelectProps } from '@mui/material';
 import { AddressRenderRowBoxPropsBase } from '@xyo-network/react-address-render';
 type SharedAddressRenderRowBoxProps = Pick<AddressRenderRowBoxPropsBase, 'iconOnly' | 'iconSize' | 'icons' | 'showFavorite'>;
 export interface WalletAccountSelectProps extends SharedAddressRenderRowBoxProps, SelectProps<number> {
-    favorites?: number[];
+    addressNames?: Record<string, string | undefined>;
     maxAccounts?: number;
 }
 export declare const WalletAccountSelect: React.FC<WalletAccountSelectProps>;

package/dist/types/components/WalletAccountSelect/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA8B,WAAW,EAAE,MAAM,eAAe,CAAA;AAEvE,OAAO,EAAuB,4BAA4B,EAAE,MAAM,mCAAmC,CAAA;AAIrG,KAAK,8BAA8B,GAAG,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC,CAAA;AAE5H,MAAM,WAAW,wBAAyB,SAAQ,8BAA8B,EAAE,WAAW,CAAC,MAAM,CAAC;IACnG,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAMD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAiDlE,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA8B,WAAW,EAAE,MAAM,eAAe,CAAA;AAEvE,OAAO,EAAuB,4BAA4B,EAAE,MAAM,mCAAmC,CAAA;AAIrG,KAAK,8BAA8B,GAAG,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC,CAAA;AAE5H,MAAM,WAAW,wBAAyB,SAAQ,8BAA8B,EAAE,WAAW,CAAC,MAAM,CAAC;IACnG,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAMD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgElE,CAAA"}

package/dist/types/components/WalletAccountSelect/SelectBar.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { FlexBoxProps } from '@xylabs/react-flexbox';
 export interface WalletAccountSelectBarProps extends FlexBoxProps {
-    favorites?: number[];
+    addressNames?: Record<string, string | undefined>;
     iconOnly?: boolean;
     iconSize?: number;
     icons?: boolean;

package/dist/types/components/WalletAccountSelect/SelectBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/SelectBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAI7D,MAAM,WAAW,2BAA4B,SAAQ,YAAY;IAC/D,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAwBxE,CAAA"}
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/SelectBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAI7D,MAAM,WAAW,2BAA4B,SAAQ,YAAY;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAwBxE,CAAA"}

package/package.json

@@ -17,11 +17,11 @@
     "@xylabs/react-number-status": "^2.16.11",
     "@xylabs/react-select": "^2.16.11",
     "@xylabs/react-shared": "^2.16.11",
-    "@xyo-network/account": "^2.53.24",
-    "@xyo-network/account-model": "^2.53.24",
-    "@xyo-network/react-address-render": "^2.47.20",
-    "@xyo-network/react-network": "^2.47.20",
-    "@xyo-network/react-shared": "^2.47.20"
+    "@xyo-network/account": "^2.53.26",
+    "@xyo-network/account-model": "^2.53.26",
+    "@xyo-network/react-address-render": "^2.47.22",
+    "@xyo-network/react-network": "^2.47.22",
+    "@xyo-network/react-shared": "^2.47.22"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5",
@@ -37,7 +37,7 @@
     "@storybook/react": "^6.5.16",
     "@xylabs/ts-scripts-yarn3": "^2.16.1",
     "@xylabs/tsconfig-react": "^2.16.1",
-    "@xyo-network/react-storybook": "^2.47.20",
+    "@xyo-network/react-storybook": "^2.47.22",
     "require-from-string": "^2.0.2",
     "typescript": "^4.9.5"
   },
@@ -83,5 +83,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.47.20"
+  "version": "2.47.22"
 }

package/src/components/WalletAccountSelect/Select.tsx

@@ -7,7 +7,7 @@ import { useWallet } from '../../contexts'
 type SharedAddressRenderRowBoxProps = Pick<AddressRenderRowBoxPropsBase, 'iconOnly' | 'iconSize' | 'icons' | 'showFavorite'>
 
 export interface WalletAccountSelectProps extends SharedAddressRenderRowBoxProps, SelectProps<number> {
-  favorites?: number[]
+  addressNames?: Record<string, string | undefined>
   maxAccounts?: number
 }
 
@@ -16,7 +16,7 @@ const arrayRange = (length: number, start = 0) => {
 }
 
 export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({
-  favorites,
+  addressNames = {},
   iconOnly,
   iconSize = 24,
   icons,
@@ -35,7 +35,19 @@ export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({
           disabled={disabled}
           renderValue={(selected) => {
             const account = wallet.deriveAccount(selected.toString())
-            return <AddressRenderRowBox address={account?.addressValue.hex} iconOnly={iconOnly} iconSize={iconSize} icons={icons} />
+            const customName = addressNames[account?.addressValue.hex]
+            const favorite = account?.addressValue.hex in addressNames
+            return (
+              <AddressRenderRowBox
+                address={account?.addressValue.hex}
+                iconOnly={iconOnly}
+                iconSize={iconSize}
+                icons={icons}
+                name={customName}
+                favorite={favorite}
+                showFavorite={showFavorite}
+              />
+            )
           }}
           value={activeAccountIndex}
           onChange={(event) => setActiveAccountIndex?.(parseInt(`${event.target.value}`))}
@@ -45,14 +57,17 @@ export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({
         >
           {arrayRange(maxAccounts).map((index) => {
             const account = wallet.deriveAccount(index.toString())
+            const customName = addressNames[account?.addressValue.hex]
+            const favorite = account?.addressValue.hex in addressNames
             return (
               <MenuItem key={account?.addressValue.hex} value={index}>
                 <AddressRenderRowBox
                   address={account?.addressValue.hex}
-                  favorite={favorites?.includes(index)}
+                  favorite={favorite}
                   iconOnly={iconOnly}
                   iconSize={iconSize}
                   icons={icons}
+                  name={customName}
                   showFavorite={showFavorite}
                 />
               </MenuItem>

package/src/components/WalletAccountSelect/SelectBar.tsx

@@ -3,7 +3,7 @@ import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
 import { WalletAccountSelect } from './Select'
 
 export interface WalletAccountSelectBarProps extends FlexBoxProps {
-  favorites?: number[]
+  addressNames?: Record<string, string | undefined>
   iconOnly?: boolean
   iconSize?: number
   icons?: boolean
@@ -13,7 +13,7 @@ export interface WalletAccountSelectBarProps extends FlexBoxProps {
 }
 
 export const WalletAccountSelectBar: React.FC<WalletAccountSelectBarProps> = ({
-  favorites,
+  addressNames = {},
   iconOnly,
   iconSize,
   icons,
@@ -25,7 +25,7 @@ export const WalletAccountSelectBar: React.FC<WalletAccountSelectBarProps> = ({
   return (
     <FlexCol alignItems="stretch" {...props}>
       <WalletAccountSelect
-        favorites={favorites}
+        addressNames={addressNames}
         fullWidth
         showFavorite={showFavorite}
         iconSize={iconSize}

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

@@ -2,9 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { HDWallet } from '@xyo-network/account'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 
-import { WalletProvider } from '../../contexts'
+import { WalletProvider, WalletRootPath } from '../../contexts'
 import { WalletAccountSelectBar } from './SelectBar'
 
+const defaultWallet = HDWallet.fromMnemonic(DefaultSeedPhrase)
+
 const StorybookEntry = {
   argTypes: {},
   component: WalletAccountSelectBar,
@@ -22,7 +24,7 @@ const Template: ComponentStory<typeof WalletAccountSelectBar> = (args) => {
 
 const WithWalletTemplate: ComponentStory<typeof WalletAccountSelectBar> = (args) => {
   return (
-    <WalletProvider defaultWallet={HDWallet.fromMnemonic(DefaultSeedPhrase)}>
+    <WalletProvider defaultWallet={defaultWallet}>
       <WalletAccountSelectBar {...args} />
     </WalletProvider>
   )
@@ -41,7 +43,17 @@ const WithAdditionalAccounts = WithWalletTemplate.bind({})
 WithAdditionalAccounts.args = { icons: true, maxAccounts: 10 }
 
 const WithAccountFavorites = WithWalletTemplate.bind({})
-WithAccountFavorites.args = { favorites: [0, 3, 9, 10], icons: true, maxAccounts: 10, showFavorite: true }
+const defaultWalletAtIndex = defaultWallet.derivePath(WalletRootPath)
+WithAccountFavorites.args = {
+  addressNames: {
+    [defaultWalletAtIndex.deriveAccount('0').addressValue.hex]: 'first address',
+    [defaultWalletAtIndex.deriveAccount('3').addressValue.hex]: undefined,
+    [defaultWalletAtIndex.deriveAccount('5').addressValue.hex]: 'sixth address',
+  },
+  icons: true,
+  maxAccounts: 10,
+  showFavorite: true,
+}
 
 export { Default, WithAccountFavorites, WithAdditionalAccounts, WithWallet, WithWalletIcon }