@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
66 lines (65 loc) • 3 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { getChainTypeName } from "@coin-voyage/shared/common";
import { useCallback, useMemo } from "react";
import { routeConfig } from "../../config/route-config";
import useLocales from "../../hooks/useLocales";
import { ThemeProvider } from "../../providers/theme/provider";
import { ROUTES } from "../../types/routes";
import { isWalletConnectConnector } from "../../utils";
import usePayContext from "../contexts/pay";
import Modal from "../ui/Modal";
const pages = Object.fromEntries(Object.entries(routeConfig).map(([key, cfg]) => [key, cfg.component]));
export function PayModal() {
const { route, setOpen, setRoute, paymentState, mode, theme, customTheme } = usePayContext();
const { setConnectorChainType, clearUserSelection, setPayToAddressChainId: setPayToAddressChain, setPayToAddressCurrency, setSelectedCurrencyOption, selectedWallet, selectedCurrencyOption, connectorChainType, } = paymentState;
const locales = useLocales({
CONNECTORNAME: selectedWallet?.name,
CHAIN_TYPE: getChainTypeName(connectorChainType),
});
const config = routeConfig[route];
const showBackButton = config?.showBackButton !== false;
const showInfoButton = config?.showInfoButton !== false;
const depth = config?.depth ?? 1;
const headingCtx = {
locales,
walletName: selectedWallet?.name,
shouldUseQrcode: !!selectedWallet?.getWalletDeeplink || !selectedWallet?.isInstalled,
isWalletConnectConnector: isWalletConnectConnector(selectedWallet?.id),
selectedCurrencyOption: selectedCurrencyOption
? { ticker: selectedCurrencyOption.ticker, chain_id: selectedCurrencyOption.chain_id }
: undefined,
};
const heading = config
? typeof config.heading === "function"
? config.heading(headingCtx)
: config.heading
: undefined;
const actions = useMemo(() => ({
setRoute,
setConnectorChainType,
setSelectedCurrencyOption,
clearUserSelection,
setPayToAddressChain,
setPayToAddressCurrency,
}), [
setRoute,
setConnectorChainType,
setSelectedCurrencyOption,
clearUserSelection,
setPayToAddressChain,
setPayToAddressCurrency,
]);
const onBack = useCallback(() => {
if (!config?.onBack) {
clearUserSelection();
return;
}
if (typeof config.onBack === "string") {
setRoute(config.onBack);
}
else {
config.onBack(actions);
}
}, [config, actions, setRoute, clearUserSelection]);
return (_jsx(ThemeProvider, { theme: theme, customTheme: customTheme, mode: mode, children: _jsx(Modal, { pages: pages, pageId: route, heading: heading, depth: depth, onClose: () => setOpen(false), onInfo: showInfoButton ? () => setRoute(ROUTES.ABOUT) : undefined, onBack: showBackButton ? onBack : undefined }) }));
}