Arkie-Library-Frontend/src/wallet/useWalletConnectLogin.ts

import { useCallback, useEffect, useRef, useState } from "react";
import { useAccount, useConnect, useDisconnect } from "wagmi";
import { bsc } from "wagmi/chains";
import { hasWalletConnectProjectId } from "./RainbowWalletProvider";
import {
  getInjectedWallet,
  signInWithInjectedWallet,
  type WalletKind,
} from "./injected";
import { localWalletToken, useWallet } from "./WalletProvider";

export type WalletConnectLoginState = "idle" | "connecting" | "signing";
export type WalletConnectLoginMode = "deeplink" | "qr";

function isMobileDevice(): boolean {
  if (typeof navigator === "undefined") return false;
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(
    navigator.userAgent || "",
  );
}

function currentUrl(): string {
  if (typeof window === "undefined") return "https://ark-library.com";
  return window.location.href;
}

function isWalletConnectUri(uri: string): boolean {
  return uri.startsWith("wc:");
}

function metaMaskWalletConnectLink(uri: string): string {
  if (!isWalletConnectUri(uri)) return uri;
  return `https://metamask.app.link/wc?uri=${encodeURIComponent(uri)}`;
}

function walletConnectDeeplink(
  kind: WalletKind | undefined,
  uri: string,
): string | null {
  if (kind === "tokenPocket") {
    return isWalletConnectUri(uri)
      ? `tpoutside://wc?uri=${encodeURIComponent(uri)}`
      : uri;
  }
  if (kind === "metaMask") {
    return metaMaskWalletConnectLink(uri);
  }
  if (kind === "imToken") {
    return isWalletConnectUri(uri)
      ? `imtokenv2://wc?uri=${encodeURIComponent(uri)}`
      : uri;
  }
  return null;
}

function inAppBrowserFallback(kind: WalletKind | undefined): string | null {
  if (kind === "imToken") {
    return `imtokenv2://navigate/DappView?url=${encodeURIComponent(currentUrl())}`;
  }
  return null;
}

function openWalletDeeplink(
  kind: WalletKind | undefined,
  deeplink: string,
): void {
  window.location.href = deeplink;
  const fallback = inAppBrowserFallback(kind);
  if (!fallback) return;
  window.setTimeout(() => {
    if (document.visibilityState === "visible") {
      window.location.href = fallback;
    }
  }, 1500);
}

function connectorMatchesWallet(
  connector: { id: string; name?: string; type?: string },
  kind: WalletKind | undefined,
): boolean {
  if (!kind) return false;
  const id = connector.id.toLowerCase();
  const name = connector.name?.toLowerCase() ?? "";
  const type = connector.type?.toLowerCase() ?? "";
  if (kind === "metaMask") {
    return id === "metamask" || type === "metamask" || name === "metamask";
  }
  if (kind === "tokenPocket") {
    return id === "tokenpocket" || name === "tokenpocket";
  }
  if (kind === "imToken") {
    return id === "imtoken" || name === "imtoken";
  }
  return false;
}

/**
 * MetaMask / imToken QR fallback via RainbowKit + WalletConnect.
 *
 * Flow: connect through RainbowKit/Wagmi on BNB Chain -> once an account is
 * connected, complete a local frontend wallet session. WalletConnect fallback
 * does not require message signature, backend nonce, or verify call.
 *
 * Entirely gated behind a real `VITE_WALLETCONNECT_PROJECT_ID`: when it is
 * missing `available` is false and `start` is a no-op, so callers can hide or
 * disable the entry instead of triggering a connect with a fake project id.
 */
