@talismn/orb 0.3.6 → 0.4.1
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/index.d.mts +17 -3
- package/dist/index.d.ts +17 -3
- package/dist/index.js +54 -74
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +53 -74
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -6
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import * as _talismn_crypto from '@talismn/crypto';
|
|
3
|
+
import { AccountPlatform } from '@talismn/crypto';
|
|
3
4
|
|
|
4
5
|
type TalismanOrbProps = {
|
|
5
6
|
seed: string;
|
|
@@ -13,7 +14,6 @@ declare const TalismanOrb: FC<TalismanOrbProps>;
|
|
|
13
14
|
declare const TalismanOrbRectangle: FC<TalismanOrbProps>;
|
|
14
15
|
|
|
15
16
|
declare const useTalismanOrb: (seed: string) => {
|
|
16
|
-
id: string;
|
|
17
17
|
bgColor1: string;
|
|
18
18
|
bgColor2: string;
|
|
19
19
|
glowColor: string;
|
|
@@ -21,11 +21,25 @@ declare const useTalismanOrb: (seed: string) => {
|
|
|
21
21
|
cx: number;
|
|
22
22
|
cy: number;
|
|
23
23
|
platform: _talismn_crypto.AccountPlatform;
|
|
24
|
+
id: string;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
type TalismanOrbData = {
|
|
28
|
+
bgColor1: string;
|
|
29
|
+
bgColor2: string;
|
|
30
|
+
glowColor: string;
|
|
31
|
+
transform: string;
|
|
32
|
+
cx: number;
|
|
33
|
+
cy: number;
|
|
34
|
+
platform: AccountPlatform;
|
|
24
35
|
};
|
|
36
|
+
/** Pure computation of orb visual data from a seed (address). No React dependency. */
|
|
37
|
+
declare const computeTalismanOrb: (seed: string) => TalismanOrbData;
|
|
25
38
|
|
|
26
39
|
/**
|
|
27
|
-
* Returns a base64 encoded data url for the Talisman Orb svg
|
|
40
|
+
* Returns a base64 encoded data url for the Talisman Orb svg.
|
|
41
|
+
* Pure implementation — no React or react-dom dependency.
|
|
28
42
|
*/
|
|
29
43
|
declare const getTalismanOrbDataUrl: (address: string) => `data:image/svg+xml;base64,${string}`;
|
|
30
44
|
|
|
31
|
-
export { TalismanOrb, type TalismanOrbProps, TalismanOrbRectangle, getTalismanOrbDataUrl, useTalismanOrb };
|
|
45
|
+
export { TalismanOrb, type TalismanOrbData, type TalismanOrbProps, TalismanOrbRectangle, computeTalismanOrb, getTalismanOrbDataUrl, useTalismanOrb };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import * as _talismn_crypto from '@talismn/crypto';
|
|
3
|
+
import { AccountPlatform } from '@talismn/crypto';
|
|
3
4
|
|
|
4
5
|
type TalismanOrbProps = {
|
|
5
6
|
seed: string;
|
|
@@ -13,7 +14,6 @@ declare const TalismanOrb: FC<TalismanOrbProps>;
|
|
|
13
14
|
declare const TalismanOrbRectangle: FC<TalismanOrbProps>;
|
|
14
15
|
|
|
15
16
|
declare const useTalismanOrb: (seed: string) => {
|
|
16
|
-
id: string;
|
|
17
17
|
bgColor1: string;
|
|
18
18
|
bgColor2: string;
|
|
19
19
|
glowColor: string;
|
|
@@ -21,11 +21,25 @@ declare const useTalismanOrb: (seed: string) => {
|
|
|
21
21
|
cx: number;
|
|
22
22
|
cy: number;
|
|
23
23
|
platform: _talismn_crypto.AccountPlatform;
|
|
24
|
+
id: string;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
type TalismanOrbData = {
|
|
28
|
+
bgColor1: string;
|
|
29
|
+
bgColor2: string;
|
|
30
|
+
glowColor: string;
|
|
31
|
+
transform: string;
|
|
32
|
+
cx: number;
|
|
33
|
+
cy: number;
|
|
34
|
+
platform: AccountPlatform;
|
|
24
35
|
};
|
|
36
|
+
/** Pure computation of orb visual data from a seed (address). No React dependency. */
|
|
37
|
+
declare const computeTalismanOrb: (seed: string) => TalismanOrbData;
|
|
25
38
|
|
|
26
39
|
/**
|
|
27
|
-
* Returns a base64 encoded data url for the Talisman Orb svg
|
|
40
|
+
* Returns a base64 encoded data url for the Talisman Orb svg.
|
|
41
|
+
* Pure implementation — no React or react-dom dependency.
|
|
28
42
|
*/
|
|
29
43
|
declare const getTalismanOrbDataUrl: (address: string) => `data:image/svg+xml;base64,${string}`;
|
|
30
44
|
|
|
31
|
-
export { TalismanOrb, type TalismanOrbProps, TalismanOrbRectangle, getTalismanOrbDataUrl, useTalismanOrb };
|
|
45
|
+
export { TalismanOrb, type TalismanOrbData, type TalismanOrbProps, TalismanOrbRectangle, computeTalismanOrb, getTalismanOrbDataUrl, useTalismanOrb };
|
package/dist/index.js
CHANGED
|
@@ -32,6 +32,7 @@ var index_exports = {};
|
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
TalismanOrb: () => TalismanOrb,
|
|
34
34
|
TalismanOrbRectangle: () => TalismanOrbRectangle,
|
|
35
|
+
computeTalismanOrb: () => computeTalismanOrb,
|
|
35
36
|
getTalismanOrbDataUrl: () => getTalismanOrbDataUrl,
|
|
36
37
|
useTalismanOrb: () => useTalismanOrb
|
|
37
38
|
});
|
|
@@ -59,50 +60,7 @@ var TalismanOrbLogo = ({ platform }) => {
|
|
|
59
60
|
)
|
|
60
61
|
] });
|
|
61
62
|
case "polkadot":
|
|
62
|
-
return
|
|
63
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
-
"path",
|
|
65
|
-
{
|
|
66
|
-
d: "M9.99937 4.4612C12.1176 4.4612 13.8347 3.46253 13.8347 2.2306C13.8347 0.998674 12.1176 0 9.99937 0C7.88119 0 6.16406 0.998674 6.16406 2.2306C6.16406 3.46253 7.88119 4.4612 9.99937 4.4612Z",
|
|
67
|
-
fill: "white"
|
|
68
|
-
}
|
|
69
|
-
),
|
|
70
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
|
-
"path",
|
|
72
|
-
{
|
|
73
|
-
d: "M9.99937 21.2683C12.1176 21.2683 13.8347 20.2697 13.8347 19.0377C13.8347 17.8058 12.1176 16.8071 9.99937 16.8071C7.88119 16.8071 6.16406 17.8058 6.16406 19.0377C6.16406 20.2697 7.88119 21.2683 9.99937 21.2683Z",
|
|
74
|
-
fill: "white"
|
|
75
|
-
}
|
|
76
|
-
),
|
|
77
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
78
|
-
"path",
|
|
79
|
-
{
|
|
80
|
-
d: "M4.65427 7.54892C5.71336 5.71457 5.70649 3.72787 4.63892 3.11149C3.57135 2.49511 1.84735 3.48246 0.788259 5.31681C-0.270832 7.15115 -0.263958 9.13786 0.803612 9.75424C1.87118 10.3706 3.59518 9.38326 4.65427 7.54892Z",
|
|
81
|
-
fill: "white"
|
|
82
|
-
}
|
|
83
|
-
),
|
|
84
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
-
"path",
|
|
86
|
-
{
|
|
87
|
-
d: "M19.2083 15.9515C20.2674 14.1171 20.2611 12.1307 19.1943 11.5148C18.1274 10.8988 16.404 11.8865 15.3449 13.7209C14.2858 15.5552 14.2921 17.5416 15.3589 18.1575C16.4258 18.7735 18.1492 17.7858 19.2083 15.9515Z",
|
|
88
|
-
fill: "white"
|
|
89
|
-
}
|
|
90
|
-
),
|
|
91
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
-
"path",
|
|
93
|
-
{
|
|
94
|
-
d: "M4.6399 18.1571C5.70747 17.5407 5.71434 15.554 4.65525 13.7196C3.59616 11.8853 1.87216 10.8979 0.804589 11.5143C-0.262981 12.1307 -0.269855 14.1174 0.789235 15.9517C1.84833 17.7861 3.57233 18.7734 4.6399 18.1571Z",
|
|
95
|
-
fill: "white"
|
|
96
|
-
}
|
|
97
|
-
),
|
|
98
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
-
"path",
|
|
100
|
-
{
|
|
101
|
-
d: "M19.1952 9.75475C20.2621 9.13878 20.2684 7.15241 19.2093 5.31807C18.1502 3.48372 16.4268 2.49603 15.3599 3.11199C14.2931 3.72796 14.2868 5.71433 15.3459 7.54867C16.405 9.38302 18.1284 10.3707 19.1952 9.75475Z",
|
|
102
|
-
fill: "white"
|
|
103
|
-
}
|
|
104
|
-
)
|
|
105
|
-
] });
|
|
63
|
+
return null;
|
|
106
64
|
case "solana":
|
|
107
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { opacity: "0.75", className: "orb-type", transform: "scale(0.45) translate(37.5, 37.5)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
66
|
"path",
|
|
@@ -117,10 +75,12 @@ var TalismanOrbLogo = ({ platform }) => {
|
|
|
117
75
|
};
|
|
118
76
|
|
|
119
77
|
// src/components/useTalismanOrb.ts
|
|
78
|
+
var import_react = require("react");
|
|
79
|
+
|
|
80
|
+
// src/computeTalismanOrb.ts
|
|
120
81
|
var import_crypto = require("@talismn/crypto");
|
|
121
82
|
var import_blueimp_md5 = __toESM(require("blueimp-md5"));
|
|
122
83
|
var import_color = __toESM(require("color"));
|
|
123
|
-
var import_react = require("react");
|
|
124
84
|
var djb2 = (str) => {
|
|
125
85
|
let hash = 5381;
|
|
126
86
|
for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i);
|
|
@@ -134,35 +94,44 @@ var colorFromHash = (hash) => {
|
|
|
134
94
|
return import_color.default.hsv(hue, 100, 100);
|
|
135
95
|
};
|
|
136
96
|
var rotateText = (text, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars);
|
|
97
|
+
var computeTalismanOrb = (seed) => {
|
|
98
|
+
let platform;
|
|
99
|
+
let address;
|
|
100
|
+
try {
|
|
101
|
+
platform = (0, import_crypto.getAccountPlatformFromAddress)(seed);
|
|
102
|
+
address = (0, import_crypto.normalizeAddress)(seed);
|
|
103
|
+
} catch {
|
|
104
|
+
platform = "polkadot";
|
|
105
|
+
address = seed;
|
|
106
|
+
}
|
|
107
|
+
const hash1 = (0, import_blueimp_md5.default)(address);
|
|
108
|
+
const hash2 = rotateText(hash1, 1);
|
|
109
|
+
const hash3 = rotateText(hash1, 2);
|
|
110
|
+
const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(
|
|
111
|
+
(c1, c2) => c1.lightness() - c2.lightness()
|
|
112
|
+
);
|
|
113
|
+
const dotX = 10 + valueFromHash(hash1, 10);
|
|
114
|
+
const dotY = 10 + valueFromHash(hash2, 10);
|
|
115
|
+
const rotation = valueFromHash(hash1, 360);
|
|
116
|
+
return {
|
|
117
|
+
bgColor1: colors[0].hex(),
|
|
118
|
+
bgColor2: colors[1].hex(),
|
|
119
|
+
glowColor: colors[2].hex(),
|
|
120
|
+
transform: `rotate(${rotation} 32 32)`,
|
|
121
|
+
cx: dotX,
|
|
122
|
+
cy: dotY,
|
|
123
|
+
platform
|
|
124
|
+
};
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
// src/components/useTalismanOrb.ts
|
|
137
128
|
var useTalismanOrb = (seed) => {
|
|
138
129
|
const id = (0, import_react.useId)();
|
|
139
130
|
return (0, import_react.useMemo)(() => {
|
|
140
|
-
try {
|
|
141
|
-
var platform = (0, import_crypto.getAccountPlatformFromAddress)(seed);
|
|
142
|
-
var address = (0, import_crypto.normalizeAddress)(seed);
|
|
143
|
-
} catch {
|
|
144
|
-
platform = "polkadot";
|
|
145
|
-
address = seed;
|
|
146
|
-
}
|
|
147
|
-
const hash1 = (0, import_blueimp_md5.default)(address);
|
|
148
|
-
const hash2 = rotateText(hash1, 1);
|
|
149
|
-
const hash3 = rotateText(hash1, 2);
|
|
150
|
-
const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(
|
|
151
|
-
(c1, c2) => c1.lightness() - c2.lightness()
|
|
152
|
-
);
|
|
153
|
-
const dotX = 10 + valueFromHash(hash1, 10);
|
|
154
|
-
const dotY = 10 + valueFromHash(hash2, 10);
|
|
155
|
-
const rotation = valueFromHash(hash1, 360);
|
|
156
131
|
return {
|
|
157
132
|
id,
|
|
158
|
-
//multiple avatars should cohabit on the same page
|
|
159
|
-
|
|
160
|
-
bgColor2: colors[1].hex(),
|
|
161
|
-
glowColor: colors[2].hex(),
|
|
162
|
-
transform: `rotate(${rotation} 32 32)`,
|
|
163
|
-
cx: dotX,
|
|
164
|
-
cy: dotY,
|
|
165
|
-
platform
|
|
133
|
+
// multiple avatars should cohabit on the same page
|
|
134
|
+
...computeTalismanOrb(seed)
|
|
166
135
|
};
|
|
167
136
|
}, [id, seed]);
|
|
168
137
|
};
|
|
@@ -244,17 +213,28 @@ var TalismanOrbRectangle = ({ width, height, seed, className }) => {
|
|
|
244
213
|
);
|
|
245
214
|
};
|
|
246
215
|
|
|
247
|
-
// src/util/getTalismanOrbDataUrl.
|
|
248
|
-
var
|
|
249
|
-
|
|
216
|
+
// src/util/getTalismanOrbDataUrl.ts
|
|
217
|
+
var platformLogoSvg = (platform) => {
|
|
218
|
+
switch (platform) {
|
|
219
|
+
case "ethereum":
|
|
220
|
+
return '<g opacity="0.75" transform="scale(0.7) translate(14 14)" class="orb-type"><path d="M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z" fill="white"/><path d="M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z" fill="white"/></g>';
|
|
221
|
+
case "solana":
|
|
222
|
+
return '<g opacity="0.75" class="orb-type" transform="scale(0.45) translate(37.5, 37.5)"><path d="M70.6648 50.1769L58.9393 62.775C58.6844 63.0486 58.376 63.2668 58.0332 63.4159C57.6905 63.5651 57.3208 63.6419 56.9472 63.6417H1.36128C1.09605 63.6417 0.836598 63.5641 0.614804 63.4184C0.393011 63.2727 0.218536 63.0652 0.112817 62.8215C0.00709765 62.5779 -0.0252603 62.3085 0.0197186 62.0467C0.0646974 61.7848 0.185054 61.5418 0.366 61.3476L12.1006 48.7496C12.3548 48.4766 12.6623 48.2589 13.0039 48.1098C13.3455 47.9607 13.714 47.8834 14.0866 47.8828H69.6695C69.9348 47.8828 70.1942 47.9604 70.416 48.1062C70.6378 48.2519 70.8123 48.4593 70.918 48.703C71.0237 48.9467 71.0561 49.216 71.0111 49.4778C70.9661 49.7397 70.8458 49.9827 70.6648 50.1769V50.1769ZM58.9393 24.8081C58.6844 24.5345 58.376 24.3163 58.0332 24.1672C57.6905 24.0181 57.3208 23.9412 56.9472 23.9414H1.36128C1.09605 23.9414 0.836598 24.019 0.614804 24.1647C0.393011 24.3105 0.218536 24.5179 0.112817 24.7616C0.00709765 25.0053 -0.0252603 25.2746 0.0197186 25.5364C0.0646974 25.7983 0.185054 26.0413 0.366 26.2355L12.1006 38.8336C12.3548 39.1065 12.6623 39.3242 13.0039 39.4733C13.3455 39.6224 13.714 39.6997 14.0866 39.7003H69.6695C69.9348 39.7003 70.1942 39.6227 70.416 39.477C70.6378 39.3313 70.8123 39.1238 70.918 38.8801C71.0237 38.6365 71.0561 38.3671 71.0111 38.1053C70.9661 37.8434 70.8458 37.6004 70.6648 37.4062L58.9393 24.8081ZM1.36128 15.7589H56.9472C57.3208 15.7591 57.6905 15.6822 58.0332 15.5331C58.376 15.384 58.6844 15.1658 58.9393 14.8922L70.6648 2.29413C70.8458 2.09986 70.9661 1.85688 71.0111 1.59502C71.0561 1.33317 71.0237 1.06385 70.918 0.820169C70.8123 0.576485 70.6378 0.369047 70.416 0.223341C70.1942 0.0776352 69.9348 8.97308e-06 69.6695 0L14.0866 0C13.714 0.000635258 13.3455 0.077888 13.0039 0.226975C12.6623 0.376063 12.3548 0.593811 12.1006 0.866739L0.369025 13.4648C0.188254 13.6588 0.0679503 13.9016 0.0228694 14.1631C-0.0222115 14.4247 0.00988974 14.6938 0.115236 14.9373C0.220583 15.1809 0.394595 15.3884 0.615931 15.5343C0.837268 15.6802 1.09631 15.7583 1.36128 15.7589V15.7589Z" fill="white"/></g>';
|
|
223
|
+
default:
|
|
224
|
+
return "";
|
|
225
|
+
}
|
|
226
|
+
};
|
|
250
227
|
var getTalismanOrbDataUrl = (address) => {
|
|
251
|
-
const
|
|
252
|
-
|
|
228
|
+
const { bgColor1, bgColor2, glowColor, transform, cx, cy, platform } = computeTalismanOrb(address);
|
|
229
|
+
const id = "orb";
|
|
230
|
+
const svg = `<svg viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="${id}-bg"><stop offset="20%" stop-color="${bgColor1}"/><stop offset="100%" stop-color="${bgColor2}"/></linearGradient><radialGradient id="${id}-circle"><stop offset="10%" stop-color="${glowColor}"/><stop offset="100%" stop-color="transparent"/></radialGradient><clipPath id="${id}-clip"><circle cx="32" cy="32" r="32"/></clipPath></defs><g clip-path="url(#${id}-clip)"><g transform="${transform}"><rect fill="url(#${id}-bg)" x="0" y="0" width="64" height="64"/><circle fill="url(#${id}-circle)" cx="${cx}" cy="${cy}" r="45" opacity="0.7"/></g>${platformLogoSvg(platform)}</g></svg>`;
|
|
231
|
+
return `data:image/svg+xml;base64,${btoa(svg)}`;
|
|
253
232
|
};
|
|
254
233
|
// Annotate the CommonJS export names for ESM import in node:
|
|
255
234
|
0 && (module.exports = {
|
|
256
235
|
TalismanOrb,
|
|
257
236
|
TalismanOrbRectangle,
|
|
237
|
+
computeTalismanOrb,
|
|
258
238
|
getTalismanOrbDataUrl,
|
|
259
239
|
useTalismanOrb
|
|
260
240
|
});
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/TalismanOrbLogo.tsx","../src/components/useTalismanOrb.ts","../src/components/TalismanOrb.tsx","../src/components/TalismanOrbRectangle.tsx","../src/util/getTalismanOrbDataUrl.tsx"],"sourcesContent":["export * from \"./components\"\nexport * from \"./util\"\n","import type { AccountPlatform } from \"@talismn/crypto\"\nimport type { FC } from \"react\"\n\nexport const TalismanOrbLogo: FC<{ platform: AccountPlatform }> = ({ platform }) => {\n switch (platform) {\n case \"ethereum\":\n return (\n <g opacity=\"0.75\" transform=\"scale(0.7) translate(14 14)\" className=\"orb-type\">\n <path\n d=\"M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z\"\n fill=\"white\"\n />\n <path\n d=\"M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z\"\n fill=\"white\"\n />\n </g>\n )\n case \"polkadot\":\n return (\n <g opacity=\"0.75\" transform=\"scale(2.2) translate(4.5 3.9)\" className=\"orb-type\">\n <path\n d=\"M9.99937 4.4612C12.1176 4.4612 13.8347 3.46253 13.8347 2.2306C13.8347 0.998674 12.1176 0 9.99937 0C7.88119 0 6.16406 0.998674 6.16406 2.2306C6.16406 3.46253 7.88119 4.4612 9.99937 4.4612Z\"\n fill=\"white\"\n />\n <path\n d=\"M9.99937 21.2683C12.1176 21.2683 13.8347 20.2697 13.8347 19.0377C13.8347 17.8058 12.1176 16.8071 9.99937 16.8071C7.88119 16.8071 6.16406 17.8058 6.16406 19.0377C6.16406 20.2697 7.88119 21.2683 9.99937 21.2683Z\"\n fill=\"white\"\n />\n <path\n d=\"M4.65427 7.54892C5.71336 5.71457 5.70649 3.72787 4.63892 3.11149C3.57135 2.49511 1.84735 3.48246 0.788259 5.31681C-0.270832 7.15115 -0.263958 9.13786 0.803612 9.75424C1.87118 10.3706 3.59518 9.38326 4.65427 7.54892Z\"\n fill=\"white\"\n />\n <path\n d=\"M19.2083 15.9515C20.2674 14.1171 20.2611 12.1307 19.1943 11.5148C18.1274 10.8988 16.404 11.8865 15.3449 13.7209C14.2858 15.5552 14.2921 17.5416 15.3589 18.1575C16.4258 18.7735 18.1492 17.7858 19.2083 15.9515Z\"\n fill=\"white\"\n />\n <path\n d=\"M4.6399 18.1571C5.70747 17.5407 5.71434 15.554 4.65525 13.7196C3.59616 11.8853 1.87216 10.8979 0.804589 11.5143C-0.262981 12.1307 -0.269855 14.1174 0.789235 15.9517C1.84833 17.7861 3.57233 18.7734 4.6399 18.1571Z\"\n fill=\"white\"\n />\n <path\n d=\"M19.1952 9.75475C20.2621 9.13878 20.2684 7.15241 19.2093 5.31807C18.1502 3.48372 16.4268 2.49603 15.3599 3.11199C14.2931 3.72796 14.2868 5.71433 15.3459 7.54867C16.405 9.38302 18.1284 10.3707 19.1952 9.75475Z\"\n fill=\"white\"\n />\n </g>\n )\n case \"solana\":\n return (\n <g opacity=\"0.75\" className=\"orb-type\" transform=\"scale(0.45) translate(37.5, 37.5)\">\n <path\n d=\"M70.6648 50.1769L58.9393 62.775C58.6844 63.0486 58.376 63.2668 58.0332 63.4159C57.6905 63.5651 57.3208 63.6419 56.9472 63.6417H1.36128C1.09605 63.6417 0.836598 63.5641 0.614804 63.4184C0.393011 63.2727 0.218536 63.0652 0.112817 62.8215C0.00709765 62.5779 -0.0252603 62.3085 0.0197186 62.0467C0.0646974 61.7848 0.185054 61.5418 0.366 61.3476L12.1006 48.7496C12.3548 48.4766 12.6623 48.2589 13.0039 48.1098C13.3455 47.9607 13.714 47.8834 14.0866 47.8828H69.6695C69.9348 47.8828 70.1942 47.9604 70.416 48.1062C70.6378 48.2519 70.8123 48.4593 70.918 48.703C71.0237 48.9467 71.0561 49.216 71.0111 49.4778C70.9661 49.7397 70.8458 49.9827 70.6648 50.1769V50.1769ZM58.9393 24.8081C58.6844 24.5345 58.376 24.3163 58.0332 24.1672C57.6905 24.0181 57.3208 23.9412 56.9472 23.9414H1.36128C1.09605 23.9414 0.836598 24.019 0.614804 24.1647C0.393011 24.3105 0.218536 24.5179 0.112817 24.7616C0.00709765 25.0053 -0.0252603 25.2746 0.0197186 25.5364C0.0646974 25.7983 0.185054 26.0413 0.366 26.2355L12.1006 38.8336C12.3548 39.1065 12.6623 39.3242 13.0039 39.4733C13.3455 39.6224 13.714 39.6997 14.0866 39.7003H69.6695C69.9348 39.7003 70.1942 39.6227 70.416 39.477C70.6378 39.3313 70.8123 39.1238 70.918 38.8801C71.0237 38.6365 71.0561 38.3671 71.0111 38.1053C70.9661 37.8434 70.8458 37.6004 70.6648 37.4062L58.9393 24.8081ZM1.36128 15.7589H56.9472C57.3208 15.7591 57.6905 15.6822 58.0332 15.5331C58.376 15.384 58.6844 15.1658 58.9393 14.8922L70.6648 2.29413C70.8458 2.09986 70.9661 1.85688 71.0111 1.59502C71.0561 1.33317 71.0237 1.06385 70.918 0.820169C70.8123 0.576485 70.6378 0.369047 70.416 0.223341C70.1942 0.0776352 69.9348 8.97308e-06 69.6695 0L14.0866 0C13.714 0.000635258 13.3455 0.077888 13.0039 0.226975C12.6623 0.376063 12.3548 0.593811 12.1006 0.866739L0.369025 13.4648C0.188254 13.6588 0.0679503 13.9016 0.0228694 14.1631C-0.0222115 14.4247 0.00988974 14.6938 0.115236 14.9373C0.220583 15.1809 0.394595 15.3884 0.615931 15.5343C0.837268 15.6802 1.09631 15.7583 1.36128 15.7589V15.7589Z\"\n fill=\"white\"\n />\n </g>\n )\n default:\n return null\n }\n}\n","import { getAccountPlatformFromAddress, normalizeAddress } from \"@talismn/crypto\"\nimport md5 from \"blueimp-md5\"\nimport Color from \"color\"\nimport { useId, useMemo } from \"react\"\n\nconst djb2 = (str: string) => {\n let hash = 5381\n for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i)\n return hash\n}\n\nconst valueFromHash = (hash: string, max: number) => {\n return (max + djb2(hash)) % max\n}\n\nconst colorFromHash = (hash: string) => {\n const hue = valueFromHash(hash, 360)\n return Color.hsv(hue, 100, 100)\n}\n\nconst rotateText = (text: string, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars)\n\nexport const useTalismanOrb = (seed: string) => {\n const id = useId()\n\n return useMemo(() => {\n try {\n // those break if seed is empty or an invalid address\n\n // biome-ignore lint/correctness/noInnerDeclarations: hack\n var platform = getAccountPlatformFromAddress(seed)\n\n // seed may be specific to a ss58 prefix, get the base address\n // biome-ignore lint/correctness/noInnerDeclarations: hack\n var address = normalizeAddress(seed)\n } catch {\n platform = \"polkadot\"\n address = seed\n }\n\n // derive 3 hashs from the seed, used to generate the 3 colors\n const hash1 = md5(address)\n const hash2 = rotateText(hash1, 1)\n const hash3 = rotateText(hash1, 2)\n\n // the 2 darkest ones will be used as gradient BG\n // the lightest one will be used as gradient circle, to mimic a 3D lighting effect\n const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(\n (c1, c2) => c1.lightness() - c2.lightness()\n )\n\n // random location in top left corner, avoid beeing to close from the center\n const dotX = 10 + valueFromHash(hash1, 10)\n const dotY = 10 + valueFromHash(hash2, 10)\n\n // global rotation\n const rotation = valueFromHash(hash1, 360)\n\n return {\n id, //multiple avatars should cohabit on the same page\n bgColor1: colors[0].hex(),\n bgColor2: colors[1].hex(),\n glowColor: colors[2].hex(),\n transform: `rotate(${rotation} 32 32)`,\n cx: dotX,\n cy: dotY,\n platform,\n }\n }, [id, seed])\n}\n","import type { FC } from \"react\"\n\nimport { TalismanOrbLogo } from \"./TalismanOrbLogo\"\nimport type { TalismanOrbProps } from \"./types\"\nimport { useTalismanOrb } from \"./useTalismanOrb\"\n\nexport const TalismanOrb: FC<TalismanOrbProps> = ({\n seed,\n width = \"1em\",\n height = \"1em\",\n className,\n}) => {\n const { id, bgColor1, bgColor2, transform, glowColor, cx, cy, platform } = useTalismanOrb(seed)\n\n return (\n <svg\n width={width}\n height={height}\n viewBox={`0 0 64 64`}\n className={className}\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient id={`${id}-bg`}>\n <stop offset=\"20%\" stopColor={bgColor1} />\n <stop offset=\"100%\" stopColor={bgColor2} />\n </linearGradient>\n <radialGradient id={`${id}-circle`}>\n <stop offset=\"10%\" stopColor={glowColor} />\n <stop offset=\"100%\" stopColor=\"transparent\" />\n </radialGradient>\n <clipPath id={`${id}-clip`}>\n <circle cx=\"32\" cy=\"32\" r=\"32\" />\n </clipPath>\n </defs>\n <g clipPath={`url(#${id}-clip)`}>\n <g transform={transform}>\n <rect fill={`url(#${id}-bg)`} x={0} y={0} width={64} height={64} />\n <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />\n </g>\n <TalismanOrbLogo platform={platform} />\n </g>\n </svg>\n )\n}\n","import type { FC } from \"react\"\n\nimport type { TalismanOrbProps } from \"./types\"\nimport { useTalismanOrb } from \"./useTalismanOrb\"\n\nexport const TalismanOrbRectangle: FC<TalismanOrbProps> = ({ width, height, seed, className }) => {\n const { id, bgColor1, bgColor2, transform, glowColor, cx, cy } = useTalismanOrb(seed)\n\n return (\n <svg\n width={width}\n height={height}\n viewBox={`0 0 64 64`}\n preserveAspectRatio=\"none\"\n className={className}\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient id={`${id}-bg`}>\n <stop offset=\"20%\" stopColor={bgColor1} />\n <stop offset=\"100%\" stopColor={bgColor2} />\n </linearGradient>\n <radialGradient id={`${id}-circle`}>\n <stop offset=\"10%\" stopColor={glowColor} />\n <stop offset=\"100%\" stopColor=\"transparent\" />\n </radialGradient>\n <clipPath id={`${id}-clip`}>\n <circle cx=\"32\" cy=\"32\" r=\"48\" />\n </clipPath>\n </defs>\n <g clipPath={`url(#${id}-clip)`}>\n <g transform={transform}>\n <rect fill={`url(#${id}-bg)`} x={-16} y={-16} width={96} height={96} />\n <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />\n </g>\n </g>\n </svg>\n )\n}\n","import ReactDOMServer from \"react-dom/server\"\n\nimport { TalismanOrb } from \"../components\"\n\n/**\n * Returns a base64 encoded data url for the Talisman Orb svg\n */\nexport const getTalismanOrbDataUrl = (address: string): `data:image/svg+xml;base64,${string}` => {\n // render the TalismanOrb component and output the SVG as text\n const svg = ReactDOMServer.renderToStaticMarkup(<TalismanOrb seed={address} />)\n\n // convert to data url\n return `data:image/svg+xml;base64,${Buffer.from(svg).toString(\"base64\")}`\n}\n"],"mappings":"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","names":["Color","md5","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","ReactDOMServer"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/TalismanOrbLogo.tsx","../src/components/useTalismanOrb.ts","../src/computeTalismanOrb.ts","../src/components/TalismanOrb.tsx","../src/components/TalismanOrbRectangle.tsx","../src/util/getTalismanOrbDataUrl.ts"],"sourcesContent":["export * from \"./components\"\nexport * from \"./computeTalismanOrb\"\nexport * from \"./util\"\n","import type { AccountPlatform } from \"@talismn/crypto\"\nimport type { FC } from \"react\"\n\nexport const TalismanOrbLogo: FC<{ platform: AccountPlatform }> = ({ platform }) => {\n switch (platform) {\n case \"ethereum\":\n return (\n <g opacity=\"0.75\" transform=\"scale(0.7) translate(14 14)\" className=\"orb-type\">\n <path\n d=\"M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z\"\n fill=\"white\"\n />\n <path\n d=\"M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z\"\n fill=\"white\"\n />\n </g>\n )\n case \"polkadot\":\n return null\n case \"solana\":\n return (\n <g opacity=\"0.75\" className=\"orb-type\" transform=\"scale(0.45) translate(37.5, 37.5)\">\n <path\n d=\"M70.6648 50.1769L58.9393 62.775C58.6844 63.0486 58.376 63.2668 58.0332 63.4159C57.6905 63.5651 57.3208 63.6419 56.9472 63.6417H1.36128C1.09605 63.6417 0.836598 63.5641 0.614804 63.4184C0.393011 63.2727 0.218536 63.0652 0.112817 62.8215C0.00709765 62.5779 -0.0252603 62.3085 0.0197186 62.0467C0.0646974 61.7848 0.185054 61.5418 0.366 61.3476L12.1006 48.7496C12.3548 48.4766 12.6623 48.2589 13.0039 48.1098C13.3455 47.9607 13.714 47.8834 14.0866 47.8828H69.6695C69.9348 47.8828 70.1942 47.9604 70.416 48.1062C70.6378 48.2519 70.8123 48.4593 70.918 48.703C71.0237 48.9467 71.0561 49.216 71.0111 49.4778C70.9661 49.7397 70.8458 49.9827 70.6648 50.1769V50.1769ZM58.9393 24.8081C58.6844 24.5345 58.376 24.3163 58.0332 24.1672C57.6905 24.0181 57.3208 23.9412 56.9472 23.9414H1.36128C1.09605 23.9414 0.836598 24.019 0.614804 24.1647C0.393011 24.3105 0.218536 24.5179 0.112817 24.7616C0.00709765 25.0053 -0.0252603 25.2746 0.0197186 25.5364C0.0646974 25.7983 0.185054 26.0413 0.366 26.2355L12.1006 38.8336C12.3548 39.1065 12.6623 39.3242 13.0039 39.4733C13.3455 39.6224 13.714 39.6997 14.0866 39.7003H69.6695C69.9348 39.7003 70.1942 39.6227 70.416 39.477C70.6378 39.3313 70.8123 39.1238 70.918 38.8801C71.0237 38.6365 71.0561 38.3671 71.0111 38.1053C70.9661 37.8434 70.8458 37.6004 70.6648 37.4062L58.9393 24.8081ZM1.36128 15.7589H56.9472C57.3208 15.7591 57.6905 15.6822 58.0332 15.5331C58.376 15.384 58.6844 15.1658 58.9393 14.8922L70.6648 2.29413C70.8458 2.09986 70.9661 1.85688 71.0111 1.59502C71.0561 1.33317 71.0237 1.06385 70.918 0.820169C70.8123 0.576485 70.6378 0.369047 70.416 0.223341C70.1942 0.0776352 69.9348 8.97308e-06 69.6695 0L14.0866 0C13.714 0.000635258 13.3455 0.077888 13.0039 0.226975C12.6623 0.376063 12.3548 0.593811 12.1006 0.866739L0.369025 13.4648C0.188254 13.6588 0.0679503 13.9016 0.0228694 14.1631C-0.0222115 14.4247 0.00988974 14.6938 0.115236 14.9373C0.220583 15.1809 0.394595 15.3884 0.615931 15.5343C0.837268 15.6802 1.09631 15.7583 1.36128 15.7589V15.7589Z\"\n fill=\"white\"\n />\n </g>\n )\n default:\n return null\n }\n}\n","import { useId, useMemo } from \"react\"\n\nimport { computeTalismanOrb } from \"../computeTalismanOrb\"\n\nexport const useTalismanOrb = (seed: string) => {\n const id = useId()\n\n return useMemo(() => {\n return {\n id, // multiple avatars should cohabit on the same page\n ...computeTalismanOrb(seed),\n }\n }, [id, seed])\n}\n","import type { AccountPlatform } from \"@talismn/crypto\"\nimport { getAccountPlatformFromAddress, normalizeAddress } from \"@talismn/crypto\"\nimport md5 from \"blueimp-md5\"\nimport Color from \"color\"\n\nconst djb2 = (str: string) => {\n let hash = 5381\n for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i)\n return hash\n}\n\nconst valueFromHash = (hash: string, max: number) => {\n return (max + djb2(hash)) % max\n}\n\nconst colorFromHash = (hash: string) => {\n const hue = valueFromHash(hash, 360)\n return Color.hsv(hue, 100, 100)\n}\n\nconst rotateText = (text: string, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars)\n\nexport type TalismanOrbData = {\n bgColor1: string\n bgColor2: string\n glowColor: string\n transform: string\n cx: number\n cy: number\n platform: AccountPlatform\n}\n\n/** Pure computation of orb visual data from a seed (address). No React dependency. */\nexport const computeTalismanOrb = (seed: string): TalismanOrbData => {\n let platform: AccountPlatform\n let address: string\n\n try {\n platform = getAccountPlatformFromAddress(seed)\n address = normalizeAddress(seed)\n } catch {\n platform = \"polkadot\"\n address = seed\n }\n\n // derive 3 hashes from the seed, used to generate the 3 colors\n const hash1 = md5(address)\n const hash2 = rotateText(hash1, 1)\n const hash3 = rotateText(hash1, 2)\n\n // the 2 darkest ones will be used as gradient BG\n // the lightest one will be used as gradient circle, to mimic a 3D lighting effect\n const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(\n (c1, c2) => c1.lightness() - c2.lightness()\n )\n\n // random location in top left corner, avoid being too close to the center\n const dotX = 10 + valueFromHash(hash1, 10)\n const dotY = 10 + valueFromHash(hash2, 10)\n\n // global rotation\n const rotation = valueFromHash(hash1, 360)\n\n return {\n bgColor1: colors[0].hex(),\n bgColor2: colors[1].hex(),\n glowColor: colors[2].hex(),\n transform: `rotate(${rotation} 32 32)`,\n cx: dotX,\n cy: dotY,\n platform,\n }\n}\n","import type { FC } from \"react\"\n\nimport { TalismanOrbLogo } from \"./TalismanOrbLogo\"\nimport type { TalismanOrbProps } from \"./types\"\nimport { useTalismanOrb } from \"./useTalismanOrb\"\n\nexport const TalismanOrb: FC<TalismanOrbProps> = ({\n seed,\n width = \"1em\",\n height = \"1em\",\n className,\n}) => {\n const { id, bgColor1, bgColor2, transform, glowColor, cx, cy, platform } = useTalismanOrb(seed)\n\n return (\n <svg\n width={width}\n height={height}\n viewBox={`0 0 64 64`}\n className={className}\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient id={`${id}-bg`}>\n <stop offset=\"20%\" stopColor={bgColor1} />\n <stop offset=\"100%\" stopColor={bgColor2} />\n </linearGradient>\n <radialGradient id={`${id}-circle`}>\n <stop offset=\"10%\" stopColor={glowColor} />\n <stop offset=\"100%\" stopColor=\"transparent\" />\n </radialGradient>\n <clipPath id={`${id}-clip`}>\n <circle cx=\"32\" cy=\"32\" r=\"32\" />\n </clipPath>\n </defs>\n <g clipPath={`url(#${id}-clip)`}>\n <g transform={transform}>\n <rect fill={`url(#${id}-bg)`} x={0} y={0} width={64} height={64} />\n <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />\n </g>\n <TalismanOrbLogo platform={platform} />\n </g>\n </svg>\n )\n}\n","import type { FC } from \"react\"\n\nimport type { TalismanOrbProps } from \"./types\"\nimport { useTalismanOrb } from \"./useTalismanOrb\"\n\nexport const TalismanOrbRectangle: FC<TalismanOrbProps> = ({ width, height, seed, className }) => {\n const { id, bgColor1, bgColor2, transform, glowColor, cx, cy } = useTalismanOrb(seed)\n\n return (\n <svg\n width={width}\n height={height}\n viewBox={`0 0 64 64`}\n preserveAspectRatio=\"none\"\n className={className}\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient id={`${id}-bg`}>\n <stop offset=\"20%\" stopColor={bgColor1} />\n <stop offset=\"100%\" stopColor={bgColor2} />\n </linearGradient>\n <radialGradient id={`${id}-circle`}>\n <stop offset=\"10%\" stopColor={glowColor} />\n <stop offset=\"100%\" stopColor=\"transparent\" />\n </radialGradient>\n <clipPath id={`${id}-clip`}>\n <circle cx=\"32\" cy=\"32\" r=\"48\" />\n </clipPath>\n </defs>\n <g clipPath={`url(#${id}-clip)`}>\n <g transform={transform}>\n <rect fill={`url(#${id}-bg)`} x={-16} y={-16} width={96} height={96} />\n <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />\n </g>\n </g>\n </svg>\n )\n}\n","import type { AccountPlatform } from \"@talismn/crypto\"\n\nimport { computeTalismanOrb } from \"../computeTalismanOrb\"\n\nconst platformLogoSvg = (platform: AccountPlatform): string => {\n switch (platform) {\n case \"ethereum\":\n return '<g opacity=\"0.75\" transform=\"scale(0.7) translate(14 14)\" class=\"orb-type\"><path d=\"M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z\" fill=\"white\"/><path d=\"M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z\" fill=\"white\"/></g>'\n case \"solana\":\n return '<g opacity=\"0.75\" class=\"orb-type\" transform=\"scale(0.45) translate(37.5, 37.5)\"><path d=\"M70.6648 50.1769L58.9393 62.775C58.6844 63.0486 58.376 63.2668 58.0332 63.4159C57.6905 63.5651 57.3208 63.6419 56.9472 63.6417H1.36128C1.09605 63.6417 0.836598 63.5641 0.614804 63.4184C0.393011 63.2727 0.218536 63.0652 0.112817 62.8215C0.00709765 62.5779 -0.0252603 62.3085 0.0197186 62.0467C0.0646974 61.7848 0.185054 61.5418 0.366 61.3476L12.1006 48.7496C12.3548 48.4766 12.6623 48.2589 13.0039 48.1098C13.3455 47.9607 13.714 47.8834 14.0866 47.8828H69.6695C69.9348 47.8828 70.1942 47.9604 70.416 48.1062C70.6378 48.2519 70.8123 48.4593 70.918 48.703C71.0237 48.9467 71.0561 49.216 71.0111 49.4778C70.9661 49.7397 70.8458 49.9827 70.6648 50.1769V50.1769ZM58.9393 24.8081C58.6844 24.5345 58.376 24.3163 58.0332 24.1672C57.6905 24.0181 57.3208 23.9412 56.9472 23.9414H1.36128C1.09605 23.9414 0.836598 24.019 0.614804 24.1647C0.393011 24.3105 0.218536 24.5179 0.112817 24.7616C0.00709765 25.0053 -0.0252603 25.2746 0.0197186 25.5364C0.0646974 25.7983 0.185054 26.0413 0.366 26.2355L12.1006 38.8336C12.3548 39.1065 12.6623 39.3242 13.0039 39.4733C13.3455 39.6224 13.714 39.6997 14.0866 39.7003H69.6695C69.9348 39.7003 70.1942 39.6227 70.416 39.477C70.6378 39.3313 70.8123 39.1238 70.918 38.8801C71.0237 38.6365 71.0561 38.3671 71.0111 38.1053C70.9661 37.8434 70.8458 37.6004 70.6648 37.4062L58.9393 24.8081ZM1.36128 15.7589H56.9472C57.3208 15.7591 57.6905 15.6822 58.0332 15.5331C58.376 15.384 58.6844 15.1658 58.9393 14.8922L70.6648 2.29413C70.8458 2.09986 70.9661 1.85688 71.0111 1.59502C71.0561 1.33317 71.0237 1.06385 70.918 0.820169C70.8123 0.576485 70.6378 0.369047 70.416 0.223341C70.1942 0.0776352 69.9348 8.97308e-06 69.6695 0L14.0866 0C13.714 0.000635258 13.3455 0.077888 13.0039 0.226975C12.6623 0.376063 12.3548 0.593811 12.1006 0.866739L0.369025 13.4648C0.188254 13.6588 0.0679503 13.9016 0.0228694 14.1631C-0.0222115 14.4247 0.00988974 14.6938 0.115236 14.9373C0.220583 15.1809 0.394595 15.3884 0.615931 15.5343C0.837268 15.6802 1.09631 15.7583 1.36128 15.7589V15.7589Z\" fill=\"white\"/></g>'\n default:\n return \"\"\n }\n}\n\n/**\n * Returns a base64 encoded data url for the Talisman Orb svg.\n * Pure implementation — no React or react-dom dependency.\n */\nexport const getTalismanOrbDataUrl = (address: string): `data:image/svg+xml;base64,${string}` => {\n const { bgColor1, bgColor2, glowColor, transform, cx, cy, platform } = computeTalismanOrb(address)\n\n // Standalone SVGs embedded as data URIs don't share a DOM, so a fixed ID prefix is safe\n const id = \"orb\"\n\n const svg = `<svg viewBox=\"0 0 64 64\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><defs><linearGradient id=\"${id}-bg\"><stop offset=\"20%\" stop-color=\"${bgColor1}\"/><stop offset=\"100%\" stop-color=\"${bgColor2}\"/></linearGradient><radialGradient id=\"${id}-circle\"><stop offset=\"10%\" stop-color=\"${glowColor}\"/><stop offset=\"100%\" stop-color=\"transparent\"/></radialGradient><clipPath id=\"${id}-clip\"><circle cx=\"32\" cy=\"32\" r=\"32\"/></clipPath></defs><g clip-path=\"url(#${id}-clip)\"><g transform=\"${transform}\"><rect fill=\"url(#${id}-bg)\" x=\"0\" y=\"0\" width=\"64\" height=\"64\"/><circle fill=\"url(#${id}-circle)\" cx=\"${cx}\" cy=\"${cy}\" r=\"45\" opacity=\"0.7\"/></g>${platformLogoSvg(platform)}</g></svg>`\n\n return `data:image/svg+xml;base64,${btoa(svg)}`\n}\n"],"mappings":"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","names":["Color","md5","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -20,50 +20,7 @@ var TalismanOrbLogo = ({ platform }) => {
|
|
|
20
20
|
)
|
|
21
21
|
] });
|
|
22
22
|
case "polkadot":
|
|
23
|
-
return
|
|
24
|
-
/* @__PURE__ */ jsx(
|
|
25
|
-
"path",
|
|
26
|
-
{
|
|
27
|
-
d: "M9.99937 4.4612C12.1176 4.4612 13.8347 3.46253 13.8347 2.2306C13.8347 0.998674 12.1176 0 9.99937 0C7.88119 0 6.16406 0.998674 6.16406 2.2306C6.16406 3.46253 7.88119 4.4612 9.99937 4.4612Z",
|
|
28
|
-
fill: "white"
|
|
29
|
-
}
|
|
30
|
-
),
|
|
31
|
-
/* @__PURE__ */ jsx(
|
|
32
|
-
"path",
|
|
33
|
-
{
|
|
34
|
-
d: "M9.99937 21.2683C12.1176 21.2683 13.8347 20.2697 13.8347 19.0377C13.8347 17.8058 12.1176 16.8071 9.99937 16.8071C7.88119 16.8071 6.16406 17.8058 6.16406 19.0377C6.16406 20.2697 7.88119 21.2683 9.99937 21.2683Z",
|
|
35
|
-
fill: "white"
|
|
36
|
-
}
|
|
37
|
-
),
|
|
38
|
-
/* @__PURE__ */ jsx(
|
|
39
|
-
"path",
|
|
40
|
-
{
|
|
41
|
-
d: "M4.65427 7.54892C5.71336 5.71457 5.70649 3.72787 4.63892 3.11149C3.57135 2.49511 1.84735 3.48246 0.788259 5.31681C-0.270832 7.15115 -0.263958 9.13786 0.803612 9.75424C1.87118 10.3706 3.59518 9.38326 4.65427 7.54892Z",
|
|
42
|
-
fill: "white"
|
|
43
|
-
}
|
|
44
|
-
),
|
|
45
|
-
/* @__PURE__ */ jsx(
|
|
46
|
-
"path",
|
|
47
|
-
{
|
|
48
|
-
d: "M19.2083 15.9515C20.2674 14.1171 20.2611 12.1307 19.1943 11.5148C18.1274 10.8988 16.404 11.8865 15.3449 13.7209C14.2858 15.5552 14.2921 17.5416 15.3589 18.1575C16.4258 18.7735 18.1492 17.7858 19.2083 15.9515Z",
|
|
49
|
-
fill: "white"
|
|
50
|
-
}
|
|
51
|
-
),
|
|
52
|
-
/* @__PURE__ */ jsx(
|
|
53
|
-
"path",
|
|
54
|
-
{
|
|
55
|
-
d: "M4.6399 18.1571C5.70747 17.5407 5.71434 15.554 4.65525 13.7196C3.59616 11.8853 1.87216 10.8979 0.804589 11.5143C-0.262981 12.1307 -0.269855 14.1174 0.789235 15.9517C1.84833 17.7861 3.57233 18.7734 4.6399 18.1571Z",
|
|
56
|
-
fill: "white"
|
|
57
|
-
}
|
|
58
|
-
),
|
|
59
|
-
/* @__PURE__ */ jsx(
|
|
60
|
-
"path",
|
|
61
|
-
{
|
|
62
|
-
d: "M19.1952 9.75475C20.2621 9.13878 20.2684 7.15241 19.2093 5.31807C18.1502 3.48372 16.4268 2.49603 15.3599 3.11199C14.2931 3.72796 14.2868 5.71433 15.3459 7.54867C16.405 9.38302 18.1284 10.3707 19.1952 9.75475Z",
|
|
63
|
-
fill: "white"
|
|
64
|
-
}
|
|
65
|
-
)
|
|
66
|
-
] });
|
|
23
|
+
return null;
|
|
67
24
|
case "solana":
|
|
68
25
|
return /* @__PURE__ */ jsx("g", { opacity: "0.75", className: "orb-type", transform: "scale(0.45) translate(37.5, 37.5)", children: /* @__PURE__ */ jsx(
|
|
69
26
|
"path",
|
|
@@ -78,10 +35,12 @@ var TalismanOrbLogo = ({ platform }) => {
|
|
|
78
35
|
};
|
|
79
36
|
|
|
80
37
|
// src/components/useTalismanOrb.ts
|
|
38
|
+
import { useId, useMemo } from "react";
|
|
39
|
+
|
|
40
|
+
// src/computeTalismanOrb.ts
|
|
81
41
|
import { getAccountPlatformFromAddress, normalizeAddress } from "@talismn/crypto";
|
|
82
42
|
import md5 from "blueimp-md5";
|
|
83
43
|
import Color from "color";
|
|
84
|
-
import { useId, useMemo } from "react";
|
|
85
44
|
var djb2 = (str) => {
|
|
86
45
|
let hash = 5381;
|
|
87
46
|
for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i);
|
|
@@ -95,35 +54,44 @@ var colorFromHash = (hash) => {
|
|
|
95
54
|
return Color.hsv(hue, 100, 100);
|
|
96
55
|
};
|
|
97
56
|
var rotateText = (text, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars);
|
|
57
|
+
var computeTalismanOrb = (seed) => {
|
|
58
|
+
let platform;
|
|
59
|
+
let address;
|
|
60
|
+
try {
|
|
61
|
+
platform = getAccountPlatformFromAddress(seed);
|
|
62
|
+
address = normalizeAddress(seed);
|
|
63
|
+
} catch {
|
|
64
|
+
platform = "polkadot";
|
|
65
|
+
address = seed;
|
|
66
|
+
}
|
|
67
|
+
const hash1 = md5(address);
|
|
68
|
+
const hash2 = rotateText(hash1, 1);
|
|
69
|
+
const hash3 = rotateText(hash1, 2);
|
|
70
|
+
const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(
|
|
71
|
+
(c1, c2) => c1.lightness() - c2.lightness()
|
|
72
|
+
);
|
|
73
|
+
const dotX = 10 + valueFromHash(hash1, 10);
|
|
74
|
+
const dotY = 10 + valueFromHash(hash2, 10);
|
|
75
|
+
const rotation = valueFromHash(hash1, 360);
|
|
76
|
+
return {
|
|
77
|
+
bgColor1: colors[0].hex(),
|
|
78
|
+
bgColor2: colors[1].hex(),
|
|
79
|
+
glowColor: colors[2].hex(),
|
|
80
|
+
transform: `rotate(${rotation} 32 32)`,
|
|
81
|
+
cx: dotX,
|
|
82
|
+
cy: dotY,
|
|
83
|
+
platform
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// src/components/useTalismanOrb.ts
|
|
98
88
|
var useTalismanOrb = (seed) => {
|
|
99
89
|
const id = useId();
|
|
100
90
|
return useMemo(() => {
|
|
101
|
-
try {
|
|
102
|
-
var platform = getAccountPlatformFromAddress(seed);
|
|
103
|
-
var address = normalizeAddress(seed);
|
|
104
|
-
} catch {
|
|
105
|
-
platform = "polkadot";
|
|
106
|
-
address = seed;
|
|
107
|
-
}
|
|
108
|
-
const hash1 = md5(address);
|
|
109
|
-
const hash2 = rotateText(hash1, 1);
|
|
110
|
-
const hash3 = rotateText(hash1, 2);
|
|
111
|
-
const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(
|
|
112
|
-
(c1, c2) => c1.lightness() - c2.lightness()
|
|
113
|
-
);
|
|
114
|
-
const dotX = 10 + valueFromHash(hash1, 10);
|
|
115
|
-
const dotY = 10 + valueFromHash(hash2, 10);
|
|
116
|
-
const rotation = valueFromHash(hash1, 360);
|
|
117
91
|
return {
|
|
118
92
|
id,
|
|
119
|
-
//multiple avatars should cohabit on the same page
|
|
120
|
-
|
|
121
|
-
bgColor2: colors[1].hex(),
|
|
122
|
-
glowColor: colors[2].hex(),
|
|
123
|
-
transform: `rotate(${rotation} 32 32)`,
|
|
124
|
-
cx: dotX,
|
|
125
|
-
cy: dotY,
|
|
126
|
-
platform
|
|
93
|
+
// multiple avatars should cohabit on the same page
|
|
94
|
+
...computeTalismanOrb(seed)
|
|
127
95
|
};
|
|
128
96
|
}, [id, seed]);
|
|
129
97
|
};
|
|
@@ -205,16 +173,27 @@ var TalismanOrbRectangle = ({ width, height, seed, className }) => {
|
|
|
205
173
|
);
|
|
206
174
|
};
|
|
207
175
|
|
|
208
|
-
// src/util/getTalismanOrbDataUrl.
|
|
209
|
-
|
|
210
|
-
|
|
176
|
+
// src/util/getTalismanOrbDataUrl.ts
|
|
177
|
+
var platformLogoSvg = (platform) => {
|
|
178
|
+
switch (platform) {
|
|
179
|
+
case "ethereum":
|
|
180
|
+
return '<g opacity="0.75" transform="scale(0.7) translate(14 14)" class="orb-type"><path d="M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z" fill="white"/><path d="M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z" fill="white"/></g>';
|
|
181
|
+
case "solana":
|
|
182
|
+
return '<g opacity="0.75" class="orb-type" transform="scale(0.45) translate(37.5, 37.5)"><path d="M70.6648 50.1769L58.9393 62.775C58.6844 63.0486 58.376 63.2668 58.0332 63.4159C57.6905 63.5651 57.3208 63.6419 56.9472 63.6417H1.36128C1.09605 63.6417 0.836598 63.5641 0.614804 63.4184C0.393011 63.2727 0.218536 63.0652 0.112817 62.8215C0.00709765 62.5779 -0.0252603 62.3085 0.0197186 62.0467C0.0646974 61.7848 0.185054 61.5418 0.366 61.3476L12.1006 48.7496C12.3548 48.4766 12.6623 48.2589 13.0039 48.1098C13.3455 47.9607 13.714 47.8834 14.0866 47.8828H69.6695C69.9348 47.8828 70.1942 47.9604 70.416 48.1062C70.6378 48.2519 70.8123 48.4593 70.918 48.703C71.0237 48.9467 71.0561 49.216 71.0111 49.4778C70.9661 49.7397 70.8458 49.9827 70.6648 50.1769V50.1769ZM58.9393 24.8081C58.6844 24.5345 58.376 24.3163 58.0332 24.1672C57.6905 24.0181 57.3208 23.9412 56.9472 23.9414H1.36128C1.09605 23.9414 0.836598 24.019 0.614804 24.1647C0.393011 24.3105 0.218536 24.5179 0.112817 24.7616C0.00709765 25.0053 -0.0252603 25.2746 0.0197186 25.5364C0.0646974 25.7983 0.185054 26.0413 0.366 26.2355L12.1006 38.8336C12.3548 39.1065 12.6623 39.3242 13.0039 39.4733C13.3455 39.6224 13.714 39.6997 14.0866 39.7003H69.6695C69.9348 39.7003 70.1942 39.6227 70.416 39.477C70.6378 39.3313 70.8123 39.1238 70.918 38.8801C71.0237 38.6365 71.0561 38.3671 71.0111 38.1053C70.9661 37.8434 70.8458 37.6004 70.6648 37.4062L58.9393 24.8081ZM1.36128 15.7589H56.9472C57.3208 15.7591 57.6905 15.6822 58.0332 15.5331C58.376 15.384 58.6844 15.1658 58.9393 14.8922L70.6648 2.29413C70.8458 2.09986 70.9661 1.85688 71.0111 1.59502C71.0561 1.33317 71.0237 1.06385 70.918 0.820169C70.8123 0.576485 70.6378 0.369047 70.416 0.223341C70.1942 0.0776352 69.9348 8.97308e-06 69.6695 0L14.0866 0C13.714 0.000635258 13.3455 0.077888 13.0039 0.226975C12.6623 0.376063 12.3548 0.593811 12.1006 0.866739L0.369025 13.4648C0.188254 13.6588 0.0679503 13.9016 0.0228694 14.1631C-0.0222115 14.4247 0.00988974 14.6938 0.115236 14.9373C0.220583 15.1809 0.394595 15.3884 0.615931 15.5343C0.837268 15.6802 1.09631 15.7583 1.36128 15.7589V15.7589Z" fill="white"/></g>';
|
|
183
|
+
default:
|
|
184
|
+
return "";
|
|
185
|
+
}
|
|
186
|
+
};
|
|
211
187
|
var getTalismanOrbDataUrl = (address) => {
|
|
212
|
-
const
|
|
213
|
-
|
|
188
|
+
const { bgColor1, bgColor2, glowColor, transform, cx, cy, platform } = computeTalismanOrb(address);
|
|
189
|
+
const id = "orb";
|
|
190
|
+
const svg = `<svg viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="${id}-bg"><stop offset="20%" stop-color="${bgColor1}"/><stop offset="100%" stop-color="${bgColor2}"/></linearGradient><radialGradient id="${id}-circle"><stop offset="10%" stop-color="${glowColor}"/><stop offset="100%" stop-color="transparent"/></radialGradient><clipPath id="${id}-clip"><circle cx="32" cy="32" r="32"/></clipPath></defs><g clip-path="url(#${id}-clip)"><g transform="${transform}"><rect fill="url(#${id}-bg)" x="0" y="0" width="64" height="64"/><circle fill="url(#${id}-circle)" cx="${cx}" cy="${cy}" r="45" opacity="0.7"/></g>${platformLogoSvg(platform)}</g></svg>`;
|
|
191
|
+
return `data:image/svg+xml;base64,${btoa(svg)}`;
|
|
214
192
|
};
|
|
215
193
|
export {
|
|
216
194
|
TalismanOrb,
|
|
217
195
|
TalismanOrbRectangle,
|
|
196
|
+
computeTalismanOrb,
|
|
218
197
|
getTalismanOrbDataUrl,
|
|
219
198
|
useTalismanOrb
|
|
220
199
|
};
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TalismanOrbLogo.tsx","../src/components/useTalismanOrb.ts","../src/components/TalismanOrb.tsx","../src/components/TalismanOrbRectangle.tsx","../src/util/getTalismanOrbDataUrl.tsx"],"sourcesContent":["import type { AccountPlatform } from \"@talismn/crypto\"\nimport type { FC } from \"react\"\n\nexport const TalismanOrbLogo: FC<{ platform: AccountPlatform }> = ({ platform }) => {\n switch (platform) {\n case \"ethereum\":\n return (\n <g opacity=\"0.75\" transform=\"scale(0.7) translate(14 14)\" className=\"orb-type\">\n <path\n d=\"M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z\"\n fill=\"white\"\n />\n <path\n d=\"M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z\"\n fill=\"white\"\n />\n </g>\n )\n case \"polkadot\":\n return (\n <g opacity=\"0.75\" transform=\"scale(2.2) translate(4.5 3.9)\" className=\"orb-type\">\n <path\n d=\"M9.99937 4.4612C12.1176 4.4612 13.8347 3.46253 13.8347 2.2306C13.8347 0.998674 12.1176 0 9.99937 0C7.88119 0 6.16406 0.998674 6.16406 2.2306C6.16406 3.46253 7.88119 4.4612 9.99937 4.4612Z\"\n fill=\"white\"\n />\n <path\n d=\"M9.99937 21.2683C12.1176 21.2683 13.8347 20.2697 13.8347 19.0377C13.8347 17.8058 12.1176 16.8071 9.99937 16.8071C7.88119 16.8071 6.16406 17.8058 6.16406 19.0377C6.16406 20.2697 7.88119 21.2683 9.99937 21.2683Z\"\n fill=\"white\"\n />\n <path\n d=\"M4.65427 7.54892C5.71336 5.71457 5.70649 3.72787 4.63892 3.11149C3.57135 2.49511 1.84735 3.48246 0.788259 5.31681C-0.270832 7.15115 -0.263958 9.13786 0.803612 9.75424C1.87118 10.3706 3.59518 9.38326 4.65427 7.54892Z\"\n fill=\"white\"\n />\n <path\n d=\"M19.2083 15.9515C20.2674 14.1171 20.2611 12.1307 19.1943 11.5148C18.1274 10.8988 16.404 11.8865 15.3449 13.7209C14.2858 15.5552 14.2921 17.5416 15.3589 18.1575C16.4258 18.7735 18.1492 17.7858 19.2083 15.9515Z\"\n fill=\"white\"\n />\n <path\n d=\"M4.6399 18.1571C5.70747 17.5407 5.71434 15.554 4.65525 13.7196C3.59616 11.8853 1.87216 10.8979 0.804589 11.5143C-0.262981 12.1307 -0.269855 14.1174 0.789235 15.9517C1.84833 17.7861 3.57233 18.7734 4.6399 18.1571Z\"\n fill=\"white\"\n />\n <path\n d=\"M19.1952 9.75475C20.2621 9.13878 20.2684 7.15241 19.2093 5.31807C18.1502 3.48372 16.4268 2.49603 15.3599 3.11199C14.2931 3.72796 14.2868 5.71433 15.3459 7.54867C16.405 9.38302 18.1284 10.3707 19.1952 9.75475Z\"\n fill=\"white\"\n />\n </g>\n )\n case \"solana\":\n return (\n <g opacity=\"0.75\" className=\"orb-type\" transform=\"scale(0.45) translate(37.5, 37.5)\">\n <path\n d=\"M70.6648 50.1769L58.9393 62.775C58.6844 63.0486 58.376 63.2668 58.0332 63.4159C57.6905 63.5651 57.3208 63.6419 56.9472 63.6417H1.36128C1.09605 63.6417 0.836598 63.5641 0.614804 63.4184C0.393011 63.2727 0.218536 63.0652 0.112817 62.8215C0.00709765 62.5779 -0.0252603 62.3085 0.0197186 62.0467C0.0646974 61.7848 0.185054 61.5418 0.366 61.3476L12.1006 48.7496C12.3548 48.4766 12.6623 48.2589 13.0039 48.1098C13.3455 47.9607 13.714 47.8834 14.0866 47.8828H69.6695C69.9348 47.8828 70.1942 47.9604 70.416 48.1062C70.6378 48.2519 70.8123 48.4593 70.918 48.703C71.0237 48.9467 71.0561 49.216 71.0111 49.4778C70.9661 49.7397 70.8458 49.9827 70.6648 50.1769V50.1769ZM58.9393 24.8081C58.6844 24.5345 58.376 24.3163 58.0332 24.1672C57.6905 24.0181 57.3208 23.9412 56.9472 23.9414H1.36128C1.09605 23.9414 0.836598 24.019 0.614804 24.1647C0.393011 24.3105 0.218536 24.5179 0.112817 24.7616C0.00709765 25.0053 -0.0252603 25.2746 0.0197186 25.5364C0.0646974 25.7983 0.185054 26.0413 0.366 26.2355L12.1006 38.8336C12.3548 39.1065 12.6623 39.3242 13.0039 39.4733C13.3455 39.6224 13.714 39.6997 14.0866 39.7003H69.6695C69.9348 39.7003 70.1942 39.6227 70.416 39.477C70.6378 39.3313 70.8123 39.1238 70.918 38.8801C71.0237 38.6365 71.0561 38.3671 71.0111 38.1053C70.9661 37.8434 70.8458 37.6004 70.6648 37.4062L58.9393 24.8081ZM1.36128 15.7589H56.9472C57.3208 15.7591 57.6905 15.6822 58.0332 15.5331C58.376 15.384 58.6844 15.1658 58.9393 14.8922L70.6648 2.29413C70.8458 2.09986 70.9661 1.85688 71.0111 1.59502C71.0561 1.33317 71.0237 1.06385 70.918 0.820169C70.8123 0.576485 70.6378 0.369047 70.416 0.223341C70.1942 0.0776352 69.9348 8.97308e-06 69.6695 0L14.0866 0C13.714 0.000635258 13.3455 0.077888 13.0039 0.226975C12.6623 0.376063 12.3548 0.593811 12.1006 0.866739L0.369025 13.4648C0.188254 13.6588 0.0679503 13.9016 0.0228694 14.1631C-0.0222115 14.4247 0.00988974 14.6938 0.115236 14.9373C0.220583 15.1809 0.394595 15.3884 0.615931 15.5343C0.837268 15.6802 1.09631 15.7583 1.36128 15.7589V15.7589Z\"\n fill=\"white\"\n />\n </g>\n )\n default:\n return null\n }\n}\n","import { getAccountPlatformFromAddress, normalizeAddress } from \"@talismn/crypto\"\nimport md5 from \"blueimp-md5\"\nimport Color from \"color\"\nimport { useId, useMemo } from \"react\"\n\nconst djb2 = (str: string) => {\n let hash = 5381\n for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i)\n return hash\n}\n\nconst valueFromHash = (hash: string, max: number) => {\n return (max + djb2(hash)) % max\n}\n\nconst colorFromHash = (hash: string) => {\n const hue = valueFromHash(hash, 360)\n return Color.hsv(hue, 100, 100)\n}\n\nconst rotateText = (text: string, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars)\n\nexport const useTalismanOrb = (seed: string) => {\n const id = useId()\n\n return useMemo(() => {\n try {\n // those break if seed is empty or an invalid address\n\n // biome-ignore lint/correctness/noInnerDeclarations: hack\n var platform = getAccountPlatformFromAddress(seed)\n\n // seed may be specific to a ss58 prefix, get the base address\n // biome-ignore lint/correctness/noInnerDeclarations: hack\n var address = normalizeAddress(seed)\n } catch {\n platform = \"polkadot\"\n address = seed\n }\n\n // derive 3 hashs from the seed, used to generate the 3 colors\n const hash1 = md5(address)\n const hash2 = rotateText(hash1, 1)\n const hash3 = rotateText(hash1, 2)\n\n // the 2 darkest ones will be used as gradient BG\n // the lightest one will be used as gradient circle, to mimic a 3D lighting effect\n const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(\n (c1, c2) => c1.lightness() - c2.lightness()\n )\n\n // random location in top left corner, avoid beeing to close from the center\n const dotX = 10 + valueFromHash(hash1, 10)\n const dotY = 10 + valueFromHash(hash2, 10)\n\n // global rotation\n const rotation = valueFromHash(hash1, 360)\n\n return {\n id, //multiple avatars should cohabit on the same page\n bgColor1: colors[0].hex(),\n bgColor2: colors[1].hex(),\n glowColor: colors[2].hex(),\n transform: `rotate(${rotation} 32 32)`,\n cx: dotX,\n cy: dotY,\n platform,\n }\n }, [id, seed])\n}\n","import type { FC } from \"react\"\n\nimport { TalismanOrbLogo } from \"./TalismanOrbLogo\"\nimport type { TalismanOrbProps } from \"./types\"\nimport { useTalismanOrb } from \"./useTalismanOrb\"\n\nexport const TalismanOrb: FC<TalismanOrbProps> = ({\n seed,\n width = \"1em\",\n height = \"1em\",\n className,\n}) => {\n const { id, bgColor1, bgColor2, transform, glowColor, cx, cy, platform } = useTalismanOrb(seed)\n\n return (\n <svg\n width={width}\n height={height}\n viewBox={`0 0 64 64`}\n className={className}\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient id={`${id}-bg`}>\n <stop offset=\"20%\" stopColor={bgColor1} />\n <stop offset=\"100%\" stopColor={bgColor2} />\n </linearGradient>\n <radialGradient id={`${id}-circle`}>\n <stop offset=\"10%\" stopColor={glowColor} />\n <stop offset=\"100%\" stopColor=\"transparent\" />\n </radialGradient>\n <clipPath id={`${id}-clip`}>\n <circle cx=\"32\" cy=\"32\" r=\"32\" />\n </clipPath>\n </defs>\n <g clipPath={`url(#${id}-clip)`}>\n <g transform={transform}>\n <rect fill={`url(#${id}-bg)`} x={0} y={0} width={64} height={64} />\n <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />\n </g>\n <TalismanOrbLogo platform={platform} />\n </g>\n </svg>\n )\n}\n","import type { FC } from \"react\"\n\nimport type { TalismanOrbProps } from \"./types\"\nimport { useTalismanOrb } from \"./useTalismanOrb\"\n\nexport const TalismanOrbRectangle: FC<TalismanOrbProps> = ({ width, height, seed, className }) => {\n const { id, bgColor1, bgColor2, transform, glowColor, cx, cy } = useTalismanOrb(seed)\n\n return (\n <svg\n width={width}\n height={height}\n viewBox={`0 0 64 64`}\n preserveAspectRatio=\"none\"\n className={className}\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient id={`${id}-bg`}>\n <stop offset=\"20%\" stopColor={bgColor1} />\n <stop offset=\"100%\" stopColor={bgColor2} />\n </linearGradient>\n <radialGradient id={`${id}-circle`}>\n <stop offset=\"10%\" stopColor={glowColor} />\n <stop offset=\"100%\" stopColor=\"transparent\" />\n </radialGradient>\n <clipPath id={`${id}-clip`}>\n <circle cx=\"32\" cy=\"32\" r=\"48\" />\n </clipPath>\n </defs>\n <g clipPath={`url(#${id}-clip)`}>\n <g transform={transform}>\n <rect fill={`url(#${id}-bg)`} x={-16} y={-16} width={96} height={96} />\n <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />\n </g>\n </g>\n </svg>\n )\n}\n","import ReactDOMServer from \"react-dom/server\"\n\nimport { TalismanOrb } from \"../components\"\n\n/**\n * Returns a base64 encoded data url for the Talisman Orb svg\n */\nexport const getTalismanOrbDataUrl = (address: string): `data:image/svg+xml;base64,${string}` => {\n // render the TalismanOrb component and output the SVG as text\n const svg = ReactDOMServer.renderToStaticMarkup(<TalismanOrb seed={address} />)\n\n // convert to data url\n return `data:image/svg+xml;base64,${Buffer.from(svg).toString(\"base64\")}`\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsxs","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/TalismanOrbLogo.tsx","../src/components/useTalismanOrb.ts","../src/computeTalismanOrb.ts","../src/components/TalismanOrb.tsx","../src/components/TalismanOrbRectangle.tsx","../src/util/getTalismanOrbDataUrl.ts"],"sourcesContent":["import type { AccountPlatform } from \"@talismn/crypto\"\nimport type { FC } from \"react\"\n\nexport const TalismanOrbLogo: FC<{ platform: AccountPlatform }> = ({ platform }) => {\n switch (platform) {\n case \"ethereum\":\n return (\n <g opacity=\"0.75\" transform=\"scale(0.7) translate(14 14)\" className=\"orb-type\">\n <path\n d=\"M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z\"\n fill=\"white\"\n />\n <path\n d=\"M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z\"\n fill=\"white\"\n />\n </g>\n )\n case \"polkadot\":\n return null\n case \"solana\":\n return (\n <g opacity=\"0.75\" className=\"orb-type\" transform=\"scale(0.45) translate(37.5, 37.5)\">\n <path\n d=\"M70.6648 50.1769L58.9393 62.775C58.6844 63.0486 58.376 63.2668 58.0332 63.4159C57.6905 63.5651 57.3208 63.6419 56.9472 63.6417H1.36128C1.09605 63.6417 0.836598 63.5641 0.614804 63.4184C0.393011 63.2727 0.218536 63.0652 0.112817 62.8215C0.00709765 62.5779 -0.0252603 62.3085 0.0197186 62.0467C0.0646974 61.7848 0.185054 61.5418 0.366 61.3476L12.1006 48.7496C12.3548 48.4766 12.6623 48.2589 13.0039 48.1098C13.3455 47.9607 13.714 47.8834 14.0866 47.8828H69.6695C69.9348 47.8828 70.1942 47.9604 70.416 48.1062C70.6378 48.2519 70.8123 48.4593 70.918 48.703C71.0237 48.9467 71.0561 49.216 71.0111 49.4778C70.9661 49.7397 70.8458 49.9827 70.6648 50.1769V50.1769ZM58.9393 24.8081C58.6844 24.5345 58.376 24.3163 58.0332 24.1672C57.6905 24.0181 57.3208 23.9412 56.9472 23.9414H1.36128C1.09605 23.9414 0.836598 24.019 0.614804 24.1647C0.393011 24.3105 0.218536 24.5179 0.112817 24.7616C0.00709765 25.0053 -0.0252603 25.2746 0.0197186 25.5364C0.0646974 25.7983 0.185054 26.0413 0.366 26.2355L12.1006 38.8336C12.3548 39.1065 12.6623 39.3242 13.0039 39.4733C13.3455 39.6224 13.714 39.6997 14.0866 39.7003H69.6695C69.9348 39.7003 70.1942 39.6227 70.416 39.477C70.6378 39.3313 70.8123 39.1238 70.918 38.8801C71.0237 38.6365 71.0561 38.3671 71.0111 38.1053C70.9661 37.8434 70.8458 37.6004 70.6648 37.4062L58.9393 24.8081ZM1.36128 15.7589H56.9472C57.3208 15.7591 57.6905 15.6822 58.0332 15.5331C58.376 15.384 58.6844 15.1658 58.9393 14.8922L70.6648 2.29413C70.8458 2.09986 70.9661 1.85688 71.0111 1.59502C71.0561 1.33317 71.0237 1.06385 70.918 0.820169C70.8123 0.576485 70.6378 0.369047 70.416 0.223341C70.1942 0.0776352 69.9348 8.97308e-06 69.6695 0L14.0866 0C13.714 0.000635258 13.3455 0.077888 13.0039 0.226975C12.6623 0.376063 12.3548 0.593811 12.1006 0.866739L0.369025 13.4648C0.188254 13.6588 0.0679503 13.9016 0.0228694 14.1631C-0.0222115 14.4247 0.00988974 14.6938 0.115236 14.9373C0.220583 15.1809 0.394595 15.3884 0.615931 15.5343C0.837268 15.6802 1.09631 15.7583 1.36128 15.7589V15.7589Z\"\n fill=\"white\"\n />\n </g>\n )\n default:\n return null\n }\n}\n","import { useId, useMemo } from \"react\"\n\nimport { computeTalismanOrb } from \"../computeTalismanOrb\"\n\nexport const useTalismanOrb = (seed: string) => {\n const id = useId()\n\n return useMemo(() => {\n return {\n id, // multiple avatars should cohabit on the same page\n ...computeTalismanOrb(seed),\n }\n }, [id, seed])\n}\n","import type { AccountPlatform } from \"@talismn/crypto\"\nimport { getAccountPlatformFromAddress, normalizeAddress } from \"@talismn/crypto\"\nimport md5 from \"blueimp-md5\"\nimport Color from \"color\"\n\nconst djb2 = (str: string) => {\n let hash = 5381\n for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i)\n return hash\n}\n\nconst valueFromHash = (hash: string, max: number) => {\n return (max + djb2(hash)) % max\n}\n\nconst colorFromHash = (hash: string) => {\n const hue = valueFromHash(hash, 360)\n return Color.hsv(hue, 100, 100)\n}\n\nconst rotateText = (text: string, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars)\n\nexport type TalismanOrbData = {\n bgColor1: string\n bgColor2: string\n glowColor: string\n transform: string\n cx: number\n cy: number\n platform: AccountPlatform\n}\n\n/** Pure computation of orb visual data from a seed (address). No React dependency. */\nexport const computeTalismanOrb = (seed: string): TalismanOrbData => {\n let platform: AccountPlatform\n let address: string\n\n try {\n platform = getAccountPlatformFromAddress(seed)\n address = normalizeAddress(seed)\n } catch {\n platform = \"polkadot\"\n address = seed\n }\n\n // derive 3 hashes from the seed, used to generate the 3 colors\n const hash1 = md5(address)\n const hash2 = rotateText(hash1, 1)\n const hash3 = rotateText(hash1, 2)\n\n // the 2 darkest ones will be used as gradient BG\n // the lightest one will be used as gradient circle, to mimic a 3D lighting effect\n const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(\n (c1, c2) => c1.lightness() - c2.lightness()\n )\n\n // random location in top left corner, avoid being too close to the center\n const dotX = 10 + valueFromHash(hash1, 10)\n const dotY = 10 + valueFromHash(hash2, 10)\n\n // global rotation\n const rotation = valueFromHash(hash1, 360)\n\n return {\n bgColor1: colors[0].hex(),\n bgColor2: colors[1].hex(),\n glowColor: colors[2].hex(),\n transform: `rotate(${rotation} 32 32)`,\n cx: dotX,\n cy: dotY,\n platform,\n }\n}\n","import type { FC } from \"react\"\n\nimport { TalismanOrbLogo } from \"./TalismanOrbLogo\"\nimport type { TalismanOrbProps } from \"./types\"\nimport { useTalismanOrb } from \"./useTalismanOrb\"\n\nexport const TalismanOrb: FC<TalismanOrbProps> = ({\n seed,\n width = \"1em\",\n height = \"1em\",\n className,\n}) => {\n const { id, bgColor1, bgColor2, transform, glowColor, cx, cy, platform } = useTalismanOrb(seed)\n\n return (\n <svg\n width={width}\n height={height}\n viewBox={`0 0 64 64`}\n className={className}\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient id={`${id}-bg`}>\n <stop offset=\"20%\" stopColor={bgColor1} />\n <stop offset=\"100%\" stopColor={bgColor2} />\n </linearGradient>\n <radialGradient id={`${id}-circle`}>\n <stop offset=\"10%\" stopColor={glowColor} />\n <stop offset=\"100%\" stopColor=\"transparent\" />\n </radialGradient>\n <clipPath id={`${id}-clip`}>\n <circle cx=\"32\" cy=\"32\" r=\"32\" />\n </clipPath>\n </defs>\n <g clipPath={`url(#${id}-clip)`}>\n <g transform={transform}>\n <rect fill={`url(#${id}-bg)`} x={0} y={0} width={64} height={64} />\n <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />\n </g>\n <TalismanOrbLogo platform={platform} />\n </g>\n </svg>\n )\n}\n","import type { FC } from \"react\"\n\nimport type { TalismanOrbProps } from \"./types\"\nimport { useTalismanOrb } from \"./useTalismanOrb\"\n\nexport const TalismanOrbRectangle: FC<TalismanOrbProps> = ({ width, height, seed, className }) => {\n const { id, bgColor1, bgColor2, transform, glowColor, cx, cy } = useTalismanOrb(seed)\n\n return (\n <svg\n width={width}\n height={height}\n viewBox={`0 0 64 64`}\n preserveAspectRatio=\"none\"\n className={className}\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient id={`${id}-bg`}>\n <stop offset=\"20%\" stopColor={bgColor1} />\n <stop offset=\"100%\" stopColor={bgColor2} />\n </linearGradient>\n <radialGradient id={`${id}-circle`}>\n <stop offset=\"10%\" stopColor={glowColor} />\n <stop offset=\"100%\" stopColor=\"transparent\" />\n </radialGradient>\n <clipPath id={`${id}-clip`}>\n <circle cx=\"32\" cy=\"32\" r=\"48\" />\n </clipPath>\n </defs>\n <g clipPath={`url(#${id}-clip)`}>\n <g transform={transform}>\n <rect fill={`url(#${id}-bg)`} x={-16} y={-16} width={96} height={96} />\n <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />\n </g>\n </g>\n </svg>\n )\n}\n","import type { AccountPlatform } from \"@talismn/crypto\"\n\nimport { computeTalismanOrb } from \"../computeTalismanOrb\"\n\nconst platformLogoSvg = (platform: AccountPlatform): string => {\n switch (platform) {\n case \"ethereum\":\n return '<g opacity=\"0.75\" transform=\"scale(0.7) translate(14 14)\" class=\"orb-type\"><path d=\"M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z\" fill=\"white\"/><path d=\"M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z\" fill=\"white\"/></g>'\n case \"solana\":\n return '<g opacity=\"0.75\" class=\"orb-type\" transform=\"scale(0.45) translate(37.5, 37.5)\"><path d=\"M70.6648 50.1769L58.9393 62.775C58.6844 63.0486 58.376 63.2668 58.0332 63.4159C57.6905 63.5651 57.3208 63.6419 56.9472 63.6417H1.36128C1.09605 63.6417 0.836598 63.5641 0.614804 63.4184C0.393011 63.2727 0.218536 63.0652 0.112817 62.8215C0.00709765 62.5779 -0.0252603 62.3085 0.0197186 62.0467C0.0646974 61.7848 0.185054 61.5418 0.366 61.3476L12.1006 48.7496C12.3548 48.4766 12.6623 48.2589 13.0039 48.1098C13.3455 47.9607 13.714 47.8834 14.0866 47.8828H69.6695C69.9348 47.8828 70.1942 47.9604 70.416 48.1062C70.6378 48.2519 70.8123 48.4593 70.918 48.703C71.0237 48.9467 71.0561 49.216 71.0111 49.4778C70.9661 49.7397 70.8458 49.9827 70.6648 50.1769V50.1769ZM58.9393 24.8081C58.6844 24.5345 58.376 24.3163 58.0332 24.1672C57.6905 24.0181 57.3208 23.9412 56.9472 23.9414H1.36128C1.09605 23.9414 0.836598 24.019 0.614804 24.1647C0.393011 24.3105 0.218536 24.5179 0.112817 24.7616C0.00709765 25.0053 -0.0252603 25.2746 0.0197186 25.5364C0.0646974 25.7983 0.185054 26.0413 0.366 26.2355L12.1006 38.8336C12.3548 39.1065 12.6623 39.3242 13.0039 39.4733C13.3455 39.6224 13.714 39.6997 14.0866 39.7003H69.6695C69.9348 39.7003 70.1942 39.6227 70.416 39.477C70.6378 39.3313 70.8123 39.1238 70.918 38.8801C71.0237 38.6365 71.0561 38.3671 71.0111 38.1053C70.9661 37.8434 70.8458 37.6004 70.6648 37.4062L58.9393 24.8081ZM1.36128 15.7589H56.9472C57.3208 15.7591 57.6905 15.6822 58.0332 15.5331C58.376 15.384 58.6844 15.1658 58.9393 14.8922L70.6648 2.29413C70.8458 2.09986 70.9661 1.85688 71.0111 1.59502C71.0561 1.33317 71.0237 1.06385 70.918 0.820169C70.8123 0.576485 70.6378 0.369047 70.416 0.223341C70.1942 0.0776352 69.9348 8.97308e-06 69.6695 0L14.0866 0C13.714 0.000635258 13.3455 0.077888 13.0039 0.226975C12.6623 0.376063 12.3548 0.593811 12.1006 0.866739L0.369025 13.4648C0.188254 13.6588 0.0679503 13.9016 0.0228694 14.1631C-0.0222115 14.4247 0.00988974 14.6938 0.115236 14.9373C0.220583 15.1809 0.394595 15.3884 0.615931 15.5343C0.837268 15.6802 1.09631 15.7583 1.36128 15.7589V15.7589Z\" fill=\"white\"/></g>'\n default:\n return \"\"\n }\n}\n\n/**\n * Returns a base64 encoded data url for the Talisman Orb svg.\n * Pure implementation — no React or react-dom dependency.\n */\nexport const getTalismanOrbDataUrl = (address: string): `data:image/svg+xml;base64,${string}` => {\n const { bgColor1, bgColor2, glowColor, transform, cx, cy, platform } = computeTalismanOrb(address)\n\n // Standalone SVGs embedded as data URIs don't share a DOM, so a fixed ID prefix is safe\n const id = \"orb\"\n\n const svg = `<svg viewBox=\"0 0 64 64\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><defs><linearGradient id=\"${id}-bg\"><stop offset=\"20%\" stop-color=\"${bgColor1}\"/><stop offset=\"100%\" stop-color=\"${bgColor2}\"/></linearGradient><radialGradient id=\"${id}-circle\"><stop offset=\"10%\" stop-color=\"${glowColor}\"/><stop offset=\"100%\" stop-color=\"transparent\"/></radialGradient><clipPath id=\"${id}-clip\"><circle cx=\"32\" cy=\"32\" r=\"32\"/></clipPath></defs><g clip-path=\"url(#${id}-clip)\"><g transform=\"${transform}\"><rect fill=\"url(#${id}-bg)\" x=\"0\" y=\"0\" width=\"64\" height=\"64\"/><circle fill=\"url(#${id}-circle)\" cx=\"${cx}\" cy=\"${cy}\" r=\"45\" opacity=\"0.7\"/></g>${platformLogoSvg(platform)}</g></svg>`\n\n return `data:image/svg+xml;base64,${btoa(svg)}`\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsxs"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@talismn/orb",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"author": "Talisman",
|
|
5
5
|
"license": "GPL-3.0-or-later",
|
|
6
6
|
"publishConfig": {
|
|
@@ -17,19 +17,16 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"blueimp-md5": "2.19.0",
|
|
19
19
|
"color": "4.2.3",
|
|
20
|
-
"@talismn/crypto": "0.3.
|
|
20
|
+
"@talismn/crypto": "0.3.3"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@types/react": "18.3.12",
|
|
24
|
-
"@types/react-dom": "18.3.1",
|
|
25
24
|
"react": "18.3.1",
|
|
26
|
-
"react-dom": "18.3.1",
|
|
27
25
|
"typescript": "^5.6.3",
|
|
28
26
|
"@talismn/tsconfig": "0.0.4"
|
|
29
27
|
},
|
|
30
28
|
"peerDependencies": {
|
|
31
|
-
"react": "*"
|
|
32
|
-
"react-dom": "*"
|
|
29
|
+
"react": "*"
|
|
33
30
|
},
|
|
34
31
|
"types": "./dist/index.d.ts",
|
|
35
32
|
"exports": {
|