@unowallet/token-price-widget/dist/UnoTokenPriceWidget.js

Uno Wallet Token Price Widget for displaying token price information and linking to uno wallet for swapping

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ExternalLinkIcon, SwapIcon } from "./icons/index";
import { useState, useEffect, useMemo } from "react";
import { PercentPriceChange } from "./PercentPriceChange";
import { Button } from "./Button";
import { formatCurrency, getUnoDeeplinkUrl } from "./utils";
const UnoTokenPriceWidget = ({ tokenName, tokenSymbol, tokenImage, tokenAddress, appId, onClickSwap = () => { }, language = "en", size = "large", }) => {
    const [tokenPrice, setTokenPrice] = useState(null);
    const fetchPrice = async () => {
        try {
            const res = await fetch(`https://partyworld-worker-api.partyapp.workers.dev/api/erc20/token-price?tokenAddress=${tokenAddress}`);
            const data = await res.json();
            setTokenPrice(data);
        }
        catch (error) {
            console.error("Error fetching token price:", error);
        }
    };
    useEffect(() => {
        fetchPrice();
    }, [tokenAddress]);
    const unoLink = useMemo(() => getUnoDeeplinkUrl({
        toToken: tokenAddress,
        referrerAppId: appId,
    }), [getUnoDeeplinkUrl, tokenAddress, appId]);
    return (_jsx("div", { className: `${size === "small" ? "p-4" : "p-6"} rounded-[24px] w-full bg-gradient-to-b from-[color(display-p3_1_1_1/0.8)] to-[color(display-p3_1_1_1)] shadow-[0px_4px_6px_-1px_color(display-p3_0_0_0/0.1),0px_2px_4px_-2px_color(display-p3_0_0_0/0.1)] backdrop-blur-[8px]`, onClick: () => {
            if (size === "small") {
                onClickSwap();
                window.open(unoLink, "_self");
            }
        }, children: _jsxs("div", { className: "flex flex-col gap-3", children: [size === "large" || size === "small" ? (_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("img", { src: "https://assets.partyworld.dev/uno/uno-logo-dark.svg", alt: "Uno", className: "w-[70px] h-[16px]" }), _jsx(ExternalLinkIcon, { color: "#0f172a", onClick: () => {
                                onClickSwap();
                                window.open(unoLink, "_self");
                            } })] })) : null, _jsx("div", { className: "flex w-full items-center gap-3 font-rubik", children: _jsxs("div", { className: "flex gap-3 w-full justify-between items-center", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("img", { src: tokenImage, alt: tokenName, className: "w-[64px] h-[64px] rounded-full" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "font-bold text-[18px] text-left", children: tokenName }), _jsx("div", { className: "font-medium text-slate-500 text-left", children: tokenSymbol })] })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "font-bold text-right", children: formatCurrency(tokenPrice?.priceUsd ?? "0", language, 0.0001) }), _jsx(PercentPriceChange, { percentChange: Number(tokenPrice?.percentChange24hr ?? 0), language: language, className: "font-medium text-[16px]" })] })] }) }), size === "large" || size === "medium" ? (_jsx(Button, { className: "w-full font-semibold select-none outline-none cursor-pointer text-[16px]", icon: _jsx(SwapIcon, {}), onClick: () => {
                        onClickSwap();
                        window.open(unoLink, "_self");
                    }, children: size === "large" ? "Swap" : "Swap on UNO" })) : null] }) }));
};
export default UnoTokenPriceWidget;