@coin-voyage/paykit/dist/hooks/useWalletConnectModal.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { useUniversalConnect } from "@coin-voyage/crypto/hooks";
import { createWalletConnectConnector } from "@coin-voyage/crypto/lib/connectors/walletConnect";
import { extendsWalletAdapter } from "@coin-voyage/crypto/solana/utils";
import { ChainType } from "@coin-voyage/shared/types";
import { useWallet } from "@solana/wallet-adapter-react";
import { useState } from "react";
import { useConnect as wagmiUseConnect } from "wagmi";
import usePayContext from "../components/contexts/pay";
import { ROUTES } from "../types/routes";
import { isWalletConnectConnector } from "../utils";
export function useWalletConnectModal() {
    const { log, setRoute, paymentState } = usePayContext();
    const { connectors } = wagmiUseConnect();
    const wallet = useWallet();
    const { connect } = useUniversalConnect({
        onSuccess: (_, variables) => {
            if (variables?.connector) {
                setRoute(ROUTES.SELECT_TOKEN);
            }
        },
        onError: (error) => {
            if (error.message && error.message.includes("User rejected")) {
                return;
            }
        },
    });
    const [isOpen, setIsOpen] = useState(false);
    return {
        isOpen,
        open: async () => {
            const w3mcss = document.createElement("style");
            w3mcss.innerHTML = "w3m-modal, wcm-modal{ --wcm-z-index: 2147483647; --w3m-z-index:2147483647; }";
            document.head.appendChild(w3mcss);
            try {
                let connector;
                const chainType = paymentState.connectorChainType;
                if (chainType === ChainType.SOL) {
                    const wcAdapter = wallet?.wallets.find((w) => w.adapter.name.toLowerCase() === "walletconnect");
                    if (!wcAdapter)
                        throw new Error("No Solana WalletConnect adapter available");
                    connector = {
                        chainType: ChainType.SOL,
                        connector: extendsWalletAdapter(wcAdapter.adapter, "walletConnect"),
                    };
                }
                else {
                    const clientConnector = connectors.find((c) => isWalletConnectConnector(c.id));
                    if (!clientConnector)
                        throw new Error("No WalletConnect connector available");
                    const provider = await clientConnector.getProvider();
                    const projectId = provider.rpc.projectId;
                    connector = {
                        chainType: ChainType.EVM,
                        connector: createWalletConnectConnector({
                            projectId,
                            showQrModal: true,
                        }),
                    };
                }
                if (!connector)
                    throw new Error("No connector available");
                setIsOpen(true);
                await connect({ walletConnector: connector });
            }
            catch (err) {
                log("WalletConnect error:", err);
            }
            finally {
                setIsOpen(false);
                document.head.removeChild(w3mcss);
            }
        },
    };
}