@coin-voyage/paykit/dist/hooks/usePayToAddressTokens.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 { fetchTokenList, tokensByChainId, tokenToCurrency } from "@coin-voyage/shared/common";
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";
import usePayContext from "../components/contexts/pay";
import { SquircleIcon } from "../components/ui/Icon";
import { ROUTES } from "../types/routes";
const TOKEN_LIST_QUERY_KEY = ["token-list"];
export function usePayToAddressTokens() {
    const { paymentState, setRoute } = usePayContext();
    const { payToAddressChainId: payToAddressChain, setPayToAddressCurrency } = paymentState;
    const chainId = payToAddressChain;
    const { data: tokenList, isLoading } = useQuery({
        queryKey: TOKEN_LIST_QUERY_KEY,
        queryFn: fetchTokenList,
        staleTime: 1000 * 60 * 5,
    });
    const tokens = useMemo(() => {
        if (!tokenList || !chainId)
            return [];
        return tokensByChainId(tokenList.chains, chainId);
    }, [tokenList, chainId]);
    const options = useMemo(() => tokens.map((token) => ({
        id: token.address ?? token.ticker,
        title: token.name,
        icons: token.logoURI
            ? [_jsx(SquircleIcon, { icon: token.logoURI, alt: token.name }, token.address ?? token.ticker)]
            : [],
        onClick: () => {
            const currency = tokenToCurrency(token);
            setPayToAddressCurrency(currency);
            setRoute(ROUTES.PAY_TO_ADDRESS);
        },
    })), [tokens, setPayToAddressCurrency, setRoute]);
    return { options, isLoading };
}