@coin-voyage/paykit/dist/components/Pages/SelectToken/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ROUTES } from "../../../types/routes";
import { ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
import { useAccount } from "@coin-voyage/crypto/hooks";
import { getChainName } from "@coin-voyage/shared/common";
import { motion } from "framer-motion";
import { chainToLogo } from "../../../assets/chains";
import styled from "../../../styles/styled";
import usePayContext from "../../contexts/pay";
import Button from "../../ui/Button";
import OptionsList from "../../ui/OptionsList";
import { OrderHeader } from "../../ui/OrderHeader";
const TokenChainLogo = ({ chainId, ...props }) => {
    return (_jsxs(TokenChainContainer, { children: [_jsx("img", { ...props }), _jsx(ChainContainer, { children: chainToLogo[chainId] })] }));
};
const TokenChainContainer = styled(motion.div) `
  width: 100%;
  height: 100%;
`;
const ChainContainer = styled(motion.div) `
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  overflow: hidden;
  bottom: 0px;
  right: 0px;
`;
export default function SelectToken() {
    const { setRoute, paymentState, allowedWallets } = usePayContext();
    const { setSelectedTokenOption, payOrderQuotes, setConnectorChainType, selectedWallet, connectorChainType } = paymentState;
    const { account } = useAccount({
        selectedWallet,
        chainType: connectorChainType,
    });
    const filteredAndSortedQuotes = payOrderQuotes.quotes?.
        filter(q => q.balance?.value_usd !== 0).
        sort((a, b) => {
        const aHasAddress = a.address !== null;
        const bHasAddress = b.address !== null;
        // Prioritize native tokens
        if (!aHasAddress && bHasAddress)
            return -1;
        if (aHasAddress && !bHasAddress)
            return 1;
        const valueUsdA = a.currency_amount.value_usd ?? 0;
        const valueUsdB = b.currency_amount.value_usd ?? 0;
        // Balance checks
        const aInsufficient = Number(a?.balance?.value_usd ?? 0) < valueUsdA;
        const bInsufficient = Number(b?.balance?.value_usd ?? 0) < valueUsdB;
        if (aInsufficient && !bInsufficient)
            return 1;
        if (!aInsufficient && bInsufficient)
            return -1;
        if (aInsufficient && bInsufficient)
            return 0;
        return valueUsdB - valueUsdA;
    });
    const selectAnotherMethod = () => {
        setConnectorChainType(undefined);
        setSelectedTokenOption(undefined);
        setRoute(ROUTES.SELECT_METHOD);
    };
    const allowedAddress = allowedWallets?.find(w => w.address === account.address && w.chainType === account.chainType)?.allowed;
    const disabledWallet = allowedWallets === null ? false : !allowedAddress;
    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, { minified: true, showConnectedWallet: true }), disabledWallet ? (_jsxs(ModalContent, { style: {
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    paddingTop: 16,
                    paddingBottom: 16,
                }, children: [_jsx(ModalH1, { children: "Not permitted." }), _jsx("p", { children: "This wallet address is not permitted to pay for this order." }), _jsx(Button, { onClick: selectAnotherMethod, children: "Select Another Wallet" })] })) : _jsx(_Fragment, { children: !payOrderQuotes.isLoading &&
                    filteredAndSortedQuotes?.length === 0 && (_jsxs(ModalContent, { style: {
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        paddingTop: 16,
                        paddingBottom: 16,
                    }, children: [_jsx(ModalH1, { children: "Insufficient balance." }), _jsx(Button, { onClick: selectAnotherMethod, children: "Select Another Method" })] })) }), _jsx(OptionsList, { requiredSkeletons: 4, isLoading: payOrderQuotes.isLoading, options: filteredAndSortedQuotes?.map((quote, idx) => {
                    const title = `${quote.currency_amount.ui_amount} ${quote.ticker} on ${getChainName(quote.chain_id)}`;
                    const subtitle = `Balance: ${quote.balance?.ui_amount ?? "0"} ${quote.ticker}`;
                    const disabled = disabledWallet || (quote.balance?.raw_amount ?? BigInt("0")) < quote.currency_amount.raw_amount;
                    return {
                        id: idx.toString(),
                        title,
                        subtitle,
                        disabled,
                        icons: [
                            _jsx(TokenChainLogo, { src: quote.image_uri, alt: quote.ticker, chainId: quote.chain_id }),
                        ],
                        onClick: () => {
                            setSelectedTokenOption(quote);
                            setRoute(ROUTES.PAY_WITH_TOKEN);
                        },
                    };
                }) ?? [] })] }));
}
//# sourceMappingURL=index.js.map