@xylabs/sdk-react 2.7.9 → 2.7.10
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/components/EthAccount/EthAccount.js +1 -1
- package/dist/components/EthAccount/EthAccount.js.map +1 -1
- package/dist/components/Identicon.d.ts +3 -2
- package/dist/components/Identicon.d.ts.map +1 -1
- package/dist/components/Identicon.js +21 -10
- package/dist/components/Identicon.js.map +1 -1
- package/package.json +1 -1
- package/src/components/EthAccount/EthAccount.tsx +1 -1
- package/src/components/Identicon.tsx +26 -13
|
@@ -39,7 +39,7 @@ const EthAccount = (_a) => {
|
|
|
39
39
|
? addressToDisplay.toString()
|
|
40
40
|
: addressToDisplay.toShortString();
|
|
41
41
|
// Note: We use the all zero address for spacing in case it is
|
|
42
|
-
return (_jsx(ButtonEx, Object.assign({ onClick: onClickLocal, title: `0x${address === null || address === void 0 ? void 0 : address.toHex()}` }, props, { children: _jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between", alignItems: "center" }, { children: [icon ? _jsx(Identicon, { size: iconSize, value: address === null || address === void 0 ? void 0 : address.toHex() }, void 0) : null, iconOnly ? null : (_jsxs(FlexRow, { children: [_jsx(Typography, Object.assign({ marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily, visibility: address ? 'inherit' : 'hidden' }, { children: testToDisplay }), void 0), address ? null : (_jsx(Typography, Object.assign({ position: "absolute", marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily }, { children: "-- --" }), void 0))] }, void 0)), isLocalAddress ? _jsx(FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" }), void 0) : null] }), void 0) }), void 0));
|
|
42
|
+
return (_jsx(ButtonEx, Object.assign({ onClick: onClickLocal, title: `0x${address === null || address === void 0 ? void 0 : address.toHex()}` }, props, { children: _jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between", alignItems: "center" }, { children: [icon && address ? _jsx(Identicon, { size: iconSize, value: address === null || address === void 0 ? void 0 : address.toHex() }, void 0) : null, iconOnly ? null : (_jsxs(FlexRow, { children: [_jsx(Typography, Object.assign({ marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily, visibility: address ? 'inherit' : 'hidden' }, { children: testToDisplay }), void 0), address ? null : (_jsx(Typography, Object.assign({ position: "absolute", marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily }, { children: "-- --" }), void 0))] }, void 0)), isLocalAddress ? _jsx(FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" }), void 0) : null] }), void 0) }), void 0));
|
|
43
43
|
};
|
|
44
44
|
export { EthAccount };
|
|
45
45
|
//# sourceMappingURL=EthAccount.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EthAccount.js","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.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,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGxC,MAAM,UAAU,GAA8B,CAAC,EAU9C,EAAE,EAAE;QAV0C,EAC7C,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,6BAA6B,EAC1C,WAAW,EACX,aAAa,OAEd,EADI,KAAK,cATqC,0GAU9C,CADS;IAER,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,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,EAAE,MAAK,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,CAAC,CAAA;QACtB,IAAI,WAAW,IAAI,OAAO,EAAE;YAC1B,MAAM,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,QAAQ,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAA;SAC5E;IACH,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAA;IAE9F,MAAM,aAAa,GACjB,aAAa,KAAK,MAAM;QACtB,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE;QAC7B,CAAC,CAAC,aAAa,KAAK,OAAO;YAC3B,CAAC,CAAC,gBAAgB,CAAC,aAAa,EAAE;YAClC,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE;gBAC7B,CAAC,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAA;IAEtC,8DAA8D;IAE9D,OAAO,CACL,KAAC,QAAQ,kBAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,EAAE,IAAM,KAAK,cACxE,MAAC,WAAW,kBAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,iBAC5D,IAAI,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,WAAI,CAAC,CAAC,CAAC,IAAI,
|
|
1
|
+
{"version":3,"file":"EthAccount.js","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import { FlexBoxProps } from './FlexBox';
|
|
3
|
+
interface IdenticonProps extends FlexBoxProps {
|
|
3
4
|
bg?: string;
|
|
4
5
|
className?: string;
|
|
5
6
|
count?: number;
|
|
6
7
|
fg?: string;
|
|
7
|
-
|
|
8
|
+
iconPadding?: number;
|
|
8
9
|
palette?: string[];
|
|
9
10
|
size?: number;
|
|
10
11
|
value?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../src/components/Identicon.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Identicon.d.ts","sourceRoot":"","sources":["../../src/components/Identicon.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,YAAY,EAAW,MAAM,WAAW,CAAA;AAMjD,UAAU,cAAe,SAAQ,YAAY;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAwDD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsBvC,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
|
|
@@ -1,11 +1,23 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
1
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
13
|
import md5 from 'md5';
|
|
3
14
|
import { useEffect, useRef } from 'react';
|
|
15
|
+
import { FlexRow } from './FlexBox';
|
|
4
16
|
const range = (n, in_min, in_max, out_min, out_max) => {
|
|
5
17
|
return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
|
|
6
18
|
};
|
|
7
19
|
const updateCanvas = (canvas, props) => {
|
|
8
|
-
const { value = '', size = 400, bg = 'transparent', count = 5, palette,
|
|
20
|
+
const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props;
|
|
9
21
|
let { fg } = props;
|
|
10
22
|
const hash = md5(value);
|
|
11
23
|
const block = Math.floor(size / count);
|
|
@@ -18,9 +30,8 @@ const updateCanvas = (canvas, props) => {
|
|
|
18
30
|
const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
|
|
19
31
|
fg = palette[index];
|
|
20
32
|
}
|
|
21
|
-
|
|
22
|
-
current.
|
|
23
|
-
current.height = block * count + pad;
|
|
33
|
+
current.width = block * count + iconPadding;
|
|
34
|
+
current.height = block * count + iconPadding;
|
|
24
35
|
const arr = hash.split('').map((el) => {
|
|
25
36
|
const parsedEl = parseInt(el, 16);
|
|
26
37
|
if (parsedEl < 8) {
|
|
@@ -42,23 +53,23 @@ const updateCanvas = (canvas, props) => {
|
|
|
42
53
|
row.forEach((el, j) => {
|
|
43
54
|
if (el) {
|
|
44
55
|
ctx.fillStyle = fg ? fg : '#' + hashcolor;
|
|
45
|
-
ctx.fillRect(block * i +
|
|
56
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
46
57
|
}
|
|
47
58
|
else {
|
|
48
59
|
ctx.fillStyle = bg;
|
|
49
|
-
ctx.fillRect(block * i +
|
|
60
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
|
|
50
61
|
}
|
|
51
62
|
});
|
|
52
63
|
});
|
|
53
64
|
}
|
|
54
65
|
};
|
|
55
|
-
const Identicon = (
|
|
56
|
-
|
|
66
|
+
const Identicon = (_a) => {
|
|
67
|
+
var { size = 400, className = 'identicon', bg, count, fg, iconPadding, palette, value } = _a, props = __rest(_a, ["size", "className", "bg", "count", "fg", "iconPadding", "palette", "value"]);
|
|
57
68
|
const canvas = useRef(null);
|
|
58
69
|
useEffect(() => {
|
|
59
|
-
updateCanvas(canvas,
|
|
70
|
+
updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
|
|
60
71
|
});
|
|
61
|
-
return _jsx("canvas", { className: className, ref: canvas, style: { height: size, width: size } }, void 0);
|
|
72
|
+
return (_jsx(FlexRow, Object.assign({}, props, { children: _jsx("canvas", { className: className, ref: canvas, style: { height: size, width: size } }, void 0) }), void 0));
|
|
62
73
|
};
|
|
63
74
|
export { Identicon };
|
|
64
75
|
//# sourceMappingURL=Identicon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Identicon.js","sourceRoot":"","sources":["../../src/components/Identicon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Identicon.js","sourceRoot":"","sources":["../../src/components/Identicon.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -50,7 +50,7 @@ const EthAccount: React.FC<EthAccountProps> = ({
|
|
|
50
50
|
return (
|
|
51
51
|
<ButtonEx onClick={onClickLocal} title={`0x${address?.toHex()}`} {...props}>
|
|
52
52
|
<FlexGrowRow justifyContent="space-between" alignItems="center">
|
|
53
|
-
{icon ? <Identicon size={iconSize} value={address?.toHex()} /> : null}
|
|
53
|
+
{icon && address ? <Identicon size={iconSize} value={address?.toHex()} /> : null}
|
|
54
54
|
{iconOnly ? null : (
|
|
55
55
|
<FlexRow>
|
|
56
56
|
<Typography
|
|
@@ -1,23 +1,25 @@
|
|
|
1
1
|
import md5 from 'md5'
|
|
2
2
|
import React, { useEffect, useRef } from 'react'
|
|
3
3
|
|
|
4
|
+
import { FlexBoxProps, FlexRow } from './FlexBox'
|
|
5
|
+
|
|
4
6
|
const range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {
|
|
5
7
|
return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
|
|
6
8
|
}
|
|
7
9
|
|
|
8
|
-
interface IdenticonProps {
|
|
10
|
+
interface IdenticonProps extends FlexBoxProps {
|
|
9
11
|
bg?: string
|
|
10
12
|
className?: string
|
|
11
13
|
count?: number
|
|
12
14
|
fg?: string
|
|
13
|
-
|
|
15
|
+
iconPadding?: number
|
|
14
16
|
palette?: string[]
|
|
15
17
|
size?: number
|
|
16
18
|
value?: string
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {
|
|
20
|
-
const { value = '', size = 400, bg = 'transparent', count = 5, palette,
|
|
22
|
+
const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props
|
|
21
23
|
let { fg } = props
|
|
22
24
|
const hash = md5(value)
|
|
23
25
|
const block = Math.floor(size / count)
|
|
@@ -34,9 +36,8 @@ const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: Identic
|
|
|
34
36
|
fg = palette[index]
|
|
35
37
|
}
|
|
36
38
|
|
|
37
|
-
|
|
38
|
-
current.
|
|
39
|
-
current.height = block * count + pad
|
|
39
|
+
current.width = block * count + iconPadding
|
|
40
|
+
current.height = block * count + iconPadding
|
|
40
41
|
const arr = hash.split('').map((el) => {
|
|
41
42
|
const parsedEl = parseInt(el, 16)
|
|
42
43
|
if (parsedEl < 8) {
|
|
@@ -61,26 +62,38 @@ const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: Identic
|
|
|
61
62
|
row.forEach((el, j) => {
|
|
62
63
|
if (el) {
|
|
63
64
|
ctx.fillStyle = fg ? fg : '#' + hashcolor
|
|
64
|
-
ctx.fillRect(block * i +
|
|
65
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
|
|
65
66
|
} else {
|
|
66
67
|
ctx.fillStyle = bg
|
|
67
|
-
ctx.fillRect(block * i +
|
|
68
|
+
ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
|
|
68
69
|
}
|
|
69
70
|
})
|
|
70
71
|
})
|
|
71
72
|
}
|
|
72
73
|
}
|
|
73
74
|
|
|
74
|
-
const Identicon: React.FC<IdenticonProps> = (
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
const Identicon: React.FC<IdenticonProps> = ({
|
|
76
|
+
size = 400,
|
|
77
|
+
className = 'identicon',
|
|
78
|
+
bg,
|
|
79
|
+
count,
|
|
80
|
+
fg,
|
|
81
|
+
iconPadding,
|
|
82
|
+
palette,
|
|
83
|
+
value,
|
|
84
|
+
...props
|
|
85
|
+
}) => {
|
|
77
86
|
const canvas = useRef<HTMLCanvasElement>(null)
|
|
78
87
|
|
|
79
88
|
useEffect(() => {
|
|
80
|
-
updateCanvas(canvas,
|
|
89
|
+
updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })
|
|
81
90
|
})
|
|
82
91
|
|
|
83
|
-
return
|
|
92
|
+
return (
|
|
93
|
+
<FlexRow {...props}>
|
|
94
|
+
<canvas className={className} ref={canvas} style={{ height: size, width: size }} />
|
|
95
|
+
</FlexRow>
|
|
96
|
+
)
|
|
84
97
|
}
|
|
85
98
|
|
|
86
99
|
export { Identicon }
|