export function useWalletConnectLogin() {
  const available = hasWalletConnectProjectId();
  const { address: localAddress, completeLogin } = useWallet();
  const { address: wagmiAddress, isConnected: wagmiConnected } = useAccount();
  const { connectAsync, connectors } = useConnect();
  const { disconnectAsync } = useDisconnect();
  const [state, setState] = useState<WalletConnectLoginState>("idle");
  const [error, setError] = useState("");
  const [qrUri, setQrUri] = useState("");
  const [connectedAddress, setConnectedAddress] = useState("");
  const pendingRef = useRef(false);
  const completedAddressRef = useRef<string | null>(null);
  const cleanupMessageRef = useRef<(() => void) | null>(null);
  const cleanupPollingRef = useRef<(() => void) | null>(null);

  const reset = useCallback(() => {
    pendingRef.current = false;
    completedAddressRef.current = null;
    cleanupMessageRef.current?.();
    cleanupMessageRef.current = null;
    cleanupPollingRef.current?.();
    cleanupPollingRef.current = null;
    setState("idle");
    setError("");
    setQrUri("");
    setConnectedAddress("");
  }, []);

  useEffect(() => {
    if (!wagmiConnected || !wagmiAddress) return;
    const alreadyCompleted =
      completedAddressRef.current?.toLowerCase() === wagmiAddress.toLowerCase();
    if (alreadyCompleted) return;

    completedAddressRef.current = wagmiAddress;
    pendingRef.current = false;
    setConnectedAddress(wagmiAddress);
    setQrUri("");
    setState("idle");

    if (localAddress?.toLowerCase() !== wagmiAddress.toLowerCase()) {
      console.info("[wallet-login] wagmi account connected", {
        address: wagmiAddress,
        chain: "BNB Chain",
        chainId: bsc.id,
      });
      completeLogin(localWalletToken(wagmiAddress), wagmiAddress);
      console.info("[wallet-login] local wallet session completed", {
        address: wagmiAddress,
      });
    }
  }, [completeLogin, localAddress, wagmiAddress, wagmiConnected]);

  const start = useCallback(
    async (
      preferredWallet?: WalletKind,
      mode: WalletConnectLoginMode = "qr",
    ) => {
      if (!available) return;
      setError("");
      setQrUri("");
      setConnectedAddress("");
      completedAddressRef.current = null;
      pendingRef.current = true;
      setState("connecting");

      if (
        mode === "deeplink" &&
        preferredWallet &&
        getInjectedWallet(preferredWallet)
      ) {
        try {
          setState("signing");
          const result = await signInWithInjectedWallet(preferredWallet);
          console.info("[wallet-login] injected verified", {
            preferredWallet,
            address: result.wallet,
            chain: "BNB Chain",
            chainId: bsc.id,
          });
          completeLogin(result.token, result.wallet);
          setState("idle");
          return;
        } catch (err) {
          pendingRef.current = false;
          setState("idle");
          setError(err instanceof Error ? err.message : "Wallet login failed");
          console.info("[wallet-login] injected verification failed", {
            preferredWallet,
            message: err instanceof Error ? err.message : String(err),
          });
          return;
        }
      }

      // QR mode must always use a WalletConnect-compatible connector so the
      // desktop page can render a scannable `wc:` URI instead of opening a
      // local browser extension. Deeplink mode can prefer wallet-specific
      // connectors (notably MetaMask SDK on mobile).
      const walletConnectConnector =
        connectors.find((item) => item.type === "walletConnect") ??
        connectors.find((item) => item.id === "walletConnect");
      const walletSpecificConnector = connectors.find((item) =>
        connectorMatchesWallet(item, preferredWallet),
      );
      const connector =
        mode === "qr"
          ? walletConnectConnector
          : (walletSpecificConnector ?? walletConnectConnector);

      if (!connector) {
        pendingRef.current = false;
        setQrUri("");
        setState("idle");
        setError("WalletConnect is not available");
        return;
      }

      console.info("[wallet-login] walletconnect connector", {
        preferredWallet,
        connectorId: connector.id,
        connectorName: connector.name,
        connectorType: connector.type,
      });

      const onMessage = (message: { type: string; data?: unknown }) => {
        if (
          message.type !== "display_uri" ||
          typeof message.data !== "string"
        ) {
          return;
        }
        console.info("[wallet-login] walletconnect display_uri", {
          preferredWallet,
          connectorId: connector.id,
        });
        if (mode === "qr") {
          setQrUri(message.data);
        }
        const deeplink = walletConnectDeeplink(preferredWallet, message.data);
        if (mode === "deeplink" && deeplink && isMobileDevice()) {
          openWalletDeeplink(preferredWallet, deeplink);
        }
      };

      cleanupMessageRef.current?.();
      connector.emitter.on("message", onMessage);
      cleanupMessageRef.current = () =>
        connector.emitter.off("message", onMessage);

      cleanupPollingRef.current?.();
      const finishFromAddress = (address: string, source: string) => {
        const alreadyCompleted =
          completedAddressRef.current?.toLowerCase() === address.toLowerCase();
        if (alreadyCompleted) return;
        pendingRef.current = false;
        completedAddressRef.current = address;
        setConnectedAddress(address);
        setQrUri("");
        setState("idle");
        cleanupMessageRef.current?.();
        cleanupMessageRef.current = null;
        cleanupPollingRef.current?.();
        cleanupPollingRef.current = null;
        console.info("[wallet-login] wallet account connected", {
          source,
          preferredWallet,
          address,
          chain: "BNB Chain",
          chainId: bsc.id,
        });
        completeLogin(localWalletToken(address), address);
        console.info("[wallet-login] local wallet session completed", {
          address,
        });
      };
      const pollId = window.setInterval(() => {
        void connector
          .getAccounts()
          .then((accounts) => {
            const account = accounts[0];
            if (account) finishFromAddress(account, "connector-poll");
          })
          .catch(() => undefined);
      }, 1000);
      cleanupPollingRef.current = () => window.clearInterval(pollId);

      try {
        await disconnectAsync().catch(() => undefined);
        await connector.disconnect().catch(() => undefined);
        const result = await connectAsync({ chainId: bsc.id, connector });
        const connectedAddress = result.accounts[0];
        if (!connectedAddress)
          throw new Error("Wallet connected without an account");
        finishFromAddress(connectedAddress, "connectAsync");
      } catch (err) {
        if (completedAddressRef.current) return;
        pendingRef.current = false;
        setState("idle");
        setError(
          err instanceof Error ? err.message : "WalletConnect login failed",
        );
        cleanupMessageRef.current?.();
        cleanupMessageRef.current = null;
        cleanupPollingRef.current?.();
        cleanupPollingRef.current = null;
      }
    },
    [available, completeLogin, connectAsync, connectors, disconnectAsync],
  );

  return {
    available,
    state,
    error,
    qrUri,
    address: connectedAddress,
    isConnected: Boolean(connectedAddress),
    start,
    reset,
  };
}