@coin-voyage/paykit 2.4.5-beta.2 → 2.4.5-beta.4

package/dist/components/Pages/CardPayment/index.d.ts

@@ -1 +1,8 @@
+import type { StripeOnramp } from "@stripe/crypto/types";
+import { type ReactNode } from "react";
 export default function CardPayment(): import("react/jsx-runtime").JSX.Element;
+export declare const CryptoElements: ({ stripeOnramp, children, }: {
+    stripeOnramp: StripeOnramp | Promise<StripeOnramp | null>;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useStripeOnrampContext: () => StripeOnramp | null | undefined;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFiatPaymentData } from "@coin-voyage/shared/payment";
 import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
-import { loadStripeOnramp } from "@stripe/crypto/pure";
+import { loadStripeOnramp } from "@stripe/crypto";
 import { useQuery } from "@tanstack/react-query";
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { AlertIcon } from "../../../assets/icons";
 import useLocales from "../../../hooks/useLocales";
 import styled from "../../../styles/styled";
@@ -15,11 +15,7 @@ import { OrderHeader } from "../../ui/OrderHeader";
 import PoweredByFooter from "../../ui/PoweredByFooter";
 import { Spinner } from "../../ui/Spinner";
 export default function CardPayment() {
-    const { triggerResize } = usePayContext();
     const { data, isLoading, error, refetch } = useCardPaymentData();
-    useEffect(() => {
-        triggerResize();
-    }, [triggerResize, isLoading, data?.session_id, data?.client_secret, error]);
     return (_jsxs(PageContent, { children: [_jsx(OrderHeader, { minified: true }), _jsx(CardPaymentContent, { paymentData: data, isLoading: isLoading, error: error instanceof Error ? error : null, onRetry: () => {
                     void refetch();
                 } }), _jsx(PoweredByFooter, {})] }));
@@ -66,29 +62,14 @@ function StatusCard({ title, body, actionLabel, onAction, loading = false, warni
         }, children: [loading ? _jsx(Spinner, {}) : warning ? _jsx(AlertIcon, {}) : null, _jsx(ModalH1, { "$warning": warning, children: title }), _jsx(ModalBody, { children: body }), actionLabel && onAction ? (_jsx(ActionRow, { children: _jsx(Button, { onClick: onAction, children: actionLabel }) })) : null] }));
 }
 function StripeOnrampCheckout({ paymentData }) {
-    const { paymentState, mode, triggerResize } = usePayContext();
-    const { data: stripeOnramp, isLoading, error, refetch } = useStripeOnramp(paymentData.stripe_publishable_key);
-    const refreshOrderRef = useLatestRef(paymentState.refreshOrder);
+    const { mode, triggerResize } = usePayContext();
+    const { data: stripeOnramp, isLoading, error, refetch } = useLoadStripeOnramp(paymentData.stripe_publishable_key);
     const refreshDebounceRef = useRef(null);
-    const lastStatusRef = useRef(null);
-    const theme = useMemo(() => {
-        return mode === "dark" ? "dark" : "light";
+    const appearance = useMemo(() => {
+        return {
+            theme: mode === "dark" ? "dark" : "light",
+        };
     }, [mode]);
-    const handleSessionUpdate = useCallback((status) => {
-        if (status === lastStatusRef.current)
-            return;
-        lastStatusRef.current = status;
-        const shouldRefresh = status === "fulfillment_complete" || status === "rejected";
-        if (!shouldRefresh) {
-            return;
-        }
-        if (refreshDebounceRef.current) {
-            window.clearTimeout(refreshDebounceRef.current);
-        }
-        refreshDebounceRef.current = window.setTimeout(() => {
-            void refreshOrderRef.current();
-        }, 500);
-    }, [refreshOrderRef]);
     useEffect(() => {
         return () => {
             if (refreshDebounceRef.current) {
@@ -96,44 +77,41 @@ function StripeOnrampCheckout({ paymentData }) {
             }
         };
     }, []);
+    useEffect(() => {
+        triggerResize();
+    }, [error, isLoading, stripeOnramp, triggerResize]);
     if (error) {
         return (_jsx(StatusCard, { warning: true, title: "Stripe unavailable", body: error.message, actionLabel: "Try again", onAction: () => {
                 void refetch();
             } }));
     }
-    return (_jsxs(OnrampShell, { children: [isLoading ? (_jsx(OnrampOverlay, { children: _jsx(Spinner, {}) })) : null, stripeOnramp ? (_jsx(OnrampSession, { stripeOnramp: stripeOnramp, clientSecret: paymentData.client_secret, theme: theme, onUiLoaded: triggerResize, onSessionUpdate: handleSessionUpdate }, paymentData.client_secret)) : null] }));
+    return (_jsxs(OnrampShell, { children: [isLoading ? (_jsx(OnrampOverlay, { children: _jsx(Spinner, {}) })) : null, paymentData.client_secret && stripeOnramp ? (_jsx(CryptoElements, { stripeOnramp: stripeOnramp, children: _jsx(OnrampElement, { id: "onramp-element", clientSecret: paymentData.client_secret, appearance: appearance, onReady: triggerResize }) })) : (_jsx(OnrampOverlay, { children: _jsx(Spinner, {}) }))] }));
 }
-const OnrampSession = memo(function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessionUpdate, }) {
-    const mountNodeRef = useRef(null);
-    const onUiLoadedRef = useLatestRef(onUiLoaded);
-    const onSessionUpdateRef = useLatestRef(onSessionUpdate);
+function OnrampElement({ clientSecret, appearance, onReady, onChange, ...props }) {
+    const stripeOnramp = useStripeOnrampContext();
+    const onrampElementRef = useRef(null);
+    const [session, setSession] = useState();
+    const appearanceJSON = JSON.stringify(appearance);
     useEffect(() => {
-        const mountNode = mountNodeRef.current;
-        if (!mountNode) {
-            return;
+        const containerRef = onrampElementRef.current;
+        if (containerRef) {
+            // NB: ideally we want to be able to hot swap/update onramp iframe
+            // This currently results a flash if one needs to mint a new session when they need to update fixed transaction details
+            containerRef.innerHTML = "";
+            if (clientSecret && stripeOnramp) {
+                setSession(stripeOnramp
+                    .createSession({
+                    clientSecret,
+                    appearance: appearanceJSON ? JSON.parse(appearanceJSON) : {},
+                })
+                    .mount(containerRef));
+            }
         }
-        mountNode.replaceChildren();
-        const session = stripeOnramp.createSession({
-            clientSecret,
-            appearance: theme ? { theme } : undefined,
-        });
-        const handleUiLoaded = () => {
-            onUiLoadedRef.current?.();
-        };
-        const handleSessionUpdated = (event) => {
-            onSessionUpdateRef.current?.(event.payload.session.status);
-        };
-        session.addEventListener("onramp_ui_loaded", handleUiLoaded);
-        session.addEventListener("onramp_session_updated", handleSessionUpdated);
-        session.mount(mountNode);
-        return () => {
-            session.removeEventListener("onramp_ui_loaded", handleUiLoaded);
-            session.removeEventListener("onramp_session_updated", handleSessionUpdated);
-            mountNode.replaceChildren();
-        };
-    }, [clientSecret, onSessionUpdateRef, onUiLoadedRef, stripeOnramp, theme]);
-    return _jsx(OnrampMount, { ref: mountNodeRef });
-});
+    }, [appearanceJSON, clientSecret, stripeOnramp]);
+    useOnrampSessionListener("onramp_ui_loaded", session, onReady);
+    useOnrampSessionListener("onramp_session_updated", session, onChange);
+    return _jsx(OnrampMount, { ...props, ref: onrampElementRef });
+}
 function useCardPaymentData() {
     const { paymentState } = usePayContext();
     const { payOrder, payWithCard } = paymentState;
@@ -163,41 +141,73 @@ function useCardPaymentData() {
         data: paymentData ?? query.data,
     };
 }
