@crossmint/client-sdk-react-ui 1.7.1 → 1.9.1

package/src/hooks/useCrossmintCheckout.tsx

@@ -0,0 +1,54 @@
+import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+import type { embeddedCheckoutV3IncomingEvents } from "@crossmint/client-sdk-base";
+import type { z } from "zod";
+import { useCrossmint } from "./useCrossmint";
+import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
+
+export interface CrossmintCheckoutContext {
+    order?: any;
+    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 { crossmint } = useCrossmint();
+    const apiClient = createCrossmintApiClient(crossmint);
+
+    useEffect(() => {
+        const listener = (event: MessageEvent) => {
+            if (event.origin !== new URL(apiClient.baseUrl).origin) {
+                return;
+            }
+            if (event.data.event !== "order:updated") {
+                return;
+            }
+            const { order, orderClientSecret } = event.data.data as z.infer<
+                (typeof embeddedCheckoutV3IncomingEvents)["order:updated"]
+            >;
+            setOrder(order);
+            setOrderClientSecret(orderClientSecret);
+        };
+        window.addEventListener("message", listener);
+        return () => {
+            window.removeEventListener("message", listener);
+        };
+    }, [order]);
+
+    return (
+        <CrossmintCheckoutContext.Provider value={{ order, orderClientSecret }}>
+            {children}
+        </CrossmintCheckoutContext.Provider>
+    );
+}
+
+export function useCrossmintCheckout() {
+    const context = useContext(CrossmintCheckoutContext);
+    if (!context) {
+        throw new Error("useCrossmintCheckout must be used within a CrossmintCheckoutProvider");
+    }
+    return context;
+}

package/src/hooks/useOAuthWindowListener.ts

@@ -0,0 +1,87 @@
+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";
+
+export const useOAuthWindowListener = (
+    provider: OAuthProvider,
+    options: {
+        apiKey: string;
+        baseUrl: string;
+        fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterialWithUser>;
+    }
+) => {
+    const { oauthUrlMap } = useAuthForm();
+    const [isLoading, setIsLoading] = useState(false);
+    const childRef = useRef<ChildWindow<IncomingEvents, OutgoingEvents> | null>(null);
+
+    useEffect(() => {
+        if (childRef.current == null) {
+            childRef.current = new ChildWindow<IncomingEvents, OutgoingEvents>(window.opener || window.parent, "*", {
+                incomingEvents,
+                outgoingEvents,
+            });
+        }
+
+        return () => {
+            if (childRef.current != null) {
+                childRef.current.off("authMaterialFromPopupCallback");
+            }
+        };
+    }, []);
+
+    const createPopupAndSetupListeners = async () => {
+        if (childRef.current == null) {
+            throw new Error("Child window not initialized");
+        }
+        setIsLoading(true);
+        const popup = await PopupWindow.init(oauthUrlMap[provider], {
+            awaitToLoad: false,
+            crossOrigin: true,
+            width: 400,
+            height: 700,
+        });
+
+        const handleAuthMaterial = async (data: { oneTimeSecret: string }) => {
+            await options.fetchAuthMaterial(data.oneTimeSecret);
+            childRef.current?.off("authMaterialFromPopupCallback");
+            popup.window.close();
+            setIsLoading(false);
+        };
+
+        childRef.current.on("authMaterialFromPopupCallback", handleAuthMaterial);
+
+        // Add a check for manual window closure
+        // Ideally we should find a more explicit way of doing this, but I think this is fine for now.
+        const checkWindowClosure = setInterval(() => {
+            if (popup.window.closed) {
+                clearInterval(checkWindowClosure);
+                setIsLoading(false);
+                childRef.current?.off("authMaterialFromPopupCallback");
+            }
+        }, 2500); // Check every 2.5 seconds
+    };
+
+    return {
+        createPopupAndSetupListeners,
+        isLoading,
+    };
+};
+
+const incomingEvents = {
+    authMaterialFromPopupCallback: z.object({ oneTimeSecret: z.string() }),
+};
+
+const outgoingEvents = {
+    authMaterialFromAuthFrame: z.object({ oneTimeSecret: z.string() }),
+};
+
+type IncomingEvents = {
+    authMaterialFromPopupCallback: typeof incomingEvents.authMaterialFromPopupCallback;
+};
+
+type OutgoingEvents = {
+    authMaterialFromAuthFrame: typeof outgoingEvents.authMaterialFromAuthFrame;
+};

