@crossmint/client-sdk-react-ui 1.9.2 → 1.10.0

package/src/components/auth/methods/web3/Web3ConnectButton.tsx

@@ -0,0 +1,62 @@
+import type { UIConfig } from "@crossmint/common-sdk-base";
+import { PoweredByCrossmint } from "@/components/common/PoweredByCrossmint";
+import { classNames } from "@/utils/classNames";
+
+export function Web3ConnectButton({
+    icon,
+    appearance,
+    isLoading,
+    onConnectClick,
+    headingText,
+    buttonText,
+}: {
+    icon: string;
+    appearance?: UIConfig;
+    isLoading: boolean;
+    onConnectClick: () => void;
+    headingText: string;
+    buttonText: string;
+}) {
+    return (
+        <>
+            <div className="flex flex-col items-center text-center mt-8 mb-4 gap-2">
+                <img src={icon} alt={"metamask"} className="h-[74px] w-[74px]" />
+                <h3
+                    className="text-lg font-semibold text-cm-text-primary"
+                    style={{ color: appearance?.colors?.textPrimary }}
+                >
+                    {headingText}
+                </h3>
+                <p
+                    className="text-base font-normal text-cm-text-primary"
+                    style={{ color: appearance?.colors?.textPrimary }}
+                >
+                    Don’t see your wallet? Check your other browser windows.
+                </p>
+            </div>
+
+            <button
+                className={classNames(
+                    "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+                    "transition-colors duration-200 ease-in-out",
+                    "hover:bg-cm-hover focus:bg-cm-hover outline-none",
+                    isLoading ? "cursor-not-allowed bg-cm-muted-primary" : ""
+                )}
+                style={{
+                    borderRadius: appearance?.borderRadius,
+                    borderColor: appearance?.colors?.border,
+                    backgroundColor: appearance?.colors?.buttonBackground,
+                }}
+                onClick={isLoading ? undefined : onConnectClick}
+            >
+                <span className="font-medium" style={{ color: appearance?.colors?.textPrimary }}>
+                    {buttonText}
+                </span>
+            </button>
+
+            <div className="flex justify-center pt-4">
+                <PoweredByCrossmint color={appearance?.colors?.textSecondary} />
+            </div>
+        </>
+    );
+}

package/src/components/auth/methods/web3/Web3Connectors.tsx

