@metamask/design-system-react
Version:
Design system react ui components
68 lines • 2.66 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import { extractAccountAddress, generateIconSeed } from "@metamask/design-system-shared";
import $jazzicon from "@metamask/jazzicon";
const jazzicon = $importDefault($jazzicon);
import $React, { useEffect, useRef } from "react";
const React = $importDefault($React);
import { twMerge } from "../../../utils/tw-merge.mjs";
/**
* Cache for storing generated SVG elements by `address:diameter` so
* we don't regenerate them repeatedly.
*/
const iconCache = {};
export const Jazzicon = ({ address, size = 32, className, ...props }) => {
const containerRef = useRef(null);
useEffect(() => {
if (!containerRef.current) {
return () => {
// No cleanup needed if container ref was null
};
}
// 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
const clone = iconCache[cacheKey].cloneNode(true);
containerRef.current.appendChild(clone);
return () => {
if (containerRef.current) {
while (containerRef.current.firstChild) {
containerRef.current.removeChild(containerRef.current.firstChild);
}
}
};
}
// Extract the account address from CAIP-10 format if needed
const accountAddress = extractAccountAddress(address);
// Generate appropriate seed based on address format
const seed = generateIconSeed(accountAddress);
// Create Jazzicon
const newIcon = jazzicon(size, seed);
// Cache it
iconCache[cacheKey] = newIcon;
// Append a fresh clone
if (containerRef.current) {
containerRef.current.appendChild(newIcon.cloneNode(true));
}
// Cleanup
return () => {
if (containerRef.current) {
while (containerRef.current.firstChild) {
containerRef.current.removeChild(containerRef.current.firstChild);
}
}
};
}, [address, size]);
return (React.createElement("div", { ref: containerRef, className: twMerge('flex [&>div]:!rounded-none', className), ...props }));
};
Jazzicon.displayName = 'Jazzicon';
//# sourceMappingURL=Jazzicon.mjs.map