@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
97 lines (96 loc) • 8.66 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useAccount, useSwitchChain } from "wagmi";
import Alert from "../Alert";
import { ChainButton, ChainButtonBg, ChainButtonContainer, ChainButtonStatus, ChainButtons, ChainIcon, ChainLogoContainer, ChainLogoSpinner, SwitchNetworksContainer, } from "./styles";
import { AnimatePresence, motion } from "framer-motion";
import { isCoinbaseWalletConnector } from "../../../utils";
import { isMobile } from "@coin-voyage/shared/common";
import ChainIcons from "../../../assets/chains";
import useLocales from "../../../hooks/useLocales";
import { chainConfigs } from "../../../lib/config/chain";
import usePayContext from "../../contexts/pay";
const Spinner = (_jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 16.75C2.69036 16.75 3.25 17.3096 3.25 18V19C3.25 26.5939 9.40609 32.75 17 32.75V35.25C8.02537 35.25 0.75 27.9746 0.75 19V18C0.75 17.3096 1.30964 16.75 2 16.75Z", fill: "url(#paint0_linear_1288_18701)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_1288_18701", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "var(--ck-spinner-color)" }), _jsx("stop", { offset: "1", stopColor: "var(--ck-spinner-color)", stopOpacity: "0" })] }) })] }));
const ChainSelectList = ({ variant }) => {
const { connector, chain } = useAccount();
const { chains, isPending, switchChain, error } = useSwitchChain();
const [pendingChainId, setPendingChainId] = useState(undefined);
const locales = useLocales({});
const mobile = isMobile();
const isError = error?.name === "SwitchChainNotSupportedError"; // Wallet cannot switch networks
const disabled = isError;
const handleSwitchNetwork = (chainId) => {
setPendingChainId(chainId);
switchChain({ chainId });
};
const { triggerResize } = usePayContext();
return (_jsxs(SwitchNetworksContainer, { style: { marginBottom: -8 }, children: [_jsx(ChainButtonContainer, { children: _jsx(ChainButtons, { children: chains.map((x) => {
const c = chainConfigs.find((ch) => ch.id === x.id);
const ch = { ...c, ...x };
return (_jsxs(ChainButton, { "$variant": variant, disabled: disabled || ch.id === chain?.id || (isPending && pendingChainId === ch.id), onClick: () => handleSwitchNetwork?.(ch.id), style: {
opacity: disabled && ch.id !== chain?.id ? 0.4 : undefined,
}, children: [_jsxs("span", { style: {
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: 12,
color: ch.id === chain?.id ? "var(--ck-dropdown-active-color, inherit)" : "inherit",
}, children: [_jsxs(ChainLogoContainer, { children: [_jsx(ChainLogoSpinner, { initial: { opacity: 0 }, animate: {
opacity: isPending && pendingChainId === ch.id ? 1 : 0,
}, transition: {
ease: [0.76, 0, 0.24, 1],
duration: 0.15,
delay: 0.1,
}, children: _jsx(motion.div, { animate:
// UI fix for Coinbase Wallet on mobile does not remove isPending on rejection event
mobile && isCoinbaseWalletConnector(connector?.id) && isPending && pendingChainId === ch.id
? {
opacity: [1, 0],
transition: { delay: 4, duration: 3 },
}
: { opacity: 1 }, children: Spinner }, `${ch?.id}-${ch?.name}`) }), _jsx(ChainIcon, { children: ch.logo ?? _jsx(ChainIcons.UnknownChain, {}) })] }), ch.name] }), variant !== "secondary" && (_jsx(ChainButtonStatus, { children: _jsxs(AnimatePresence, { initial: false, mode: "wait", children: [ch.id === chain?.id && (_jsx(motion.span, { style: {
color: "var(--ck-dropdown-active-color, var(--ck-focus-color))",
display: "block",
position: "relative",
}, initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: {
opacity: 0,
x: 4,
transition: { duration: 0.1, delay: 0 },
}, transition: {
ease: [0.76, 0, 0.24, 1],
duration: 0.3,
delay: 0.2,
}, children: locales.connected }, "connectedText")), isPending && pendingChainId === ch.id && (_jsx(motion.span, { style: {
color: "var(--ck-dropdown-pending-color, inherit)",
display: "block",
position: "relative",
}, initial: {
opacity: 0,
x: -4,
}, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 4 }, transition: {
ease: [0.76, 0, 0.24, 1],
duration: 0.3,
delay: 0.1,
}, children: _jsx(motion.span, { animate:
// UI fix for Coinbase Wallet on mobile does not remove isLoading on rejection event
mobile &&
isCoinbaseWalletConnector(connector?.id) && {
opacity: [1, 0],
transition: { delay: 4, duration: 4 },
}, children: locales.approveInWallet }) }, "approveText"))] }) })), variant === "secondary" ? (_jsx(ChainButtonBg, { initial: false, animate: {
opacity: ch.id === chain?.id ? 1 : 0,
}, transition: {
duration: 0.3,
ease: "easeOut",
} })) : (
//hover === ch.name && (
ch.id === chain?.id && (_jsx(ChainButtonBg, { layoutId: "activeChain", layout: "position", transition: {
duration: 0.3,
ease: "easeOut",
} })))] }, `${ch?.id}-${ch?.name}`));
}) }) }), _jsx(AnimatePresence, { children: isError && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
ease: [0.76, 0, 0.24, 1],
duration: 0.3,
}, onAnimationStart: triggerResize, onAnimationComplete: triggerResize, children: _jsx("div", { style: { paddingTop: 10, paddingBottom: 8 }, children: _jsxs(Alert, { children: [locales.warnings_walletSwitchingUnsupported, " ", locales.warnings_walletSwitchingUnsupportedResolve] }) }) })) })] }));
};
export default ChainSelectList;