@web3auth/ui
Version:
Ui modal for web3Auth
168 lines (164 loc) • 6.25 kB
JavaScript
'use strict';
var Bowser = require('bowser');
var React = require('react');
var reactI18next = require('react-i18next');
var localeImport = require('../../localeImport.js');
var Button = require('../Button/Button.js');
var Image = require('../Image.js');
var ExternalWalletHeader = require('./ExternalWalletHeader.js');
var jsxRuntime = require('react/jsx-runtime');
const getBrowserExtensionUrl = (browserType, walletId) => {
if (walletId !== null && walletId !== void 0 && walletId.startsWith("https://")) return walletId;
switch (browserType) {
case "chrome":
return `https://chrome.google.com/webstore/detail/${walletId}`;
case "firefox":
return `https://addons.mozilla.org/firefox/addon/${walletId}`;
case "edge":
return `https://microsoftedge.microsoft.com/addons/detail/${walletId}`;
default:
return null;
}
};
const getMobileInstallLink = (os, appId) => {
if (appId !== null && appId !== void 0 && appId.includes("https://")) {
return appId;
}
switch (os) {
case "android":
return `https://play.google.com/store/apps/details?id=${appId}`;
case "ios":
return `https://apps.apple.com/app/safepal-wallet/${appId}`;
default:
return "";
}
};
const getOsName = os => {
switch (os) {
case "ios":
return "iOS";
case "android":
return "Android";
default:
return "";
}
};
const getBrowserName = browser => {
return browser.charAt(0).toUpperCase() + browser.slice(1);
};
function ExternalWalletInstall(props) {
const {
connectButton,
goBack,
closeModal
} = props;
const [t] = reactI18next.useTranslation(undefined, {
i18n: localeImport
});
const deviceDetails = React.useMemo(() => {
const browser = Bowser.getParser(window.navigator.userAgent);
return {
platform: browser.getPlatformType(),
browser: browser.getBrowserName().toLowerCase(),
os: browser.getOSName()
};
}, []);
const mobileInstallLinks = () => {
const installConfig = connectButton.walletRegistryItem.app || {};
const installLinks = Object.keys(installConfig).reduce((acc, os) => {
if (!["android", "ios"].includes(os)) return acc;
const appId = installConfig[os];
if (!appId) return acc;
const appUrl = getMobileInstallLink(os, appId);
if (!appUrl) return acc;
const logoLight = `${os}-light`;
const logoDark = `${os}-dark`;
acc.push(/*#__PURE__*/jsxRuntime.jsx("li", {
className: "w3a--w-full",
children: /*#__PURE__*/jsxRuntime.jsx("a", {
href: appUrl,
rel: "noopener noreferrer",
target: "_blank",
children: /*#__PURE__*/jsxRuntime.jsxs(Button, {
type: "button",
variant: "tertiary",
className: "w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn",
children: [/*#__PURE__*/jsxRuntime.jsx(Image, {
imageId: logoLight,
darkImageId: logoDark,
hoverImageId: logoLight,
darkHoverImageId: logoDark,
height: "28",
width: "28",
isButton: true
}), /*#__PURE__*/jsxRuntime.jsx("span", {
className: "w3a--text-sm w3a--font-medium",
children: t("modal.external.install-mobile-app", {
os: getOsName(os)
})
})]
})
})
}, os));
return acc;
}, []);
return installLinks;
};
const desktopInstallLinks = () => {
// if browser is brave, use chrome extension
const browserType = deviceDetails.browser === "brave" ? "chrome" : deviceDetails.browser;
const browserExtensionConfig = connectButton.walletRegistryItem.app || {};
const extensionForCurrentBrowser = browserExtensionConfig.browser && browserExtensionConfig.browser.includes(browserType) ? browserExtensionConfig.browser : undefined;
const browserExtensionId = browserExtensionConfig[browserType] || extensionForCurrentBrowser;
const browserExtensionUrl = browserExtensionId ? getBrowserExtensionUrl(browserType, browserExtensionId) : null;
const installLink = browserExtensionUrl ? /*#__PURE__*/jsxRuntime.jsx("li", {
children: /*#__PURE__*/jsxRuntime.jsx("a", {
href: browserExtensionUrl,
rel: "noopener noreferrer",
target: "_blank",
children: /*#__PURE__*/jsxRuntime.jsxs(Button, {
type: "button",
variant: "tertiary",
className: "w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn",
children: [/*#__PURE__*/jsxRuntime.jsx(Image, {
imageId: deviceDetails.browser,
darkImageId: deviceDetails.browser,
hoverImageId: deviceDetails.browser,
darkHoverImageId: deviceDetails.browser,
height: "30",
width: "30",
isButton: true
}), /*#__PURE__*/jsxRuntime.jsx("span", {
className: "w3a--text-sm w3a--font-medium",
children: t("modal.external.install-browser-extension", {
browser: getBrowserName(deviceDetails.browser)
})
})]
})
})
}, deviceDetails.browser) : null;
return [installLink, ...mobileInstallLinks()];
};
return /*#__PURE__*/jsxRuntime.jsxs("div", {
children: [/*#__PURE__*/jsxRuntime.jsx(ExternalWalletHeader, {
title: `${t("modal.external.get")} ${connectButton.displayName}`,
goBack: goBack,
closeModal: closeModal
}), /*#__PURE__*/jsxRuntime.jsx("div", {
className: "w3a--flex w3a--justify-center w3a--my-6",
children: /*#__PURE__*/jsxRuntime.jsx(Image, {
imageId: `login-${connectButton.name}`,
hoverImageId: `login-${connectButton.name}`,
fallbackImageId: "wallet",
height: "100",
width: "100",
isButton: true,
extension: connectButton.imgExtension
})
}), /*#__PURE__*/jsxRuntime.jsx("ul", {
className: "w3a--flex w3a--flex-col w3a--gap-3",
children: deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()
})]
});
}
module.exports = ExternalWalletInstall;