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

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

import { jsx as _jsx } from "react/jsx-runtime";
import { useConfig as useBigmiConfig } from "@bigmi/react";
import { truncateAddress, truncateENSName } from "@coin-voyage/shared/common";
import { ChainType, PayOrderMode } from "@coin-voyage/shared/types";
import { useWallets } from "@mysten/dapp-kit";
import { useWallet } from "@solana/wallet-adapter-react";
import { useCallback, useMemo } from "react";
import { useConfig as useWagmiConfig } from "wagmi";
import Logos from "../assets/chains";
import { MetaMask } from "../assets/logos";
import usePayContext from "../components/contexts/pay";
import { SquircleIcon } from "../components/ui/Icon";
import { ROUTES } from "../types/routes";
function getTitle(subject, isDeposit) {
    return `${isDeposit ? "Deposit from" : "Pay on"} ${subject}`;
}
export function useChainOptions({ account, mode, onClick }) {
    const { setRoute, paymentState } = usePayContext();
    const suiWallets = useWallets();
    const evmConfig = useWagmiConfig();
    const utxoConfig = useBigmiConfig();
    const { wallets: solanaWallets } = useWallet();
    const isDeposit = mode === PayOrderMode.DEPOSIT;
    const isConnected = account?.isConnected;
    const displayName = useMemo(() => paymentState.senderEnsName
        ? truncateENSName(paymentState.senderEnsName, 14)
        : account.address
            ? truncateAddress(account.address)
            : "wallet", [paymentState.senderEnsName, account.address]);
    const handleConnectedWalletClick = useCallback(() => {
        paymentState.setConnectorChainType(account.chainType);
        setRoute(ROUTES.SELECT_TOKEN);
    }, [paymentState, account.chainType, setRoute]);
    const connectedWalletIcon = useMemo(() => {
        return account.connector?.icon
            ? [
                _jsx(SquircleIcon, { icon: account.connector.icon, alt: account.connector?.name ?? "Connected Wallet" }, "connector"),
            ]
            : [_jsx(MetaMask, {}, "metamask")];
    }, [account.connector]);
    const evmIcons = useMemo(() => [_jsx(Logos.Ethereum, {}, "eth"), _jsx(Logos.Base, {}, "base"), _jsx(Logos.Arbitrum, {}, "arb")], []);
    const solanaIcon = useMemo(() => [_jsx(Logos.Solana, {}, "sol")], []);
    const suiIcon = useMemo(() => [_jsx(Logos.Sui, {}, "sui")], []);
    const bitcoinIcon = useMemo(() => [_jsx(Logos.Bitcoin, {}, "btc")], []);
    const options = useMemo(() => {
        const opts = [];
        if (isConnected) {
            opts.push({
                id: "connectedWallet",
                title: `Pay with ${displayName}`,
                icons: connectedWalletIcon,
                onClick: handleConnectedWalletClick,
            });
        }
        if (evmConfig.connectors.length > 0) {
            opts.push({
                id: "evm",
                title: getTitle("Ethereum", isDeposit),
                subtitle: "Ethereum Mainnet, Base, Arbitrum ...",
                iconShape: "circle",
                icons: evmIcons,
                onClick: () => onClick(ChainType.EVM),
            });
        }
        if (solanaWallets) {
            opts.push({
                id: "solana",
                title: getTitle("Solana", isDeposit),
                icons: solanaIcon,
                onClick: () => onClick(ChainType.SOL),
            });
        }
        if (suiWallets) {
            opts.push({
                id: "sui",
                title: getTitle("Sui", isDeposit),
                icons: suiIcon,
                onClick: () => onClick(ChainType.SUI),
            });
        }
        if (utxoConfig.connectors.length > 0) {
            opts.push({
                id: "bitcoin",
                title: getTitle("Bitcoin", isDeposit),
                icons: bitcoinIcon,
                onClick: () => onClick(ChainType.UTXO),
            });
        }
        return opts;
    }, [
        isConnected,
        displayName,
        handleConnectedWalletClick,
        onClick,
        evmConfig.connectors.length,
        solanaWallets,
        suiWallets,
        utxoConfig.connectors.length,
        isDeposit,
        connectedWalletIcon,
        evmIcons,
        solanaIcon,
        suiIcon,
        bitcoinIcon,
    ]);
    return { options };
}