@web3auth/modal
Version:
Multi chain wallet aggregator for web3Auth
110 lines (106 loc) • 5.07 kB
JavaScript
'use strict';
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var jsxRuntime = require('react/jsx-runtime');
var Bowser = require('bowser');
var react = require('react');
var reactI18next = require('react-i18next');
var reactQrcodeLogo = require('react-qrcode-logo');
var constants = require('../../../constants.js');
var RootContext = require('../../../context/RootContext.js');
var interfaces = require('../../../interfaces.js');
var localeImport = require('../../../localeImport.js');
var Image = require('../../Image/Image.js');
function ConnectWalletQrCode(props) {
var _getComputedStyle;
const [t] = reactI18next.useTranslation(undefined, {
i18n: localeImport
});
const {
bodyState,
setBodyState,
setToast
} = react.useContext(RootContext.RootContext);
const {
qrCodeValue,
isDark,
selectedButton,
logoImage,
primaryColor
} = props;
const isDesktop = react.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 jsxRuntime.jsxs("div", {
className: "w3a--contents",
children: [qrCodeValue ? jsxRuntime.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: [jsxRuntime.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: interfaces.TOAST_TYPE.SUCCESS
});
},
children: jsxRuntime.jsx(reactQrcodeLogo.QRCode, {
size: isDesktop ? 300 : 260,
eyeRadius: 5,
qrStyle: "dots",
removeQrCodeBehindLogo: true,
logoImage: logoImage || constants.WALLET_CONNECT_LOGO,
value: qrCodeValue,
logoHeight: 32,
logoWidth: 32,
logoPadding: 10,
eyeColor: isDark ? whiteColor : qrColor,
bgColor: isDark ? modalColor : whiteColor,
fgColor: isDark ? whiteColor : blackColor
})
}), jsxRuntime.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")
})]
}) : jsxRuntime.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: jsxRuntime.jsx(Image, {
imageId: `login-${selectedButton.name}`,
hoverImageId: `login-${selectedButton.name}`,
fallbackImageId: "wallet",
height: "30",
width: "30",
isButton: true,
extension: selectedButton.imgExtension
})
}), jsxRuntime.jsxs("div", {
className: "w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50 \n w3a--px-4 w3a--py-2 w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white",
children: [jsxRuntime.jsxs("p", {
className: "w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white",
children: [t("modal.external.dont-have"), " ", jsxRuntime.jsx("span", {
children: selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName
}), "?"]
}), jsxRuntime.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")
})]
})]
});
}
module.exports = ConnectWalletQrCode;