"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { iconSize } from "../../../core/design-system/index.js";
import { useChainQuery } from "../../../core/hooks/others/useChainQuery.js";
import { genericTokenIcon } from "../ConnectWallet/icons/dataUris.js";
import { isNativeToken, } from "../ConnectWallet/screens/nativeToken.js";
import { Img } from "./Img.js";
// Note: Must not use useConnectUI here
/**
 * @internal
 */
export function TokenIcon(props) {
    const chainQuery = useChainQuery(props.chain);
    const tokenImage = useMemo(() => {
        if (isNativeToken(props.token)) {
            return chainQuery.data?.icon?.url;
        }
        return props.token.icon;
    }, [props.token, chainQuery.data]);
    return (_jsx(Img, { src: tokenImage || "", width: iconSize[props.size], height: iconSize[props.size], fallbackImage: genericTokenIcon, client: props.client }));
}
//# sourceMappingURL=TokenIcon.js.map