@web3auth/modal
Version:
Multi chain wallet aggregator for web3Auth
214 lines (210 loc) • 8.61 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var reactI18next = require('react-i18next');
var interfaces = require('../../interfaces.js');
var localeImport = require('../../localeImport.js');
var CircularLoader = require('../CircularLoader/CircularLoader.js');
var Image = require('../Image/Image.js');
var PulseLoader = require('../PulseLoader/PulseLoader.js');
/**
* ConnectingStatus component
* @param props - ConnectingStatusType
* @returns ConnectingStatus component
*/
function ConnectingStatus(props) {
const [t] = reactI18next.useTranslation(undefined, {
i18n: localeImport
});
const {
connector,
appLogo,
connectorName
} = props;
const providerIcon = react.useMemo(() => connector === "twitter" ? jsxRuntime.jsx(Image, {
imageId: "login-x-dark"
}) : jsxRuntime.jsx(Image, {
imageId: `login-${connector}`,
height: "40",
width: "40"
}), [connector]);
return jsxRuntime.jsxs("div", {
className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
children: [jsxRuntime.jsxs("div", {
className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-6",
children: [jsxRuntime.jsx("figure", {
className: "w3a--flex w3a--size-10 w3a--items-center w3a--justify-center w3a--overflow-hidden",
children: jsxRuntime.jsx("img", {
src: appLogo,
alt: "",
className: "w3a--size-full w3a--object-contain"
})
}), jsxRuntime.jsx(PulseLoader, {}), providerIcon]
}), jsxRuntime.jsxs("div", {
className: "w3a--flex w3a--flex-col w3a--gap-y-1",
children: [jsxRuntime.jsx("div", {
className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
children: t("modal.adapter-loader.message1", {
adapter: connectorName
})
}), jsxRuntime.jsx("div", {
className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
children: t("modal.adapter-loader.message2", {
adapter: connectorName
})
})]
})]
});
}
/**
* ConnectedStatus component
* @param props - ConnectedStatusType
* @returns ConnectedStatus component
*/
function ConnectedStatus(props) {
const {
message
} = props;
return jsxRuntime.jsxs("div", {
className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
children: [jsxRuntime.jsx("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 20 20",
className: "w3a--connected-logo",
children: jsxRuntime.jsx("path", {
fill: "currentColor",
fillRule: "evenodd",
d: "M6.267 3.455a3.07 3.07 0 0 0 1.745-.723 3.066 3.066 0 0 1 3.976 0 3.07 3.07 0 0 0 1.745.723 3.066 3.066 0 0 1 2.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 0 1 0 3.976 3.07 3.07 0 0 0-.723 1.745 3.066 3.066 0 0 1-2.812 2.812 3.07 3.07 0 0 0-1.745.723 3.066 3.066 0 0 1-3.976 0 3.07 3.07 0 0 0-1.745-.723 3.066 3.066 0 0 1-2.812-2.812 3.07 3.07 0 0 0-.723-1.745 3.066 3.066 0 0 1 0-3.976 3.07 3.07 0 0 0 .723-1.745 3.066 3.066 0 0 1 2.812-2.812m7.44 5.252a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0z",
clipRule: "evenodd"
})
}), jsxRuntime.jsx("p", {
className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
children: message
})]
});
}
/**
* ErroredStatus component
* @param props - ErroredStatusType
* @returns ErroredStatus component
*/
function ErroredStatus(props) {
const {
message
} = props;
return jsxRuntime.jsxs("div", {
className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
children: [jsxRuntime.jsx("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 20 20",
className: "w3a--error-logo",
children: jsxRuntime.jsx("path", {
fill: "currentColor",
fillRule: "evenodd",
d: "M18 10a8 8 0 1 1-16.001 0A8 8 0 0 1 18 10m-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1",
clipRule: "evenodd"
})
}), jsxRuntime.jsx("p", {
className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
children: message
})]
});
}
function AuthorizingStatus(props) {
var _walletRegistry$defau, _walletRegistry$other;
const [t] = reactI18next.useTranslation(undefined, {
i18n: localeImport
});
const {
connector,
externalWalletsConfig,
walletRegistry,
handleMobileVerifyConnect
} = props;
const registryItem = (walletRegistry === null || walletRegistry === void 0 || (_walletRegistry$defau = walletRegistry.default) === null || _walletRegistry$defau === void 0 ? void 0 : _walletRegistry$defau[connector]) || (walletRegistry === null || walletRegistry === void 0 || (_walletRegistry$other = walletRegistry.others) === null || _walletRegistry$other === void 0 ? void 0 : _walletRegistry$other[connector]);
const primaryColor = (registryItem === null || registryItem === void 0 ? void 0 : registryItem.primaryColor) || "";
const handleMobileVerifyConnectClick = () => {
handleMobileVerifyConnect({
connector: connector
});
};
return jsxRuntime.jsxs("div", {
className: "w3a--flex w3a--size-full w3a--flex-col w3a--items-center w3a--justify-between w3a--gap-y-6",
children: [jsxRuntime.jsx("p", {
className: "w3a--p-2 w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white",
children: t("modal.loader.authorizing-header", {
connector: externalWalletsConfig[connector].label
})
}), jsxRuntime.jsx("div", {
className: "w3a--flex w3a--justify-center",
children: jsxRuntime.jsx(CircularLoader, {
width: 95,
height: 95,
thickness: 6,
arcSizeDeg: 100,
arcColors: primaryColor ? [primaryColor, primaryColor] : undefined,
children: jsxRuntime.jsx(Image, {
imageId: `login-${connector}`,
hoverImageId: `login-${connector}`,
height: "45",
width: "45"
})
})
}), jsxRuntime.jsx("p", {
className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
children: t("modal.loader.authorizing-message")
}), jsxRuntime.jsx("button", {
onClick: handleMobileVerifyConnectClick,
className: "w3a--w-full w3a--rounded-xl w3a--bg-app-gray-100 w3a--p-2 w3a--py-3 w3a--text-center w3a--text-sm w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white md:w3a--hidden",
children: t("modal.loader.authorizing-verify-btn")
})]
});
}
/**
* Loader component
* @param props - LoaderProps
* @returns Loader component
*/
function Loader(props) {
const {
connector,
connectorName,
modalStatus,
onClose,
appLogo,
message,
isConnectAndSignAuthenticationMode,
externalWalletsConfig,
walletRegistry,
handleMobileVerifyConnect
} = props;
const isConnectedAccordingToAuthenticationMode = react.useMemo(() => !isConnectAndSignAuthenticationMode && modalStatus === interfaces.MODAL_STATUS.CONNECTED || isConnectAndSignAuthenticationMode && modalStatus === interfaces.MODAL_STATUS.AUTHORIZED, [modalStatus, isConnectAndSignAuthenticationMode]);
react.useEffect(() => {
if (isConnectedAccordingToAuthenticationMode) {
const timeout = setTimeout(() => {
onClose();
}, 1000);
return () => clearTimeout(timeout);
}
}, [isConnectedAccordingToAuthenticationMode, onClose]);
return jsxRuntime.jsxs("div", {
className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && jsxRuntime.jsx(ConnectingStatus, {
connector: connector,
connectorName: connectorName,
appLogo: appLogo
}), isConnectedAccordingToAuthenticationMode && jsxRuntime.jsx(ConnectedStatus, {
message: message
}), modalStatus === interfaces.MODAL_STATUS.ERRORED && jsxRuntime.jsx(ErroredStatus, {
message: message
}), modalStatus === interfaces.MODAL_STATUS.AUTHORIZING && jsxRuntime.jsx(AuthorizingStatus, {
connector: connector,
externalWalletsConfig: externalWalletsConfig,
walletRegistry: walletRegistry,
handleMobileVerifyConnect: handleMobileVerifyConnect
})]
});
}
module.exports = Loader;