@turnkey/react-wallet-kit/dist/providers/WalletConnectProvider.js

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

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var core = require('@turnkey/core');
var Hook = require('./client/Hook.js');

const initialState = {
  walletConnectApps: [],
  isLoadingApps: false
};
const WalletConnectContext = /*#__PURE__*/react.createContext(null);
/**
 * @internal
 * WalletConnectProvider provides context for WalletConnect wallet apps.
 *
 * Automatically fetches wallet apps on mount using the projectId from config.
 * This is an internal provider and not exported
 */
function WalletConnectProvider({
  children
}) {
  const {
    config
  } = Hook.useTurnkey();
  const projectId = config?.walletConfig?.walletConnect?.projectId;
  // WalletConnect will only work if the app supports ALL of the configured namespaces, so
  // we build a list of these namespaces so that `buildWalletConnectAppEntries` can filter
  // and only returns apps that support all of them
  const namespaces = [...(config?.walletConfig?.chains?.ethereum?.walletConnectNamespaces ?? []), ...(config?.walletConfig?.chains?.solana?.walletConnectNamespaces ?? [])];
  const [state, setState] = react.useState(initialState);
  const fetchApps = react.useCallback(async (pid, ns) => {
    setState(s => ({
      ...s,
      isLoadingApps: true
    }));
    try {
      const entries = await core.buildWalletConnectAppEntries(pid, ns);
      setState({
        walletConnectApps: entries,
        isLoadingApps: false
      });
    } catch {
      setState(s => ({
        ...s,
        isLoadingApps: false
      }));
    }
  }, []);
  // we auto-fetch wallet apps on mount if projectId and namespaces are available
  react.useEffect(() => {
    if (projectId && namespaces.length > 0) {
      fetchApps(projectId, namespaces);
    }
  }, [projectId, namespaces.join(","), fetchApps]);
  return jsxRuntime.jsx(WalletConnectContext.Provider, {
    value: state,
    children: children
  });
}
function useWalletConnect() {
  const ctx = react.useContext(WalletConnectContext);
  if (!ctx) {
    throw new Error("useWalletConnect must be used within WalletConnectProvider.");
  }
  return ctx;
}

exports.WalletConnectProvider = WalletConnectProvider;
exports.useWalletConnect = useWalletConnect;
//# sourceMappingURL=WalletConnectProvider.js.map