@phantom/react-sdk 1.0.0-beta.25 → 1.0.0-beta.27

package/README.md

@@ -221,6 +221,165 @@ function Header() {
 - Uses theme styling for consistent appearance
 - Fully clickable in both states
 
+### ConnectBox Component
+
+An inline embedded component that displays the connection UI directly in your page layout (without a modal backdrop). Perfect for auth callback pages or when you want a more integrated connection experience. The component automatically handles all connection states including loading, error, and success during the auth callback flow.
+
+```tsx
+import { ConnectBox } from "@phantom/react-sdk";
+
+function AuthCallbackPage() {
+  return (
+    <div>
+      <h1>Connecting to Phantom...</h1>
+      <ConnectBox />
+    </div>
+  );
+}
+```
+
+**Props:**
+
+- `maxWidth?: string | number` - Maximum width of the box. Can be a string (e.g., `"500px"`) or number (e.g., `500`). Default: `"350px"`
+- `transparent?: boolean` - When `true`, removes background, border, and shadow for a transparent appearance. Default: `false`
+- `appIcon?: string` - URL to your app icon (optional, can also be set via `PhantomProvider`)
+- `appName?: string` - Your app name (optional, can also be set via `PhantomProvider`)
+
+**Usage Examples:**
+
+```tsx
+import { ConnectBox } from "@phantom/react-sdk";
+
+// Default usage
+<ConnectBox />
+
+// Custom width
+<ConnectBox maxWidth="500px" />
+
+// Transparent (no background/border)
+<ConnectBox transparent />
+
+// Custom width with transparent
+<ConnectBox maxWidth={600} transparent />
+```
+
+**Features:**
+
+- **Inline embedded**: Renders directly in page flow (not as a floating modal)
+- **Auto state management**: Automatically shows connection/login UI when disconnected, wallet info when connected
+- **Auth callback support**: Handles loading and error states during OAuth callback flows
+- **No close button**: Designed for embedded use cases where users shouldn't dismiss the UI
+- **Theme-aware**: Uses your configured theme for consistent styling
+- **Responsive**: Adapts to mobile and desktop layouts
+
+**Use Cases:**
+
+- Auth callback pages (e.g., `/auth/callback`) where users return from OAuth providers
+- Embedded wallet connection flows in your app's layout
+- Custom connection pages where you want full control over the page design
+
+### Handling Auth Callback Pages
+
+When using embedded authentication providers (Google, Apple, Phantom Login, etc.), users are redirected to your app's callback URL after authentication. The SDK automatically handles the callback and completes the connection. Here's how to build a callback page if you're not using `ConnectBox`:
+
+**Basic Auth Callback Page:**
+
+```tsx
+import { usePhantom, useConnect, useAccounts } from "@phantom/react-sdk";
+import { useNavigate } from "react-router-dom"; // or your router
+
+function AuthCallbackPage() {
+  const navigate = useNavigate();
+  const { isConnected } = usePhantom();
+  const { isConnecting, error: connectError } = useConnect();
+  const addresses = useAccounts();
+
+  const handleGoHome = () => {
+    navigate("/");
+  };
+
+  // Loading state - SDK is processing the callback
+  if (isConnecting) {
+    return (
+      <div>
+        <h1>Connecting to wallet...</h1>
+        <p>Please wait while we complete your authentication.</p>
+      </div>
+    );
+  }
+
+  // Success state - connection completed
+  if (isConnected && addresses && addresses.length > 0) {
+    return (
+      <div>
+        <h1>Authentication Successful</h1>
+        <p>You are now connected to your wallet.</p>
+        <div>
+          <h2>Addresses:</h2>
+          {addresses.map((addr, index) => (
+            <div key={index}>
+              <strong>{addr.addressType}:</strong> {addr.address}
+            </div>
+          ))}
+        </div>
+        <button onClick={handleGoHome}>Go to Main App</button>
+      </div>
+    );
+  }
+
+  // Error state - connection failed
+  if (connectError) {
+    return (
+      <div>
+        <h1>Authentication Failed</h1>
+        <p>{connectError.message || "An unknown error occurred during authentication."}</p>
+        <div>
+          <button onClick={handleGoHome}>Go to Main App</button>
+        </div>
+      </div>
+    );
+  }
+
+  // Default state (shouldn't normally reach here)
+  return (
+    <div>
+      <h1>Processing authentication...</h1>
+    </div>
+  );
+}
+```
+
+**Key Points:**
+
+- The SDK's `autoConnect()` automatically processes the callback URL parameters when the page loads
+- Use `useConnect()` to access `isConnecting` and `error` states during the callback flow
+- Use `usePhantom()` to check `isConnected` status
+- Use `useAccounts()` to get connected wallet addresses
+- The connection state will automatically update as the SDK processes the callback
+- You can monitor `connectError` to handle authentication failures
+
+**Router Setup:**
+
+Make sure your callback route is configured in your router:
+
+```tsx
+import { Routes, Route } from "react-router-dom";
+import { PhantomProvider } from "@phantom/react-sdk";
+
+function App() {
+  return (
+    <PhantomProvider config={config} theme={darkTheme}>
+      <Routes>
+        <Route path="/auth/callback" element={<AuthCallbackPage />} />
+        <Route path="/" element={<MainApp />} />
+      </Routes>
+    </PhantomProvider>
+  );
+}
+```
+
+**Note:** For a simpler implementation, consider using the `ConnectBox` component which handles all these states automatically.
+
 ## Theming
 
 Customize the modal appearance by passing a theme object to the `PhantomProvider`. The SDK includes two built-in themes: `darkTheme` (default) and `lightTheme`.

package/dist/index.d.ts

@@ -130,4 +130,12 @@ interface ConnectButtonProps {
 }
 declare function ConnectButton({ addressType, fullWidth }: ConnectButtonProps): react_jsx_runtime.JSX.Element;
 
-export { ConnectButton, ConnectButtonProps, ConnectOptions, PhantomDebugConfig, PhantomProvider, PhantomProviderProps, PhantomSDKConfig, UseDiscoveredWalletsResult, UseModalResult, useAccounts, useAutoConfirm, useConnect, useDisconnect, useDiscoveredWallets, useEthereum, useIsExtensionInstalled, useIsPhantomLoginAvailable, useModal, usePhantom, useSolana };
+interface ConnectBoxProps {
+    maxWidth?: string | number;
+    transparent?: boolean;
+    appIcon?: string;
+    appName?: string;
+}
+declare function ConnectBox({ maxWidth, transparent, appIcon, appName }: ConnectBoxProps): react_jsx_runtime.JSX.Element;
+
+export { ConnectBox, ConnectBoxProps, ConnectButton, ConnectButtonProps, ConnectOptions, PhantomDebugConfig, PhantomProvider, PhantomProviderProps, PhantomSDKConfig, UseDiscoveredWalletsResult, UseModalResult, useAccounts, useAutoConfirm, useConnect, useDisconnect, useDiscoveredWallets, useEthereum, useIsExtensionInstalled, useIsPhantomLoginAvailable, useModal, usePhantom, useSolana };

package/dist/index.js

@@ -31,15 +31,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AddressType: () => import_browser_sdk8.AddressType,
+  ConnectBox: () => ConnectBox,
   ConnectButton: () => ConnectButton,
   DebugLevel: () => import_browser_sdk8.DebugLevel,
   NetworkId: () => import_browser_sdk8.NetworkId,
   PhantomProvider: () => PhantomProvider,
-  darkTheme: () => import_wallet_sdk_ui8.darkTheme,
+  darkTheme: () => import_wallet_sdk_ui9.darkTheme,
   debug: () => import_browser_sdk8.debug,
   isMobileDevice: () => import_browser_sdk8.isMobileDevice,
-  lightTheme: () => import_wallet_sdk_ui8.lightTheme,
-  mergeTheme: () => import_wallet_sdk_ui8.mergeTheme,
+  lightTheme: () => import_wallet_sdk_ui9.lightTheme,
+  mergeTheme: () => import_wallet_sdk_ui9.mergeTheme,
   useAccounts: () => useAccounts,
   useAutoConfirm: () => useAutoConfirm,
   useConnect: () => useConnect,
@@ -296,7 +297,12 @@ function ChainIcon({ addressType, size = 8 }) {
 
 // src/components/ConnectModalContent.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
+function ConnectModalContent({
+  appIcon,
+  appName = "App Name",
+  onClose,
+  hideCloseButton = false
+}) {
   const theme = (0, import_wallet_sdk_ui2.useTheme)();
   const { isLoading, allowedProviders } = usePhantom();
   const baseConnect = useConnect();
@@ -309,6 +315,8 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
   const [providerType, setProviderType] = (0, import_react5.useState)(null);
   const [showOtherWallets, setShowOtherWallets] = (0, import_react5.useState)(false);
   const [selectedWalletId, setSelectedWalletId] = (0, import_react5.useState)(null);
+  const isConnectingState = baseConnect.isConnecting || isConnecting;
+  const errorState = baseConnect.error ? baseConnect.error.message : error;
   const showDivider = !(allowedProviders.length === 1 && allowedProviders.includes("injected"));
   const shouldShowOtherWalletsButton = discoveredWallets.length > 2;
   const walletsToShowInline = shouldShowOtherWalletsButton ? [] : discoveredWallets;
@@ -482,7 +490,7 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             100% { transform: rotate(360deg); }
           }
         ` }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: loadingContainerStyle, children: [
+    isLoading || baseConnect.isConnecting ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: loadingContainerStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: spinnerStyle }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "label", color: theme.secondary, children: "Loading..." })
     ] }) : showOtherWallets ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
@@ -495,17 +503,18 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             setShowOtherWallets(false);
           },
           title: "Other Wallets",
-          onClose
+          onClose,
+          hideCloseButton
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: otherWalletsContainerStyle, children: [
-        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: errorStyle, children: error }),
+        errorState && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: errorStyle, children: errorState }),
         discoveredWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_wallet_sdk_ui2.Button,
           {
             onClick: () => connectWithWallet(wallet),
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "injected" && selectedWalletId === wallet.id,
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "injected" && selectedWalletId === wallet.id,
             fullWidth: true,
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
@@ -522,16 +531,16 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
         ))
       ] })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.ModalHeader, { title: "Login or Sign Up", onClose }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.ModalHeader, { title: "Login or Sign Up", onClose, hideCloseButton }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: connectContentContainerStyle, children: [
         appIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: appIcon, alt: appName, style: appIconStyle }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: errorStyle, children: error }),
+        errorState && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: errorStyle, children: errorState }),
         isMobile && !isExtensionInstalled.isInstalled && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_wallet_sdk_ui2.Button,
           {
             onClick: connectWithDeeplink,
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "deeplink",
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "deeplink",
             fullWidth: true,
             children: isConnecting && providerType === "deeplink" ? "Opening Phantom..." : "Open in Phantom App"
           }
@@ -540,16 +549,16 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
           import_wallet_sdk_ui2.LoginWithPhantomButton,
           {
             onClick: () => connectWithAuthProvider("phantom"),
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "phantom"
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "phantom"
           }
         ),
         allowedProviders.includes("google") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_wallet_sdk_ui2.Button,
           {
             onClick: () => connectWithAuthProvider("google"),
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "google",
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "google",
             fullWidth: true,
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
@@ -564,8 +573,8 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
           import_wallet_sdk_ui2.Button,
           {
             onClick: () => connectWithAuthProvider("apple"),
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "apple",
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "apple",
             fullWidth: true,
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
@@ -576,7 +585,7 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             ] })
           }
         ),
-        !isMobile && allowedProviders.includes("injected") && isExtensionInstalled.isInstalled && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        !isMobile && allowedProviders.includes("injected") && (isExtensionInstalled.isInstalled || discoveredWallets.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
           showDivider && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: dividerStyle, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: dividerLineStyle }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: dividerTextStyle, children: "OR" }),
@@ -586,8 +595,8 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             import_wallet_sdk_ui2.Button,
             {
               onClick: () => connectWithWallet(wallet),
-              disabled: isConnecting,
-              isLoading: isConnecting && providerType === "injected" && selectedWalletId === wallet.id,
+              disabled: isConnectingState,
+              isLoading: isConnectingState && providerType === "injected" && selectedWalletId === wallet.id,
               fullWidth: true,
               children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
@@ -602,7 +611,7 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             },
             wallet.id
           )),
-          shouldShowOtherWalletsButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Button, { onClick: () => setShowOtherWallets(true), disabled: isConnecting, fullWidth: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
+          shouldShowOtherWalletsButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Button, { onClick: () => setShowOtherWallets(true), disabled: isConnectingState, fullWidth: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.BoundedIcon, { type: "wallet", size: 20, background: theme.aux, color: theme.text }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: "Other Wallets" })
@@ -655,7 +664,7 @@ function useDisconnect() {
 
 // src/components/ConnectedModalContent.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function ConnectedModalContent({ onClose }) {
+function ConnectedModalContent({ onClose, hideCloseButton = false }) {
   const theme = (0, import_wallet_sdk_ui3.useTheme)();
   const { addresses } = usePhantom();
   const { disconnect } = useDisconnect();
@@ -734,7 +743,7 @@ function ConnectedModalContent({ onClose }) {
     minWidth: 0
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: contentWrapperStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.ModalHeader, { title: "Wallet", onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.ModalHeader, { title: "Wallet", onClose, hideCloseButton }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: accountListContainerStyle, children: [
       disconnectError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: errorContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.Text, { variant: "caption", color: theme.error, children: "Failed to disconnect" }) }),
       addresses && addresses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: accountListStyle, children: addresses.map((account, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: accountItemStyle, children: [
@@ -820,7 +829,12 @@ function PhantomProvider({ children, config, debugConfig, theme, appIcon, appNam
     const handleConnectError = (errorData) => {
       setIsConnecting(false);
       setIsConnected(false);
-      setConnectError(new Error(errorData.error || "Connection failed"));
+      const isAutoConnectNoSession = errorData.source === "auto-connect" && (errorData.error === "No valid session found" || errorData.error === "No trusted connections available");
+      if (isAutoConnectNoSession) {
+        setConnectError(null);
+      } else {
+        setConnectError(new Error(errorData.error || "Connection failed"));
+      }
       setAddresses([]);
     };
     const handleDisconnect = () => {
@@ -1108,6 +1122,31 @@ function ConnectButton({ addressType, fullWidth = false }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { style: buttonStyle, onClick: open, children: "Connect Wallet" });
 }
 
-// src/index.ts
+// src/components/ConnectBox.tsx
+var import_react12 = require("react");
 var import_wallet_sdk_ui8 = require("@phantom/wallet-sdk-ui");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ConnectBox({ maxWidth = "350px", transparent = false, appIcon, appName }) {
+  const theme = (0, import_wallet_sdk_ui8.useTheme)();
+  const { isConnected } = usePhantom();
+  const boxStyle = (0, import_react12.useMemo)(() => {
+    const style = {
+      width: "100%",
+      maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+      position: "relative",
+      overflow: "hidden"
+    };
+    if (!transparent) {
+      style.backgroundColor = theme.background;
+      style.borderRadius = theme.borderRadius;
+    }
+    return style;
+  }, [maxWidth, transparent, theme.background, theme.borderRadius]);
+  const noOp = () => {
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: boxStyle, children: isConnected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConnectedModalContent, { onClose: noOp, hideCloseButton: true }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConnectModalContent, { appIcon, appName, onClose: noOp, hideCloseButton: true }) });
+}
+
+// src/index.ts
+var import_wallet_sdk_ui9 = require("@phantom/wallet-sdk-ui");
 var import_browser_sdk8 = require("@phantom/browser-sdk");

package/dist/index.mjs

@@ -251,7 +251,12 @@ function ChainIcon({ addressType, size = 8 }) {
 
 // src/components/ConnectModalContent.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
+function ConnectModalContent({
+  appIcon,
+  appName = "App Name",
+  onClose,
+  hideCloseButton = false
+}) {
   const theme = useTheme2();
   const { isLoading, allowedProviders } = usePhantom();
   const baseConnect = useConnect();
@@ -264,6 +269,8 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
   const [providerType, setProviderType] = useState4(null);
   const [showOtherWallets, setShowOtherWallets] = useState4(false);
   const [selectedWalletId, setSelectedWalletId] = useState4(null);
+  const isConnectingState = baseConnect.isConnecting || isConnecting;
+  const errorState = baseConnect.error ? baseConnect.error.message : error;
   const showDivider = !(allowedProviders.length === 1 && allowedProviders.includes("injected"));
   const shouldShowOtherWalletsButton = discoveredWallets.length > 2;
   const walletsToShowInline = shouldShowOtherWalletsButton ? [] : discoveredWallets;
@@ -437,7 +444,7 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             100% { transform: rotate(360deg); }
           }
         ` }),
