@daimo/pay/build/src/components/Pages/SelectToken/index.js

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

import { jsxs, jsx } from 'react/jsx-runtime';
import { useWallet } from '@solana/wallet-adapter-react';
import { useAccount, injected } from 'wagmi';
import { Solana, Ethereum } from '../../../assets/chains.js';
import defaultTheme from '../../../constants/defaultTheme.js';
import { useConnect } from '../../../hooks/useConnect.js';
import useIsMobile from '../../../hooks/useIsMobile.js';
import useLocales from '../../../hooks/useLocales.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { useTokenOptions } from '../../../hooks/useTokenOptions.js';
import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
import { OptionsList } from '../../Common/OptionsList/index.js';
import { OrderHeader } from '../../Common/OrderHeader/index.js';
import SelectAnotherMethodButton from '../../Common/SelectAnotherMethodButton/index.js';

function SelectToken() {
  const { isMobile } = useIsMobile();
  const isMobileFormat = isMobile || window?.innerWidth < defaultTheme.mobileWidth;
  const { paymentState } = usePayContext();
  const { tokenMode } = paymentState;
  const { optionsList, isLoading } = useTokenOptions(tokenMode);
  const { isConnected: isEvmConnected } = useAccount();
  const solanaWallets = useWallet();
  const isSolConnected = solanaWallets.connected;
  const isConnected = isEvmConnected || isSolConnected;
  const isAnotherMethodButtonVisible = optionsList.length > 0 && tokenMode !== "all";
  return /* @__PURE__ */ jsxs(PageContent, { children: [
    /* @__PURE__ */ jsx(OrderHeader, { minified: true, show: tokenMode }),
    /* @__PURE__ */ jsx(
      OptionsList,
      {
        requiredSkeletons: 4,
        isLoading,
        options: optionsList,
        scrollHeight: isAnotherMethodButtonVisible && isMobileFormat ? 225 : 300,
        orDivider: isAnotherMethodButtonVisible,
        hideBottomLine: !isAnotherMethodButtonVisible
      }
    ),
    !isLoading && isConnected && optionsList.length === 0 && /* @__PURE__ */ jsx(InsufficientBalance, {}),
    !isLoading && !isConnected && tokenMode === "all" && /* @__PURE__ */ jsx(ConnectButton, {}),
    isAnotherMethodButtonVisible && /* @__PURE__ */ jsx(SelectAnotherMethodButton, {})
  ] });
}
function InsufficientBalance() {
  const locales = useLocales();
  return /* @__PURE__ */ jsxs(
    ModalContent,
    {
      style: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        paddingTop: 16,
        paddingBottom: 16
      },
      children: [
        /* @__PURE__ */ jsx(ModalH1, { children: locales.insufficientBalance }),
        /* @__PURE__ */ jsx(SelectAnotherMethodButton, {})
      ]
    }
  );
}
function ConnectButton() {
  const locales = useLocales();
  const { connect } = useConnect();
  const solanaWallets = useWallet();
  const filteredWallets = solanaWallets.wallets.filter(
    (w) => w.adapter.name !== "Mobile Wallet Adapter"
  );
  const hasSolanaWallet = filteredWallets.length > 0;
  const icons = [/* @__PURE__ */ jsx(Ethereum, {}, "ethereum")];
  if (hasSolanaWallet) {
    icons.push(/* @__PURE__ */ jsx(Solana, {}, "solana"));
  }
  const onClick = () => {
    connect({
      connector: injected()
    });
    if (hasSolanaWallet) {
      if (solanaWallets.wallet == null) {
        solanaWallets.select(solanaWallets.wallets[0].adapter.name);
      }
      solanaWallets.connect();
    }
  };
  const connectOption = {
    id: "connect-wallet",
    title: locales.connectWallet,
    icons,
    onClick
  };
  return /* @__PURE__ */ jsx(OptionsList, { options: [connectOption] });
}

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