@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
60 lines (57 loc) • 3.75 kB
JavaScript
import { jsxs, Fragment, jsx } 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 { MobileWithLogos } from '../../assets/MobileWithLogos.js';
import { useWallet, WALLET_ID_MOBILE_WALLETS } from '../../wallets/useWallets.js';
/**
* Continues a Daimo Pay flow in another app.
* - If the pendingConnectorId is a mobile wallet, deeplink directly into that
* wallet. This opens the flow in eg. the Rainbow in-app browser, letting the
* user finish the flow in a single app switch instead of multiple.
* - If the pendingConnectorId is MOBILE_WALLETS_CONNECTOR_ID, then show a QR
* that the user can scan from their phone. This opens the flow in eg. mobile
* Safari, letting them pick which app they want to use & finish there.
*/
const ConnectWithQRCode = () => {
const context = usePayContext();
const { pendingConnectorId } = context;
const wallet = useWallet(pendingConnectorId ?? "");
const pay = useDaimoPay();
const locales = useLocales({
CONNECTORNAME: wallet?.name,
});
if (!wallet)
return jsxs(Fragment, { children: ["Wallet not found ", pendingConnectorId] });
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 url = `https://pay.daimo.com/pay?id=${payId}&mode=${mode}`;
return (jsxs(PageContent, { children: [jsxs(ModalContent, { style: { paddingBottom: 8, gap: 14 }, children: [jsx(CustomQRCode, { value: url, image: 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: jsx(MobileWithLogos, {}) }), tooltipMessage: isDesktopLinkToMobileWallets ? (jsxs(Fragment, { children: [jsx(ScanIconWithLogos, {}), jsxs("span", { children: ["Finish the payment ", jsx("br", {}), "on your mobile phone"] })] })) : (jsxs(Fragment, { children: [jsx(ScanIconWithLogos, { logo: wallet?.icon }), jsx("span", { children: locales.scanScreen_tooltip_default })] })) }), (hasApps && jsx(OrDivider, { children: locales.dontHaveTheApp }))] }), showAdditionalOptions , hasApps && (jsx(Fragment, { children: jsx(Button, { onClick: () => {
context.setRoute(ROUTES.DOWNLOAD);
}, download: true, children: locales.getWalletName }) }))] }));
};
export { ConnectWithQRCode as default };
//# sourceMappingURL=ConnectWithQRCode.js.map