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

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

@@ -1 +1,6 @@
 export default function CardPayment(): import("react/jsx-runtime").JSX.Element;
+export declare const CryptoElements: ({ stripeOnramp, children }: {
+    stripeOnramp: any;
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useStripeOnramp: () => any;

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

@@ -1,9 +1,8 @@
 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 { 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";
@@ -66,29 +65,34 @@ 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 } = useStripeOnramp(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" ? "night" : "stripe",
+            variables: {
+                colorBackground: "var(--ck-body-background-secondary)",
+            },
+        };
     }, [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]);
+    // const handleSessionUpdate = useCallback(
+    //   (status: OnrampSessionStatus) => {
+    //     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 +100,46 @@ function StripeOnrampCheckout({ paymentData }) {
             }
         };
     }, []);
-    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] }));
+    // if (error) {
+    //   return (
+    //     <StatusCard
+    //       warning
+    //       title="Stripe unavailable"
+    //       body={error.message}
+    //       actionLabel="Try again"
+    //       onAction={() => {
+    //         void refetch()
+    //       }}
+    //     />
+    //   )
+    // }
+    return (_jsx(OnrampShell, { children: paymentData.client_secret ? (_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 = useStripeOnramp();
+    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("div", { ...props, ref: onrampElementRef });
+}
 function useCardPaymentData() {
     const { paymentState } = usePayContext();
     const { payOrder, payWithCard } = paymentState;
@@ -163,41 +169,44 @@ function useCardPaymentData() {
         data: paymentData ?? query.data,
     };
 }
-function useStripeOnramp(publishableKey) {
-    return useQuery({
-        queryKey: ["stripe-onramp", publishableKey],
-        enabled: Boolean(publishableKey),
-        staleTime: Infinity,
-        retry: false,
-        queryFn: async () => {
-            if (!publishableKey) {
-                throw new Error("Missing Stripe publishable key.");
-            }
-            const instance = await getStripeOnrampPromise(publishableKey);
-            if (!instance) {
-                throw new Error("Stripe Onramp is only available in the browser.");
+// 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(() => {
+        let isMounted = true;
+        Promise.resolve(stripeOnramp).then((onramp) => {
+            if (onramp && isMounted) {
+                setContext((ctx) => (ctx.onramp ? ctx : { onramp }));
             }
-            return instance;
-        },
-    });
-}
-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);
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, [stripeOnramp]);
+    return _jsx(CryptoElementsContext.Provider, { value: ctx, children: children });
+};
+// React hook to get StripeOnramp from context
+export const useStripeOnramp = () => {
+    const context = useContext(CryptoElementsContext);
+    return context?.onramp;
+};
+// React element to render Onramp UI
+const useOnrampSessionListener = (type, session, callback) => {
     useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref;
-}
+        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.3",
   "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",