@daimo/pay/build/src/components/Pages/Solana/ConnectorSolana/index.js

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

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useEffect } from 'react';
import { PageContent, ModalContent, ModalH1, ModalBody } from '../../../Common/Modal/styles.js';
import { useWallet } from '@solana/wallet-adapter-react';
import { motion, AnimatePresence } from 'framer-motion';
import { ROUTES } from '../../../../constants/routes.js';
import { usePayContext } from '../../../../hooks/usePayContext.js';
import styled from '../../../../styles/styled/index.js';
import { walletConfigs } from '../../../../wallets/walletConfigs.js';
import SquircleSpinner from '../../../Spinners/SquircleSpinner/index.js';

const ConnectSolana = () => {
  const solanaWallets = useWallet();
  const isConnected = solanaWallets.connected;
  const { solanaConnector, setRoute, paymentState } = usePayContext();
  const { setTokenMode } = paymentState;
  const selectedWallet = solanaWallets.wallets.find(
    (wallet) => wallet.adapter.name === solanaConnector
  );
  const getWalletIcon = () => {
    if (!selectedWallet) return null;
    const matchedConfig = Object.values(walletConfigs).find((cfg) => {
      if (!cfg.name) return false;
      const cfgName = cfg.name.toLowerCase();
      const walletName = selectedWallet.adapter.name.toLowerCase();
      return cfgName.includes(walletName) || walletName.includes(cfgName);
    });
    if (matchedConfig?.icon) {
      return typeof matchedConfig.icon === "string" ? /* @__PURE__ */ jsx("img", { src: matchedConfig.icon, alt: matchedConfig.name }) : matchedConfig.icon;
    }
    return /* @__PURE__ */ jsx(
      "img",
      {
        src: selectedWallet.adapter.icon,
        alt: selectedWallet.adapter.name
      }
    );
  };
  useEffect(() => {
    if (!solanaConnector) return;
    solanaWallets.select(solanaConnector);
  }, [solanaConnector]);
  useEffect(() => {
    if (!isConnected) return;
    const meta = {
      event: "wait-solana-connected",
      walletName: solanaWallets.wallet?.adapter.name
    };
    setTimeout(() => {
      setTokenMode("solana");
      setRoute(ROUTES.SELECT_TOKEN, meta);
    }, 500);
  }, [isConnected]);
  if (!solanaConnector) return null;
  return /* @__PURE__ */ jsxs(PageContent, { children: [
    /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(AnimationContainer, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
      SquircleSpinner,
      {
        logo: /* @__PURE__ */ jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: getWalletIcon() }),
        loading: true
      }
    ) }) }) }),
    /* @__PURE__ */ jsx(ModalContent, { style: { paddingBottom: 0 }, children: isConnected ? /* @__PURE__ */ jsx(ModalH1, { children: "Connected" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(ModalH1, { children: "Requesting Connection" }),
      /* @__PURE__ */ jsxs(ModalBody, { children: [
        "Open ",
        selectedWallet?.adapter.name,
        " to continue."
      ] })
    ] }) })
  ] });
};
const LoadingContainer = styled(motion.div)`
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 16px;
  height: 120px;
`;
const AnimationContainer = styled(motion.div)`
  user-select: none;
  position: relative;
  --spinner-error-opacity: 0;
  &:before {
    content: "";
    position: absolute;
    inset: 1px;
    opacity: 0;
    background: var(--ck-body-color-danger);
  }
`;

export { LoadingContainer, ConnectSolana as default };
//# sourceMappingURL=index.js.map