@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
78 lines (77 loc) • 4.99 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PayOrderMode } from "@coin-voyage/shared/types";
import { useCallback, useEffect, useMemo } from "react";
import { AlertIcon } from "../../../assets/icons";
import { useCountdown } from "../../../hooks/useCountdown";
import { useDepositAddressQuery } from "../../../hooks/useDepositAddressQuery";
import useLocales from "../../../hooks/useLocales";
import { ROUTES } from "../../../types/routes";
import usePayContext from "../../contexts/pay";
import Button from "../../ui/Button";
import CustomQRCode from "../../ui/CustomQRCode";
import { ModalBody, ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
import PoweredByFooter from "../../ui/PoweredByFooter";
import SelectAnotherMethod from "../../ui/SelectAnotherMethod";
import { Spinner } from "../../ui/Spinner";
import TokenChainLogo from "../../ui/TokenChainLogo";
import { CopyableInfo } from "./copyable-info";
import { LogoRow, QRWrap } from "./styles";
export default function PayToAddress() {
return (_jsxs(PageContent, { children: [_jsx(PayToAddressView, {}), _jsx(PoweredByFooter, {})] }));
}
function PayToAddressView() {
const { paymentState, triggerResize } = usePayContext();
const { payToAddressChainId: payToAddressChain, payToAddressCurrency } = paymentState;
const { data: paymentDetails, isLoading, isError, } = useDepositAddressQuery({
enabled: payToAddressCurrency != undefined,
});
if (isError) {
return payToAddressChain ? _jsx(DepositFailed, {}) : null;
}
if (isLoading || !paymentDetails) {
return _jsx(DepositAddressLoading, {});
}
return (_jsx(DepositAddressInfo, { details: paymentDetails, triggerResize: triggerResize, isDeposit: paymentState.payOrder?.mode === PayOrderMode.DEPOSIT }));
}
function DepositAddressLoading() {
const locales = useLocales();
return (_jsxs(ModalContent, { "$center": true, style: { paddingTop: 32, paddingBottom: 32 }, children: [_jsx(Spinner, {}), _jsx(ModalBody, { style: { marginTop: 12 }, children: locales.payToAddressScreen_generatingDepositAddress })] }));
}
function DepositAddressInfo({ details, triggerResize, isDeposit, }) {
const locales = useLocales();
const [remainingS, totalS] = useCountdown(details.expirationS);
const isExpired = details.expirationS != null && remainingS === 0;
useEffect(triggerResize, [details, isExpired, triggerResize]);
const logoElement = useMemo(() => (_jsx(TokenChainLogo, { chainId: details.chainId, src: details.logoURI, alt: details.ticker }, `${details.ticker}-${details.chainId}`)), [details.chainId, details.ticker, details.logoURI]);
return (_jsxs(ModalContent, { children: [_jsx(DepositAddressView, { isExpired: isExpired, isDeposit: isDeposit, depositAddress: details.depositAddress, logoElement: logoElement, localesRefreshLabel: locales.refresh }), _jsx("div", { style: { height: 8 } }), _jsx(CopyableInfo, { details: details, remainingS: remainingS, totalS: totalS })] }));
}
function DepositAddressView({ isExpired, isDeposit, depositAddress, logoElement, localesRefreshLabel, }) {
const locales = useLocales();
const { paymentState } = usePayContext();
if (isExpired) {
if (!isDeposit) {
return (_jsxs(ModalContent, { "$center": true, style: { paddingTop: 32, paddingBottom: 32 }, children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] }));
}
return (_jsx(LogoRow, { children: _jsx(Button, { onClick: () => {
// Create a new deposit pay order and trigger a refetch of the payment details query
paymentState.copyDepositPayOrder();
}, style: { width: 128 }, children: localesRefreshLabel }) }));
}
return (_jsx(QRWrap, { children: _jsx(CustomQRCode, { value: depositAddress, image: logoElement }) }));
}
function DepositFailed() {
const locales = useLocales();
const { setRoute, paymentState } = usePayContext();
const { setPayToAddressChainId: setPayToAddressChain, setPayToAddressCurrency } = paymentState;
const onSelectAnotherMethod = useCallback(() => {
setPayToAddressChain(undefined);
setPayToAddressCurrency(undefined);
setRoute(ROUTES.SELECT_PAY_TO_ADDRESS_CHAIN);
}, [setRoute, setPayToAddressChain, setPayToAddressCurrency]);
return (_jsxs(ModalContent, { "$center": true, style: {
marginLeft: 24,
marginRight: 24,
paddingTop: 16,
paddingBottom: 16,
}, children: [_jsx(ModalH1, { children: locales.selectPayToAddressWaitingScreen_unavailable_h1 }), _jsx(ModalBody, { children: locales.selectPayToAddressWaitingScreen_unavailable_p }), _jsx(SelectAnotherMethod, { buttonText: locales.selectTokenScreen_selectAnotherMethod, onSelectAnotherMethod: onSelectAnotherMethod })] }));
}