@web3auth/modal
Version:
Multi chain wallet aggregator for web3Auth
152 lines (148 loc) • 5.36 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 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
})]
});
}
/**
* Loader component
* @param props - LoaderProps
* @returns Loader component
*/
function Loader(props) {
const {
connector,
connectorName,
modalStatus,
onClose,
appLogo,
message
} = props;
react.useEffect(() => {
if (modalStatus === interfaces.MODAL_STATUS.CONNECTED) {
setTimeout(() => {
onClose();
}, 1000);
}
}, [modalStatus, 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
}), modalStatus === interfaces.MODAL_STATUS.CONNECTED && jsxRuntime.jsx(ConnectedStatus, {
message: message
}), modalStatus === interfaces.MODAL_STATUS.ERRORED && jsxRuntime.jsx(ErroredStatus, {
message: message
})]
});
}
module.exports = Loader;