@coin-voyage/paykit 2.2.7-beta.3 → 2.2.7

package/dist/components/Pages/PayToAddress/index.js

@@ -21,7 +21,7 @@ export default function PayToAddress() {
 }
 function PayToAddressView() {
     const { paymentState, triggerResize } = usePayContext();
-    const { payToAddressChain, payToAddressCurrency } = paymentState;
+    const { payToAddressChainId: payToAddressChain, payToAddressCurrency } = paymentState;
     const { data: paymentDetails, isLoading, isError, } = useDepositAddressQuery({
         enabled: payToAddressCurrency != undefined,
     });
@@ -62,7 +62,7 @@ function DepositAddressView({ isExpired, isDeposit, depositAddress, logoElement,
 function DepositFailed() {
     const locales = useLocales();
     const { setRoute, paymentState } = usePayContext();
-    const { setPayToAddressChain, setPayToAddressCurrency } = paymentState;
+    const { setPayToAddressChainId: setPayToAddressChain, setPayToAddressCurrency } = paymentState;
     const onSelectAnotherMethod = useCallback(() => {
         setPayToAddressChain(undefined);
         setPayToAddressCurrency(undefined);

package/dist/components/pay-modal/index.js

@@ -11,7 +11,7 @@ import Modal from "../ui/Modal";
 const pages = Object.fromEntries(Object.entries(routeConfig).map(([key, cfg]) => [key, cfg.component]));
 export function PayModal() {
     const { route, setOpen, setRoute, paymentState, mode, theme, customTheme } = usePayContext();
-    const { setConnectorChainType, clearUserSelection, setPayToAddressChain, setPayToAddressCurrency, setSelectedCurrencyOption, selectedWallet, selectedCurrencyOption, connectorChainType, } = paymentState;
+    const { setConnectorChainType, clearUserSelection, setPayToAddressChainId: setPayToAddressChain, setPayToAddressCurrency, setSelectedCurrencyOption, selectedWallet, selectedCurrencyOption, connectorChainType, } = paymentState;
     const locales = useLocales({
         CONNECTORNAME: selectedWallet?.name,
         CHAIN_TYPE: getChainTypeName(connectorChainType),

package/dist/hooks/useDepositAddressQuery.d.ts

@@ -2,5 +2,5 @@ import type { PaymentDetails as DepositAddressDetails } from "../types/payment-d
 type Params = {
     enabled?: boolean;
 };
-export declare function useDepositAddressQuery({ enabled }: Params): import("@tanstack/react-query").UseQueryResult<DepositAddressDetails | null, Error>;
+export declare function useDepositAddressQuery({ enabled }: Params): import("@tanstack/react-query").UseQueryResult<DepositAddressDetails, Error>;
 export {};

package/dist/hooks/useDepositAddressQuery.js

@@ -3,14 +3,21 @@ import usePayContext from "../components/contexts/pay";
 export function useDepositAddressQuery({ enabled }) {
     const { paymentState } = usePayContext();
     const { payOrder, payToAddressCurrency: currency, payToAddress } = paymentState;
+    const orderId = payOrder?.id;
+    const chainId = currency?.chain_id;
+    const tokenAddress = currency?.address;
+    const isEnabled = enabled && Boolean(orderId && chainId && currency);
     return useQuery({
-        queryKey: ["paymentDetails", payOrder?.id, currency?.chainId, currency?.address],
+        queryKey: ["paymentDetails", orderId, chainId, tokenAddress],
+        enabled: isEnabled,
+        retry: false,
         queryFn: async () => {
-            if (!payOrder?.id || !currency?.chainId || !currency)
-                return null;
+            if (!orderId || !chainId || !currency) {
+                throw new Error("Missing required deposit parameters");
+            }
             const response = await payToAddress({
-                chain_id: currency.chainId,
-                address: currency.address,
+                chain_id: chainId,
+                address: tokenAddress,
             });
             if (!response)
                 throw new Error("no-response");
@@ -20,10 +27,9 @@ export function useDepositAddressQuery({ enabled }) {
                 amount: response.data.src.total.ui_amount.toString(),
                 ticker: response.data.src.ticker,
                 expirationS: Math.floor(new Date(response.data.expires_at).getTime() / 1000),
-                chainId: currency.chainId,
+                chainId,
+                logoURI: currency.image_uri ?? "", // TODO: add fallback image
             };
         },
-        enabled,
-        retry: false,
     });
 }

package/dist/hooks/usePayToAddressChainOptions.js

@@ -1,27 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getChains } from "@coin-voyage/shared/common";
+import { fetchTokenList, getChains } from "@coin-voyage/shared/common";
 import { ChainId } from "@coin-voyage/shared/types";
 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 BTC_MIN_USD_AMOUNT = 15;
+const TOKEN_LIST_QUERY_KEY = ["token-list"];
 export function usePayToAddressChainOptions({ fiatAmount }) {
     const { setRoute, paymentState } = usePayContext();
-    const { setPayToAddressChain } = paymentState;
-    const { data: options = [], isLoading } = useQuery({
-        queryKey: ["chains", fiatAmount],
-        queryFn: () => getChains(),
-        select: (chains) => chains.map((chain) => ({
-            id: chain.chainId.toString(),
-            title: chain.name,
-            icons: [_jsx(SquircleIcon, { icon: chain.logoURI, alt: chain.name }, chain.chainId)],
-            onClick: () => {
-                setPayToAddressChain(chain);
-                setRoute(ROUTES.SELECT_PAY_TO_ADDRESS_TOKEN);
-            },
-            disabled: chain.chainId === ChainId.BTC && fiatAmount != null && fiatAmount < 15,
-        })),
-        staleTime: 1000 * 60 * 5, // cache for 5 minutes
+    const { setPayToAddressChainId: setPayToAddressChain } = paymentState;
+    const { data: tokenList, isLoading } = useQuery({
+        queryKey: TOKEN_LIST_QUERY_KEY,
+        queryFn: fetchTokenList,
+        staleTime: 1000 * 60 * 5,
     });
+    const chains = useMemo(() => getChains(tokenList?.chains ?? []), [tokenList]);
+    const options = useMemo(() => chains.map((chain) => ({
+        id: chain.chainId.toString(),
+        title: chain.name,
+        icons: [_jsx(SquircleIcon, { icon: chain.logoURI, alt: chain.name }, chain.chainId)],
+        onClick: () => {
+            setPayToAddressChain(chain.chainId);
+            setRoute(ROUTES.SELECT_PAY_TO_ADDRESS_TOKEN);
+        },
+        disabled: chain.chainId === ChainId.BTC && typeof fiatAmount === "number" && fiatAmount < BTC_MIN_USD_AMOUNT,
+    })), [chains, fiatAmount, setPayToAddressChain, setRoute]);
     return { options, isLoading };
 }

package/dist/hooks/usePayToAddressTokens.js

@@ -1,33 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { tokensByChainId } from "@coin-voyage/shared/common";
+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 { payToAddressChain, setPayToAddressCurrency } = paymentState;
-    const chainId = payToAddressChain?.chainId;
-    const { data: options = [], isLoading } = useQuery({
-        queryKey: ["tokens", chainId],
-        queryFn: async () => {
-            if (chainId == null)
-                return [];
-            return await tokensByChainId(chainId);
-        },
-        enabled: Boolean(chainId),
-        select: (tokens) => 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: () => {
-                setPayToAddressCurrency(token);
-                setRoute(ROUTES.PAY_TO_ADDRESS);
-            },
-        })),
+    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 };
 }

package/dist/hooks/usePaymentState.d.ts

@@ -1,6 +1,5 @@
 import { WalletProps } from "@coin-voyage/crypto/types/wallet";
-import { ChainMetadata, Token } from "@coin-voyage/shared/common";
-import { ChainType, CurrencyBase, type PayOrder } from "@coin-voyage/shared/types";
+import { ChainId, ChainType, Currency, CurrencyBase, type PayOrder } from "@coin-voyage/shared/types";
 import { PaymentDetails, PayOrderParams } from "@coin-voyage/shared/types/api";
 import { PaymentMethod } from "../types/enums";
 import { ROUTES } from "../types/routes";
@@ -26,10 +25,10 @@ export interface PaymentState {
     payToAddress: (currency: CurrencyBase) => Promise<PaymentDetails | undefined>;
     refreshOrder: () => Promise<void>;
     senderEnsName: string | undefined;
-    payToAddressChain: ChainMetadata | undefined;
-    setPayToAddressChain: React.Dispatch<React.SetStateAction<ChainMetadata | undefined>>;
-    payToAddressCurrency: Token | undefined;
-    setPayToAddressCurrency: React.Dispatch<React.SetStateAction<Token | undefined>>;
+    payToAddressChainId: ChainId | undefined;
+    setPayToAddressChainId: React.Dispatch<React.SetStateAction<ChainId | undefined>>;
+    payToAddressCurrency: Currency | undefined;
+    setPayToAddressCurrency: React.Dispatch<React.SetStateAction<Currency | undefined>>;
 }
 export declare function usePaymentState({ payOrder, setPayOrder, setRoute, log, }: {
     payOrder: PayOrder | undefined;

package/dist/hooks/usePaymentState.js

@@ -35,7 +35,7 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
     });
     const [selectedCurrencyOption, setSelectedCurrencyOption] = useState();
     const [paymentMethod, setPaymentMethod] = useState();
-    const [payToAddressChain, setPayToAddressChain] = useState();
+    const [payToAddressChainId, setPayToAddressChainId] = useState();
     const [payToAddressCurrency, setPayToAddressCurrency] = useState();
     const { payFromWallet } = usePayFromWallet({
         senderAddr: senderAccount.address,
@@ -151,8 +151,8 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
         payToAddress,
         refreshOrder,
         senderEnsName: evmEnsName ?? suiEnsName ?? undefined,
-        payToAddressChain: payToAddressChain,
-        setPayToAddressChain,
+        payToAddressChainId,
+        setPayToAddressChainId,
         payToAddressCurrency,
         setPayToAddressCurrency,
     };

package/dist/lib/config/wallet.js

@@ -86,7 +86,7 @@ export const walletConfigs = {
         },
         chainTypes: [ChainType.EVM, ChainType.SOL],
     },
-    "phantom, app.phantom": {
+    "phantom, app.phantom, app.phantom.bitcoin, app.phantom.sui, app.phantom.ethereum": {
         name: "Phantom",
         iconShape: "squircle",
         icon: _jsx(Logos.Phantom, {}),

package/dist/providers/paykit-provider.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useInWagmiContext } from "@coin-voyage/crypto/evm/provider/provider";
 import { useAccount, useConnectCallback } from "@coin-voyage/crypto/hooks";
-import { getChainMetadata, getToken } from "@coin-voyage/shared/common";
 import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { Buffer } from "buffer";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -197,12 +196,8 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
         else if (paymentMethod === PaymentMethod.DepositAddress &&
             payOrder?.status === PayOrderStatus.AWAITING_PAYMENT &&
             payOrder.payment?.src) {
-            const chainId = payOrder.payment.src.chain_id;
-            const [chainMetadata, token] = await Promise.all([getChainMetadata(chainId), getToken(payOrder.payment.src)]);
-            if (chainMetadata)
-                paymentState.setPayToAddressChain(chainMetadata);
-            if (token)
-                paymentState.setPayToAddressCurrency(token);
+            paymentState.setPayToAddressChainId(payOrder.payment.src.chain_id);
+            paymentState.setPayToAddressCurrency(payOrder.payment.src);
             setRoute(ROUTES.PAY_TO_ADDRESS);
         }
         else {

package/dist/types/route-config.d.ts

@@ -1,9 +1,9 @@
+import { Currency } from "@coin-voyage/shared/types";
 import type React from "react";
-import type { ROUTES } from "./routes";
 import { Dispatch, SetStateAction } from "react";
-import { ChainType } from "../server";
+import { ChainId, ChainType } from "../server";
+import type { ROUTES } from "./routes";
 import { CurrencyAndQuoteID } from "./state";
-import { ChainMetadata, Token } from "@coin-voyage/shared/common";
 export interface RouteConfig {
     component: React.ReactNode;
     heading: string | ((ctx: HeadingContext) => string | undefined);
@@ -25,8 +25,8 @@ export interface HeadingContext {
 export interface BackNavigationActions {
     setRoute: Dispatch<SetStateAction<ROUTES>>;
     setConnectorChainType: Dispatch<SetStateAction<ChainType | undefined>>;
-    setPayToAddressChain: Dispatch<SetStateAction<ChainMetadata | undefined>>;
-    setPayToAddressCurrency: Dispatch<SetStateAction<Token | undefined>>;
+    setPayToAddressChain: Dispatch<SetStateAction<ChainId | undefined>>;
+    setPayToAddressCurrency: Dispatch<SetStateAction<Currency | undefined>>;
     setSelectedCurrencyOption: (option: CurrencyAndQuoteID | undefined) => void;
     clearUserSelection: () => void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/paykit",
   "description": "Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.",
-  "version": "2.2.7-beta.3",
+  "version": "2.2.7",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -61,8 +61,8 @@
     "react-use-measure": "^2.1.1",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/crypto": "2.2.2",
-    "@coin-voyage/shared": "2.2.5-beta.5"
+    "@coin-voyage/crypto": "2.2.3",
+    "@coin-voyage/shared": "2.2.5"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",