@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
194 lines (191 loc) • 13.7 kB
JavaScript
import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { useModal } from '../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../providers/client/Hook.mjs';
import { IframeStamper } from '@turnkey/iframe-stamper';
import { TurnkeyError, TurnkeyErrorCodes } from '@turnkey/sdk-types';
import { ExportWarning } from './ExportWarning.mjs';
import { ActionButton } from '../design/Buttons.mjs';
import { ExportType } from '../../types/base.mjs';
import clsx from 'clsx';
var TurnkeyExportIframeContainerId = "turnkey-export-iframe-container-id";
var TurnkeyIframeElementId = "turnkey-default-iframe-element-id";
var TurnkeyIframeClassNames = "w-full border-none !text-base bg-icon-background-light dark:bg-icon-background-dark";
// IMPORTANT: These colors need to match --icon-text-light, --icon-background-light, --icon-background-dark and --icon-text-dark in index.css
var iconBackgroundLight = "#e5e7eb";
var iconBackgroundDark = "#333336";
var iconTextLight = "#828282";
var iconTextDark = "#a3a3a5";
function ExportComponent(params) {
var _config$ui11, _config$ui12, _config$ui12$colors, _config$ui12$colors$d, _config$ui13, _config$ui13$colors, _config$ui13$colors$l, _config$ui14, _config$ui15, _config$ui15$colors, _config$ui15$colors$d, _config$ui16, _config$ui16$colors, _config$ui16$colors$l;
var exportType = params.exportType,
targetPublicKey = params.targetPublicKey,
keyFormat = params.keyFormat,
stampWith = params.stampWith,
target = params.target,
organizationId = params.organizationId,
onSuccess = params.onSuccess,
onError = params.onError;
var _useTurnkey = useTurnkey(),
config = _useTurnkey.config;
if (!config) {
throw new TurnkeyError("Turnkey SDK is not properly configured. Please check your configuration.", TurnkeyErrorCodes.CONFIG_NOT_INITIALIZED);
}
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
exportIframeVisible = _useState2[0],
setExportIframeVisible = _useState2[1];
var _useModal = useModal(),
closeModal = _useModal.closeModal,
isMobile = _useModal.isMobile;
var exportIframeUrl = config === null || config === void 0 ? void 0 : config.exportIframeUrl;
if (!exportIframeUrl) {
throw new TurnkeyError("Export iframe URL is not configured. Please set it in the Turnkey configuration.", TurnkeyErrorCodes.NOT_FOUND);
}
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
exportIframeClient = _useState4[0],
setExportIframeClient = _useState4[1];
useEffect(function () {
var initIframe = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var _config$ui, _config$ui2, _config$ui2$colors, _config$ui2$colors$da, _config$ui3, _config$ui3$colors, _config$ui3$colors$li, _config$ui4, _config$ui5, _config$ui5$colors, _config$ui5$colors$da, _config$ui6, _config$ui6$colors, _config$ui6$colors$li, newExportIframeClient, _t;
return _regenerator().w(function (_context) {
while (1) switch (_context.p = _context.n) {
case 0:
_context.p = 0;
newExportIframeClient = new IframeStamper({
iframeUrl: exportIframeUrl,
iframeElementId: TurnkeyIframeElementId,
iframeContainer: document.getElementById(TurnkeyExportIframeContainerId)
});
_context.n = 1;
return newExportIframeClient.init();
case 1:
_context.n = 2;
return newExportIframeClient.applySettings({
styles: {
fontSize: "16px",
backgroundColor: config !== null && config !== void 0 && (_config$ui = config.ui) !== null && _config$ui !== void 0 && _config$ui.darkMode ? (config === null || config === void 0 ? void 0 : (_config$ui2 = config.ui) === null || _config$ui2 === void 0 ? void 0 : (_config$ui2$colors = _config$ui2.colors) === null || _config$ui2$colors === void 0 ? void 0 : (_config$ui2$colors$da = _config$ui2$colors.dark) === null || _config$ui2$colors$da === void 0 ? void 0 : _config$ui2$colors$da.iconBackground) || iconBackgroundDark : (config === null || config === void 0 ? void 0 : (_config$ui3 = config.ui) === null || _config$ui3 === void 0 ? void 0 : (_config$ui3$colors = _config$ui3.colors) === null || _config$ui3$colors === void 0 ? void 0 : (_config$ui3$colors$li = _config$ui3$colors.light) === null || _config$ui3$colors$li === void 0 ? void 0 : _config$ui3$colors$li.iconBackground) || iconBackgroundLight,
color: config !== null && config !== void 0 && (_config$ui4 = config.ui) !== null && _config$ui4 !== void 0 && _config$ui4.darkMode ? (config === null || config === void 0 ? void 0 : (_config$ui5 = config.ui) === null || _config$ui5 === void 0 ? void 0 : (_config$ui5$colors = _config$ui5.colors) === null || _config$ui5$colors === void 0 ? void 0 : (_config$ui5$colors$da = _config$ui5$colors.dark) === null || _config$ui5$colors$da === void 0 ? void 0 : _config$ui5$colors$da.iconText) || iconTextDark : (config === null || config === void 0 ? void 0 : (_config$ui6 = config.ui) === null || _config$ui6 === void 0 ? void 0 : (_config$ui6$colors = _config$ui6.colors) === null || _config$ui6$colors === void 0 ? void 0 : (_config$ui6$colors$li = _config$ui6$colors.light) === null || _config$ui6$colors$li === void 0 ? void 0 : _config$ui6$colors$li.iconText) || iconTextLight
}
});
case 2:
setExportIframeClient(newExportIframeClient);
_context.n = 4;
break;
case 3:
_context.p = 3;
_t = _context.v;
onError(new TurnkeyError("Error initializing IframeStamper", TurnkeyErrorCodes.INITIALIZE_IFRAME_ERROR, _t));
case 4:
return _context.a(2);
}
}, _callee, null, [[0, 3]]);
}));
return function initIframe() {
return _ref.apply(this, arguments);
};
}();
var existingIframe = document.getElementById(TurnkeyIframeElementId);
if (!existingIframe) {
initIframe();
}
var iframeElement = document.getElementById(TurnkeyIframeElementId);
if (iframeElement) {
iframeElement.className = TurnkeyIframeClassNames;
}
return function () {
handleExportModalClose();
};
}, []);
useEffect(function () {
var reapplyIframeStyles = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
var _config$ui7, _config$ui8, _config$ui8$colors, _config$ui8$colors$da, _config$ui9, _config$ui9$colors, _config$ui9$colors$li, _config$ui0, _config$ui1, _config$ui1$colors, _config$ui1$colors$da, _config$ui10, _config$ui10$colors, _config$ui10$colors$l;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.n) {
case 0:
_context2.n = 1;
return exportIframeClient === null || exportIframeClient === void 0 ? void 0 : exportIframeClient.applySettings({
styles: {
fontSize: "16px",
backgroundColor: config !== null && config !== void 0 && (_config$ui7 = config.ui) !== null && _config$ui7 !== void 0 && _config$ui7.darkMode ? (config === null || config === void 0 ? void 0 : (_config$ui8 = config.ui) === null || _config$ui8 === void 0 ? void 0 : (_config$ui8$colors = _config$ui8.colors) === null || _config$ui8$colors === void 0 ? void 0 : (_config$ui8$colors$da = _config$ui8$colors.dark) === null || _config$ui8$colors$da === void 0 ? void 0 : _config$ui8$colors$da.iconBackground) || iconBackgroundDark : (config === null || config === void 0 ? void 0 : (_config$ui9 = config.ui) === null || _config$ui9 === void 0 ? void 0 : (_config$ui9$colors = _config$ui9.colors) === null || _config$ui9$colors === void 0 ? void 0 : (_config$ui9$colors$li = _config$ui9$colors.light) === null || _config$ui9$colors$li === void 0 ? void 0 : _config$ui9$colors$li.iconBackground) || iconBackgroundLight,
color: config !== null && config !== void 0 && (_config$ui0 = config.ui) !== null && _config$ui0 !== void 0 && _config$ui0.darkMode ? (config === null || config === void 0 ? void 0 : (_config$ui1 = config.ui) === null || _config$ui1 === void 0 ? void 0 : (_config$ui1$colors = _config$ui1.colors) === null || _config$ui1$colors === void 0 ? void 0 : (_config$ui1$colors$da = _config$ui1$colors.dark) === null || _config$ui1$colors$da === void 0 ? void 0 : _config$ui1$colors$da.iconText) || iconTextDark : (config === null || config === void 0 ? void 0 : (_config$ui10 = config.ui) === null || _config$ui10 === void 0 ? void 0 : (_config$ui10$colors = _config$ui10.colors) === null || _config$ui10$colors === void 0 ? void 0 : (_config$ui10$colors$l = _config$ui10$colors.light) === null || _config$ui10$colors$l === void 0 ? void 0 : _config$ui10$colors$l.iconText) || iconTextLight
}
});
case 1:
return _context2.a(2);
}
}, _callee2);
}));
return function reapplyIframeStyles() {
return _ref2.apply(this, arguments);
};
}();
reapplyIframeStyles();
}, [config.ui]);
function handleExportModalClose() {
if (exportIframeClient) {
setExportIframeClient(null);
var existingIframe = document.getElementById(TurnkeyIframeElementId);
if (existingIframe) {
existingIframe.remove();
}
}
}
return jsxs("div", {
className: clsx("flex flex-col items-center pt-8", isMobile ? "w-full" : "w-72"),
children: [!exportIframeVisible && jsx(ExportWarning, {
target: target,
exportIframeClient: exportIframeClient,
targetPublicKey: targetPublicKey,
exportType: exportType,
keyFormat: keyFormat,
stampWith: stampWith,
setExportIframeVisible: setExportIframeVisible,
organizationId: organizationId,
onError: onError
}), jsxs("div", {
className: "transition-all delay-75 -pt-4 ".concat(exportIframeVisible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none w-0 h-0"),
children: [jsx("p", {
className: "text-xs text-icon-text-light dark:text-icon-text-dark",
children: exportType === ExportType.Wallet ? jsx(Fragment, {
children: "Your seed phrase is the key to your wallet. Save it in a secure location."
}) : exportType === ExportType.WalletAccount ? jsx(Fragment, {
children: "Your private key is the key to your wallet account. Save it in a secure location."
}) : jsx(Fragment, {
children: "Your private key is the key to your account. Save it in a secure location."
})
}), jsx("div", {
id: TurnkeyExportIframeContainerId,
style: {
backgroundColor: config !== null && config !== void 0 && (_config$ui11 = config.ui) !== null && _config$ui11 !== void 0 && _config$ui11.darkMode ? (config === null || config === void 0 ? void 0 : (_config$ui12 = config.ui) === null || _config$ui12 === void 0 ? void 0 : (_config$ui12$colors = _config$ui12.colors) === null || _config$ui12$colors === void 0 ? void 0 : (_config$ui12$colors$d = _config$ui12$colors.dark) === null || _config$ui12$colors$d === void 0 ? void 0 : _config$ui12$colors$d.iconBackground) || iconBackgroundDark : (config === null || config === void 0 ? void 0 : (_config$ui13 = config.ui) === null || _config$ui13 === void 0 ? void 0 : (_config$ui13$colors = _config$ui13.colors) === null || _config$ui13$colors === void 0 ? void 0 : (_config$ui13$colors$l = _config$ui13$colors.light) === null || _config$ui13$colors$l === void 0 ? void 0 : _config$ui13$colors$l.iconBackground) || iconBackgroundLight,
boxSizing: "border-box",
borderStyle: "solid",
borderWidth: "1px",
borderRadius: "8px",
width: "100%",
height: "100%",
borderColor: config !== null && config !== void 0 && (_config$ui14 = config.ui) !== null && _config$ui14 !== void 0 && _config$ui14.darkMode ? (config === null || config === void 0 ? void 0 : (_config$ui15 = config.ui) === null || _config$ui15 === void 0 ? void 0 : (_config$ui15$colors = _config$ui15.colors) === null || _config$ui15$colors === void 0 ? void 0 : (_config$ui15$colors$d = _config$ui15$colors.dark) === null || _config$ui15$colors$d === void 0 ? void 0 : _config$ui15$colors$d.iconText) || iconTextDark : (config === null || config === void 0 ? void 0 : (_config$ui16 = config.ui) === null || _config$ui16 === void 0 ? void 0 : (_config$ui16$colors = _config$ui16.colors) === null || _config$ui16$colors === void 0 ? void 0 : (_config$ui16$colors$l = _config$ui16$colors.light) === null || _config$ui16$colors$l === void 0 ? void 0 : _config$ui16$colors$l.iconText) || iconTextLight
},
className: "p-2"
}), jsx("div", {
className: "mt-4",
children: jsx(ActionButton, {
name: "export-done",
onClick: function onClick() {
closeModal();
onSuccess();
},
spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
className: "text-primary-text-light dark:text-primary-text-dark bg-primary-light dark:bg-primary-dark",
children: "Done"
})
})]
})]
});
}
export { ExportComponent };
//# sourceMappingURL=Export.mjs.map