@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
90 lines (87 loc) • 4.09 kB
JavaScript
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { usePayContext } from '../../hooks/usePayContext.js';
import { PageContent, ModalContent } from '../Common/Modal/styles.js';
import ScanIconWithLogos from '../../assets/ScanIconWithLogos.js';
import { useDaimoPay } from '../../hooks/useDaimoPay.js';
import useLocales from '../../hooks/useLocales.js';
import CustomQRCode from '../Common/CustomQRCode/index.js';
import { writeDaimoPayOrderID } from '@daimo/pay-common';
import { SquircleIcon } from '../../assets/logos.js';
import { MobileWithLogos } from '../../assets/MobileWithLogos.js';
import { ROUTES } from '../../constants/routes.js';
import { WALLET_ID_MOBILE_WALLETS } from '../../constants/wallets.js';
import useIsMobile from '../../hooks/useIsMobile.js';
import { useWallet } from '../../wallets/useWallets.js';
import { OrderHeader } from '../Common/OrderHeader/index.js';
const ConnectWithQRCode = ({
externalUrl
}) => {
const context = usePayContext();
const { isAndroid, isIOS } = useIsMobile();
const { pendingConnectorId, paymentState } = context;
const walletFromConnectors = useWallet(pendingConnectorId ?? "");
const wallet = walletFromConnectors || paymentState.selectedWallet;
const externalOption = paymentState.selectedExternalOption;
const pay = useDaimoPay();
const locales = useLocales({
CONNECTORNAME: wallet?.name ?? externalOption?.id
});
if (!wallet && !externalOption)
return /* @__PURE__ */ jsx(Fragment, { children: " No wallet or external option found " });
const payId = pay.order ? writeDaimoPayOrderID(pay.order.id) : "";
const platform = isIOS ? "ios" : isAndroid ? "android" : "other";
const isDesktopLinkToMobileWallets = wallet?.id === WALLET_ID_MOBILE_WALLETS;
const walletDeeplink = wallet?.getDaimoPayDeeplink ? wallet.getDaimoPayDeeplink(payId, platform) : null;
const url = externalUrl ?? // QR code opens eg. Binance
walletDeeplink ?? // open in wallet
`https://pay.daimo.com/pay?id=${payId}&mode=browser`;
if (context.debugMode) {
console.log("[DEBUG] QR Code URL:", url);
}
const isUniquePaymentOption = context.uniquePaymentMethodPage === ROUTES.CONNECT || context.uniquePaymentMethodPage === ROUTES.WAITING_EXTERNAL;
return /* @__PURE__ */ jsxs(PageContent, { children: [
isUniquePaymentOption && /* @__PURE__ */ jsx(OrderHeader, {}),
/* @__PURE__ */ jsx(ModalContent, { style: { paddingBottom: 8 }, children: /* @__PURE__ */ jsx(
CustomQRCode,
{
value: url,
image: externalOption?.logoURI ? /* @__PURE__ */ jsx(SquircleIcon, { icon: externalOption.logoURI, alt: "Logo" }) : wallet?.id ? wallet.icon : /* @__PURE__ */ jsx(
"div",
{
style: {
width: "100%",
height: "100%",
borderRadius: "22.5%",
overflow: "hidden",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "var(--ck-body-background)",
transform: "scale(1.3) translateY(5%)",
transformOrigin: "center center"
},
children: /* @__PURE__ */ jsx(MobileWithLogos, {})
}
),
tooltipMessage: isDesktopLinkToMobileWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(ScanIconWithLogos, {}),
/* @__PURE__ */ jsxs("span", { children: [
"Finish the payment ",
/* @__PURE__ */ jsx("br", {}),
"on your mobile phone"
] })
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
ScanIconWithLogos,
{
logo: externalOption?.logoURI ? /* @__PURE__ */ jsx(SquircleIcon, { icon: externalOption.logoURI, alt: "Logo" }) : wallet?.icon
}
),
/* @__PURE__ */ jsx("span", { children: locales.scanScreen_tooltip_default })
] })
}
) })
] });
};
export { ConnectWithQRCode as default };
//# sourceMappingURL=ConnectWithQRCode.js.map