@turnkey/react-wallet-kit/dist/components/onramp/OnRamp.mjs

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

import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useModal } from '../../providers/modal/Hook.mjs';
import clsx from 'clsx';
import { ActionPage } from '../auth/Action.mjs';
import { SuccessPage } from '../design/Success.mjs';

function OnRampPage(_ref) {
  var icon = _ref.icon,
    onrampProvider = _ref.onrampProvider,
    _action = _ref.action,
    completed = _ref.completed,
    _ref$successPageDurat = _ref.successPageDuration,
    successPageDuration = _ref$successPageDurat === void 0 ? 2000 : _ref$successPageDurat,
    _ref$sandboxMode = _ref.sandboxMode,
    sandboxMode = _ref$sandboxMode === void 0 ? false : _ref$sandboxMode,
    onSuccess = _ref.onSuccess,
    onError = _ref.onError;
  var _useModal = useModal(),
    closeModal = _useModal.closeModal,
    isMobile = _useModal.isMobile;
  if (completed) {
    return jsx("div", {
      className: clsx("flex flex-col items-center justify-center py-5 transition-all duration-300 text-center", isMobile ? "w-full" : "w-72"),
      children: jsx(SuccessPage, {
        text: "On Ramp Transaction Complete!",
        duration: successPageDuration,
        onComplete: function onComplete() {
          onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
          closeModal();
        }
      })
    });
  }
  return jsxs("div", {
    className: clsx("flex flex-col items-center justify-center py-5 transition-all duration-300 text-center", isMobile ? "w-full" : "w-72"),
    children: [jsx(ActionPage, {
      title: "Initiating OnRamp",
      icon: icon,
      action: function () {
        var _action2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
          var _t;
          return _regenerator().w(function (_context) {
            while (1) switch (_context.p = _context.n) {
              case 0:
                _context.p = 0;
                _context.n = 1;
                return _action();
              case 1:
                _context.n = 3;
                break;
              case 2:
                _context.p = 2;
                _t = _context.v;
                onError === null || onError === void 0 ? void 0 : onError(_t);
                throw _t;
              case 3:
                return _context.a(2);
            }
          }, _callee, null, [[0, 2]]);
        }));
        function action() {
          return _action2.apply(this, arguments);
        }
        return action;
      }(),
      closeOnComplete: false
    }), jsx("div", {
      className: "text-icon-text-light text-sm dark:text-icon-text-dark text-center !p-0",
      children: onrampProvider === "FIAT_ON_RAMP_PROVIDER_COINBASE" ? "Use the Coinbase popup to finish funding your account." : "Use the MoonPay popup to finish funding your account."
    }), sandboxMode && jsx("div", {
      className: "mt-2 text-xs text-primary-light dark:text-primary-dark",
      children: "Sandbox mode \u2014 no real funds will be used."
    })]
  });
}

export { OnRampPage };
//# sourceMappingURL=OnRamp.mjs.map