Merge pull request #303 from phantom/chore/update-connect-ui

chore: Minors improvement ui

Author: rafinskipg

examples/with-react-ui/src/App.tsx

@@ -9,7 +9,7 @@ const config: PhantomSDKConfig = {
 
 function App() {
   return (
-    <PhantomProvider theme="light" config={config}>
+    <PhantomProvider config={config}>
       <div
         style={{
           minHeight: "100vh",
@@ -75,6 +75,31 @@ function App() {
             mobile app via phantom.app/ul
           </p>
         </div>
+
+        <ConnectExample />
+
+        <div
+          style={{
+            marginTop: "3rem",
+            padding: "1.5rem",
+            background: "white",
+            borderRadius: "12px",
+            border: "1px solid #e5e7eb",
+            textAlign: "center",
+          }}
+        >
+          <h3 style={{ margin: "0 0 1rem 0", color: "#1f2937" }}>📱 Mobile Testing</h3>
+          <p
+            style={{
+              color: "#6b7280",
+              margin: "0",
+              lineHeight: "1.5",
+            }}
+          >
+            On mobile devices, you'll see an additional "Open in Phantom App" button that will redirect to the Phantom
+            mobile app via phantom.app/ul
+          </p>
+        </div>
       </div>
     </PhantomProvider>
   );

packages/browser-sdk/src/types.ts

@@ -49,13 +49,15 @@ interface ExtendedInjectedProviderConfig extends InjectedProviderConfig {
   embeddedWalletType?: never;
 }
 
+type AuthProviderType = EmbeddedProviderAuthType | "injected";
+
 type AuthOptions = {
-  provider: EmbeddedProviderAuthType | "injected";
+  provider: AuthProviderType;
   customAuthData?: Record<string, any>;
 };
 
 type ConnectResult = Omit<EmbeddedConnectResult, "authProvider"> & {
-  authProvider?: EmbeddedProviderAuthType | "injected" | undefined;
+  authProvider?: AuthProviderType | undefined;
 };
 
 // Re-export types from core for convenience
@@ -67,6 +69,7 @@ export type {
   SignMessageResult,
   SignedTransaction,
   AuthOptions,
+  AuthProviderType,
   DebugCallback,
   DebugLevel,
 };

packages/react-sdk/src/index.ts

@@ -10,14 +10,7 @@ export * from "./types";
 
 // Re-export useful types and utilities from browser-sdk
 export { NetworkId, AddressType, DebugLevel, debug } from "@phantom/browser-sdk";
-export type {
-  DebugMessage,
-  AutoConfirmEnableParams,
-  AutoConfirmResult,
-  AutoConfirmSupportedChainsResult,
-} from "@phantom/browser-sdk";
 
-// Re-export event types for typed event handlers
 export type {
   EmbeddedProviderEvent,
   ConnectEventData,
@@ -26,6 +19,11 @@ export type {
   DisconnectEventData,
   EmbeddedProviderEventMap,
   EventCallback,
+  DebugMessage,
+  AutoConfirmEnableParams,
+  AutoConfirmResult,
+  AutoConfirmSupportedChainsResult,
+  AuthOptions,
 } from "@phantom/browser-sdk";
 
 // Re-export chain interfaces

packages/react-ui/README.md

@@ -160,57 +160,62 @@ function ConnectButton() {
 
 ## Theming
 
-Customize the modal appearance using CSS variables:
-
-```css
-:root {
-  /* Modal */
-  --phantom-ui-modal-bg: #ffffff;
-  --phantom-ui-modal-overlay: rgba(0, 0, 0, 0.5);
-  --phantom-ui-modal-border-radius: 12px;
-
-  /* Buttons */
-  --phantom-ui-button-bg: #ab9ff2;
-  --phantom-ui-button-hover-bg: #9c8dff;
-  --phantom-ui-button-text: #ffffff;
-  --phantom-ui-button-border-radius: 8px;
-
-  /* Text */
-  --phantom-ui-text-primary: #212529;
-  --phantom-ui-text-secondary: #6c757d;
-
-  /* Spacing */
-  --phantom-ui-spacing-sm: 8px;
-  --phantom-ui-spacing-md: 16px;
-  --phantom-ui-spacing-lg: 24px;
-}
-```
+Customize the modal appearance by passing a theme object to the `PhantomProvider`. The package includes two built-in themes: `darkTheme` (default) and `lightTheme`.
 
-### Dark Theme
+### Using Built-in Themes
 
-```css
-[data-theme="dark"] {
-  --phantom-ui-modal-bg: #2d2d2d;
-  --phantom-ui-text-primary: #ffffff;
-  --phantom-ui-text-secondary: #b3b3b3;
-}
-```
+```tsx
+import { PhantomProvider, darkTheme, lightTheme } from "@phantom/react-ui";
 
-Apply themes via the `theme` prop or CSS:
+// Use dark theme (default)
+<PhantomProvider config={config} theme={darkTheme}>
+  <App />
+</PhantomProvider>
 
-```tsx
-<PhantomProvider theme="dark">
+// Use light theme
+<PhantomProvider config={config} theme={lightTheme}>
   <App />
 </PhantomProvider>
+```
+
+### Custom Theme
 
-// Or via CSS
-<div data-theme="dark">
-  <PhantomProvider>
-    <App />
-  </PhantomProvider>
-</div>
+You can pass a partial theme object to customize specific properties:
+
+```tsx
+import { PhantomProvider } from "@phantom/react-ui";
+
+const customTheme = {
+  background: "#1a1a1a",
+  text: "#ffffff",
+  secondary: "#98979C",
+  brand: "#ab9ff2",
+  error: "#ff4444",
+  success: "#00ff00",
+  borderRadius: "16px",
+  overlay: "rgba(0, 0, 0, 0.8)",
+};
+
+<PhantomProvider config={config} theme={customTheme}>
+  <App />
+</PhantomProvider>;
 ```
 
+### Theme Properties
+
+| Property       | Type     | Description                                               |
+| -------------- | -------- | --------------------------------------------------------- |
+| `background`   | `string` | Background color for modal                                |
+| `text`         | `string` | Primary text color                                        |
+| `secondary`    | `string` | Secondary color for text, borders, dividers (must be hex) |
+| `brand`        | `string` | Brand/primary action color                                |
+| `error`        | `string` | Error state color                                         |
+| `success`      | `string` | Success state color                                       |
+| `borderRadius` | `string` | Border radius for buttons and modal                       |
+| `overlay`      | `string` | Overlay background color (with opacity)                   |
+
+**Note:** The `secondary` color must be a hex color value (e.g., `#98979C`) as it's used to derive auxiliary colors with opacity.
+
 ## Migration from @phantom/react-sdk
 
 Migration is simple - just add the UI provider and import `useConnect` from `@phantom/react-ui`:

packages/react-ui/src/PhantomProvider.tsx

@@ -1,52 +1,36 @@
-import React, { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from "react";
+import React, { useState, useCallback, useMemo, type ReactNode } from "react";
 import {
   useConnect as useBaseConnect,
   usePhantom,
   PhantomProvider as BasePhantomProvider,
-  useIsExtensionInstalled,
-  useIsPhantomLoginAvailable,
   type PhantomSDKConfig,
 } from "@phantom/react-sdk";
-import { isMobileDevice, getDeeplinkToPhantom } from "@phantom/browser-sdk";
+import { isMobileDevice, getDeeplinkToPhantom, type AuthProviderType } from "@phantom/browser-sdk";
+import { darkTheme, mergeTheme, type PhantomTheme } from "./themes";
+import { Modal } from "./components/Modal";
+import { PhantomUIContext, type PhantomUIContextValue, type ConnectionUIState } from "./context";
 
 export interface PhantomUIProviderProps {
   children: ReactNode;
-  theme?: "light" | "dark" | "auto";
-  customTheme?: Record<string, string>;
+  theme?: Partial<PhantomTheme>;
   config: PhantomSDKConfig;
+  appIcon?: string; // URL to app icon
+  appName?: string; // App name to display
 }
 
-// Connection UI state
-interface ConnectionUIState {
-  isVisible: boolean;
-  isConnecting: boolean;
-  error: Error | null;
-  providerType: "injected" | "embedded" | "deeplink" | null;
-}
-
-interface PhantomUIContextValue {
-  // Connection state
-  connectionState: ConnectionUIState;
-  showConnectionModal: () => void;
-  hideConnectionModal: () => void;
-  connectWithAuthProvider: (provider: "google" | "apple" | "phantom") => Promise<void>;
-  connectWithInjected: () => Promise<void>;
-  connectWithDeeplink: () => void;
-  isMobile: boolean;
-}
-
-const PhantomUIContext = createContext<PhantomUIContextValue | null>(null);
-
 // Internal UI Provider that consumes react-sdk context
-function PhantomUIProvider({ children, theme = "light", customTheme }: Omit<PhantomUIProviderProps, "config">) {
+function PhantomUIProvider({ children, theme = darkTheme, appIcon, appName }: Omit<PhantomUIProviderProps, "config">) {
   const baseConnect = useBaseConnect();
   const { sdk } = usePhantom();
-  const isExtensionInstalled = useIsExtensionInstalled();
-  const isPhantomLoginAvailable = useIsPhantomLoginAvailable();
 
   // Check if this is a mobile device
   const isMobile = useMemo(() => isMobileDevice(), []);
 
+  // Get the resolved theme object
+  const resolvedTheme = useMemo(() => {
+    return mergeTheme(theme);
+  }, [theme]);
+
   // Connection state
   const [connectionState, setConnectionState] = useState<ConnectionUIState>({
     isVisible: false,
@@ -76,13 +60,13 @@ function PhantomUIProvider({ children, theme = "light", customTheme }: Omit<Phan
 
   // Connect with specific auth provider
   const connectWithAuthProvider = useCallback(
-    async (provider: "google" | "apple" | "phantom") => {
+    async (provider: AuthProviderType) => {
       try {
         setConnectionState(prev => ({
           ...prev,
           isConnecting: true,
           error: null,
-          providerType: "embedded", // Always embedded when using modal
+          providerType: provider,
         }));
 
         await baseConnect.connect({ provider });
@@ -186,109 +170,24 @@ function PhantomUIProvider({ children, theme = "light", customTheme }: Omit<Phan
     connectWithInjected,
     connectWithDeeplink,
     isMobile,
+    theme: resolvedTheme,
   };
 
   return (
     <PhantomUIContext.Provider value={contextValue}>
       {children}
-      {/* Connection Modal - rendered conditionally based on state */}
-      {connectionState.isVisible && (
-        <div className={`phantom-ui-modal-overlay ${theme}`} style={customTheme} onClick={hideConnectionModal}>
-          <div className="phantom-ui-modal-content" onClick={e => e.stopPropagation()}>
-            <div className="phantom-ui-modal-header">
-              <h3>Connect to Phantom</h3>
-              <button className="phantom-ui-close-button" onClick={hideConnectionModal}>
-                ×
-              </button>
-            </div>
-
-            <div className="phantom-ui-modal-body">
-              {connectionState.error && <div className="phantom-ui-error">{connectionState.error.message}</div>}
-
-              <div className="phantom-ui-provider-options">
-                {/* Mobile device with no Phantom extension - show deeplink button */}
-                {isMobile && !isExtensionInstalled.isInstalled && (
-                  <button
-                    className="phantom-ui-provider-button phantom-ui-provider-button-mobile"
-                    onClick={connectWithDeeplink}
-                    disabled={connectionState.isConnecting}
-                  >
-                    {connectionState.isConnecting && connectionState.providerType === "deeplink"
-                      ? "Opening Phantom..."
-                      : "Open in Phantom App"}
-                  </button>
-                )}
-
-                {/* Primary auth options - Phantom, Google */}
-                {!isMobile && (
-                  <>
-                    {/* Login with Phantom (embedded provider using Phantom extension) */}
-                    {isPhantomLoginAvailable.isAvailable && (
-                      <button
-                        className="phantom-ui-provider-button phantom-ui-provider-button-primary"
-                        onClick={() => connectWithAuthProvider("phantom")}
-                        disabled={connectionState.isConnecting}
-                      >
-                        {connectionState.isConnecting && connectionState.providerType === "embedded"
-                          ? "Connecting..."
-                          : "Login with Phantom"}
-                      </button>
-                    )}
-
-                    {/* Continue with Google */}
-                    <button
-                      className="phantom-ui-provider-button"
-                      onClick={() => connectWithAuthProvider("google")}
-                      disabled={connectionState.isConnecting}
-                    >
-                      {connectionState.isConnecting && connectionState.providerType === "embedded"
-                        ? "Connecting..."
-                        : "Continue with Google"}
-                    </button>
-                  </>
-                )}
-
-                {/* Extension option - smaller UI section */}
-                {!isMobile && isExtensionInstalled.isInstalled && (
-                  <div className="phantom-ui-extension-section">
-                    <div className="phantom-ui-divider">
-                      <span>or</span>
-                    </div>
-                    <button
-                      className="phantom-ui-provider-button phantom-ui-provider-button-secondary"
-                      onClick={connectWithInjected}
-                      disabled={connectionState.isConnecting}
-                    >
-                      {connectionState.isConnecting && connectionState.providerType === "injected"
-                        ? "Connecting..."
-                        : "Continue with extension"}
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
+      <Modal appIcon={appIcon} appName={appName} />
     </PhantomUIContext.Provider>
   );
 }
 
 // Main exported Provider that wraps both react-sdk and react-ui providers
-export function PhantomProvider({ children, theme = "light", customTheme, config }: PhantomUIProviderProps) {
+export function PhantomProvider({ children, theme = darkTheme, config, appIcon, appName }: PhantomUIProviderProps) {
   return (
     <BasePhantomProvider config={config}>
-      <PhantomUIProvider theme={theme} customTheme={customTheme}>
+      <PhantomUIProvider theme={theme} appIcon={appIcon} appName={appName}>
         {children}
       </PhantomUIProvider>
     </BasePhantomProvider>
   );
 }
-
-export function usePhantomUI(): PhantomUIContextValue {
-  const context = useContext(PhantomUIContext);
-  if (!context) {
-    throw new Error("usePhantomUI must be used within a PhantomProvider");
-  }
-  return context;
-}