package/src/hooks/useRefreshToken.test.ts

@@ -1,11 +1,12 @@
 import { act, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import type { AuthMaterialWithUser } from "@crossmint/common-sdk-auth";
 import { type CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth";
 import { queueTask } from "@crossmint/client-sdk-base";
 
 import * as authCookies from "../utils/authCookies";
-import { type AuthMaterial, useRefreshToken } from "./useRefreshToken";
+import { useRefreshToken } from "./useRefreshToken";
 
 vi.mock("@crossmint/client-sdk-auth", () => ({
     CrossmintAuthService: vi.fn(),
@@ -17,9 +18,13 @@ vi.mock("../utils/authCookies", () => ({
     REFRESH_TOKEN_PREFIX: "crossmint-refresh-token",
 }));
 
-vi.mock("@crossmint/client-sdk-base", () => ({
-    queueTask: vi.fn(),
-}));
+vi.mock("@crossmint/client-sdk-base", async () => {
+    const actual = await vi.importActual("@crossmint/client-sdk-base");
+    return {
+        ...actual,
+        queueTask: vi.fn(),
+    };
+});
 
 describe("useRefreshToken", () => {
     const mockCrossmintAuthService = {
@@ -59,12 +64,16 @@ describe("useRefreshToken", () => {
 
     it("should refresh token if refresh token is present", async () => {
         const mockRefreshToken = "mock-refresh-token";
-        const mockAuthMaterial: AuthMaterial = {
-            jwtToken: "mock-jwt-token",
+        const mockAuthMaterial: AuthMaterialWithUser = {
+            jwt: "mock-jwt-token",
             refreshToken: {
                 secret: "mock-secret",
                 expiresAt: "2023-04-01T00:00:00Z",
             },
+            user: {
+                id: "123",
+                email: "test@test.com",
+            },
         };
 
         vi.mocked(authCookies.getCookie).mockReturnValue(mockRefreshToken);
@@ -89,12 +98,16 @@ describe("useRefreshToken", () => {
 
     it("should schedule next refresh before token expiration", async () => {
         const mockRefreshToken = "mock-refresh-token";
-        const mockAuthMaterial: AuthMaterial = {
-            jwtToken: "mock-jwt-token",
+        const mockAuthMaterial: AuthMaterialWithUser = {
+            jwt: "mock-jwt-token",
             refreshToken: {
                 secret: "mock-secret",
                 expiresAt: "2023-04-01T00:00:00Z",
             },
+            user: {
+                id: "123",
+                email: "test@test.com",
+            },
         };
 
         vi.mocked(authCookies.getCookie).mockReturnValue(mockRefreshToken);

package/src/hooks/useRefreshToken.ts

@@ -1,18 +1,19 @@
 import { useCallback, useEffect, useRef } from "react";
 
-import type { AuthMaterial } from "@crossmint/common-sdk-auth";
+import type { AuthMaterialWithUser } from "@crossmint/common-sdk-auth";
 import type { CrossmintAuthService } from "@crossmint/client-sdk-auth";
 import { getJWTExpiration } from "@crossmint/client-sdk-auth";
 import { queueTask, type CancellableTask } from "@crossmint/client-sdk-base";
+import { REFRESH_TOKEN_PREFIX } from "@crossmint/common-sdk-auth";
 
-import { REFRESH_TOKEN_PREFIX, getCookie } from "../utils/authCookies";
+import { getCookie } from "../utils/authCookies";
 
 // 2 minutes before jwt expiration
 const TIME_BEFORE_EXPIRING_JWT_IN_SECONDS = 120;
 
 type UseAuthTokenRefreshProps = {
     crossmintAuthService: CrossmintAuthService;
-    setAuthMaterial: (authMaterial: AuthMaterial) => void;
+    setAuthMaterial: (authMaterial: AuthMaterialWithUser) => void;
     logout: () => void;
 };
 
@@ -34,7 +35,7 @@ export function useRefreshToken({ crossmintAuthService, setAuthMaterial, logout
                 try {
                     const result = await crossmintAuthService.refreshAuthMaterial(refreshToken);
                     setAuthMaterial(result);
-                    const jwtExpiration = getJWTExpiration(result.jwtToken);
+                    const jwtExpiration = getJWTExpiration(result.jwt);
 
                     if (jwtExpiration == null) {
                         throw new Error("Invalid JWT");

package/src/icons/alert.tsx

@@ -0,0 +1,19 @@
+export function AlertIcon({ customColor = "#f44336" }: { customColor?: string }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke={customColor}
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" x2="12" y1="8" y2="12" />
+            <line x1="12" x2="12.01" y1="16" y2="16" />
+        </svg>
+    );
+}

package/src/icons/discord.tsx

@@ -0,0 +1,18 @@
+export function DiscordIcon({ className }: { className?: string }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            x="0px"
+            y="0px"
+            width="100"
+            height="100"
+            viewBox="0 0 48 48"
+            className={className}
+        >
+            <path
+                fill="#8c9eff"
+                d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"
+            ></path>
+        </svg>
+    );
+}

package/src/icons/emailOTP.tsx

@@ -0,0 +1,147 @@
+export function EmailOtpIcon({
+    customAccentColor = "#04AA6D",
+    customButtonBackgroundColor = "#F2F3F7",
+    customBackgroundColor = "#ffffff",
+}: { customAccentColor?: string; customButtonBackgroundColor?: string; customBackgroundColor?: string }) {
+    return (
+        <svg width="136" height="113" viewBox="0 0 136 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <mask id="mask0_944_1329" maskUnits="userSpaceOnUse" x="8" y="8" width="97" height="97">
+                <path
+                    d="M104.598 56.2539C104.598 82.7636 83.1073 104.254 56.5977 104.254C30.088 104.254 8.59766 82.7636 8.59766 56.2539C8.59766 29.7442 30.088 8.25391 56.5977 8.25391C83.1073 8.25391 104.598 29.7442 104.598 56.2539Z"
+                    fill="#D9D9D9"
+                />
+            </mask>
+            <g mask="url(#mask0_944_1329)">
+                <circle cx="56.5977" cy="56.2539" r="48" fill={customButtonBackgroundColor} />
+                <g filter="url(#filter0_d_944_1329)">
+                    <mask id="mask1_944_1329" maskUnits="userSpaceOnUse" x="29" y="37" width="55" height="37">
+                        <rect x="29.2957" y="37.5449" width="54.604" height="35.8658" rx="3.212" fill="#52E0B5" />
+                    </mask>
+                    <g mask="url(#mask1_944_1329)">
+                        <rect
+                            x="29.2957"
+                            y="34.8662"
+                            width="54.604"
+                            height="38.544"
+                            rx="3.212"
+                            fill={customBackgroundColor}
+                        />
+                        <mask id="mask2_944_1329" maskUnits="userSpaceOnUse" x="29" y="51" width="55" height="41">
+                            <path
+                                d="M31.8833 74.2272C29.1168 72.267 29.1866 68.1383 32.0178 66.2728L53.9469 51.8234C55.5553 50.7636 57.6403 50.7636 59.2487 51.8234L81.1779 66.2728C84.0091 68.1383 84.0789 72.267 81.3124 74.2272L56.5978 91.7381L31.8833 74.2272Z"
+                                fill="#52E0B5"
+                            />
+                        </mask>
+                        <g mask="url(#mask2_944_1329)">
+                            <path
+                                d="M32.0675 73.9008C29.5307 72.1034 29.5947 68.3175 32.1909 66.6068L54.12 52.1574C55.5949 51.1856 57.5068 51.1856 58.9817 52.1574L80.9108 66.6068C83.507 68.3175 83.571 72.1034 81.0341 73.9008L56.5508 91.2479L32.0675 73.9008Z"
+                                stroke="#D0D5DD"
+                                strokeWidth="0.8"
+                            />
+                        </g>
+                        <path
+                            d="M26.9443 36.6072C23.1618 33.6476 22.8212 28.0457 26.2172 24.6497L50.9406 -0.073638C54.0648 -3.19783 59.1301 -3.19783 62.2543 -0.0736384L86.9776 24.6497C90.3737 28.0457 90.033 33.6476 86.2506 36.6072L61.5272 55.9514C58.6312 58.2173 54.5636 58.2173 51.6677 55.9514L26.9443 36.6072Z"
+                            fill={customBackgroundColor}
+                        />
+                        <path
+                            d="M27.1908 36.2921C23.5974 33.4806 23.2738 28.1588 26.5001 24.9326L51.2234 0.209205C54.1914 -2.75878 59.0035 -2.75878 61.9714 0.209205L86.6948 24.9326C89.921 28.1588 89.5974 33.4806 86.0041 36.2921L61.2807 55.6364C58.5296 57.789 54.6653 57.789 51.9142 55.6364L27.1908 36.2921Z"
+                            stroke="#67797F"
+                            strokeOpacity="0.45"
+                            strokeWidth="0.8"
+                        />
+                    </g>
+                </g>
+            </g>
+            <g filter="url(#filter1_d_944_1329)">
+                <path
+                    d="M106.88 68.5039H82.8799C74.5956 68.5039 67.8799 75.2196 67.8799 83.5039C67.8799 91.7882 74.5956 98.5039 82.8799 98.5039H106.88C115.164 98.5039 121.88 91.7882 121.88 83.5039C121.88 75.2196 115.164 68.5039 106.88 68.5039Z"
+                    fill={customBackgroundColor}
+                />
+            </g>
+            <g clipPath="url(#clip0_944_1329)">
+                <mask id="mask3_944_1329" maskUnits="userSpaceOnUse" x="70" y="71" width="49" height="25">
+                    <path d="M118.88 71.5039H70.8799V95.5039H118.88V71.5039Z" fill="white" />
+                </mask>
+                <g mask="url(#mask3_944_1329)">
+                    <path d="M118.88 71.5039H70.8799V95.5039H118.88V71.5039Z" fill="url(#paint0_linear_944_1329)" />
+                    <path d="M118.88 71.5039H70.8799V95.5039H118.88V71.5039Z" fill={customAccentColor} />
+                </g>
+                <path
+                    d="M80.5866 87.7014L80.7337 85.1127L78.5604 86.5381L77.7805 85.183L80.1009 84.0196L77.7805 82.8563L78.5604 81.5012L80.7337 82.9266L80.5866 80.3378H82.1399L81.9993 82.9266L84.1726 81.5012L84.9524 82.8563L82.6257 84.0196L84.9524 85.183L84.1726 86.5381L81.9993 85.1127L82.1399 87.7014H80.5866ZM90.0001 87.7014L90.1471 85.1127L87.9738 86.5381L87.194 85.183L89.5143 84.0196L87.194 82.8563L87.9738 81.5012L90.1471 82.9266L90.0001 80.3378H91.5534L91.4127 82.9266L93.586 81.5012L94.3659 82.8563L92.0391 84.0196L94.3659 85.183L93.586 86.5381L91.4127 85.1127L91.5534 87.7014H90.0001ZM99.4135 87.7014L99.5605 85.1127L97.3872 86.5381L96.6074 85.183L98.9277 84.0196L96.6074 82.8563L97.3872 81.5012L99.5605 82.9266L99.4135 80.3378H100.967L100.826 82.9266L102.999 81.5012L103.779 82.8563L101.453 84.0196L103.779 85.183L102.999 86.5381L100.826 85.1127L100.967 87.7014H99.4135ZM108.827 87.7014L108.974 85.1127L106.801 86.5381L106.021 85.183L108.341 84.0196L106.021 82.8563L106.801 81.5012L108.974 82.9266L108.827 80.3378H110.38L110.24 82.9266L112.413 81.5012L113.193 82.8563L110.866 84.0196L113.193 85.183L112.413 86.5381L110.24 85.1127L110.38 87.7014H108.827Z"
+                    fill={customBackgroundColor}
+                />
+            </g>
+            <defs>
+                <filter
+                    id="filter0_d_944_1329"
+                    x="11.6957"
+                    y="28.7449"
+                    width="89.804"
+                    height="71.0657"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix
+                        in="SourceAlpha"
+                        type="matrix"
+                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                        result="hardAlpha"
+                    />
+                    <feOffset dy="8.8" />
+                    <feGaussianBlur stdDeviation="8.8" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix
+                        type="matrix"
+                        values="0 0 0 0 0.0370486 0 0 0 0 0.087038 0 0 0 0 0.0916667 0 0 0 0.16 0"
+                    />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_944_1329" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_944_1329" result="shape" />
+                </filter>
+                <filter
+                    id="filter1_d_944_1329"
+                    x="53.8799"
+                    y="54.5039"
+                    width="82"
+                    height="58"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix
+                        in="SourceAlpha"
+                        type="matrix"
+                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                        result="hardAlpha"
+                    />
+                    <feOffset />
+                    <feGaussianBlur stdDeviation="7" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix
+                        type="matrix"
+                        values="0 0 0 0 0.0362847 0 0 0 0 0.0869733 0 0 0 0 0.0916667 0 0 0 0.12 0"
+                    />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_944_1329" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_944_1329" result="shape" />
+                </filter>
+                <linearGradient
+                    id="paint0_linear_944_1329"
+                    x1="103.915"
+                    y1="95.5039"
+                    x2="97.9027"
+                    y2="68.179"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stopColor="#2E996C" />
+                    <stop offset="1" stopColor="#D0F2E5" />
+                </linearGradient>
+                <clipPath id="clip0_944_1329">
+                    <path
+                        d="M70.8799 83.5039C70.8799 76.8765 76.2525 71.5039 82.8799 71.5039H106.88C113.507 71.5039 118.88 76.8765 118.88 83.5039C118.88 90.1313 113.507 95.5039 106.88 95.5039H82.8799C76.2525 95.5039 70.8799 90.1313 70.8799 83.5039Z"
+                        fill={customBackgroundColor}
+                    />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}

package/src/icons/farcaster.tsx

@@ -0,0 +1,26 @@
+export const FarcasterIcon = ({ className }: { className?: string }) => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 1000 1000"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+        >
+            <rect width="1000" height="1000" fill="#855DCD" />
+            <path
+                d="M257.778 155.556H742.222V844.444H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.444H257.778V155.556Z"
+                fill="white"
+            />
+            <path
+                d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.444H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z"
+                fill="white"
+            />
+            <path
+                d="M675.555 746.667C663.282 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.444H875.555V817.778C875.555 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.555Z"
+                fill="white"
+            />
+        </svg>
+    );
+};

package/src/icons/google.tsx

@@ -0,0 +1,30 @@
+export function GoogleIcon({ className }: { className?: string }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            x="0px"
+            y="0px"
+            width="100"
+            height="100"
+            viewBox="0 0 48 48"
+            className={className}
+        >
+            <path
+                fill="#fbc02d"
+                d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
+            ></path>
+            <path
+                fill="#e53935"
+                d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
+            ></path>
+            <path
+                fill="#4caf50"
+                d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
+            ></path>
+            <path
+                fill="#1565c0"
+                d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
+            ></path>
+        </svg>
+    );
+}

package/src/icons/leftArrow.tsx

@@ -0,0 +1,20 @@
+export function LeftArrowIcon({ className, style }: { className?: string; style?: React.CSSProperties }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={className}
+            style={style}
+        >
+            <path d="m12 19-7-7 7-7" />
+            <path d="M19 12H5" />
+        </svg>
+    );
+}

package/src/icons/poweredByLeaf.tsx

@@ -7,8 +7,8 @@ export const PoweredByLeaf = ({ color, size = "16" }: { color: string; size?: st
                 maskUnits="userSpaceOnUse"
                 x="0"
                 y="0"
-                width={size}
-                height={size}
+                width="16"
+                height="16"
             >
                 <mask id="path-1-inside-1_794_7000" fill="white">
                     <path

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -1,4 +1,5 @@
-import { deleteCookie, REFRESH_TOKEN_PREFIX, SESSION_PREFIX } from "@/utils/authCookies";
+import { deleteCookie } from "@/utils/authCookies";
+import { SESSION_PREFIX, REFRESH_TOKEN_PREFIX } from "@crossmint/common-sdk-auth";
 import { fireEvent, render } from "@testing-library/react";
 import { type ReactNode, act } from "react";
 import { beforeEach, describe, expect, vi } from "vitest";
@@ -39,7 +40,7 @@ vi.mock("@crossmint/client-sdk-auth", async () => {
         getJWTExpiration: vi.fn(),
         CrossmintAuthService: vi.fn().mockImplementation(() => ({
             refreshAuthMaterial: vi.fn().mockResolvedValue({
-                jwtToken: "new-mock-jwt",
+                jwt: "new-mock-jwt",
                 refreshToken: {
                     secret: "new-mock-refresh-token",
                     expiresAt: new Date(Date.now() + 1000 * 60 * 60).toISOString(),
@@ -123,7 +124,7 @@ describe("CrossmintAuthProvider", () => {
 
         mockCrossmintAuthService = {
             refreshAuthMaterial: vi.fn().mockResolvedValue({
-                jwtToken: "new-mock-jwt",
+                jwt: "new-mock-jwt",
                 refreshToken: {
                     secret: "new-mock-refresh-token",
                     expiresAt: new Date(Date.now() + 1000 * 60 * 60).toISOString(),