@xyo-network/react-wallet 2.25.63 → 2.25.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/WalletAccountSelect/Select.js +5 -3
- package/dist/esm/components/WalletAccountSelect/Select.js.map +1 -1
- package/package.json +10 -9
- package/src/components/WalletAccountSelect/Select.tsx +13 -2
- package/src/components/WalletAccountSelect/WalletAccountSelectBar.stories.tsx +4 -1
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { MenuItem } from '@mui/material';
|
|
3
3
|
import { SelectEx } from '@xylabs/react-common';
|
|
4
4
|
import { EthAccountBox } from '@xylabs/react-crypto';
|
|
5
|
+
import { FlexRow } from '@xylabs/react-flexbox';
|
|
6
|
+
import { Identicon } from '@xylabs/react-identicon';
|
|
5
7
|
import { EthAddress } from '@xylabs/sdk-js';
|
|
6
8
|
import { useWallet } from '../../contexts';
|
|
7
9
|
const arrayRange = (length, start = 0) => {
|
|
8
10
|
return Array.from(Array(length).keys()).map((x) => x + start);
|
|
9
11
|
};
|
|
10
|
-
export const WalletAccountSelect = ({ size, iconSize, icons, iconOnly, ...props }) => {
|
|
12
|
+
export const WalletAccountSelect = ({ size, iconSize = 24, icons, iconOnly, ...props }) => {
|
|
11
13
|
const { wallet, activeAccountIndex = 0, setActiveAccountIndex } = useWallet();
|
|
12
14
|
return (_jsx(SelectEx, { renderValue: (selected) => {
|
|
13
15
|
const account = wallet?.getAccount(parseInt(`${selected}`));
|
|
14
|
-
return _jsx(EthAccountBox, { alignItems: "stretch", iconOnly: iconOnly,
|
|
16
|
+
return (_jsxs(FlexRow, { justifyContent: "flex-start", gap: 1, children: [icons ? (_jsx(FlexRow, { children: _jsx(Identicon, { size: iconSize, value: account?.addressValue.hex }) })) : null, _jsx(EthAccountBox, { alignItems: "stretch", iconOnly: iconOnly, address: EthAddress.fromString(account?.addressValue.hex) })] }));
|
|
15
17
|
}, value: activeAccountIndex, onChange: (event) => setActiveAccountIndex?.(parseInt(`${event.target.value}`)), size: size, variant: "outlined", ...props, children: wallet
|
|
16
18
|
? arrayRange(10).map((index) => {
|
|
17
19
|
const account = wallet?.getAccount(index);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAe,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAQ1C,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,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/WalletAccountSelect/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAe,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAQ1C,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,EAAE,IAAI,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5H,MAAM,EAAE,MAAM,EAAE,kBAAkB,GAAG,CAAC,EAAE,qBAAqB,EAAE,GAAG,SAAS,EAAE,CAAA;IAE7E,OAAO,CACL,KAAC,QAAQ,IACP,WAAW,EAAE,CAAC,QAAQ,EAAE,EAAE;YACxB,MAAM,OAAO,GAAG,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAA;YAC3D,OAAO,CACL,MAAC,OAAO,IAAC,cAAc,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,aACxC,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,OAAO,cACN,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,CAAC,GAAG,GAAI,GACvD,CACX,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,aAAa,IAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,CAAC,GAAI,IAC7G,CACX,CAAA;QACH,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,MAAM;YACL,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC3B,MAAM,OAAO,GAAG,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CAAA;gBACzC,OAAO,CACL,KAAC,QAAQ,IAAa,KAAK,EAAE,KAAK,YAChC,KAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,GAAI,IAD/F,KAAK,CAET,CACZ,CAAA;YACH,CAAC,CAAC;YACJ,CAAC,CAAC,IAAI,GACC,CACZ,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -13,14 +13,15 @@
|
|
|
13
13
|
"@emotion/react": "^11.9.3",
|
|
14
14
|
"@emotion/styled": "^11.9.3",
|
|
15
15
|
"@mui/material": "^5.8.4",
|
|
16
|
-
"@xylabs/react-common": "^2.
|
|
17
|
-
"@xylabs/react-crypto": "^2.
|
|
18
|
-
"@xylabs/react-flexbox": "^2.
|
|
19
|
-
"@xylabs/react-
|
|
16
|
+
"@xylabs/react-common": "^2.14.4",
|
|
17
|
+
"@xylabs/react-crypto": "^2.14.4",
|
|
18
|
+
"@xylabs/react-flexbox": "^2.14.4",
|
|
19
|
+
"@xylabs/react-identicon": "^2.14.4",
|
|
20
|
+
"@xylabs/react-shared": "^2.14.4",
|
|
20
21
|
"@xylabs/sdk-js": "^2.5.7",
|
|
21
22
|
"@xyo-network/core": "^2.20.45",
|
|
22
|
-
"@xyo-network/react-network": "^2.25.
|
|
23
|
-
"@xyo-network/react-shared": "^2.25.
|
|
23
|
+
"@xyo-network/react-network": "^2.25.66",
|
|
24
|
+
"@xyo-network/react-shared": "^2.25.66",
|
|
24
25
|
"react": "^18.2.0",
|
|
25
26
|
"react-dom": "^18.2.0",
|
|
26
27
|
"react-router-dom": "^6.3.0",
|
|
@@ -66,8 +67,8 @@
|
|
|
66
67
|
"resolutions": {
|
|
67
68
|
"@storybook/react/webpack": "^5",
|
|
68
69
|
"bn.js": "^5.2.0",
|
|
69
|
-
"react": "^18.
|
|
70
|
-
"react-dom": "^18.
|
|
70
|
+
"react": "^18.2.0",
|
|
71
|
+
"react-dom": "^18.2.0",
|
|
71
72
|
"webpack": "^5"
|
|
72
73
|
},
|
|
73
74
|
"publishConfig": {
|
|
@@ -83,6 +84,6 @@
|
|
|
83
84
|
},
|
|
84
85
|
"sideEffects": false,
|
|
85
86
|
"types": "dist/esm/index.d.ts",
|
|
86
|
-
"version": "2.25.
|
|
87
|
+
"version": "2.25.66",
|
|
87
88
|
"packageManager": "yarn@3.1.1"
|
|
88
89
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { MenuItem, SelectProps } from '@mui/material'
|
|
2
2
|
import { SelectEx } from '@xylabs/react-common'
|
|
3
3
|
import { EthAccountBox } from '@xylabs/react-crypto'
|
|
4
|
+
import { FlexRow } from '@xylabs/react-flexbox'
|
|
5
|
+
import { Identicon } from '@xylabs/react-identicon'
|
|
4
6
|
import { EthAddress } from '@xylabs/sdk-js'
|
|
5
7
|
|
|
6
8
|
import { useWallet } from '../../contexts'
|
|
@@ -15,14 +17,23 @@ const arrayRange = (length: number, start = 0) => {
|
|
|
15
17
|
return Array.from(Array(length).keys()).map((x) => x + start)
|
|
16
18
|
}
|
|
17
19
|
|
|
18
|
-
export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({ size, iconSize, icons, iconOnly, ...props }) => {
|
|
20
|
+
export const WalletAccountSelect: React.FC<WalletAccountSelectProps> = ({ size, iconSize = 24, icons, iconOnly, ...props }) => {
|
|
19
21
|
const { wallet, activeAccountIndex = 0, setActiveAccountIndex } = useWallet()
|
|
20
22
|
|
|
21
23
|
return (
|
|
22
24
|
<SelectEx
|
|
23
25
|
renderValue={(selected) => {
|
|
24
26
|
const account = wallet?.getAccount(parseInt(`${selected}`))
|
|
25
|
-
return
|
|
27
|
+
return (
|
|
28
|
+
<FlexRow justifyContent="flex-start" gap={1}>
|
|
29
|
+
{icons ? (
|
|
30
|
+
<FlexRow>
|
|
31
|
+
<Identicon size={iconSize} value={account?.addressValue.hex} />
|
|
32
|
+
</FlexRow>
|
|
33
|
+
) : null}
|
|
34
|
+
<EthAccountBox alignItems="stretch" iconOnly={iconOnly} address={EthAddress.fromString(account?.addressValue.hex)} />
|
|
35
|
+
</FlexRow>
|
|
36
|
+
)
|
|
26
37
|
}}
|
|
27
38
|
value={activeAccountIndex}
|
|
28
39
|
onChange={(event) => setActiveAccountIndex?.(parseInt(`${event.target.value}`))}
|
|
@@ -34,7 +34,10 @@ Default.args = {}
|
|
|
34
34
|
const WithWallet = WithWalletTemplate.bind({})
|
|
35
35
|
WithWallet.args = {}
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const WithWalletIcon = WithWalletTemplate.bind({})
|
|
38
|
+
WithWalletIcon.args = { icons: true }
|
|
39
|
+
|
|
40
|
+
export { Default, WithWallet, WithWalletIcon }
|
|
38
41
|
|
|
39
42
|
// eslint-disable-next-line import/no-default-export
|
|
40
43
|
export default StorybookEntry
|