@crossmint/client-sdk-react-ui 1.9.3 → 1.10.1

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

@@ -0,0 +1,87 @@
+import { useState, useEffect } from "react";
+import { useAuthForm } from "@/providers/auth/AuthFormProvider";
+import { Web3ConnectButton } from "./Web3ConnectButton";
+import { useAccount, useChainId, useConnect, useSignMessage } from "wagmi";
+import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
+
+interface Web3AuthWrapperProps {
+    providerType: "metaMaskSDK" | "coinbaseWalletSDK" | "walletConnect";
+    flag?: "isMetaMask";
+    icon: string;
+}
+
+export function Web3AuthWrapper({ providerType, flag, icon }: Web3AuthWrapperProps) {
+    const { crossmintAuth } = useCrossmintAuth();
+    const { appearance } = useAuthForm();
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const chainId = useChainId();
+    const { address, status: accountStatus } = useAccount(); // hook is causing a hydration error when navigating back
+    const { signMessageAsync, status: signMessageStatus } = useSignMessage();
+    const { connect, connectors } = useConnect({
+        mutation: {
+            onError: () => setIsLoading(false),
+        },
+    });
+
+    // fallback to walletConnect if the extension is not installed
+    const isExtensionInstalled = window.ethereum?.[flag as keyof typeof window.ethereum] ?? false;
+    if (!isExtensionInstalled) {
+        providerType = "walletConnect";
+    }
+
+    const connector = connectors.find((c) => c.id === providerType);
+
+    useEffect(() => {
+        if (address != null) {
+            handleSignIn();
+        }
+    }, [address]);
+
+    const handleSignIn = async () => {
+        if (address == null) {
+            return;
+        }
+        setIsLoading(true);
+
+        try {
+            const res = await crossmintAuth?.signInWithSmartWallet(address);
+            const signature = await signMessageAsync({ message: res.challenge });
+            const authResponse = (await crossmintAuth?.authenticateSmartWallet(address, signature)) as {
+                oneTimeSecret: string;
+            };
+
+            const oneTimeSecret = authResponse.oneTimeSecret;
+            await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret);
+        } catch (error) {
+            console.error(`Error connecting to ${providerType}:`, error);
+            setError(`Error connecting to ${providerType}. Please try again or contact support.`);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const isLoadingOrPending =
+        isLoading ||
+        accountStatus === "connecting" ||
+        accountStatus === "reconnecting" ||
+        signMessageStatus === "pending";
+
+    return (
+        <Web3ConnectButton
+            icon={icon}
+            appearance={appearance}
+            headingText={signMessageStatus === "pending" ? "Sign to verify" : "Connect your wallet"}
+            buttonText={error != null && !isLoadingOrPending ? "Retry" : isLoadingOrPending ? "Connecting" : "Connect"}
+            isLoading={isLoadingOrPending}
+            onConnectClick={() => {
+                if (address != null) {
+                    handleSignIn();
+                } else if (connector) {
+                    connect({ connector, chainId });
+                }
+            }}
+        />
+    );
+}

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

@@ -1,5 +1,5 @@
 import { useCrossmint } from "@/hooks";
-import { useEffect, useRef, useState } from "react";
+import { lazy, useEffect, useRef, useState } from "react";
 
 import {
     type CrossmintEmbeddedCheckoutV3Props,
@@ -7,15 +7,23 @@ import {
     crossmintEmbeddedCheckoutV3Service,
 } from "@crossmint/client-sdk-base";
 
-import { CryptoWalletConnectionHandler } from "./crypto/CryptoWalletConnectionHandler";
 import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
 
+const CryptoWalletConnectionHandler = lazy(() =>
+    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+    import("./crypto/CryptoWalletConnectionHandler").then((mod) => ({
+        default: mod.CryptoWalletConnectionHandler,
+    }))
+);
+
 export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props) {
     const [iframeClient, setIframeClient] = useState<EmbeddedCheckoutV3IFrameEmitter | null>(null);
     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/components/embed/v3/crypto/utils/handleSendTransaction.ts

@@ -2,11 +2,6 @@ import type { Wallet } from "@dynamic-labs/sdk-react-core";
 
 import type { BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
 
-import { handleEvmTransaction } from "./handleEvmTransaction";
-
-import { isSolanaWallet } from "@dynamic-labs/solana";
-import { handleSolanaTransaction } from "./handleSolanaTransaction";
-import { isEthereumWallet } from "@dynamic-labs/ethereum";
 import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
 
 export async function handleSendTransaction(
@@ -20,12 +15,23 @@ export async function handleSendTransaction(
         serializedTransaction,
         iframeClient,
     };
+
+    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+    const { isSolanaWallet } = await import("@dynamic-labs/solana");
     if (isSolanaWallet(primaryWallet)) {
+        // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+        const { handleSolanaTransaction } = await import("./handleSolanaTransaction");
         return await handleSolanaTransaction({
             ...commonParams,
             primaryWallet,
         });
-    } else if (isEthereumWallet(primaryWallet)) {
+    }
+
+    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+    const { isEthereumWallet } = await import("@dynamic-labs/ethereum");
+    if (isEthereumWallet(primaryWallet)) {
+        // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+        const { handleEvmTransaction } = await import("./handleEvmTransaction");
         return await handleEvmTransaction({ ...commonParams, primaryWallet });
     }
 }

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);
     });
 });