@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
36 lines (35 loc) • 2.76 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ROUTES } from "../../../types/routes";
import { ModalBody, ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
import { useAccount } from "@coin-voyage/crypto/hooks";
import { useCallback } from "react";
import useLocales from "../../../hooks/useLocales";
import { useTokenOptions } from "../../../hooks/useTokenOptions";
import usePayContext from "../../contexts/pay";
import OptionsList from "../../ui/OptionsList";
import { OrderHeader } from "../../ui/OrderHeader";
import SelectAnotherMethod from "../../ui/SelectAnotherMethod";
export default function SelectToken() {
const locales = useLocales();
const { paymentState, allowedWallets, setRoute } = usePayContext();
const { payOrderQuotes, selectedWallet, connectorChainType, setConnectorChainType, setSelectedCurrencyOption, } = paymentState;
const { account } = useAccount({
selectedWallet,
chainType: connectorChainType,
});
const allowedAddress = allowedWallets?.find((w) => w.address === account.address && w.chainType === account.chainType)?.allowed;
const walletDisabled = allowedWallets === null ? false : !allowedAddress;
const optionList = useTokenOptions(walletDisabled);
const onSelectAnotherMethod = useCallback(() => {
setConnectorChainType(undefined);
setSelectedCurrencyOption(undefined);
setRoute(ROUTES.SELECT_CHAIN);
}, [setConnectorChainType, setSelectedCurrencyOption, setRoute]);
return (_jsxs(PageContent, { children: [_jsx(OrderHeader, { minified: true, showConnectedWallet: true }), walletDisabled ? (_jsxs(ModalContent, { "$center": true, style: {
paddingTop: 16,
paddingBottom: 16,
}, children: [_jsx(ModalH1, { children: "Not permitted." }), _jsx(ModalBody, { children: "This wallet address is not permitted to pay for this order." }), _jsx(SelectAnotherMethod, { buttonText: locales.selectTokenScreen_selectAnotherWallet, onSelectAnotherMethod: onSelectAnotherMethod })] })) : (_jsx(_Fragment, { children: !payOrderQuotes.isLoading && optionList?.length === 0 && (_jsxs(ModalContent, { "$center": true, style: {
paddingTop: 16,
paddingBottom: 16,
}, children: [_jsx(ModalH1, { children: locales.selectTokenScreen_noOptions_h1 }), _jsx(ModalBody, { children: locales.selectTokenScreen_noOptions_p }), _jsx(SelectAnotherMethod, { buttonText: locales.selectTokenScreen_selectAnotherMethod, onSelectAnotherMethod: onSelectAnotherMethod })] })) })), _jsx(OptionsList, { requiredSkeletons: 4, isLoading: payOrderQuotes.isLoading, options: optionList })] }));
}