@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
121 lines (118 loc) • 5.68 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { ROUTES } from '../../../constants/routes.js';
import { useConnect } from '../../../hooks/useConnect.js';
import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
import useIsMobile from '../../../hooks/useIsMobile.js';
import { useLastConnector } from '../../../hooks/useLastConnector.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { detectBrowser, isBaseAccountConnector, isGeminiConnector } from '../../../utils/index.js';
import { useWallets, WALLET_ID_OTHER_WALLET, WALLET_ID_MOBILE_WALLETS } from '../../../wallets/useWallets.js';
import { ScrollArea } from '../ScrollArea/index.js';
import Alert from '../Alert/index.js';
import { ConnectorsContainer, ConnectorButton, ConnectorIcon, ConnectorLabel, RecentlyUsedTag, SkeletonIcon, SkeletonLabel } from './styles.js';
const ConnectorList = () => {
const context = usePayContext();
const { isMobile } = useIsMobile();
const wallets = useWallets(isMobile);
const { lastConnectorId } = useLastConnector();
const { paymentState } = useDaimoPay();
const walletsToDisplay = context.options?.hideRecentBadge ? wallets : [
// move last used wallet to top of list
// using .filter and spread to avoid mutating original array order with .sort
...wallets.filter((wallet) => lastConnectorId === wallet.connector?.id),
...wallets.filter((wallet) => lastConnectorId !== wallet.connector?.id)
];
const shouldWaitForHydration = isMobile && !context.paymentState.isDepositFlow;
const ready = !shouldWaitForHydration || paymentState === "payment_unpaid";
return /* @__PURE__ */ jsxs(ScrollArea, { mobileDirection: "horizontal", children: [
walletsToDisplay.length === 0 && /* @__PURE__ */ jsx(Alert, { error: true, children: "No connectors found in ConnectKit config." }),
!ready && walletsToDisplay.length > 0 && /* @__PURE__ */ jsx(ConnectorsContainer, { $totalResults: walletsToDisplay.length, children: walletsToDisplay.map((_, idx) => /* @__PURE__ */ jsx(SkeletonConnectorItem, {}, idx)) }),
ready && walletsToDisplay.length > 0 && /* @__PURE__ */ jsx(ConnectorsContainer, { $totalResults: walletsToDisplay.length, children: walletsToDisplay.map((wallet) => /* @__PURE__ */ jsx(
ConnectorItem,
{
wallet,
isRecent: wallet.id === lastConnectorId
},
wallet.id
)) })
] });
};
const ConnectorItem = ({
wallet,
isRecent
}) => {
const { isMobile } = useIsMobile();
const context = usePayContext();
const { connect } = useConnect();
const redirectToMoreWallets = isMobile && wallet.id === WALLET_ID_OTHER_WALLET;
const redirectToMobileWallets = wallet.id === WALLET_ID_MOBILE_WALLETS;
const redirectToWorld = wallet.id === "world";
const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") && (isBaseAccountConnector(wallet.connector?.id) || isGeminiConnector(wallet.connector?.id));
const onClick = () => {
const meta = { event: "connector-list-click", walletId: wallet.id };
if (wallet.solanaConnectorName && !isMobile) {
const supportsEvm = wallet.connector?.name != null;
if (supportsEvm) {
context.paymentState.setSelectedWallet(wallet);
context.setRoute(ROUTES.SELECT_WALLET_CHAIN, meta);
return;
} else {
context.setSolanaConnector(wallet.solanaConnectorName);
context.setRoute(ROUTES.SOLANA_CONNECTOR, meta);
return;
}
}
if (redirectToMoreWallets) {
context.setRoute(ROUTES.MOBILECONNECTORS, meta);
} else if (redirectToMobileWallets) {
if (context.paymentState.isDepositFlow) {
context.paymentState.setSelectedWallet(wallet);
context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
} else {
context.setPendingConnectorId(WALLET_ID_MOBILE_WALLETS);
context.setRoute(ROUTES.CONNECT, meta);
}
} else if (redirectToWorld) {
if (context.paymentState.isDepositFlow) {
context.paymentState.setSelectedWallet(wallet);
context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
} else {
context.setPendingConnectorId("world");
context.setRoute(ROUTES.CONNECT, meta);
}
} else if (context.paymentState.isDepositFlow && isMobile && !wallet.connector) {
context.paymentState.setSelectedWallet(wallet);
context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
} else if (isMobile && wallet.getDaimoPayDeeplink != null && !wallet.connector) {
context.paymentState.openInWalletBrowser(wallet);
} else {
if (shouldConnectImmediately) {
connect({ connector: wallet.connector });
}
context.setPendingConnectorId(wallet.id);
context.setRoute(ROUTES.CONNECT, meta);
}
};
return /* @__PURE__ */ jsxs(ConnectorButton, { type: "button", onClick, children: [
/* @__PURE__ */ jsx(
ConnectorIcon,
{
"data-small": wallet.iconShouldShrink,
"data-shape": wallet.iconShape,
children: wallet.iconConnector ?? wallet.icon
}
),
/* @__PURE__ */ jsxs(ConnectorLabel, { children: [
isMobile ? wallet.shortName ?? wallet.name : wallet.name,
!context.options?.hideRecentBadge && isRecent && /* @__PURE__ */ jsx(RecentlyUsedTag, { children: /* @__PURE__ */ jsx("span", { children: "Recent" }) })
] })
] });
};
const SkeletonConnectorItem = () => {
return /* @__PURE__ */ jsxs(ConnectorButton, { type: "button", disabled: true, children: [
/* @__PURE__ */ jsx(SkeletonIcon, {}),
/* @__PURE__ */ jsx(SkeletonLabel, {})
] });
};
export { ConnectorList as default };
//# sourceMappingURL=index.js.map