@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
82 lines (79 loc) • 4.08 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { PageContent, ModalContent, ModalH1 } from '../../../Common/Modal/styles.js';
import { useWallet } from '@solana/wallet-adapter-react';
import { SquircleIcon, Phantom, Solflare, Backpack } from '../../../../assets/logos.js';
import { ROUTES } from '../../../../constants/routes.js';
import { usePayContext } from '../../../../hooks/usePayContext.js';
import { isMobile } from '../../../../utils/index.js';
import { OptionsList } from '../../../Common/OptionsList/index.js';
import SelectAnotherMethodButton from '../../../Common/SelectAnotherMethodButton/index.js';
const ConnectSolana = () => {
const { setSolanaConnector, setRoute, log } = usePayContext();
const solanaWallets = useWallet();
const options = solanaWallets.wallets.map((wallet) => ({
id: wallet.adapter.name,
title: `${wallet.adapter.name}`,
icons: [
jsx(SquircleIcon, { icon: wallet.adapter.icon, alt: wallet.adapter.name }, wallet.adapter.name),
],
onClick: async () => {
log("wallet.adapter.name ", wallet.adapter.name);
setSolanaConnector(wallet.adapter.name);
if (solanaWallets.connected) {
await solanaWallets.disconnect();
}
setRoute(ROUTES.SOLANA_CONNECTOR, {
event: "click-solana-wallet",
walletName: wallet.adapter.name,
});
},
}));
const defaultOptions = [
{
id: "phantom",
title: "Open in Phantom",
icons: [
jsx(SquircleIcon, { icon: (props) => jsx(Phantom, { ...props, background: true }), alt: "Phantom" }, "phantom"),
],
onClick: () => window.open(`https://phantom.app/ul/browse/${encodeURIComponent(window.location.href)}?ref=${encodeURIComponent(window.location.origin)}`),
},
{
id: "solflare",
title: "Open in Solflare",
icons: [
jsx(SquircleIcon, { icon: (props) => jsx(Solflare, { ...props, background: true }), alt: "Solflare" }, "solflare"),
],
onClick: () => window.open(`https://solflare.com/ul/v1/browse/${encodeURIComponent(window.location.href)}?ref=${encodeURIComponent(window.location.origin)}`, "_blank"),
},
{
id: "backpack",
title: "Open in Backpack",
icons: [
jsx(SquircleIcon, { icon: (props) => jsx(Backpack, { ...props, background: true }), alt: "Backpack" }, "backpack"),
],
onClick: () => window.open(`https://backpack.app/ul/v1/browse/${encodeURIComponent(window.location.href)}?ref=${encodeURIComponent(window.location.origin)}`, "_blank"),
},
];
return (jsxs(PageContent, { style: {
height: "100%",
}, children: [solanaWallets.wallets.length === 0 && !isMobile() && (jsxs(ModalContent, { style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
paddingTop: 16,
paddingBottom: 16,
gap: 16,
}, children: [jsx(ModalH1, { children: "No Solana wallets detected." }), jsx(SelectAnotherMethodButton, {})] })), isMobile() &&
(solanaWallets.wallets.length === 0 ||
(solanaWallets.wallets.length > 0 &&
solanaWallets.wallets[0].adapter.name ===
"Mobile Wallet Adapter")) && (jsx(ModalContent, { style: {
display: "flex",
flexDirection: "column",
gap: 16,
}, children: jsx(OptionsList, { options: defaultOptions }) })), solanaWallets.wallets.length > 0 &&
solanaWallets.wallets[0].adapter.name !== "Mobile Wallet Adapter" && (jsx(OptionsList, { options: options }))] }));
};
export { ConnectSolana as default };
//# sourceMappingURL=index.js.map