@web3auth/modal
Version:
Multi chain wallet aggregator for web3Auth
108 lines (105 loc) • 5.01 kB
JavaScript
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
import Bowser from 'bowser';
import { useContext, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { QRCode } from 'react-qrcode-logo';
import { WALLET_CONNECT_LOGO } from '../../../constants.js';
import { RootContext } from '../../../context/RootContext.js';
import { TOAST_TYPE } from '../../../interfaces.js';
import i18nInstance from '../../../localeImport.js';
import Image from '../../Image/Image.js';
import { jsxs, jsx } from 'react/jsx-runtime';
function ConnectWalletQrCode(props) {
var _getComputedStyle;
const [t] = useTranslation(undefined, {
i18n: i18nInstance
});
const {
bodyState,
setBodyState,
setToast
} = useContext(RootContext);
const {
qrCodeValue,
isDark,
selectedButton,
logoImage,
primaryColor
} = props;
const isDesktop = useMemo(() => {
if (typeof window === "undefined") return false;
const browser = Bowser.getParser(window.navigator.userAgent);
return browser.getPlatformType() === "desktop";
}, []);
const root = document.documentElement;
const whiteColor = "#FFFFFF";
const blackColor = "#000000";
const modalColor = ((_getComputedStyle = getComputedStyle(root)) === null || _getComputedStyle === void 0 || (_getComputedStyle = _getComputedStyle.getPropertyValue("--app-gray-800")) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.trim()) || "#1f2a37";
const qrColor = primaryColor && primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
return /*#__PURE__*/jsxs("div", {
className: "w3a--contents",
children: [qrCodeValue ? /*#__PURE__*/jsxs("div", {
className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--rounded-2xl w3a--border w3a--border-app-gray-200 w3a--p-4 dark:w3a--border-app-gray-700",
children: [/*#__PURE__*/jsx("button", {
type: "button",
className: "w3a--relative w3a--flex w3a--size-[300px] w3a--appearance-none w3a--items-center w3a--justify-center w3a--rounded-2xl",
onClick: () => {
navigator.clipboard.writeText(qrCodeValue);
setToast({
message: t("modal.external.qr-code-copied-to-clipboard"),
type: TOAST_TYPE.SUCCESS
});
},
children: /*#__PURE__*/jsx(QRCode, {
size: isDesktop ? 300 : 260,
eyeRadius: 5,
qrStyle: "dots",
removeQrCodeBehindLogo: true,
logoImage: logoImage || WALLET_CONNECT_LOGO,
value: qrCodeValue,
logoHeight: 32,
logoWidth: 32,
logoPadding: 10,
eyeColor: isDark ? whiteColor : qrColor,
bgColor: isDark ? modalColor : whiteColor,
fgColor: isDark ? whiteColor : blackColor
})
}), /*#__PURE__*/jsx("p", {
className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
children: t("modal.external.walletconnect-copy")
})]
}) : /*#__PURE__*/jsx("div", {
className: "w3a--mx-auto w3a--flex w3a--size-[300px] w3a--animate-pulse w3a--items-center w3a--justify-center w3a--rounded-lg w3a--bg-app-gray-200 w3a--p-2 dark:w3a--bg-app-gray-700",
children: /*#__PURE__*/jsx(Image, {
imageId: `login-${selectedButton.name}`,
hoverImageId: `login-${selectedButton.name}`,
fallbackImageId: "wallet",
height: "30",
width: "30",
isButton: true,
extension: selectedButton.imgExtension
})
}), /*#__PURE__*/jsxs("div", {
className: "w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50 w3a--px-4 w3a--py-2 w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white",
children: [/*#__PURE__*/jsxs("p", {
className: "w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white",
children: [t("modal.external.dont-have"), " ", /*#__PURE__*/jsx("span", {
children: selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName
}), "?"]
}), /*#__PURE__*/jsx("button", {
type: "button",
className: "w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-200 w3a--bg-transparent w3a--px-5 w3a--py-2 w3a--text-base w3a--font-normal w3a--text-app-gray-700 w3a--transition-all w3a--duration-150 hover:w3a--border-transparent hover:w3a--shadow-light active:w3a--scale-95 dark:w3a--border-app-gray-700 dark:w3a--text-app-gray-300 dark:hover:w3a--border-transparent dark:hover:w3a--shadow-dark",
onClick: () => {
setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
installLinks: {
show: true,
wallet: selectedButton
}
}));
},
children: t("modal.external.get-wallet")
})]
})]
});
}
export { ConnectWalletQrCode as default };