@daimo/pay/build/src/components/Common/SelectAnotherMethodButton/index.js

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

import { jsx } from 'react/jsx-runtime';
import { ExternalPaymentOptions } from '@daimo/pay-common';
import { useWallet } from '@solana/wallet-adapter-react';
import { useAccount, useDisconnect } from 'wagmi';
import { Phantom, MetaMask, Rainbow, Rabby } from '../../../assets/logos.js';
import { ROUTES } from '../../../constants/routes.js';
import useLocales from '../../../hooks/useLocales.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import styled from '../../../styles/styled/index.js';
import { OptionsList } from '../OptionsList/index.js';

const OptionsContainer = styled.div`
  width: 100%;
  margin-top: 1rem;
`;
function SelectAnotherMethodButton() {
  const locales = useLocales();
  const { paymentState, setRoute } = usePayContext();
  const { externalPaymentOptions } = paymentState;
  const { connector } = useAccount();
  const { disconnectAsync } = useDisconnect();
  const { disconnect: disconnectSolana } = useWallet();
  const allPaymentOptions = Array.from(
    externalPaymentOptions.options.values()
  ).flat();
  const uniquePaymentOption = paymentState.buttonProps?.uniquePaymentOption;
  const createIconDiv = (content, key) => /* @__PURE__ */ jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: content }, key);
  const getWalletIcons = (connector2) => {
    const connectorId = connector2?.id.toLowerCase();
    const walletTypes = [
      { component: /* @__PURE__ */ jsx(MetaMask, {}), id: "metamask" },
      { component: /* @__PURE__ */ jsx(Rainbow, {}), id: "rainbow" },
      { component: /* @__PURE__ */ jsx(Rabby, {}), id: "rabby" }
    ];
    const icons = walletTypes.filter(({ id }) => !connectorId?.includes(id)).map(({ component }) => component);
    if (icons.length < 3) icons.push(/* @__PURE__ */ jsx(Phantom, {}));
    return icons;
  };
  const getPaymentMethodIcons = () => {
    const icons = [];
    icons.push(
      createIconDiv(
        /* @__PURE__ */ jsx(
          "img",
          {
            src: "https://pay.daimo.com/chain-logos/tronusdt.svg",
            alt: "TRON USDT"
          }
        ),
        "tron-usdt"
      )
    );
    const externalIcons = allPaymentOptions.filter((option) => option.id !== ExternalPaymentOptions.Daimo).slice(0, 1).map(
      (option) => createIconDiv(
        typeof option.logoURI === "string" ? /* @__PURE__ */ jsx("img", { src: option.logoURI, alt: option.id }) : option.logoURI,
        option.id
      )
    );
    icons.push(...externalIcons);
    if (icons.length < 3) {
      const walletIcons = getWalletIcons(connector);
      const remainingSlots = 3 - icons.length;
      icons.push(...walletIcons.slice(0, remainingSlots));
    }
    return icons.slice(0, 3);
  };
  const selectMethodOption = {
    id: "select-method",
    title: locales.payWithAnotherMethod,
    icons: getPaymentMethodIcons(),
    onClick: () => setRoute(ROUTES.SELECT_METHOD)
  };
  const selectWalletOption = {
    id: "select-wallet",
    title: locales.payWithAnotherWallet,
    icons: getWalletIcons(connector),
    onClick: async () => {
      await disconnectAsync();
      await disconnectSolana();
      setRoute(ROUTES.CONNECTORS);
    }
  };
  return /* @__PURE__ */ jsx(OptionsContainer, { children: /* @__PURE__ */ jsx(
    OptionsList,
    {
      options: (
        // If there are non-wallet payment options, show the full select
        // method menu. Otherwise, show the wallet menu.
        allPaymentOptions.length > 0 && uniquePaymentOption !== "Wallets" ? [selectMethodOption] : [selectWalletOption]
      )
    }
  ) });
}

export { SelectAnotherMethodButton as default };
//# sourceMappingURL=index.js.map