bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
63 lines (62 loc) • 2.45 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { ImageProtocols } from "bitcoin-image";
import React from "react";
import { cn } from "../../lib/utils.js";
// Initialize bitcoin-image protocols globally
const imageProtocols = new ImageProtocols();
/**
* BitcoinImage component that handles on-chain image resolution
*
* Automatically resolves blockchain image URLs (b://, ord://, etc.) to displayable URLs
* using the bitcoin-image library. Falls back gracefully for invalid or missing images.
*/
export function BitcoinImage({ src, alt, style, className, fallback, showLoading = true, timeout = 5000, }) {
const [displayUrl, setDisplayUrl] = React.useState("");
const [isLoading, setIsLoading] = React.useState(true);
const [hasError, setHasError] = React.useState(false);
React.useEffect(() => {
let mounted = true;
const loadImage = async () => {
if (!src) {
if (mounted) {
setIsLoading(false);
setHasError(true);
}
return;
}
try {
setIsLoading(true);
setHasError(false);
const url = await imageProtocols.getDisplayUrl(src, {
fallback: undefined, // Handle fallback in component
timeout,
});
if (mounted) {
setDisplayUrl(url);
setIsLoading(false);
}
}
catch {
if (mounted) {
setDisplayUrl("");
setIsLoading(false);
setHasError(true);
}
}
};
loadImage();
return () => {
mounted = false;
};
}, [src, timeout]);
// Show loading state
if (isLoading && showLoading) {
return (_jsx("div", { className: "flex items-center justify-center w-full h-full", children: _jsx("span", { className: "text-xs text-muted-foreground", children: "Loading..." }) }));
}
// Show error or fallback
if (hasError || !displayUrl) {
return fallback ? _jsx(_Fragment, { children: fallback }) : null;
}
// Show resolved image
return (_jsx("img", { src: displayUrl, alt: alt, className: cn("w-full h-full object-cover", className), style: style, onError: () => setHasError(true) }));
}