@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
77 lines (76 loc) • 5.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PayOrderMode, PayOrderStatus } 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 { ROUTE } 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(PayToAddressContent, {}), _jsx(PoweredByFooter, {})] }));
}
function PayToAddressContent() {
const { paymentState, triggerResize } = usePayContext();
const { payToAddressChainId, payToAddressCurrency, payOrder } = paymentState;
const depositAddressQuery = useDepositAddressQuery({
enabled: payToAddressCurrency != null,
});
if (depositAddressQuery.isError) {
return payToAddressChainId ? _jsx(DepositAddressUnavailable, {}) : null;
}
if (depositAddressQuery.isLoading || !depositAddressQuery.data) {
return _jsx(DepositAddressLoading, {});
}
return (_jsx(DepositAddressDetails, { details: depositAddressQuery.data, isDeposit: payOrder?.mode === PayOrderMode.DEPOSIT, isPayOrderExpired: payOrder?.status === PayOrderStatus.EXPIRED, onResizeNeeded: triggerResize, onRefreshDepositOrder: paymentState.copyDepositPayOrder }));
}
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 DepositAddressDetails({ details, isDeposit, isPayOrderExpired, onResizeNeeded, onRefreshDepositOrder, }) {
const [remainingS, totalS] = useCountdown(details.expirationS);
const isExpired = isPayOrderExpired || (details.expirationS != null && remainingS === 0);
const effectiveRemainingS = isExpired ? 0 : remainingS;
useEffect(() => {
onResizeNeeded();
}, [details, isExpired, onResizeNeeded]);
const tokenChainLogo = useMemo(() => (_jsx(TokenChainLogo, { chainId: details.chainId, chainStyle: { borderRadius: 9999, bottom: 6, right: 4, height: "20px", width: "20px" }, src: details.logoURI, alt: details.ticker })), [details.chainId, details.ticker, details.logoURI]);
return (_jsxs(ModalContent, { children: [_jsx(DepositAddressPrimaryContent, { depositAddress: details.depositAddress, isExpired: isExpired, isDeposit: isDeposit, tokenChainLogo: tokenChainLogo, onRefreshDepositOrder: onRefreshDepositOrder }), _jsx("div", { style: { height: 8 } }), _jsx(CopyableInfo, { details: details, remainingS: effectiveRemainingS, totalS: totalS })] }));
}
function DepositAddressPrimaryContent({ depositAddress, isExpired, isDeposit, tokenChainLogo, onRefreshDepositOrder, }) {
if (!isExpired) {
return (_jsx(QRWrap, { children: _jsx(CustomQRCode, { value: depositAddress, image: tokenChainLogo }) }));
}
if (isDeposit) {
return _jsx(RefreshExpiredDepositAddress, { onRefresh: onRefreshDepositOrder });
}
return _jsx(ExpiredPaymentAddressMessage, {});
}
function RefreshExpiredDepositAddress({ onRefresh }) {
const locales = useLocales();
return (_jsx(LogoRow, { children: _jsx(Button, { onClick: onRefresh, style: { width: 128 }, children: locales.refresh }) }));
}
function ExpiredPaymentAddressMessage() {
const locales = useLocales();
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 })] }));
}
function DepositAddressUnavailable() {
const locales = useLocales();
const { setRoute, paymentState } = usePayContext();
const onSelectAnotherMethod = useCallback(() => {
paymentState.setPayToAddressChainId(undefined);
paymentState.setPayToAddressCurrency(undefined);
setRoute(ROUTE.ADDRESS_CHAIN_SELECT);
}, [paymentState, setRoute]);
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 })] }));
}