-    isLoading ? /* @__PURE__ */ jsxs("div", { style: loadingContainerStyle, children: [
+    isLoading || baseConnect.isConnecting ? /* @__PURE__ */ jsxs("div", { style: loadingContainerStyle, children: [
       /* @__PURE__ */ jsx2("div", { style: spinnerStyle }),
       /* @__PURE__ */ jsx2(Text, { variant: "label", color: theme.secondary, children: "Loading..." })
     ] }) : showOtherWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -450,17 +457,18 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             setShowOtherWallets(false);
           },
           title: "Other Wallets",
-          onClose
+          onClose,
+          hideCloseButton
         }
       ),
       /* @__PURE__ */ jsxs("div", { style: otherWalletsContainerStyle, children: [
-        error && /* @__PURE__ */ jsx2("div", { style: errorStyle, children: error }),
+        errorState && /* @__PURE__ */ jsx2("div", { style: errorStyle, children: errorState }),
         discoveredWallets.map((wallet) => /* @__PURE__ */ jsx2(
           Button,
           {
             onClick: () => connectWithWallet(wallet),
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "injected" && selectedWalletId === wallet.id,
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "injected" && selectedWalletId === wallet.id,
             fullWidth: true,
             children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
               /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
@@ -477,16 +485,16 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
         ))
       ] })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx2(ModalHeader, { title: "Login or Sign Up", onClose }),
+      /* @__PURE__ */ jsx2(ModalHeader, { title: "Login or Sign Up", onClose, hideCloseButton }),
       /* @__PURE__ */ jsxs("div", { style: connectContentContainerStyle, children: [
         appIcon && /* @__PURE__ */ jsx2("img", { src: appIcon, alt: appName, style: appIconStyle }),
-        error && /* @__PURE__ */ jsx2("div", { style: errorStyle, children: error }),
+        errorState && /* @__PURE__ */ jsx2("div", { style: errorStyle, children: errorState }),
         isMobile && !isExtensionInstalled.isInstalled && /* @__PURE__ */ jsx2(
           Button,
           {
             onClick: connectWithDeeplink,
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "deeplink",
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "deeplink",
             fullWidth: true,
             children: isConnecting && providerType === "deeplink" ? "Opening Phantom..." : "Open in Phantom App"
           }
@@ -495,16 +503,16 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
           LoginWithPhantomButton,
           {
             onClick: () => connectWithAuthProvider("phantom"),
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "phantom"
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "phantom"
           }
         ),
         allowedProviders.includes("google") && /* @__PURE__ */ jsx2(
           Button,
           {
             onClick: () => connectWithAuthProvider("google"),
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "google",
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "google",
             fullWidth: true,
             children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
               /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
@@ -519,8 +527,8 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
           Button,
           {
             onClick: () => connectWithAuthProvider("apple"),
-            disabled: isConnecting,
-            isLoading: isConnecting && providerType === "apple",
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "apple",
             fullWidth: true,
             children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
               /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
@@ -531,7 +539,7 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             ] })
           }
         ),
-        !isMobile && allowedProviders.includes("injected") && isExtensionInstalled.isInstalled && /* @__PURE__ */ jsxs(Fragment, { children: [
+        !isMobile && allowedProviders.includes("injected") && (isExtensionInstalled.isInstalled || discoveredWallets.length > 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
           showDivider && /* @__PURE__ */ jsxs("div", { style: dividerStyle, children: [
             /* @__PURE__ */ jsx2("div", { style: dividerLineStyle }),
             /* @__PURE__ */ jsx2("span", { style: dividerTextStyle, children: "OR" }),
@@ -541,8 +549,8 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             Button,
             {
               onClick: () => connectWithWallet(wallet),
-              disabled: isConnecting,
-              isLoading: isConnecting && providerType === "injected" && selectedWalletId === wallet.id,
+              disabled: isConnectingState,
+              isLoading: isConnectingState && providerType === "injected" && selectedWalletId === wallet.id,
               fullWidth: true,
               children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
                 /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
@@ -557,7 +565,7 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
             },
             wallet.id
           )),
-          shouldShowOtherWalletsButton && /* @__PURE__ */ jsx2(Button, { onClick: () => setShowOtherWallets(true), disabled: isConnecting, fullWidth: true, children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
+          shouldShowOtherWalletsButton && /* @__PURE__ */ jsx2(Button, { onClick: () => setShowOtherWallets(true), disabled: isConnectingState, fullWidth: true, children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
             /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
               /* @__PURE__ */ jsx2(BoundedIcon, { type: "wallet", size: 20, background: theme.aux, color: theme.text }),
               /* @__PURE__ */ jsx2(Text, { variant: "captionBold", children: "Other Wallets" })
@@ -610,7 +618,7 @@ function useDisconnect() {
 
 // src/components/ConnectedModalContent.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function ConnectedModalContent({ onClose }) {
+function ConnectedModalContent({ onClose, hideCloseButton = false }) {
   const theme = useTheme3();
   const { addresses } = usePhantom();
   const { disconnect } = useDisconnect();
@@ -689,7 +697,7 @@ function ConnectedModalContent({ onClose }) {
     minWidth: 0
   };
   return /* @__PURE__ */ jsxs2("div", { style: contentWrapperStyle, children: [
-    /* @__PURE__ */ jsx3(ModalHeader2, { title: "Wallet", onClose }),
+    /* @__PURE__ */ jsx3(ModalHeader2, { title: "Wallet", onClose, hideCloseButton }),
     /* @__PURE__ */ jsxs2("div", { style: accountListContainerStyle, children: [
       disconnectError && /* @__PURE__ */ jsx3("div", { style: errorContainerStyle, children: /* @__PURE__ */ jsx3(Text2, { variant: "caption", color: theme.error, children: "Failed to disconnect" }) }),
       addresses && addresses.length > 0 && /* @__PURE__ */ jsx3("div", { style: accountListStyle, children: addresses.map((account, index) => /* @__PURE__ */ jsxs2("div", { style: accountItemStyle, children: [
@@ -775,7 +783,12 @@ function PhantomProvider({ children, config, debugConfig, theme, appIcon, appNam
     const handleConnectError = (errorData) => {
       setIsConnecting(false);
       setIsConnected(false);
-      setConnectError(new Error(errorData.error || "Connection failed"));
+      const isAutoConnectNoSession = errorData.source === "auto-connect" && (errorData.error === "No valid session found" || errorData.error === "No trusted connections available");
+      if (isAutoConnectNoSession) {
+        setConnectError(null);
+      } else {
+        setConnectError(new Error(errorData.error || "Connection failed"));
+      }
       setAddresses([]);
     };
     const handleDisconnect = () => {
@@ -1063,11 +1076,37 @@ function ConnectButton({ addressType, fullWidth = false }) {
   return /* @__PURE__ */ jsx6("button", { style: buttonStyle, onClick: open, children: "Connect Wallet" });
 }
 
+// src/components/ConnectBox.tsx
+import { useMemo as useMemo5 } from "react";
+import { useTheme as useTheme6 } from "@phantom/wallet-sdk-ui";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ConnectBox({ maxWidth = "350px", transparent = false, appIcon, appName }) {
+  const theme = useTheme6();
+  const { isConnected } = usePhantom();
+  const boxStyle = useMemo5(() => {
+    const style = {
+      width: "100%",
+      maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+      position: "relative",
+      overflow: "hidden"
+    };
+    if (!transparent) {
+      style.backgroundColor = theme.background;
+      style.borderRadius = theme.borderRadius;
+    }
+    return style;
+  }, [maxWidth, transparent, theme.background, theme.borderRadius]);
+  const noOp = () => {
+  };
+  return /* @__PURE__ */ jsx7("div", { style: boxStyle, children: isConnected ? /* @__PURE__ */ jsx7(ConnectedModalContent, { onClose: noOp, hideCloseButton: true }) : /* @__PURE__ */ jsx7(ConnectModalContent, { appIcon, appName, onClose: noOp, hideCloseButton: true }) });
+}
+
 // src/index.ts
 import { darkTheme as darkTheme2, lightTheme, mergeTheme as mergeTheme2 } from "@phantom/wallet-sdk-ui";
 import { NetworkId, AddressType as AddressType3, DebugLevel, debug, isMobileDevice as isMobileDevice3 } from "@phantom/browser-sdk";
 export {
   AddressType3 as AddressType,
+  ConnectBox,
   ConnectButton,
   DebugLevel,
   NetworkId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phantom/react-sdk",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.27",
   "repository": {
     "type": "git",
     "url": "https://github.com/phantom/phantom-connect-sdk",
@@ -31,10 +31,10 @@
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@phantom/browser-sdk": "^1.0.0-beta.25",
-    "@phantom/chain-interfaces": "^1.0.0-beta.13",
-    "@phantom/constants": "^1.0.0-beta.13",
-    "@phantom/wallet-sdk-ui": "^1.0.0-beta.4"
+    "@phantom/browser-sdk": "^1.0.0-beta.27",
+    "@phantom/chain-interfaces": "^1.0.0-beta.15",
+    "@phantom/constants": "^1.0.0-beta.15",
+    "@phantom/wallet-sdk-ui": "^1.0.0-beta.6"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",