@crossmint/client-sdk-react-ui 1.6.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-ui",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -31,11 +31,12 @@
     "tailwind-merge": "2.4.0",
     "tailwindcss": "3.4.10",
     "zod": "3.22.4",
-    "@crossmint/client-sdk-auth-core": "1.4.0",
+    "@crossmint/client-sdk-auth": "0.2.0",
     "@crossmint/client-sdk-base": "1.2.8",
     "@crossmint/client-sdk-smart-wallet": "0.1.19",
     "@crossmint/client-sdk-window": "0.0.10",
-    "@crossmint/common-sdk-base": "0.2.0"
+    "@crossmint/common-sdk-base": "0.2.0",
+    "@crossmint/common-sdk-auth": "0.2.0"
   },
   "devDependencies": {
     "@types/lodash.isequal": "4.5.6",

package/src/components/auth/AuthModal.tsx

@@ -4,10 +4,9 @@ import { z } from "zod";
 
 import { IFrameWindow } from "@crossmint/client-sdk-window";
 import type { UIConfig } from "@crossmint/common-sdk-base";
+import type { AuthMaterial } from "@crossmint/common-sdk-auth";
 
 import X from "../../icons/x";
-import { classNames } from "../../utils/classNames";
-import type { AuthMaterial } from "@/hooks/useRefreshToken";
 
 const authMaterialSchema = z.object({
     oneTimeSecret: z.string(),
@@ -117,14 +116,16 @@ export default function AuthModal({ setModalOpen, apiKey, fetchAuthMaterial, bas
                             src={iframeSrc}
                             onLoad={handleIframeLoaded}
                             title="Authentication Modal"
-                            className={classNames(
-                                "w-full h-[500px] border pt-12 pb-8",
-                                appearance?.colors?.border
-                                    ? `border-[${appearance.colors.border}]`
-                                    : "border-[#D0D5DD]",
-                                appearance?.borderRadius ? `rounded-[${appearance.borderRadius}]` : "rounded-2xl",
-                                appearance?.colors?.background ? `bg-[${appearance.colors.background}]` : "bg-white"
-                            )}
+                            style={{
+                                width: "100%",
+                                height: "500px",
+                                border: "1px solid",
+                                borderColor: appearance?.colors?.border ?? "#D0D5DD",
+                                borderRadius: appearance?.borderRadius ?? "1rem",
+                                backgroundColor: appearance?.colors?.background ?? "white",
+                                paddingTop: "3rem",
+                                paddingBottom: "2rem",
+                            }}
                         />
                     </div>
                 </Transition.Child>

package/src/components/auth/PasskeyPrompt.tsx

@@ -39,11 +39,19 @@ function PasskeyPromptCore({ title, content, primaryButton, secondaryAction, app
                 />
             </Transition.Child>
             <div
-                className={classNames(
-                    "flex flex-col items-center w-full max-w-[28rem] rounded-2xl shadow-sm z-30 border",
-                    appearance?.colors?.background != null ? `bg-[${appearance.colors.background}]` : "bg-white",
-                    appearance?.colors?.border != null ? `border-[${appearance.colors.border}]` : "border-[#D0D5DD]"
-                )}
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    width: "100%",
+                    maxWidth: "28rem",
+                    borderRadius: "1rem",
+                    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+                    zIndex: 30,
+                    border: "1px solid",
+                    backgroundColor: appearance?.colors?.background || "white",
+                    borderColor: appearance?.colors?.border || "#D0D5DD",
+                }}
                 onClick={(e) => e.stopPropagation()}
             >
                 <div className="pt-12 pb-10 px-8">
@@ -52,24 +60,22 @@ function PasskeyPromptCore({ title, content, primaryButton, secondaryAction, app
                     </div>
                     <div className="flex justify-center">
                         <p
-                            className={classNames(
-                                "text-lg font-bold",
-                                appearance?.colors?.textPrimary != null
-                                    ? `text-[${appearance.colors.textPrimary}]`
-                                    : "text-[#20343E]"
-                            )}
+                            style={{
+                                fontSize: "1.125rem",
+                                lineHeight: "1.75rem",
+                                fontWeight: "bold",
+                                color: appearance?.colors?.textPrimary || "#20343E",
+                            }}
                         >
                             {title}
                         </p>
                     </div>
                     <div className="mt-4 mb-9">
                         <div
-                            className={classNames(
-                                "font-normal",
-                                appearance?.colors?.textSecondary != null
-                                    ? `text-[${appearance.colors.textSecondary}]`
-                                    : "text-[#67797F]"
-                            )}
+                            style={{
+                                fontWeight: "normal",
+                                color: appearance?.colors?.textSecondary || "#67797F",
+                            }}
                         >
                             {content}
                         </div>
@@ -199,15 +205,16 @@ export function PasskeyPrompt({ state, appearance }: PasskeyPromptProps) {
                             href="https://docs.crossmint.com/wallets/smart-wallets/users/troubleshoot"
                             rel="noopener noreferrer"
                             target="_blank"
-                            className={classNames(
-                                "p-3.5 w-full text-center no-underline rounded-lg font-bold",
-                                appearance?.colors?.inputBackground != null
-                                    ? `bg-[${appearance.colors.inputBackground}]`
-                                    : "bg-[#F0F2F4]",
-                                appearance?.colors?.textSecondary != null
-                                    ? `text-[${appearance.colors.textSecondary}]`
-                                    : "text-[#00150D]"
-                            )}
+                            style={{
+                                padding: "0.875rem",
+                                width: "100%",
+                                textAlign: "center",
+                                textDecoration: "none",
+                                borderRadius: "0.5rem",
+                                fontWeight: "bold",
+                                backgroundColor: appearance?.colors?.inputBackground || "#F0F2F4",
+                                color: appearance?.colors?.textSecondary || "#00150D",
+                            }}
                         >
                             Troubleshoot
                         </a>

package/src/components/common/PoweredByCrossmint.tsx

@@ -1,13 +1,16 @@
 import { PoweredByLeaf } from "@/icons/poweredByLeaf";
-import { classNames } from "@/utils/classNames";
 
 export function PoweredByCrossmint({ color }: { color?: string }) {
     return (
         <p
-            className={classNames(
-                "flex text-xs font-normal -tracking-[0.2px] p-2",
-                color ? `text-[${color}]` : "text-[#67797F]"
-            )}
+            style={{
+                display: "flex",
+                fontSize: "0.75rem",
+                fontWeight: "400",
+                letterSpacing: "-0.2px",
+                padding: "0.5rem",
+                color: color || "#67797F",
+            }}
         >
             Powered by
             <span className="flex self-center pl-1 gap-1 items-center font-semibold">

package/src/hooks/useRefreshToken.test.ts

@@ -1,13 +1,13 @@
 import { act, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { type CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth-core/client";
+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";
 
-vi.mock("@crossmint/client-sdk-auth-core", () => ({
+vi.mock("@crossmint/client-sdk-auth", () => ({
     CrossmintAuthService: vi.fn(),
     getJWTExpiration: vi.fn(),
 }));

package/src/hooks/useRefreshToken.ts

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef } from "react";
 
-import type { CrossmintAuthService, SDKExternalUser } from "@crossmint/client-sdk-auth-core/client";
-import { getJWTExpiration } from "@crossmint/client-sdk-auth-core/client";
+import type { AuthMaterial } 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, getCookie } from "../utils/authCookies";
@@ -9,15 +10,6 @@ import { REFRESH_TOKEN_PREFIX, getCookie } from "../utils/authCookies";
 // 2 minutes before jwt expiration
 const TIME_BEFORE_EXPIRING_JWT_IN_SECONDS = 120;
 
-export type AuthMaterial = {
-    jwtToken: string;
-    refreshToken: {
-        secret: string;
-        expiresAt: string;
-    };
-    user: SDKExternalUser;
-};
-
 type UseAuthTokenRefreshProps = {
     crossmintAuthService: CrossmintAuthService;
     setAuthMaterial: (authMaterial: AuthMaterial) => void;

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -4,7 +4,7 @@ import { type ReactNode, act } from "react";
 import { beforeEach, describe, expect, vi } from "vitest";
 import { mock } from "vitest-mock-extended";
 
-import { CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth-core/client";
+import { CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth";
 import { type EVMSmartWallet, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
 import { createCrossmint } from "@crossmint/common-sdk-base";
 
@@ -32,8 +32,8 @@ vi.mock("@crossmint/common-sdk-base", async () => {
     };
 });
 
-vi.mock("@crossmint/client-sdk-auth-core/client", async () => {
-    const actual = await vi.importActual("@crossmint/client-sdk-auth-core/client");
+vi.mock("@crossmint/client-sdk-auth", async () => {
+    const actual = await vi.importActual("@crossmint/client-sdk-auth");
     return {
         ...actual,
         getJWTExpiration: vi.fn(),

package/src/providers/CrossmintAuthProvider.tsx

@@ -2,13 +2,14 @@ import { REFRESH_TOKEN_PREFIX, SESSION_PREFIX, deleteCookie, getCookie, setCooki
 import { type ReactNode, createContext, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
-import { CrossmintAuthService, type SDKExternalUser } from "@crossmint/client-sdk-auth-core/client";
+import { CrossmintAuthService } from "@crossmint/client-sdk-auth";
 import type { EVMSmartWalletChain } from "@crossmint/client-sdk-smart-wallet";
 import { type UIConfig, validateApiKeyAndGetCrossmintBaseUrl } from "@crossmint/common-sdk-base";
 
 import AuthModal from "../components/auth/AuthModal";
-import { type AuthMaterial, useCrossmint, useRefreshToken, useWallet } from "../hooks";
+import { useCrossmint, useRefreshToken, useWallet } from "../hooks";
 import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
+import type { AuthMaterial, SDKExternalUser } from "@crossmint/common-sdk-auth";
 
 export type CrossmintAuthWalletConfig = {
     defaultChain: EVMSmartWalletChain;