@xylabs/sdk-react 2.12.7 → 2.12.8
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/cjs/components/EthAccount/EthAccountBox.js +2 -2
- package/dist/cjs/components/EthAccount/EthAccountBox.js.map +1 -1
- package/dist/esm/components/EthAccount/EthAccountBox.js +2 -2
- package/dist/esm/components/EthAccount/EthAccountBox.js.map +1 -1
- package/package.json +1 -1
- package/src/components/EthAccount/EthAccountBox.stories.tsx +1 -1
- package/src/components/EthAccount/EthAccountBox.tsx +6 -3
|
@@ -11,7 +11,7 @@ const hooks_1 = require("../../hooks");
|
|
|
11
11
|
const FlexBox_1 = require("../FlexBox");
|
|
12
12
|
const Identicon_1 = require("../Identicon");
|
|
13
13
|
const EthAccountBox = (_a) => {
|
|
14
|
-
var { address, icon = false, iconSize = 16, iconOnly = false, shortenedLength, addressLength = 'auto', fontFamily = '"Source Code Pro",monospace' } = _a, props = tslib_1.__rest(_a, ["address", "icon", "iconSize", "iconOnly", "shortenedLength", "addressLength", "fontFamily"]);
|
|
14
|
+
var { address, icon = false, iconSize = 16, iconOnly = false, shortenedLength, height, addressLength = 'auto', fontFamily = '"Source Code Pro",monospace' } = _a, props = tslib_1.__rest(_a, ["address", "icon", "iconSize", "iconOnly", "shortenedLength", "height", "addressLength", "fontFamily"]);
|
|
15
15
|
const { localAddress } = (0, react_1.useContext)(contexts_1.EthersContext);
|
|
16
16
|
const theme = (0, material_1.useTheme)();
|
|
17
17
|
const large = (0, hooks_1.useMediaQuery)(theme.breakpoints.up('md'));
|
|
@@ -27,7 +27,7 @@ const EthAccountBox = (_a) => {
|
|
|
27
27
|
: addressToDisplay.toShortString()
|
|
28
28
|
: '-- --';
|
|
29
29
|
// Note: We use the all zero address for spacing in case it is
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox_1.FlexRow, Object.assign({ justifyContent: "space-between", alignItems: "
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox_1.FlexRow, Object.assign({ height: height, justifyContent: "space-between", alignItems: "stretch", minHeight: theme.spacing(3) }, props, { children: [icon ? ((0, jsx_runtime_1.jsx)(Identicon_1.Identicon, { minHeight: height !== null && height !== void 0 ? height : theme.spacing(3), minWidth: height !== null && height !== void 0 ? height : theme.spacing(3), bgcolor: theme.palette.secondary.main, size: iconSize, value: address === null || address === void 0 ? void 0 : address.toHex() })) : null, iconOnly ? null : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ alignSelf: "center", marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily }, { children: textToDisplay }))), isLocalAddress ? (0, jsx_runtime_1.jsx)(FlexBox_1.FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" })) : null] })));
|
|
31
31
|
};
|
|
32
32
|
exports.EthAccountBox = EthAccountBox;
|
|
33
33
|
//# sourceMappingURL=EthAccountBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EthAccountBox.js","sourceRoot":"","sources":["../../../../src/components/EthAccount/EthAccountBox.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAoD;AACpD,2CAAqD;AACrD,iCAAkC;AAElC,6CAA8C;AAC9C,uCAA2C;AAC3C,wCAAkD;AAClD,4CAAwC;AAGjC,MAAM,aAAa,GAA6C,CAAC,
|
|
1
|
+
{"version":3,"file":"EthAccountBox.js","sourceRoot":"","sources":["../../../../src/components/EthAccount/EthAccountBox.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAoD;AACpD,2CAAqD;AACrD,iCAAkC;AAElC,6CAA8C;AAC9C,uCAA2C;AAC3C,wCAAkD;AAClD,4CAAwC;AAGjC,MAAM,aAAa,GAA6C,CAAC,EAUvE,EAAE,EAAE;QAVmE,EACtE,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,MAAM,EACN,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,6BAA6B,OAE3C,EADI,KAAK,sBAT8D,uGAUvE,CADS;IAER,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAA;IAClD,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IAExB,MAAM,KAAK,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEvD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,EAAE,MAAK,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExF,MAAM,gBAAgB,GAAG,IAAA,iBAAQ,EAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,mBAAU,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAA;IAE9F,MAAM,aAAa,GAAG,OAAO;QAC3B,CAAC,CAAC,aAAa,KAAK,MAAM;YACxB,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE;YAC7B,CAAC,CAAC,aAAa,KAAK,OAAO;gBAC3B,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,eAAe,CAAC;gBACjD,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE;oBAC7B,CAAC,CAAC,gBAAgB,CAAC,aAAa,EAAE;QACpC,CAAC,CAAC,OAAO,CAAA;IAEX,8DAA8D;IAE9D,OAAO,CACL,wBAAC,iBAAO,kBAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAM,KAAK,eAChH,IAAI,CAAC,CAAC,CAAC,CACN,uBAAC,qBAAS,IAAC,SAAS,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,GAAI,CAC3K,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,uBAAC,qBAAU,kBAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,UAAU,gBAC5F,aAAa,IACH,CACd,EACA,cAAc,CAAC,CAAC,CAAC,uBAAC,iBAAO,kBAAC,UAAU,EAAE,GAAG,2BAAiB,CAAC,CAAC,CAAC,IAAI,KAC1D,CACX,CAAA;AACH,CAAC,CAAA;AA7CY,QAAA,aAAa,iBA6CzB"}
|
|
@@ -6,7 +6,7 @@ import { EthersContext } from '../../contexts';
|
|
|
6
6
|
import { useMediaQuery } from '../../hooks';
|
|
7
7
|
import { FlexRow } from '../FlexBox';
|
|
8
8
|
import { Identicon } from '../Identicon';
|
|
9
|
-
export const EthAccountBox = ({ address, icon = false, iconSize = 16, iconOnly = false, shortenedLength, addressLength = 'auto', fontFamily = '"Source Code Pro",monospace', ...props }) => {
|
|
9
|
+
export const EthAccountBox = ({ address, icon = false, iconSize = 16, iconOnly = false, shortenedLength, height, addressLength = 'auto', fontFamily = '"Source Code Pro",monospace', ...props }) => {
|
|
10
10
|
const { localAddress } = useContext(EthersContext);
|
|
11
11
|
const theme = useTheme();
|
|
12
12
|
const large = useMediaQuery(theme.breakpoints.up('md'));
|
|
@@ -22,6 +22,6 @@ export const EthAccountBox = ({ address, icon = false, iconSize = 16, iconOnly =
|
|
|
22
22
|
: addressToDisplay.toShortString()
|
|
23
23
|
: '-- --';
|
|
24
24
|
// Note: We use the all zero address for spacing in case it is
|
|
25
|
-
return (_jsxs(FlexRow, { justifyContent: "space-between", alignItems: "
|
|
25
|
+
return (_jsxs(FlexRow, { height: height, justifyContent: "space-between", alignItems: "stretch", minHeight: theme.spacing(3), ...props, children: [icon ? (_jsx(Identicon, { minHeight: height ?? theme.spacing(3), minWidth: height ?? theme.spacing(3), bgcolor: theme.palette.secondary.main, size: iconSize, value: address?.toHex() })) : null, iconOnly ? null : (_jsx(Typography, { alignSelf: "center", marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily, children: textToDisplay })), isLocalAddress ? _jsx(FlexRow, { marginLeft: 0.5, children: "(You)" }) : null] }));
|
|
26
26
|
};
|
|
27
27
|
//# sourceMappingURL=EthAccountBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EthAccountBox.js","sourceRoot":"","sources":["../../../../src/components/EthAccount/EthAccountBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAgB,OAAO,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGxC,MAAM,CAAC,MAAM,aAAa,GAA6C,CAAC,EACtE,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,6BAA6B,EAC1C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEvD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExF,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,IAAI,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAA;IAE9F,MAAM,aAAa,GAAG,OAAO;QAC3B,CAAC,CAAC,aAAa,KAAK,MAAM;YACxB,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE;YAC7B,CAAC,CAAC,aAAa,KAAK,OAAO;gBAC3B,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,eAAe,CAAC;gBACjD,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE;oBAC7B,CAAC,CAAC,gBAAgB,CAAC,aAAa,EAAE;QACpC,CAAC,CAAC,OAAO,CAAA;IAEX,8DAA8D;IAE9D,OAAO,CACL,MAAC,OAAO,IAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,
|
|
1
|
+
{"version":3,"file":"EthAccountBox.js","sourceRoot":"","sources":["../../../../src/components/EthAccount/EthAccountBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAgB,OAAO,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGxC,MAAM,CAAC,MAAM,aAAa,GAA6C,CAAC,EACtE,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,MAAM,EACN,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,6BAA6B,EAC1C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEvD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExF,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,IAAI,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAA;IAE9F,MAAM,aAAa,GAAG,OAAO;QAC3B,CAAC,CAAC,aAAa,KAAK,MAAM;YACxB,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE;YAC7B,CAAC,CAAC,aAAa,KAAK,OAAO;gBAC3B,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,eAAe,CAAC;gBACjD,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE;oBAC7B,CAAC,CAAC,gBAAgB,CAAC,aAAa,EAAE;QACpC,CAAC,CAAC,OAAO,CAAA;IAEX,8DAA8D;IAE9D,OAAO,CACL,MAAC,OAAO,IAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAM,KAAK,aAChH,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,SAAS,IAAC,SAAS,EAAE,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,GAAI,CAC3K,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,KAAC,UAAU,IAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,UAAU,YAC5F,aAAa,GACH,CACd,EACA,cAAc,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,UAAU,EAAE,GAAG,sBAAiB,CAAC,CAAC,CAAC,IAAI,IAC1D,CACX,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -14,6 +14,7 @@ export const EthAccountBox: React.FC<EthAccountProps & FlexBoxProps> = ({
|
|
|
14
14
|
iconSize = 16,
|
|
15
15
|
iconOnly = false,
|
|
16
16
|
shortenedLength,
|
|
17
|
+
height,
|
|
17
18
|
addressLength = 'auto',
|
|
18
19
|
fontFamily = '"Source Code Pro",monospace',
|
|
19
20
|
...props
|
|
@@ -40,10 +41,12 @@ export const EthAccountBox: React.FC<EthAccountProps & FlexBoxProps> = ({
|
|
|
40
41
|
// Note: We use the all zero address for spacing in case it is
|
|
41
42
|
|
|
42
43
|
return (
|
|
43
|
-
<FlexRow justifyContent="space-between" alignItems="
|
|
44
|
-
{icon ?
|
|
44
|
+
<FlexRow height={height} justifyContent="space-between" alignItems="stretch" minHeight={theme.spacing(3)} {...props}>
|
|
45
|
+
{icon ? (
|
|
46
|
+
<Identicon minHeight={height ?? theme.spacing(3)} minWidth={height ?? theme.spacing(3)} bgcolor={theme.palette.secondary.main} size={iconSize} value={address?.toHex()} />
|
|
47
|
+
) : null}
|
|
45
48
|
{iconOnly ? null : (
|
|
46
|
-
<Typography marginLeft={icon ? 1 : 0} variant="body1" fontFamily={fontFamily}>
|
|
49
|
+
<Typography alignSelf="center" marginLeft={icon ? 1 : 0} variant="body1" fontFamily={fontFamily}>
|
|
47
50
|
{textToDisplay}
|
|
48
51
|
</Typography>
|
|
49
52
|
)}
|