@metamask/design-system-react
Version:
Design system react ui components
101 lines • 4.25 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Jazzicon = void 0;
const jazzicon_1 = __importDefault(require("@metamask/jazzicon"));
const utils_1 = require("@metamask/utils");
const react_1 = __importStar(require("react"));
const tw_merge_1 = require("../../../utils/tw-merge.cjs");
const Jazzicon_utilities_1 = require("./Jazzicon.utilities.cjs");
/**
* Cache for storing generated SVG elements by `address:diameter` so
* we don't regenerate them repeatedly.
*/
const iconCache = {};
const Jazzicon = ({ address, size = 32, className, ...props }) => {
const containerRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
let isCancelled = false;
const generateJazzicon = async () => {
if (!containerRef.current) {
return;
}
// Clear any existing content
while (containerRef.current.firstChild) {
containerRef.current.removeChild(containerRef.current.firstChild);
}
// Check the cache
const cacheKey = `${address.toLowerCase()}:${size}`;
if (iconCache[cacheKey]) {
// If cached, just append a clone
if (!isCancelled) {
const clone = iconCache[cacheKey].cloneNode(true);
containerRef.current.appendChild(clone);
}
return;
}
// Determine the CAIP namespace
const namespace = await (0, Jazzicon_utilities_1.getCaipNamespaceFromAddress)(address);
if (isCancelled) {
return;
}
// Pick seeding strategy based on namespace
let seed;
if (namespace === utils_1.KnownCaipNamespace.Eip155) {
seed = (0, Jazzicon_utilities_1.generateSeedEthereum)(address);
}
else {
seed = (0, Jazzicon_utilities_1.generateSeedNonEthereum)(address);
}
// Create Jazzicon
const newIcon = (0, jazzicon_1.default)(size, seed);
// Cache it
iconCache[cacheKey] = newIcon;
// Append a fresh clone
if (!isCancelled && containerRef.current) {
containerRef.current.appendChild(newIcon.cloneNode(true));
}
};
generateJazzicon().catch(() => {
// Silently ignore errors during async generation
});
// Cleanup
return () => {
isCancelled = true;
if (containerRef.current) {
while (containerRef.current.firstChild) {
containerRef.current.removeChild(containerRef.current.firstChild);
}
}
};
}, [address, size]);
return (react_1.default.createElement("div", { ref: containerRef, className: (0, tw_merge_1.twMerge)('flex [&>div]:!rounded-none', className), ...props }));
};
exports.Jazzicon = Jazzicon;
exports.Jazzicon.displayName = 'Jazzicon';
//# sourceMappingURL=Jazzicon.cjs.map