@rainbow-me/rainbowkit
Version:
The best way to connect a wallet
92 lines (89 loc) • 2.17 kB
JavaScript
"use client";
import {
isIOS
} from "./chunk-N6EWR2LO.js";
import {
Box
} from "./chunk-ZKEPQLOV.js";
import {
useAsyncImage
} from "./chunk-RFBRD22G.js";
// src/components/AsyncImage/AsyncImage.tsx
import React, { useReducer } from "react";
function AsyncImage({
alt,
background,
borderColor,
borderRadius,
useAsImage,
boxShadow,
height,
src: srcProp,
width,
testId
}) {
const ios = isIOS();
const src = useAsyncImage(srcProp);
const isRemoteImage = src && /^http/.test(src);
const [isRemoteImageLoaded, setRemoteImageLoaded] = useReducer(
() => true,
false
);
return /* @__PURE__ */ React.createElement(
Box,
{
"aria-label": alt,
borderRadius,
boxShadow,
height: typeof height === "string" ? height : void 0,
overflow: "hidden",
position: "relative",
role: "img",
style: {
background,
height: typeof height === "number" ? height : void 0,
width: typeof width === "number" ? width : void 0
},
width: typeof width === "string" ? width : void 0,
testId
},
/* @__PURE__ */ React.createElement(
Box,
{
...isRemoteImage ? {
"aria-hidden": true,
as: "img",
onLoad: setRemoteImageLoaded,
src
} : { "aria-hidden": true, as: "img", src },
height: "full",
position: "absolute",
...ios ? { WebkitUserSelect: "none" } : {},
style: {
WebkitTouchCallout: "none",
transition: "opacity .15s linear",
userSelect: "none",
...!useAsImage && isRemoteImage ? {
opacity: isRemoteImageLoaded ? 1 : 0
} : {}
},
width: "full"
}
),
borderColor ? /* @__PURE__ */ React.createElement(
Box,
{
...typeof borderColor === "object" && "custom" in borderColor ? { style: { borderColor: borderColor.custom } } : { borderColor },
borderRadius,
borderStyle: "solid",
borderWidth: "1",
height: "full",
position: "relative",
width: "full"
}
) : null
);
}
export {
AsyncImage
};