@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 { flattenChildren } from '../utils/index.js';
import { formatUsd, roundTokenAmount } from '../utils/format.js';
import { useDaimoPay } from './useDaimoPay.js';
import useLocales from './useLocales.js';
import { usePayContext } from './usePayContext.js';

function useTokenOptions(mode) {
  const { setRoute, paymentState } = usePayContext();
  const {
    isDepositFlow,
    walletPaymentOptions,
    solanaPaymentOptions,
    setSelectedTokenOption,
    setSelectedSolanaTokenOption
  } = paymentState;
  const locales = useLocales();
  const onString = flattenChildren(locales.on).join("");
  const pay = useDaimoPay();
  const isPassthrough = !!pay.order?.metadata.payer?.passthroughTokens?.length;
  const nonPassthroughToken = isPassthrough ? pay.order?.destFinalCallTokenAmount.token : void 0;
  let optionsList = [];
  let isLoading = false;
  if (["evm", "all"].includes(mode)) {
    optionsList.push(
      ...getEvmTokenOptions(
        walletPaymentOptions.options ?? [],
        isDepositFlow,
        setSelectedTokenOption,
        setRoute,
        onString,
        nonPassthroughToken
      )
    );
    isLoading ||= walletPaymentOptions.isLoading;
  }
  if (["solana", "all"].includes(mode)) {
    optionsList.push(
      ...getSolanaTokenOptions(
        solanaPaymentOptions.options ?? [],
        isDepositFlow,
        setSelectedSolanaTokenOption,
        setRoute,
        onString
      )
    );
    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, onString, nonPassthroughToken) {
  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} ${onString} ${chainName}`;
    const balanceStr = `${roundTokenAmount(option.balance.amount, option.balance.token)} ${option.balance.token.symbol}`;
    let subtitle = option.disabledReason ?? `${isDepositFlow ? "" : "Balance: "}${balanceStr}`;
    const disabled = option.disabledReason != null;
    if (nonPassthroughToken != null) {
      const defaultSym = nonPassthroughToken.symbol;
      const optSym = option.balance.token.symbol;
      if (option.passthroughAddress == null && optSym !== defaultSym) {
        subtitle = `Convert to ${defaultSym}`;
      } else {
        subtitle = `Deposit ${optSym}`;
      }
    }
    const sortValue = option.balance.usd + (option.passthroughAddress == null ? 0 : 1e9);
    return {
      id: getDaimoTokenKey(option.balance.token),
      sortValue,
      title,
      subtitle,
      icons: [
        /* @__PURE__ */ 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, onString) {
  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} ${onString} 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: [
        /* @__PURE__ */ 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