@turnkey/react-wallet-kit/dist/components/user/LinkWallet.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 Wallet = require('../auth/Wallet.js');
var Hook = require('../../providers/modal/Hook.js');
var Hook$1 = require('../../providers/client/Hook.js');
var Action = require('../auth/Action.js');
var Success = require('../design/Success.js');
var utils = require('../../utils.js');

function LinkWalletModal(props) {
  const {
    providers,
    successPageDuration
  } = props;
  const {
    pushPage,
    closeModal
  } = Hook.useModal();
  const {
    connectWalletAccount,
    disconnectWalletAccount
  } = Hook$1.useTurnkey();
  const handleLinkWallet = async provider => {
    if (utils.isWalletConnect(provider)) {
      // for WalletConnect we route to a dedicated screen
      // to handle the connection process, as it requires a different flow (pairing via QR code or deep link)
      pushPage({
        key: "Link WalletConnect",
        content: jsxRuntime.jsx(Wallet.WalletConnectScreen, {
          provider: provider,
          onAction: connectWalletAccount,
          successPageDuration: successPageDuration
        })
      });
      return;
    }
    pushPage({
      key: `Link ${provider.info.name}`,
      content: jsxRuntime.jsx(Action.ActionPage, {
        title: `Linking ${provider.info.name}`,
        icon: jsxRuntime.jsx("img", {
          className: "size-11 rounded-full",
          src: provider.info.icon || ""
        }),
        closeOnComplete: false,
        action: async () => {
          await connectWalletAccount(provider);
          if (successPageDuration && successPageDuration > 0) {
            pushPage({
              key: "Link Success",
              content: jsxRuntime.jsx(Success.SuccessPage, {
                text: "Successfully linked wallet!",
                onComplete: () => closeModal(),
                duration: successPageDuration
              }),
              preventBack: true,
              showTitle: false
            });
          } else {
            closeModal();
          }
        }
      }),
      showTitle: false
    });
  };
  const handleUnlinkWallet = async provider => {
    pushPage({
      key: `Unlink ${provider.info.name}`,
      content: jsxRuntime.jsx(Wallet.UnlinkWalletScreen, {
        provider: provider,
        onUnlink: async () => {
          await disconnectWalletAccount(provider);
          if (successPageDuration) {
            pushPage({
              key: "Unlink Success",
              content: jsxRuntime.jsx(Success.SuccessPage, {
                text: "Successfully unlinked wallet!",
                onComplete: () => closeModal(),
                duration: successPageDuration
              }),
              preventBack: true,
              showTitle: false
            });
          } else {
            closeModal();
          }
        }
      }),
      showTitle: false
    });
  };
  return jsxRuntime.jsx(Wallet.ExternalWalletSelector, {
    providers: providers,
    onSelect: handleLinkWallet,
    onUnlink: handleUnlinkWallet
  });
}

exports.LinkWalletModal = LinkWalletModal;
//# sourceMappingURL=LinkWallet.js.map