@daimo/pay/build/src/hooks/useTokenOptions.js

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

import { jsx } from 'react/jsx-runtime';
import { getChainName } from '@daimo/pay-common';
import TokenChainLogo from '../components/Common/TokenChainLogo/index.js';
import { ROUTES } from '../constants/routes.js';
import { formatUsd, roundTokenAmount } from '../utils/format.js';
import { usePayContext } from './usePayContext.js';

/// and Solana tokens. See OptionsList.
function useTokenOptions(mode) {
    const { setRoute, paymentState } = usePayContext();
    const { isDepositFlow, walletPaymentOptions, solanaPaymentOptions, setSelectedTokenOption, setSelectedSolanaTokenOption, } = paymentState;
    let optionsList = [];
    let isLoading = false;
    if (["evm", "all"].includes(mode)) {
        optionsList.push(...getEvmTokenOptions(walletPaymentOptions.options ?? [], isDepositFlow, setSelectedTokenOption, setRoute));
        isLoading ||= walletPaymentOptions.isLoading;
    }
    if (["solana", "all"].includes(mode)) {
        optionsList.push(...getSolanaTokenOptions(solanaPaymentOptions.options ?? [], isDepositFlow, setSelectedSolanaTokenOption, setRoute));
        isLoading ||= solanaPaymentOptions.isLoading;
    }
    optionsList.sort((a, b) => {
        const dDisabled = (a.disabled ? 1 : 0) - (b.disabled ? 1 : 0);
        if (dDisabled !== 0)
            return dDisabled;
        const dSort = (b.sortValue ?? 0) - (a.sortValue ?? 0);
        return dSort;
    });
    return { optionsList, isLoading };
}
function getEvmTokenOptions(options, isDepositFlow, setSelectedTokenOption, setRoute) {
    return options.map((option) => {
        const chainName = getChainName(option.balance.token.chainId);
        const titlePrice = isDepositFlow
            ? formatUsd(option.balance.usd)
            : roundTokenAmount(option.required.amount, option.required.token);
        const title = `${titlePrice} ${option.balance.token.symbol} on ${chainName}`;
        const balanceStr = `${roundTokenAmount(option.balance.amount, option.balance.token)} ${option.balance.token.symbol}`;
        const subtitle = option.disabledReason ??
            `${isDepositFlow ? "" : "Balance: "}${balanceStr}`;
        const disabled = option.disabledReason != null;
        return {
            id: getDaimoTokenKey(option.balance.token),
            sortValue: option.balance.usd,
            title,
            subtitle,
            icons: [
                jsx(TokenChainLogo, { token: option.balance.token }, getDaimoTokenKey(option.balance.token)),
            ],
            onClick: () => {
                setSelectedTokenOption(option);
                const meta = {
                    event: "click-token",
                    tokenSymbol: option.balance.token.symbol,
                    chainId: option.balance.token.chainId,
                };
                if (isDepositFlow) {
                    setRoute(ROUTES.SELECT_AMOUNT, meta);
                }
                else {
                    setRoute(ROUTES.PAY_WITH_TOKEN, meta);
                }
            },
            disabled,
        };
    });
}
function getSolanaTokenOptions(options, isDepositFlow, setSelectedSolanaTokenOption, setRoute) {
    return options.map((option) => {
        const titlePrice = isDepositFlow
            ? formatUsd(option.balance.usd)
            : roundTokenAmount(option.required.amount, option.required.token);
        const title = `${titlePrice} ${option.balance.token.symbol} on Solana`;
        const balanceStr = `${roundTokenAmount(option.balance.amount, option.balance.token)} ${option.balance.token.symbol}`;
        const subtitle = option.disabledReason ??
            `${isDepositFlow ? "" : "Balance: "}${balanceStr}`;
        const disabled = option.disabledReason != null;
        return {
            id: getDaimoTokenKey(option.balance.token),
            sortValue: option.balance.usd,
            title,
            subtitle,
            icons: [
                jsx(TokenChainLogo, { token: option.balance.token }, getDaimoTokenKey(option.balance.token)),
            ],
            onClick: () => {
                setSelectedSolanaTokenOption(option);
                const meta = {
                    event: "click-solana-token",
                    tokenSymbol: option.balance.token.symbol,
                    chainId: option.balance.token.chainId,
                };
                if (isDepositFlow) {
                    setRoute(ROUTES.SOLANA_SELECT_AMOUNT, meta);
                }
                else {
                    setRoute(ROUTES.SOLANA_PAY_WITH_TOKEN, meta);
                }
            },
            disabled,
        };
    });
}
function getDaimoTokenKey(token) {
    return `${token.chainId}-${token.token}`;
}

export { useTokenOptions };
//# sourceMappingURL=useTokenOptions.js.map