@turnkey/react-wallet-kit/dist/components/auth/wallet/DisconnectWalletScreen.mjs

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

import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { ActionButton } from '../../design/Buttons.mjs';
import { useState } from 'react';
import clsx from 'clsx';
import { useModal } from '../../../providers/modal/Hook.mjs';

function DisconnectWalletScreen(props) {
  var _provider$info$icon;
  var provider = props.provider,
    onDisconnect = props.onDisconnect;
  var _useModal = useModal(),
    isMobile = _useModal.isMobile;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isLoading = _useState2[0],
    setIsLoading = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    hasError = _useState4[0],
    setHasError = _useState4[1];
  var handleDisconnect = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
      return _regenerator().w(function (_context) {
        while (1) switch (_context.p = _context.n) {
          case 0:
            setIsLoading(true);
            setHasError(false);
            _context.p = 1;
            _context.n = 2;
            return onDisconnect(provider);
          case 2:
            _context.n = 4;
            break;
          case 3:
            _context.p = 3;
            _context.v;
            setHasError(true);
          case 4:
            _context.p = 4;
            setIsLoading(false);
            return _context.f(4);
          case 5:
            return _context.a(2);
        }
      }, _callee, null, [[1, 3, 4, 5]]);
    }));
    return function handleDisconnect() {
      return _ref.apply(this, arguments);
    };
  }();
  return jsxs("div", {
    className: clsx("mt-8", isMobile ? "w-full" : "w-96"),
    children: [jsxs("div", {
      className: "mt-6 mb-5 flex flex-col items-center gap-3",
      children: [jsx("img", {
        src: (_provider$info$icon = provider.info.icon) !== null && _provider$info$icon !== void 0 ? _provider$info$icon : "",
        className: "size-14 rounded-full"
      }), jsx("div", {
        className: clsx("text-2xl font-bold text-center", hasError && "text-danger-light dark:text-danger-dark"),
        children: hasError ? "You can't disconnect this wallet!" : "Disconnect ".concat(provider.info.name)
      }), jsx("div", {
        className: "text-icon-text-light dark:text-icon-text-dark text-center !p-0",
        children: hasError ? "Try disconnecting directly from the ".concat(provider.info.name, " app") : "You can always connect this wallet again later."
      })]
    }), jsx("div", {
      className: "flex my-2 mt-0",
      children: jsx(ActionButton, {
        onClick: handleDisconnect,
        loading: isLoading,
        className: clsx("w-full max-w-md bg-danger-light dark:bg-danger-dark text-primary-text-light dark:text-primary-text-dark", hasError && "animate-shake opacity-50"),
        spinnerClassName: "text-primary-danger-text-light dark:text-primary-danger-text-dark",
        children: "Disconnect Wallet"
      })
    })]
  });
}

export { DisconnectWalletScreen };
//# sourceMappingURL=DisconnectWalletScreen.mjs.map