@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
80 lines (77 loc) • 3.6 kB
JavaScript
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);
// Prefer icon from walletConfigs if available
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" ? (jsx("img", { src: matchedConfig.icon, alt: matchedConfig.name })) : matchedConfig.icon;
}
return (jsx("img", { src: selectedWallet.adapter.icon, alt: selectedWallet.adapter.name }));
};
useEffect(() => {
if (!solanaConnector)
return;
solanaWallets.select(solanaConnector);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [solanaConnector]);
useEffect(() => {
if (!isConnected)
return;
// Wait so user can see it's connected
const meta = {
event: "wait-solana-connected",
walletName: solanaWallets.wallet?.adapter.name,
};
setTimeout(() => {
setTokenMode("solana");
setRoute(ROUTES.SELECT_TOKEN, meta);
}, 500);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isConnected]);
if (!solanaConnector)
return null;
return (jsxs(PageContent, { children: [jsx(LoadingContainer, { children: jsx(AnimationContainer, { children: jsx(AnimatePresence, { children: jsx(SquircleSpinner, { logo: jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: getWalletIcon() }), loading: true }) }) }) }), jsx(ModalContent, { style: { paddingBottom: 0 }, children: isConnected ? (jsx(ModalH1, { children: "Connected" })) : (jsxs(Fragment, { children: [jsx(ModalH1, { children: "Requesting Connection" }), 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