@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
37 lines (34 loc) • 2.73 kB
JavaScript
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useEffect } from 'react';
import { ROUTES } from '../../../constants/routes.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import WalletIcon from '../../../assets/wallet.js';
import { PageContent, ModalContent, ModalH1, ModalBody, Disclaimer } from '../../Common/Modal/styles.js';
import { InfoBox, InfoBoxButtons, LearnMoreContainer, LearnMoreButton } from './styles.js';
import { DaimoPayOrderMode } from '@daimo/pay-common';
import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
import useIsMobile from '../../../hooks/useIsMobile.js';
import useLocales from '../../../hooks/useLocales.js';
import Button from '../../Common/Button/index.js';
import ConnectorList from '../../Common/ConnectorList/index.js';
import { OrderHeader } from '../../Common/OrderHeader/index.js';
const Wallets = () => {
const context = usePayContext();
const locales = useLocales({});
const { isMobile } = useIsMobile();
const { hydrateOrder, order } = useDaimoPay();
// If we're not in deposit mode, hydrate immediately.
useEffect(() => {
if (!context.paymentState.isDepositFlow &&
order != null &&
order.mode !== DaimoPayOrderMode.HYDRATED) {
hydrateOrder();
}
}, [context.paymentState.isDepositFlow, hydrateOrder, order]);
// Show new-user education buttons
const showLearnMore = !context.options?.hideQuestionMarkCTA;
const showGetWallet = !context.options?.hideNoWalletCTA;
return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), jsx(ConnectorList, {}), isMobile ? (jsx(Fragment, { children: jsxs(InfoBox, { children: [jsxs(ModalContent, { style: { padding: 0, textAlign: "left" }, children: [jsx(ModalH1, { "$small": true, children: locales.connectorsScreen_h1 }), jsx(ModalBody, { children: locales.connectorsScreen_p })] }), jsxs(InfoBoxButtons, { children: [showLearnMore && (jsx(Button, { variant: "tertiary", onClick: () => context.setRoute(ROUTES.ABOUT), children: locales.learnMore })), showGetWallet && (jsx(Button, { variant: "tertiary", onClick: () => context.setRoute(ROUTES.ONBOARDING), children: locales.getWallet }))] })] }) })) : (jsx(Fragment, { children: showGetWallet && (jsx(LearnMoreContainer, { children: jsxs(LearnMoreButton, { onClick: () => context.setRoute(ROUTES.ONBOARDING), children: [jsx(WalletIcon, {}), " ", locales.connectorsScreen_newcomer] }) })) })), context.options?.disclaimer && (jsx(Disclaimer, { style: { visibility: "hidden", pointerEvents: "none" }, children: jsx("div", { children: context.options?.disclaimer }) }))] }));
};
export { Wallets as default };
//# sourceMappingURL=index.js.map