@turnkey/react-wallet-kit/dist/components/auth/wallet/WalletConnectFlow.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 = require('../../../providers/modal/Hook.js');
var Hook$1 = require('../../../providers/client/Hook.js');
var ExternalWalletChainSelector = require('./ExternalWalletChainSelector.js');
var DesktopWalletConnectScreen = require('./DesktopWalletConnectScreen.js');
var DisconnectWalletScreen = require('./DisconnectWalletScreen.js');
var MobileWalletConnectScreen = require('./MobileWalletConnectScreen.js');
var ShowAllWalletsScreen = require('./ShowAllWalletsScreen.js');
var base = require('../../../types/base.js');

/**
 * Orchestrates the WalletConnect connection flow.
 *
 * Desktop flow: Chain selector → QR code screen
 * Mobile flow: App selector → Deep link screen (with QR fallback)
 */
function WalletConnectFlow(props) {
  const {
    providers,
    mode,
    sessionKey,
    onDisconnect
  } = props;
  const {
    pushPage,
    popPage,
    isMobile
  } = Hook.useModal();
  const {
    connectWalletAccount,
    disconnectWalletAccount,
    loginOrSignupWithWallet
  } = Hook$1.useTurnkey();
  const isConnectMode = mode === base.WalletSelectorMode.Connect;
  // Check if any provider in the group is already connected
  const isConnected = isConnectMode && providers.some(p => p.connectedAddresses?.length > 0);
  // ─────────────────────────────────────────────────────────────────────────────
  // WalletConnect action handlers
  // ─────────────────────────────────────────────────────────────────────────────
  const handleAction = async provider => {
    if (mode === base.WalletSelectorMode.Auth) {
      // Auth flow: loginOrSignupWithWallet handles connect + sign
      await loginOrSignupWithWallet({
        walletProvider: provider,
        ...(sessionKey && {
          sessionKey
        })
      });
    } else {
      // Connect-only flow
      await connectWalletAccount(provider);
    }
  };
  const handleDisconnect = async provider => {
    await disconnectWalletAccount(provider);
  };
  /** Push the DisconnectWalletScreen for a connected provider */
  const pushDisconnectScreen = async provider => {
    if (onDisconnect) {
      await onDisconnect(provider);
      return;
    }
    pushPage({
      key: `Disconnect ${provider.info.name}`,
      content: jsxRuntime.jsx(DisconnectWalletScreen.DisconnectWalletScreen, {
        provider: provider,
        onDisconnect: async p => {
          await handleDisconnect(p);
          popPage();
        }
      }),
      showTitle: false
    });
  };
  // ─────────────────────────────────────────────────────────────────────────────
  // Screen navigation helpers
  // ─────────────────────────────────────────────────────────────────────────────
  const pushDesktopQRCodeScreen = (provider, onSelectAllWallets) => {
    pushPage({
      key: "Connect WalletConnect",
      content: jsxRuntime.jsx(DesktopWalletConnectScreen.DesktopWalletConnectScreen, {
        provider: provider,
        onAction: handleAction,
        onDisconnect: handleDisconnect,
        onSelectAllWallets: onSelectAllWallets
      })
    });
  };
  const pushDesktopChainSelector = onSelectAllWallets => {
    pushPage({
      key: `Select chain`,
      content: jsxRuntime.jsx(ExternalWalletChainSelector.ExternalWalletChainSelector, {
        providers: providers,
        onDisconnect: isConnectMode ? pushDisconnectScreen : undefined,
        onSelect: async provider => pushDesktopQRCodeScreen(provider, onSelectAllWallets)
      })
    });
  };
  /** Mobile: Deep link screen to open wallet app */
  const pushMobileDeepLinkScreen = provider => {
    pushPage({
      key: `Open app`,
      content: jsxRuntime.jsx(MobileWalletConnectScreen.MobileWalletConnectScreen, {
        provider: provider,
        onConnect: async p => {
          await connectWalletAccount(p);
        },
        onSign: mode === base.WalletSelectorMode.Auth ? async p => {
          await loginOrSignupWithWallet({
            walletProvider: p,
            ...(sessionKey && {
              sessionKey
            })
          });
        } : undefined,
        onSelectQRCode: async chain => {
          // Fallback to QR code if deep link doesn't work
          const chainProvider = providers.find(p => p.chainInfo.namespace === chain);
          pushDesktopQRCodeScreen(chainProvider);
        }
      })
    });
  };
  /** Mobile: Show all WalletConnect-compatible apps */
  const pushMobileAppSelector = () => {
    pushPage({
      key: "Connect WalletConnect",
      content: jsxRuntime.jsx(ShowAllWalletsScreen.ShowAllWalletsScreen, {
        onSelect: async provider => pushMobileDeepLinkScreen(provider),
        onSelectQRCode: async () => pushDesktopChainSelector()
      })
    });
  };
  // ─────────────────────────────────────────────────────────────────────────────
  // Flow selection
  // ─────────────────────────────────────────────────────────────────────────────
  react.useEffect(() => {
    // Mobile flow: App list -> deep link to wallet app
    // Desktop flow: Chain selector -> QR code
    //
    // Exception: For "Connect Wallet" screen (disconnect possible),
    // always use desktop flow since it shows connection status.
    const useDesktopFlow = !isMobile || isConnected;
    // Pop the WalletConnectFlow page itself so the back button on the next
    // screen returns to the wallet list, not this empty orchestrator page.
    popPage();
    if (useDesktopFlow) {
      pushDesktopChainSelector(async () => {
        pushMobileAppSelector();
      });
    } else {
      pushMobileAppSelector();
    }
  }, []);
  // This component doesn't render anything - it just orchestrates navigation
  return null;
}

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