@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
100 lines (97 loc) • 4.38 kB
JavaScript
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { ROUTES } from '../../constants/routes.js';
import { usePayContext } from '../../hooks/usePayContext.js';
import { OrDivider } from '../Common/Modal/index.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 Button from '../Common/Button/index.js';
import '../Common/CopyToClipboard/index.js';
import CustomQRCode from '../Common/CustomQRCode/index.js';
import { writeDaimoPayOrderID } from '@daimo/pay-common';
import Logos, { SquircleIcon } from '../../assets/logos.js';
import { MobileWithLogos } from '../../assets/MobileWithLogos.js';
import { useWallet, WALLET_ID_MOBILE_WALLETS } from '../../wallets/useWallets.js';
const ConnectWithQRCode = ({
externalUrl
}) => {
const context = usePayContext();
const { pendingConnectorId, paymentState } = context;
const wallet = useWallet(pendingConnectorId ?? "");
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 downloads = wallet?.downloadUrls;
const hasApps = downloads && Object.keys(downloads).length !== 0;
const showAdditionalOptions = false;
const payId = pay.order ? writeDaimoPayOrderID(pay.order.id) : "";
const isDesktopLinkToMobileWallets = wallet?.id === WALLET_ID_MOBILE_WALLETS;
const mode = isDesktopLinkToMobileWallets ? "browser" : "wallet";
const worldDeeplink = wallet?.id === "world" && wallet?.getDaimoPayDeeplink ? wallet.getDaimoPayDeeplink(payId) : null;
const url = externalUrl ?? // QR code opens eg. Binance
worldDeeplink ?? // open in World App
`https://pay.daimo.com/pay?id=${payId}&mode=${mode}`;
return /* @__PURE__ */ jsxs(PageContent, { children: [
/* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 8, gap: 14 }, children: [
/* @__PURE__ */ jsx(
CustomQRCode,
{
value: url,
image: wallet?.id === "world" ? /* @__PURE__ */ jsx(SquircleIcon, { icon: Logos.World, alt: "World" }) : externalOption?.logoURI ? /* @__PURE__ */ jsx(SquircleIcon, { icon: externalOption.logoURI, alt: "Logo" }) : /* @__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 })
] })
}
),
hasApps && /* @__PURE__ */ jsx(OrDivider, { children: locales.dontHaveTheApp })
] }),
showAdditionalOptions ,
hasApps && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
Button,
{
onClick: () => {
context.setRoute(ROUTES.DOWNLOAD);
},
download: true,
children: locales.getWalletName
}
) })
] });
};
export { ConnectWithQRCode as default };
//# sourceMappingURL=ConnectWithQRCode.js.map