@rainbow-me/rainbowkit/dist/components/chunk-OUQRJHMN.js

The best way to connect a wallet

"use client";
import {
  useIsMounted
} from "./chunk-ZLB3VV6R.js";
import {
  addLatestWalletId,
  clearLatestWalletId,
  getLatestWalletId,
  useConnectModal,
  useConnectionStatus,
  useModalState,
  useWalletConnectors
} from "./chunk-EIFPYXE7.js";
import {
  WalletButtonContext
} from "./chunk-GZW2ASFM.js";
import {
  isMobile
} from "./chunk-N6EWR2LO.js";

// src/components/WalletButton/WalletButtonRenderer.tsx
import React, {
  useContext,
  useEffect,
  useMemo,
  useState
} from "react";
import { useAccount, useAccountEffect } from "wagmi";
function WalletButtonRenderer({
  // Wallet is the same as `connector.id` which is injected into
  // wagmi connectors
  wallet = "rainbow",
  children
}) {
  const isMounted = useIsMounted();
  const { openConnectModal } = useConnectModal();
  const { connectModalOpen } = useModalState();
  const { connector, setConnector } = useContext(WalletButtonContext);
  const [firstConnector] = useWalletConnectors().filter((wallet2) => wallet2.isRainbowKitConnector).filter(
    (_wallet) => _wallet.id.toLowerCase() === wallet.toLowerCase() || _wallet.aliases?.some(
      (alias) => alias.toLowerCase() === wallet.toLowerCase()
    )
  ).sort((a, b) => a.groupIndex - b.groupIndex);
  if (!firstConnector) {
    throw new Error("Connector not found");
  }
  const connectionStatus = useConnectionStatus();
  const [loading, setLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const mobile = isMobile();
  useEffect(() => {
    if (!connectModalOpen && connector) setConnector(null);
  }, [connectModalOpen, connector, setConnector]);
  const { isConnected, isConnecting } = useAccount();
  useAccountEffect({
    onConnect: () => {
      if (isError) setIsError(false);
    },
    onDisconnect: clearLatestWalletId
  });
  const isLastWalletIdConnected = useMemo(() => {
    const lastWalletId = getLatestWalletId();
    if (!lastWalletId || !firstConnector?.id) {
      return false;
    }
    if (!isConnected) return false;
    return lastWalletId === firstConnector?.id;
  }, [isConnected, firstConnector]);
  const connectWallet = async () => {
    try {
      setLoading(true);
      if (isError) setIsError(false);
      await firstConnector?.connect?.();
    } catch {
      setIsError(true);
    } finally {
      setLoading(false);
    }
  };
  const isStatusLoading = connectionStatus === "loading";
  const ready = !isConnecting && !!openConnectModal && firstConnector && !isStatusLoading;
  const isNotSupported = !firstConnector?.installed || !firstConnector?.ready;
  return /* @__PURE__ */ React.createElement(React.Fragment, null, children({
    error: isError,
    loading,
    connected: isLastWalletIdConnected,
    ready,
    mounted: isMounted(),
    connector: firstConnector,
    connect: async () => {
      addLatestWalletId(firstConnector?.id || "");
      if (mobile || isNotSupported) {
        openConnectModal?.();
        setConnector(firstConnector);
        return;
      }
      await connectWallet();
    }
  }));
}

export {
  WalletButtonRenderer
};