@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
251 lines (248 loc) • 9.89 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { supportedChains } from '@daimo/pay-common';
import { useState } from 'react';
import { useAccount, useSwitchChain } from 'wagmi';
import Alert from '../Alert/index.js';
import { SwitchNetworksContainer, ChainButtonContainer, ChainButtons, ChainButton, ChainLogoContainer, ChainLogoSpinner, ChainIcon, ChainButtonStatus, ChainButtonBg } from './styles.js';
import { motion, AnimatePresence } from 'framer-motion';
import { isMobile, isBaseAccountConnector } from '../../../utils/index.js';
import { chainToLogo, UnknownChain } from '../../../assets/chains.js';
import useLocales from '../../../hooks/useLocales.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
const Spinner = /* @__PURE__ */ jsxs(
"svg",
{
"aria-hidden": "true",
width: "36",
height: "36",
viewBox: "0 0 36 36",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ 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)"
}
),
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
"linearGradient",
{
id: "paint0_linear_1288_18701",
x1: "2",
y1: "19.4884",
x2: "16.8752",
y2: "33.7485",
gradientUnits: "userSpaceOnUse",
children: [
/* @__PURE__ */ jsx("stop", { stopColor: "var(--ck-spinner-color)" }),
/* @__PURE__ */ 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(
void 0
);
const locales = useLocales({});
const mobile = isMobile();
const isError = error?.["code"] === 4902;
const disabled = isError || !switchChain;
const handleSwitchNetwork = (chainId) => {
if (switchChain) {
setPendingChainId(chainId);
switchChain({ chainId });
}
};
const { triggerResize } = usePayContext();
return /* @__PURE__ */ jsxs(
SwitchNetworksContainer,
{
style: { marginBottom: switchChain !== void 0 ? -8 : 0 },
children: [
/* @__PURE__ */ jsx(ChainButtonContainer, { children: /* @__PURE__ */ jsx(ChainButtons, { children: chains.map((x) => {
const c = supportedChains.find((ch2) => ch2.chainId === x.id);
const ch = { ...c, ...x };
return /* @__PURE__ */ 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 : void 0
},
children: [
/* @__PURE__ */ 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: [
/* @__PURE__ */ jsxs(ChainLogoContainer, { children: [
/* @__PURE__ */ 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: /* @__PURE__ */ jsx(
motion.div,
{
animate: (
// UI fix for Coinbase Wallet on mobile does not remove isPending on rejection event
mobile && isBaseAccountConnector(connector?.id) && isPending && pendingChainId === ch.id ? {
opacity: [1, 0],
transition: { delay: 4, duration: 3 }
} : { opacity: 1 }
),
children: Spinner
},
`${ch?.id}-${ch?.name}`
)
}
),
/* @__PURE__ */ jsx(ChainIcon, { children: ch.chainId ? chainToLogo[ch.chainId] : /* @__PURE__ */ jsx(UnknownChain, {}) })
] }),
ch.name
]
}
),
variant !== "secondary" && /* @__PURE__ */ jsx(ChainButtonStatus, { children: /* @__PURE__ */ jsxs(AnimatePresence, { initial: false, mode: "wait", children: [
ch.id === chain?.id && /* @__PURE__ */ 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 && /* @__PURE__ */ 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: /* @__PURE__ */ jsx(
motion.span,
{
animate: (
// UI fix for Coinbase Wallet on mobile does not remove isLoading on rejection event
mobile && isBaseAccountConnector(connector?.id) && {
opacity: [1, 0],
transition: { delay: 4, duration: 4 }
}
),
children: locales.approveInWallet
}
)
},
"approveText"
)
] }) }),
variant === "secondary" ? /* @__PURE__ */ 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 && /* @__PURE__ */ jsx(
ChainButtonBg,
{
layoutId: "activeChain",
layout: "position",
transition: {
duration: 0.3,
ease: "easeOut"
}
}
)
)
]
},
`${ch?.id}-${ch?.name}`
);
}) }) }),
/* @__PURE__ */ jsx(AnimatePresence, { children: isError && /* @__PURE__ */ 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: /* @__PURE__ */ jsx("div", { style: { paddingTop: 10, paddingBottom: 8 }, children: /* @__PURE__ */ jsxs(Alert, { children: [
locales.warnings_walletSwitchingUnsupported,
" ",
locales.warnings_walletSwitchingUnsupportedResolve
] }) })
}
) })
]
}
);
};
export { ChainSelectList as default };
//# sourceMappingURL=index.js.map