@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
45 lines (44 loc) • 2.11 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { getChainName } from "@coin-voyage/shared/chain";
import usePayContext from "../components/contexts/pay";
import TokenChainLogo from "../components/ui/TokenChainLogo";
import { ROUTE } from "../types/routes";
export function useTokenOptions(disabled) {
const { paymentState, setRoute } = usePayContext();
const { setSelectedCurrencyOption, payOrderQuotes } = paymentState;
const filteredAndSortedQuotes = payOrderQuotes.quotes
?.filter((q) => q.balance?.value_usd !== 0)
.sort((a, b) => {
const valueUsdA = a.currency_amount.value_usd ?? 0;
const valueUsdB = b.currency_amount.value_usd ?? 0;
// Balance checks
const aInsufficient = Number(a?.balance?.value_usd ?? 0) < valueUsdA;
const bInsufficient = Number(b?.balance?.value_usd ?? 0) < valueUsdB;
if (aInsufficient && !bInsufficient)
return 1;
if (!aInsufficient && bInsufficient)
return -1;
if (aInsufficient && bInsufficient)
return 0;
return valueUsdA - valueUsdB;
});
return (filteredAndSortedQuotes?.map((quote, idx) => {
const title = `${quote.currency_amount.ui_amount_display} ${quote.ticker} on ${getChainName(quote.chain_id)}`;
const subtitle = `Balance: ${quote.balance?.ui_amount_display ?? "0"} ${quote.ticker}`;
const isDisabled = disabled || BigInt(quote.balance?.raw_amount ?? 0) < BigInt(quote.currency_amount.raw_amount);
return {
id: idx.toString(),
title,
subtitle,
disabled: isDisabled,
iconShape: "squircle",
icons: [
_jsx(TokenChainLogo, { src: quote.image_uri, alt: `${quote.ticker} logo`, chainId: quote.chain_id, style: { borderRadius: 9999 }, chainStyle: { bottom: -1, right: -1 } }, `${quote.ticker}-${quote.chain_id}`),
],
onClick: () => {
setSelectedCurrencyOption(quote);
setRoute(ROUTE.WALLET_PAYMENT);
},
};
}) ?? []);
}