@web3auth/modal
Version:
Multi chain wallet aggregator for web3Auth
75 lines (72 loc) • 3.43 kB
JavaScript
import cn from 'classnames';
import { useContext, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { ThemedContext } from '../../../context/ThemeContext.js';
import i18nInstance from '../../../localeImport.js';
import { formatIOSMobile, getIcons } from '../../../utils.js';
import Image from '../../Image/Image.js';
import { jsxs, jsx } from 'react/jsx-runtime';
function ButtonWallet(props) {
const [t] = useTranslation(undefined, {
i18n: i18nInstance
});
const {
deviceDetails,
button,
walletConnectUri,
onClick,
label,
buttonRadius
} = props;
const isDark = useContext(ThemedContext);
const isLink = useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.isInstalled, [deviceDetails, button]);
const href = useMemo(() => button.href ? formatIOSMobile({
uri: walletConnectUri,
link: button.href
}) : walletConnectUri, [button, walletConnectUri]);
const handleBtnClick = () => {
if (href && isLink) {
window.open(href, "_blank");
} else if (onClick) {
onClick();
}
};
return /*#__PURE__*/jsxs("button", {
type: "button",
className: cn(`w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200
hover:w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150`, {
"w3a--rounded-full": buttonRadius === "pill",
"w3a--rounded-lg": buttonRadius === "rounded",
"w3a--rounded-none": buttonRadius === "square"
}),
onClick: handleBtnClick,
children: [/*#__PURE__*/jsxs("div", {
className: "w3a--flex w3a--items-center w3a--gap-x-2",
children: [/*#__PURE__*/jsx("figure", {
className: "w3a--size-5",
children: /*#__PURE__*/jsx(Image, {
imageData: button.icon,
imageId: `login-${button.name}`,
hoverImageId: `login-${button.name}`,
fallbackImageId: "wallet",
height: "24",
width: "24",
isButton: true,
extension: button.imgExtension || "webp"
})
}), /*#__PURE__*/jsx("p", {
className: "w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
children: label
})]
}), button.hasInjectedWallet && /*#__PURE__*/jsx("span", {
className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
children: t("modal.external.installed")
}), /*#__PURE__*/jsx("img", {
id: "injected-wallet-arrow",
className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
src: getIcons(isDark ? "chevron-right-light" : "chevron-right-dark"),
alt: "arrow"
})]
});
}
export { ButtonWallet as default };