@turnkey/react-wallet-kit/dist/components/auth/wallet/DisconnectWalletScreen.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 Buttons = require('../../design/Buttons.js');
var react = require('react');
var clsx = require('clsx');
var Hook = require('../../../providers/modal/Hook.js');

function DisconnectWalletScreen(props) {
  const {
    provider,
    onDisconnect
  } = props;
  const {
    isMobile
  } = Hook.useModal();
  const [isLoading, setIsLoading] = react.useState(false);
  const [hasError, setHasError] = react.useState(false);
  const handleDisconnect = async () => {
    setIsLoading(true);
    setHasError(false);
    try {
      await onDisconnect(provider);
    } catch (err) {
      setHasError(true);
    } finally {
      setIsLoading(false);
    }
  };
  return jsxRuntime.jsxs("div", {
    className: clsx("mt-8", isMobile ? "w-full" : "w-96"),
    children: [jsxRuntime.jsxs("div", {
      className: "mt-6 mb-5 flex flex-col items-center gap-3",
      children: [jsxRuntime.jsx("img", {
        src: provider.info.icon ?? "",
        className: "size-14 rounded-full"
      }), jsxRuntime.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 ${provider.info.name}`
      }), jsxRuntime.jsx("div", {
        className: "text-icon-text-light dark:text-icon-text-dark text-center !p-0",
        children: hasError ? `Try disconnecting directly from the ${provider.info.name} app` : "You can always connect this wallet again later."
      })]
    }), jsxRuntime.jsx("div", {
      className: "flex my-2 mt-0",
      children: jsxRuntime.jsx(Buttons.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"
      })
    })]
  });
}

exports.DisconnectWalletScreen = DisconnectWalletScreen;
//# sourceMappingURL=DisconnectWalletScreen.js.map