-function useStripeOnramp(publishableKey) {
+const stripeOnrampPromises = new Map();
+function getStripeOnramp(publishableKey) {
+    const existingPromise = stripeOnrampPromises.get(publishableKey);
+    if (existingPromise) {
+        return existingPromise;
+    }
+    const stripeOnrampPromise = loadStripeOnramp(publishableKey).catch((error) => {
+        stripeOnrampPromises.delete(publishableKey);
+        throw error;
+    });
+    stripeOnrampPromises.set(publishableKey, stripeOnrampPromise);
+    return stripeOnrampPromise;
+}
+function useLoadStripeOnramp(publishableKey) {
     return useQuery({
         queryKey: ["stripe-onramp", publishableKey],
         enabled: Boolean(publishableKey),
         staleTime: Infinity,
-        retry: false,
+        retry: 1,
+        refetchOnWindowFocus: false,
         queryFn: async () => {
-            if (!publishableKey) {
-                throw new Error("Missing Stripe publishable key.");
+            const stripeOnramp = await getStripeOnramp(publishableKey);
+            if (!stripeOnramp) {
+                throw new Error("Stripe checkout can only be loaded in a browser.");
             }
-            const instance = await getStripeOnrampPromise(publishableKey);
-            if (!instance) {
-                throw new Error("Stripe Onramp is only available in the browser.");
-            }
-            return instance;
+            return stripeOnramp;
         },
     });
 }
-const stripeOnrampPromiseCache = new Map();
-function getStripeOnrampPromise(publishableKey) {
-    const cached = stripeOnrampPromiseCache.get(publishableKey);
-    if (cached) {
-        return cached;
-    }
-    const nextPromise = loadStripeOnramp(publishableKey);
-    stripeOnrampPromiseCache.set(publishableKey, nextPromise);
-    return nextPromise;
-}
-function useLatestRef(value) {
-    const ref = useRef(value);
+// ReactContext to simplify access of StripeOnramp object
+const CryptoElementsContext = createContext(null);
+CryptoElementsContext.displayName = "CryptoElementsContext";
+export const CryptoElements = ({ stripeOnramp, children, }) => {
+    const [ctx, setContext] = useState(() => ({
+        onramp: null,
+    }));
     useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref;
-}
+        let isMounted = true;
+        Promise.resolve(stripeOnramp).then((onramp) => {
+            if (onramp && isMounted) {
+                setContext((ctx) => (ctx.onramp === onramp ? ctx : { onramp }));
+            }
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, [stripeOnramp]);
+    return _jsx(CryptoElementsContext.Provider, { value: ctx, children: children });
+};
+// React hook to get StripeOnramp from context
+export const useStripeOnrampContext = () => {
+    const context = useContext(CryptoElementsContext);
+    return context?.onramp;
+};
+// React element to render Onramp UI
+const useOnrampSessionListener = (type, session, callback) => {
+    useEffect(() => {
+        if (session && callback) {
+            const listener = (e) => callback(e.payload);
+            session.addEventListener(type, listener);
+            return () => {
+                session.removeEventListener(type, listener);
+            };
+        }
+        return () => { };
+    }, [session, callback, type]);
+};
 const OnrampShell = styled.div `
   position: relative;
   min-height: 480px;

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

@@ -12,6 +12,7 @@ import { ModalContent, PageContent } from "../../ui/Modal/styles";
 import { ScrollArea } from "../../ui/ScrollArea";
 import { Spinner } from "../../ui/Spinner";
 import { Container, WalletIcon, WalletItem, WalletLabel, WalletList } from "./styles";
+import { getConnectorId } from "@coin-voyage/crypto/utils";
 const MoreIcon = (_jsx("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" }) }));
 export default function MobileConnectors() {
     const { paymentState } = usePayContext();
@@ -29,7 +30,7 @@ export default function MobileConnectors() {
         // check if wallet is supports currentChainType
         if (connectorChainType && wallet.chainTypes && !wallet.chainTypes.includes(connectorChainType))
             return false;
-        if (wallets.find((w) => w.connectors.find((c) => c.connector.id === walletId)))
+        if (wallets.find((w) => w.connectors.find((c) => getConnectorId(c.connector) === walletId)))
             return false;
         return true;
     }) ?? [];

package/dist/hooks/useChainOptions.js

@@ -3,7 +3,7 @@ import { useConfig as useBigmiConfig } from "@bigmi/react";
 import { Arbitrum, Base, Bitcoin, Ethereum, Solana, Sui } from "@coin-voyage/shared/chain";
 import { ChainType, PayOrderMode } from "@coin-voyage/shared/types";
 import { truncateAddress, truncateENSName } from "@coin-voyage/shared/utils";
-import { useWallets } from "@mysten/dapp-kit";
+import { useWallets } from "@mysten/dapp-kit-react";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { useCallback, useMemo } from "react";
 import { useConfig as useWagmiConfig } from "wagmi";

package/dist/hooks/usePaymentState.js

@@ -1,7 +1,6 @@
-import { useAccount } from "@coin-voyage/crypto/hooks";
+import { useAccount, useSuiNSName } from "@coin-voyage/crypto/hooks";
 import { zPayOrder } from "@coin-voyage/shared/schemas";
 import { ChainType, PayOrderMode, } from "@coin-voyage/shared/types";
-import { useResolveSuiNSName } from "@mysten/dapp-kit";
 import { useCallback, useRef, useState } from "react";
 import { mainnet } from "viem/chains";
 import { useEnsName } from "wagmi";
@@ -21,7 +20,7 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
         selectedWallet,
         chainType: connectorChainType,
     });
-    const { data: suiEnsName } = useResolveSuiNSName(senderAccount.address, {
+    const { data: suiEnsName } = useSuiNSName(senderAccount.address, {
         enabled: !!senderAccount.address && senderAccount.chainType === ChainType.SUI && senderAccount.isConnected,
     });
     const { data: evmEnsName } = useEnsName({

package/dist/hooks/useWallets.js

@@ -3,6 +3,7 @@ import { useInstalledWallets } from "@coin-voyage/crypto/hooks";
 import usePayContext from "../components/contexts/pay";
 import { walletConfigs } from "../lib/config/wallet";
 import { isInjectedConnector } from "../utils";
+import { getConnectorId } from "@coin-voyage/crypto/utils";
 export const useWallets = () => {
     const { paymentState } = usePayContext();
     const installedWallets = useInstalledWallets(paymentState.connectorChainType);
@@ -54,8 +55,8 @@ export const useWallets = () => {
         self.find((w) => w.id === "io.metamask" || w.id === "io.metamask.mobile")))
         // order by isInstalled injected connectors first
         .sort((a, b) => {
-        const AisInstalled = a.isInstalled && isInjectedConnector(a.connectors[0].connector.id);
-        const BisInstalled = b.isInstalled && isInjectedConnector(b.connectors[0].connector.id);
+        const AisInstalled = a.isInstalled && isInjectedConnector(getConnectorId(a.connectors[0].connector));
+        const BisInstalled = b.isInstalled && isInjectedConnector(getConnectorId(b.connectors[0].connector));
         if (AisInstalled && !BisInstalled)
             return -1;
         if (!AisInstalled && BisInstalled)

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.4.5-beta.2",
+  "version": "2.4.5-beta.4",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -57,11 +57,11 @@
     "react-transition-state": "^1.1.4",
     "react-use-measure": "^2.1.1",
     "@stripe/stripe-js": "8.10.0",
-    "@stripe/crypto": "0.0.4",
+    "@stripe/crypto": "1.0.2",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/shared": "2.4.5-beta.0",
-    "@coin-voyage/crypto": "2.4.4"
+    "@coin-voyage/crypto": "2.4.5-beta.1",
+    "@coin-voyage/shared": "2.4.5-beta.0"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",
@@ -70,8 +70,8 @@
     "typescript-plugin-styled-components": "^3.0.0"
   },
   "peerDependencies": {
-    "@bigmi/react": "^0.6.1",
-    "@mysten/dapp-kit": "^0.19.8",
+    "@bigmi/react": "^0.8.0",
+    "@mysten/dapp-kit-react": "^2.0.3",
     "@solana/wallet-adapter-react": "^0.15.39",
     "@tanstack/react-query": "^5.90.6",
     "react": "^18 || ^19",