@web3auth/modal
Version:
Multi chain wallet aggregator for web3Auth
215 lines (209 loc) • 8.57 kB
JavaScript
import { useMemo, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { MODAL_STATUS } from '../../interfaces.js';
import i18nInstance from '../../localeImport.js';
import CircularLoader from '../CircularLoader/CircularLoader.js';
import Image from '../Image/Image.js';
import PulseLoader from '../PulseLoader/PulseLoader.js';
import { jsxs, jsx } from 'react/jsx-runtime';
/**
* ConnectingStatus component
* @param props - ConnectingStatusType
* @returns ConnectingStatus component
*/
function ConnectingStatus(props) {
const [t] = useTranslation(undefined, {
i18n: i18nInstance
});
const {
connector,
appLogo,
connectorName
} = props;
const providerIcon = useMemo(() => connector === "twitter" ? /*#__PURE__*/jsx(Image, {
imageId: "login-x-dark"
}) : /*#__PURE__*/jsx(Image, {
imageId: `login-${connector}`,
height: "40",
width: "40"
}), [connector]);
return /*#__PURE__*/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: [/*#__PURE__*/jsxs("div", {
className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-6",
children: [/*#__PURE__*/jsx("figure", {
className: "w3a--flex w3a--size-10 w3a--items-center w3a--justify-center w3a--overflow-hidden",
children: /*#__PURE__*/jsx("img", {
src: appLogo,
alt: "",
className: "w3a--size-full w3a--object-contain"
})
}), /*#__PURE__*/jsx(PulseLoader, {}), providerIcon]
}), /*#__PURE__*/jsxs("div", {
className: "w3a--flex w3a--flex-col w3a--gap-y-1",
children: [/*#__PURE__*/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
})
}), /*#__PURE__*/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 /*#__PURE__*/jsxs("div", {
className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
children: [/*#__PURE__*/jsx("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 20 20",
className: "w3a--connected-logo",
children: /*#__PURE__*/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"
})
}), /*#__PURE__*/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 /*#__PURE__*/jsxs("div", {
className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
children: [/*#__PURE__*/jsx("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 20 20",
className: "w3a--error-logo",
children: /*#__PURE__*/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"
})
}), /*#__PURE__*/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] = useTranslation(undefined, {
i18n: i18nInstance
});
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 /*#__PURE__*/jsxs("div", {
className: "w3a--flex w3a--size-full w3a--flex-col w3a--items-center w3a--justify-between w3a--gap-y-6",
children: [/*#__PURE__*/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
})
}), /*#__PURE__*/jsx("div", {
className: "w3a--flex w3a--justify-center",
children: /*#__PURE__*/jsx(CircularLoader, {
width: 95,
height: 95,
thickness: 6,
arcSizeDeg: 100,
arcColors: primaryColor ? [primaryColor, primaryColor] : undefined,
children: /*#__PURE__*/jsx(Image, {
imageId: `login-${connector}`,
hoverImageId: `login-${connector}`,
height: "45",
width: "45"
})
})
}), /*#__PURE__*/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")
}), /*#__PURE__*/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 = useMemo(() => !isConnectAndSignAuthenticationMode && modalStatus === MODAL_STATUS.CONNECTED || isConnectAndSignAuthenticationMode && modalStatus === MODAL_STATUS.AUTHORIZED, [modalStatus, isConnectAndSignAuthenticationMode]);
useEffect(() => {
if (isConnectedAccordingToAuthenticationMode) {
const timeout = setTimeout(() => {
onClose();
}, 1000);
return () => clearTimeout(timeout);
}
}, [isConnectedAccordingToAuthenticationMode, onClose]);
return /*#__PURE__*/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 === MODAL_STATUS.CONNECTING && /*#__PURE__*/jsx(ConnectingStatus, {
connector: connector,
connectorName: connectorName,
appLogo: appLogo
}), isConnectedAccordingToAuthenticationMode && /*#__PURE__*/jsx(ConnectedStatus, {
message: message
}), modalStatus === MODAL_STATUS.ERRORED && /*#__PURE__*/jsx(ErroredStatus, {
message: message
}), modalStatus === MODAL_STATUS.AUTHORIZING && /*#__PURE__*/jsx(AuthorizingStatus, {
connector: connector,
externalWalletsConfig: externalWalletsConfig,
walletRegistry: walletRegistry,
handleMobileVerifyConnect: handleMobileVerifyConnect
})]
});
}
export { Loader as default };