@@ -0,0 +1,91 @@
+import { useAuthForm } from "@/providers/auth/AuthFormProvider";
+import { AuthFormBackButton } from "../../AuthFormBackButton";
+import { Web3ProviderButton } from "./Web3ProviderButton";
+import { metamaskIcon, walletConnectIcon } from "@/icons/base64Icons";
+import { Web3AuthWrapper } from "./Web3AuthWrapper";
+import { useAccount, useDisconnect } from "wagmi";
+
+export function Web3Connectors() {
+    const { appearance, step, setStep } = useAuthForm();
+    const { isConnected } = useAccount();
+    const { disconnect } = useDisconnect();
+
+    if (step === "web3") {
+        return (
+            <>
+                <AuthFormBackButton
+                    onClick={() => setStep("initial")}
+                    iconColor={appearance?.colors?.textPrimary}
+                    ringColor={appearance?.colors?.accent}
+                />
+                <div className="flex flex-col items-center gap-2">
+                    <div className="text-center mb-6">
+                        <h3
+                            className="text-lg font-semibold text-cm-text-primary"
+                            style={{ color: appearance?.colors?.textPrimary }}
+                        >
+                            Connect wallet
+                        </h3>
+                    </div>
+                    <div className="flex flex-col gap-[10px] w-full">
+                        <Web3ProviderButton
+                            title="Metamask"
+                            appearance={appearance}
+                            img={metamaskIcon}
+                            onClick={() => {
+                                if (isConnected) {
+                                    disconnect();
+                                }
+                                // wait for all disconnect state to be cleared before proceeding to the next step
+                                setTimeout(() => {
+                                    setStep("web3/metamask");
+                                }, 200);
+                            }}
+                        />
+                        <Web3ProviderButton
+                            title="WalletConnect"
+                            appearance={appearance}
+                            img={walletConnectIcon}
+                            onClick={() => {
+                                if (isConnected) {
+                                    disconnect();
+                                }
+                                setTimeout(() => {
+                                    setStep("web3/walletconnect");
+                                }, 200);
+                            }}
+                        />
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    if (step === "web3/metamask") {
+        return (
+            <>
+                <AuthFormBackButton
+                    onClick={() => setStep("web3")}
+                    iconColor={appearance?.colors?.textPrimary}
+                    ringColor={appearance?.colors?.accent}
+                />
+                <Web3AuthWrapper providerType="metaMaskSDK" flag="isMetaMask" icon={metamaskIcon} />
+            </>
+        );
+    }
+
+    if (step === "web3/walletconnect") {
+        return (
+            <>
+                <AuthFormBackButton
+                    onClick={() => setStep("web3")}
+                    iconColor={appearance?.colors?.textPrimary}
+                    ringColor={appearance?.colors?.accent}
+                />
+                <Web3AuthWrapper providerType="walletConnect" icon={walletConnectIcon} />
+            </>
+        );
+    }
+
+    return null;
+}

package/src/components/auth/methods/web3/Web3ProviderButton.tsx

@@ -0,0 +1,38 @@
+import type { UIConfig } from "@crossmint/common-sdk-base";
+import type React from "react";
+import { classNames } from "../../../../utils/classNames";
+
+export function Web3ProviderButton({
+    title,
+    appearance,
+    img,
+    ...props
+}: {
+    title: string;
+    appearance?: UIConfig;
+    img: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+    return (
+        <button
+            className={classNames(
+                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+                "transition-colors duration-200 ease-in-out",
+                "hover:bg-cm-hover focus:bg-cm-hover outline-none"
+            )}
+            style={{
+                borderRadius: appearance?.borderRadius,
+                borderColor: appearance?.colors?.border,
+                backgroundColor: appearance?.colors?.buttonBackground,
+            }}
+            {...props}
+        >
+            <>
+                <img src={img} alt={title} className="h-[25px] w-[25px] absolute left-[18px]" />
+                <span className="font-medium" style={{ color: appearance?.colors?.textPrimary }}>
+                    {title}
+                </span>
+            </>
+            <span className="sr-only">Sign in with {title}</span>
+        </button>
+    );
+}

package/src/components/auth/methods/web3/Web3SignIn.tsx

@@ -0,0 +1,41 @@
+import { ChevronRightIcon } from "@/icons/chevronRight";
+import { WalletIcon } from "@/icons/wallet";
+import { useAuthForm } from "@/providers/auth/AuthFormProvider";
+import { classNames } from "@/utils/classNames";
+
+export function Web3SignIn() {
+    const { step, appearance, setStep } = useAuthForm();
+
+    if (step !== "initial") {
+        return null;
+    }
+
+    return (
+        <button
+            className={classNames(
+                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+                "transition-colors duration-200 ease-in-out",
+                "hover:bg-cm-hover focus:bg-cm-hover outline-none"
+            )}
+            style={{
+                borderRadius: appearance?.borderRadius,
+                borderColor: appearance?.colors?.border,
+                backgroundColor: appearance?.colors?.buttonBackground,
+            }}
+            onClick={() => setStep("web3")}
+        >
+            <WalletIcon
+                className="h-[21px] w-[21px] absolute left-[20px]"
+                style={{ color: appearance?.colors?.textPrimary }}
+            />
+            <span className="font-medium" style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}>
+                Continue with a wallet
+            </span>
+            <ChevronRightIcon
+                className="h-[21px] w-[21px] absolute right-[20px]"
+                style={{ color: appearance?.colors?.textSecondary }}
+            />
+            <span className="sr-only">Continue with a wallet</span>
+        </button>
+    );
+}

package/src/components/common/Dialog.tsx

@@ -9,21 +9,6 @@ const DialogTrigger = DialogPrimitive.Trigger;
 const DialogClose = DialogPrimitive.Close;
 const DialogPortal = DialogPrimitive.Portal;
 
-const DialogOverlay = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Overlay
-        ref={ref}
-        className={classNames(
-            "fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=closed]:animate-out data-[state=closed]:animate-fade-out data-[state=open]:animate-in data-[state=open]:animate-fade-in",
-            className
-        )}
-        {...props}
-    />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
 interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
     showCloseButton?: boolean;
     closeButtonColor?: string;
@@ -33,19 +18,20 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialo
 const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
     ({ className, children, showCloseButton = true, closeButtonColor, closeButtonRingColor, ...props }, ref) => (
         <DialogPortal>
-            <DialogOverlay />
+            {/* Because we're using modal={false}, the regular overlay is not shown. We need to add our own overlay */}
+            <div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm overflow-x-hidden" />
             <DialogPrimitive.Content
                 ref={ref}
                 className={classNames(
-                    "fixed z-50 p-6 pb-2 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
+                    "fixed z-50 p-6 pb-4 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
                     // Small viewport styles (bottom sheet)
                     "inset-x-0 bottom-0 w-full border-t rounded-t-xl",
                     "data-[state=closed]:animate-slide-out-to-bottom data-[state=open]:animate-slide-in-from-bottom",
                     // Regular viewport styles (centered modal)
-                    "xs:inset-auto !xs:p-10 xs:left-[50%] xs:top-[50%] xs:translate-x-[-50%] xs:translate-y-[-50%]",
-                    "xs:max-w-[448px] xs:rounded-xl",
-                    "xs:data-[state=closed]:animate-fade-out xs:data-[state=closed]:animate-zoom-out-95",
-                    "xs:data-[state=open]:animate-fade-in xs:data-[state=open]:animate-zoom-in-95",
+                    "min-[480px]:inset-auto !min-[480px]:p-10 !min-[480px]:pb-8 min-[480px]:left-[50%] min-[480px]:top-[50%] min-[480px]:translate-x-[-50%] min-[480px]:translate-y-[-52%]",
+                    "min-[480px]:max-w-[448px] min-[480px]:rounded-xl",
+                    "min-[480px]:data-[state=closed]:animate-fade-out min-[480px]:data-[state=closed]:animate-zoom-out-95",
+                    "min-[480px]:data-[state=open]:animate-fade-in min-[480px]:data-[state=open]:animate-zoom-in-95",
                     // Duration for animations
                     "data-[state=closed]:duration-300 data-[state=open]:duration-500",
                     className
@@ -57,14 +43,10 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
                     <DialogPrimitive.Close
                         className={classNames(
                             "absolute rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100",
-                            "focus:outline-none focus:ring-2 focus:ring-cm-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-text-primary",
-                            "right-4 top-4 !xs:right-6 !xs:top-6"
+                            "focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-text-primary",
+                            "right-4 top-4 !min-[480px]:right-6 !min-[480px]:top-6"
                         )}
-                        style={{
-                            color: closeButtonColor,
-                            // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                            "--tw-ring-color": closeButtonRingColor ?? "#1A73E8",
-                        }}
+                        style={{ color: closeButtonColor ?? "#00150D" }}
                     >
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -130,7 +112,6 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export {
     Dialog,
     DialogPortal,
-    DialogOverlay,
     DialogClose,
     DialogTrigger,
     DialogContent,

package/src/components/common/Divider.tsx

@@ -9,7 +9,7 @@ export function Divider({ appearance, text }: { appearance?: UIConfig; text?: st
     }
 
     return (
-        <div className="flex items-center justify-center w-full pt-1 pb-2">
+        <div className="flex items-center justify-center w-full pt-2 pb-3">
             <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
             {text != null ? (
                 <p

package/src/components/common/InputOTP.tsx

@@ -19,9 +19,14 @@ type CustomStyles = {
 // Create a context for customStyles
 const CustomStylesContext = createContext<CustomStyles | undefined>(undefined);
 
-const InputOTP = React.forwardRef<
-    React.ElementRef<typeof OTPInput>,
-    React.ComponentPropsWithoutRef<typeof OTPInput> & { customStyles?: CustomStyles }
+type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {
+    customStyles?: CustomStyles;
+};
+type InputOTPRef = React.ElementRef<typeof OTPInput>;
+
+const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<InputOTPRef>> = React.forwardRef<
+    InputOTPRef,
+    InputOTPProps
 >(({ className, containerClassName, customStyles, ...props }, ref) => (
     <CustomStylesContext.Provider value={customStyles}>
         <OTPInput
@@ -57,7 +62,7 @@ const InputOTPSlot = React.forwardRef<
         <div
             ref={ref}
             className={classNames(
-                "relative flex h-14 w-12 items-center justify-center border text-lg transition-all rounded-md text-cm-text-primary",
+                "relative flex h-14 w-12 items-center bg-cm-muted-primary justify-center border border-cm-border text-lg transition-all rounded-md text-cm-text-primary",
                 isActive && `z-10 ring-2 ring-offset-background`,
                 className
             )}

package/src/components/common/PoweredByCrossmint.tsx

@@ -1,17 +1,10 @@
 import { PoweredByLeaf } from "@/icons/poweredByLeaf";
 import { classNames } from "@/utils/classNames";
 
-export function PoweredByCrossmint({ color, className }: { color?: string; className?: string }) {
+export function PoweredByCrossmint({ color = "#A4AFB2", className }: { color?: string; className?: string }) {
     return (
-        <p
-            className={classNames("flex text-xs font-normal tracking-tight p-2 items-center", className)}
-            style={{ color: color || "#67797F" }}
-        >
-            Powered by
-            <span className="flex self-center pl-1 gap-1 items-center font-semibold">
-                <PoweredByLeaf color={color ?? "#67797F"} size={"12"} />
-                <span>crossmint</span>
-            </span>
+        <p className={classNames("flex", className)}>
+            <PoweredByLeaf color={color} />
         </p>
     );
 }

package/src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx

@@ -15,7 +15,9 @@ export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props
     const [height, setHeight] = useState(0);
 
     const { crossmint } = useCrossmint();
-    const apiClient = createCrossmintApiClient(crossmint);
+    const apiClient = createCrossmintApiClient(crossmint, {
+        usageOrigin: "client",
+    });
     const embedV3Service = crossmintEmbeddedCheckoutV3Service({ apiClient });
 
     const ref = useRef<HTMLIFrameElement>(null);

package/src/hooks/index.ts

@@ -2,4 +2,3 @@ export * from "./useCrossmint";
 export * from "./useCrossmintCheckout";
 export * from "./useWallet";
 export * from "./useAuth";
-export * from "./useRefreshToken";

package/src/hooks/useAuth.ts

@@ -1,8 +1,8 @@
 import { useContext } from "react";
 
-import { AuthContext } from "../providers";
+import { AuthContext, type AuthContextType } from "../providers";
 
-export function useAuth() {
+export function useAuth(): AuthContextType {
     const context = useContext(AuthContext);
     if (context === undefined) {
         throw new Error("useAuth must be used within an AuthProvider");

package/src/hooks/useCrossmint.test.tsx

@@ -18,9 +18,6 @@ class MockSDK {
     somethingThatUpdatesJWT(newJWT: string) {
         this.crossmint.jwt = newJWT;
     }
-    somethingThatUpdatesRefreshToken(newRefreshToken: string) {
-        this.crossmint.refreshToken = newRefreshToken;
-    }
 }
 
 function renderCrossmintProvider({ children }: { children: JSX.Element }) {
@@ -33,23 +30,20 @@ describe("CrossmintProvider", () => {
         vi.mocked(createCrossmint).mockImplementation(() => ({
             apiKey: MOCK_API_KEY,
             jwt: "",
-            refreshToken: "",
         }));
     });
 
-    it("provides initial JWT and refreshToken values", () => {
+    it("provides initial JWT value", () => {
         const TestComponent = () => {
             const { crossmint } = useCrossmint();
             return (
                 <div>
                     <div data-testid="jwt">{crossmint.jwt}</div>
-                    <div data-testid="refreshToken">{crossmint.refreshToken}</div>
                 </div>
             );
         };
         const { getByTestId } = renderCrossmintProvider({ children: <TestComponent /> });
         expect(getByTestId("jwt").textContent).toBe("");
-        expect(getByTestId("refreshToken").textContent).toBe("");
     });
 
     it("updates JWT using setJwt", () => {
@@ -67,54 +61,34 @@ describe("CrossmintProvider", () => {
         expect(getByTestId("jwt").textContent).toBe("new_jwt");
     });
 
-    it("updates refreshToken using setRefreshToken", () => {
-        const TestComponent = () => {
-            const { crossmint, setRefreshToken } = useCrossmint();
-            return (
-                <div>
-                    <div data-testid="refreshToken">{crossmint.refreshToken}</div>
-                    <button onClick={() => setRefreshToken("new_refresh_token")}>Update Refresh Token</button>
-                </div>
-            );
-        };
-        const { getByTestId, getByText } = renderCrossmintProvider({ children: <TestComponent /> });
-        fireEvent.click(getByText("Update Refresh Token"));
-        expect(getByTestId("refreshToken").textContent).toBe("new_refresh_token");
-    });
-
-    it("updates JWT and refreshToken using WalletSDK", () => {
+    it("updates JWT using WalletSDK", () => {
         const TestComponent = () => {
             const { crossmint } = useCrossmint();
             useEffect(() => {
                 const wallet = new MockSDK(crossmint);
                 wallet.somethingThatUpdatesJWT("sdk_jwt");
-                wallet.somethingThatUpdatesRefreshToken("sdk_refresh_token");
             }, []);
             return (
                 <div>
                     <div data-testid="jwt">{crossmint.jwt}</div>
-                    <div data-testid="refreshToken">{crossmint.refreshToken}</div>
                 </div>
             );
         };
         const { getByTestId } = renderCrossmintProvider({ children: <TestComponent /> });
         expect(getByTestId("jwt").textContent).toBe("sdk_jwt");
-        expect(getByTestId("refreshToken").textContent).toBe("sdk_refresh_token");
     });
 
-    it("triggers re-render on JWT and refreshToken change", () => {
+    it("triggers re-render on JWT change", () => {
         const renderCount = vi.fn();
         const TestComponent = () => {
-            const { crossmint, setJwt, setRefreshToken } = useCrossmint();
+            const { crossmint, setJwt } = useCrossmint();
             useEffect(() => {
                 renderCount();
             });
             return (
                 <div>
                     <div data-testid="jwt">{crossmint.jwt}</div>
-                    <div data-testid="refreshToken">{crossmint.refreshToken}</div>
                     <button onClick={() => setJwt("new_jwt")}>Update JWT</button>
-                    <button onClick={() => setRefreshToken("new_refresh_token")}>Update Refresh Token</button>
                 </div>
             );
         };
@@ -125,8 +99,5 @@ describe("CrossmintProvider", () => {
 
         fireEvent.click(getByText("Update JWT"));
         expect(renderCount).toHaveBeenCalledTimes(2);
-
-        fireEvent.click(getByText("Update Refresh Token"));
-        expect(renderCount).toHaveBeenCalledTimes(3);
     });
 });

package/src/hooks/useCrossmint.tsx

@@ -5,7 +5,6 @@ import { type Crossmint, createCrossmint } from "@crossmint/common-sdk-base";
 export interface CrossmintContext {
     crossmint: Crossmint;
     setJwt: (jwt: string | undefined) => void;
-    setRefreshToken: (refreshToken: string | undefined) => void;
 }
 
 const CrossmintContext = createContext<CrossmintContext | null>(null);
@@ -25,9 +24,6 @@ export function CrossmintProvider({
                 if (prop === "jwt" && target.jwt !== value) {
                     setVersion((v) => v + 1);
                 }
-                if (prop === "refreshToken" && target.refreshToken !== value) {
-                    setVersion((v) => v + 1);
-                }
                 return Reflect.set(target, prop, value);
             },
         })
@@ -39,21 +35,14 @@ export function CrossmintProvider({
         }
     }, []);
 
-    const setRefreshToken = useCallback((refreshToken: string | undefined) => {
-        if (refreshToken !== crossmintRef.current.refreshToken) {
-            crossmintRef.current.refreshToken = refreshToken;
-        }
-    }, []);
-
     const value = useMemo(
         () => ({
             get crossmint() {
                 return crossmintRef.current;
             },
             setJwt,
-            setRefreshToken,
         }),
-        [setJwt, setRefreshToken, version]
+        [setJwt, version]
     );
 
     return <CrossmintContext.Provider value={value}>{children}</CrossmintContext.Provider>;

package/src/hooks/useCrossmintAuth.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { AuthContext } from "../providers/CrossmintAuthProvider";
+
+export function useCrossmintAuth() {
+    const context = useContext(AuthContext);
+
+    if (!context) {
+        throw new Error("useCrossmintAuth must be used within a CrossmintAuthProvider");
+    }
+
+    return context;
+}

package/src/hooks/useCrossmintCheckout.tsx

@@ -1,22 +1,24 @@
 import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
-import type { embeddedCheckoutV3IncomingEvents } from "@crossmint/client-sdk-base";
+import type { embeddedCheckoutV3IncomingEvents, Order } from "@crossmint/client-sdk-base";
 import type { z } from "zod";
 import { useCrossmint } from "./useCrossmint";
 import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
 
 export interface CrossmintCheckoutContext {
-    order?: any;
+    order?: Order;
     orderClientSecret?: string;
 }
 
 const CrossmintCheckoutContext = createContext<CrossmintCheckoutContext | undefined>(undefined);
 
 export function CrossmintCheckoutProvider({ children }: { children: ReactNode }) {
-    const [order, setOrder] = useState<any>();
-    const [orderClientSecret, setOrderClientSecret] = useState<string>();
+    const [order, setOrder] = useState<Order | undefined>(undefined);
+    const [orderClientSecret, setOrderClientSecret] = useState<string | undefined>(undefined);
 
     const { crossmint } = useCrossmint();
-    const apiClient = createCrossmintApiClient(crossmint);
+    const apiClient = createCrossmintApiClient(crossmint, {
+        usageOrigin: "client",
+    });
 
     useEffect(() => {
         const listener = (event: MessageEvent) => {

package/src/hooks/useOAuthWindowListener.ts

@@ -1,18 +1,12 @@
 import type { OAuthProvider } from "@crossmint/common-sdk-auth";
 import { ChildWindow, PopupWindow } from "@crossmint/client-sdk-window";
-import type { AuthMaterialWithUser } from "@crossmint/common-sdk-auth";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
+import { useCrossmintAuth } from "./useCrossmintAuth";
 
-export const useOAuthWindowListener = (
-    provider: OAuthProvider,
-    options: {
-        apiKey: string;
-        baseUrl: string;
-        fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterialWithUser>;
-    }
-) => {
+export const useOAuthWindowListener = (provider: OAuthProvider) => {
+    const { crossmintAuth } = useCrossmintAuth();
     const { oauthUrlMap } = useAuthForm();
     const [isLoading, setIsLoading] = useState(false);
     const childRef = useRef<ChildWindow<IncomingEvents, OutgoingEvents> | null>(null);
@@ -45,7 +39,7 @@ export const useOAuthWindowListener = (
         });
 
         const handleAuthMaterial = async (data: { oneTimeSecret: string }) => {
-            await options.fetchAuthMaterial(data.oneTimeSecret);
+            await crossmintAuth?.handleRefreshAuthMaterial(data.oneTimeSecret);
             childRef.current?.off("authMaterialFromPopupCallback");
             popup.window.close();
             setIsLoading(false);