@turnkey/react-wallet-kit/dist/components/export/Export.js

The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var Hook$1 = require('../../providers/modal/Hook.js');
var Hook = require('../../providers/client/Hook.js');
var iframeStamper = require('@turnkey/iframe-stamper');
var sdkTypes = require('@turnkey/sdk-types');
var ExportWarning = require('./ExportWarning.js');
var Buttons = require('../design/Buttons.js');
var base = require('../../types/base.js');
var clsx = require('clsx');

const TurnkeyExportIframeContainerId = "turnkey-export-iframe-container-id";
const TurnkeyIframeElementId = "turnkey-default-iframe-element-id";
const 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
const iconBackgroundLight = "#e5e7eb";
const iconBackgroundDark = "#333336";
const iconTextLight = "#828282";
const iconTextDark = "#a3a3a5";
function ExportComponent(params) {
  const {
    exportType,
    targetPublicKey,
    keyFormat,
    stampWith,
    target,
    organizationId,
    onSuccess,
    onError
  } = params;
  const {
    config
  } = Hook.useTurnkey();
  if (!config) {
    throw new sdkTypes.TurnkeyError("Turnkey SDK is not properly configured. Please check your configuration.", sdkTypes.TurnkeyErrorCodes.CONFIG_NOT_INITIALIZED);
  }
  const [exportIframeVisible, setExportIframeVisible] = react.useState(false);
  const {
    closeModal,
    isMobile
  } = Hook$1.useModal();
  const exportIframeUrl = config?.exportIframeUrl;
  if (!exportIframeUrl) {
    throw new sdkTypes.TurnkeyError("Export iframe URL is not configured. Please set it in the Turnkey configuration.", sdkTypes.TurnkeyErrorCodes.NOT_FOUND);
  }
  const [exportIframeClient, setExportIframeClient] = react.useState(null);
  react.useEffect(() => {
    const initIframe = async () => {
      try {
        const newExportIframeClient = new iframeStamper.IframeStamper({
          iframeUrl: exportIframeUrl,
          iframeElementId: TurnkeyIframeElementId,
          iframeContainer: document.getElementById(TurnkeyExportIframeContainerId)
        });
        await newExportIframeClient.init();
        await newExportIframeClient.applySettings({
          styles: {
            fontSize: "16px",
            backgroundColor: config?.ui?.darkMode ? config?.ui?.colors?.dark?.iconBackground || iconBackgroundDark : config?.ui?.colors?.light?.iconBackground || iconBackgroundLight,
            color: config?.ui?.darkMode ? config?.ui?.colors?.dark?.iconText || iconTextDark : config?.ui?.colors?.light?.iconText || iconTextLight
          }
        });
        setExportIframeClient(newExportIframeClient);
      } catch (error) {
        onError(new sdkTypes.TurnkeyError(`Error initializing IframeStamper`, sdkTypes.TurnkeyErrorCodes.INITIALIZE_IFRAME_ERROR, error));
      }
    };
    const existingIframe = document.getElementById(TurnkeyIframeElementId);
    if (!existingIframe) {
      initIframe();
    }
    const iframeElement = document.getElementById(TurnkeyIframeElementId);
    if (iframeElement) {
      iframeElement.className = TurnkeyIframeClassNames;
    }
    return () => {
      handleExportModalClose();
    };
  }, []);
  react.useEffect(() => {
    const reapplyIframeStyles = async () => {
      await exportIframeClient?.applySettings({
        styles: {
          fontSize: "16px",
          backgroundColor: config?.ui?.darkMode ? config?.ui?.colors?.dark?.iconBackground || iconBackgroundDark : config?.ui?.colors?.light?.iconBackground || iconBackgroundLight,
          color: config?.ui?.darkMode ? config?.ui?.colors?.dark?.iconText || iconTextDark : config?.ui?.colors?.light?.iconText || iconTextLight
        }
      });
    };
    reapplyIframeStyles();
  }, [config.ui]);
  function handleExportModalClose() {
    if (exportIframeClient) {
      setExportIframeClient(null);
      const existingIframe = document.getElementById(TurnkeyIframeElementId);
      if (existingIframe) {
        existingIframe.remove();
      }
    }
  }
  return jsxRuntime.jsxs("div", {
    className: clsx("flex flex-col items-center pt-8", isMobile ? "w-full" : "w-72"),
    children: [!exportIframeVisible && jsxRuntime.jsx(ExportWarning.ExportWarning, {
      target: target,
      exportIframeClient: exportIframeClient,
      targetPublicKey: targetPublicKey,
      exportType: exportType,
      keyFormat: keyFormat,
      stampWith: stampWith,
      setExportIframeVisible: setExportIframeVisible,
      organizationId: organizationId,
      onError: onError
    }), jsxRuntime.jsxs("div", {
      className: `transition-all delay-75 -pt-4 ${exportIframeVisible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none w-0 h-0"}`,
      children: [jsxRuntime.jsx("p", {
        className: "text-xs text-icon-text-light dark:text-icon-text-dark",
        children: exportType === base.ExportType.Wallet ? jsxRuntime.jsx(jsxRuntime.Fragment, {
          children: "Your seed phrase is the key to your wallet. Save it in a secure location."
        }) : exportType === base.ExportType.WalletAccount ? jsxRuntime.jsx(jsxRuntime.Fragment, {
          children: "Your private key is the key to your wallet account. Save it in a secure location."
        }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
          children: "Your private key is the key to your account. Save it in a secure location."
        })
      }), jsxRuntime.jsx("div", {
        id: TurnkeyExportIframeContainerId,
        style: {
          backgroundColor: config?.ui?.darkMode ? config?.ui?.colors?.dark?.iconBackground || iconBackgroundDark : config?.ui?.colors?.light?.iconBackground || iconBackgroundLight,
          boxSizing: "border-box",
          borderStyle: "solid",
          borderWidth: "1px",
          borderRadius: "8px",
          width: "100%",
          height: "100%",
          borderColor: config?.ui?.darkMode ? config?.ui?.colors?.dark?.iconText || iconTextDark : config?.ui?.colors?.light?.iconText || iconTextLight
        },
        className: "p-2"
      }), jsxRuntime.jsx("div", {
        className: "mt-4",
        children: jsxRuntime.jsx(Buttons.ActionButton, {
          name: "export-done",
          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"
        })
      })]
    })]
  });
}

exports.ExportComponent = ExportComponent;
//# sourceMappingURL=Export.js.map