feat: Render wallets in modal

packages/browser-sdk/src/providers/injected/index.ts

@@ -165,20 +165,18 @@ export class InjectedProvider implements Provider {
       });
     }
 
-    if (this.addressTypes.includes(AddressType.solana)) {
-      if (this.selectedWalletId !== "phantom") {
-        if (!this.walletRegistry.has(requestedWalletId)) {
-          debug.error(DebugCategory.INJECTED_PROVIDER, "Unknown injected wallet id requested", {
-            walletId: requestedWalletId,
-          });
-          throw new Error(`Unknown injected wallet id: ${requestedWalletId}`);
-        }
-
-        this.selectedWalletId = requestedWalletId;
-        debug.log(DebugCategory.INJECTED_PROVIDER, "Selected injected wallet for connection", {
+    if (this.addressTypes.includes(AddressType.solana) && this.selectedWalletId !== "phantom") {
+      if (!this.walletRegistry.has(requestedWalletId)) {
+        debug.error(DebugCategory.INJECTED_PROVIDER, "Unknown injected wallet id requested", {
           walletId: requestedWalletId,
         });
+        throw new Error(`Unknown injected wallet id: ${requestedWalletId}`);
       }
+
+      this.selectedWalletId = requestedWalletId;
+      debug.log(DebugCategory.INJECTED_PROVIDER, "Selected injected wallet for connection", {
+        walletId: requestedWalletId,
+      });
     }
 
     this.emit("connect_start", {

packages/react-native-sdk/src/ModalProvider.test.tsx

@@ -101,22 +101,6 @@ describe("ModalProvider", () => {
       expect(getByTestId("modal")).toBeTruthy();
     });
 
-    it("should pass isConnected prop to Modal", () => {
-      mockUsePhantom.mockReturnValue({
-        ...mockUsePhantom(),
-        isConnected: true,
-      } as any);
-
-      const { getByTestId } = render(
-        <ModalProvider>
-          <mock-child />
-        </ModalProvider>,
-      );
-
-      const modal = getByTestId("modal");
-      expect(modal.props.isConnected).toBe(true);
-    });
-
     it("should render ConnectModalContent when not connected", () => {
       const { getByTestId } = render(
         <ModalProvider>

packages/react-native-sdk/src/ModalProvider.tsx

@@ -39,14 +39,7 @@ export function ModalProvider({ children, appIcon, appName }: ModalProviderProps
   return (
     <ModalContext.Provider value={modalContextValue}>
       {children}
-      <Modal
-        isVisible={isModalOpen}
-        onClose={closeModal}
-        appIcon={appIcon}
-        appName={appName}
-        isConnected={isConnected}
-        isMobile={true}
-      >
+      <Modal isVisible={isModalOpen} onClose={closeModal} appIcon={appIcon} appName={appName} isMobile={true}>
         {isConnected ? (
           <ConnectedModalContent onClose={closeModal} />
         ) : (

packages/react-native-sdk/src/components/ConnectModalContent.test.tsx

@@ -12,7 +12,7 @@ jest.mock("../hooks/useConnect");
 /* eslint-disable @typescript-eslint/no-var-requires */
 jest.mock("@phantom/wallet-sdk-ui", () => {
   const React = require("react");
-  const { View, Text } = require("react-native");
+  const { View, Text, TouchableOpacity } = require("react-native");
 
   return {
     ...jest.requireActual("@phantom/wallet-sdk-ui"),
@@ -36,8 +36,35 @@ jest.mock("@phantom/wallet-sdk-ui", () => {
     Icon: ({ type }: { type: string }) => {
       return <View testID={`icon-${type}`} />;
     },
-    Text: ({ children }: { children: React.ReactNode }) => {
-      return <Text>{children}</Text>;
+    Text: ({ children, style }: { children: React.ReactNode; style?: any }) => {
+      return <Text style={style}>{children}</Text>;
+    },
+    ModalHeader: ({
+      title,
+      onClose,
+      goBack,
+      onGoBack,
+    }: {
+      title: string;
+      onClose?: () => void;
+      goBack?: boolean;
+      onGoBack?: () => void;
+    }) => {
+      return (
+        <View testID="modal-header">
+          {goBack && onGoBack && (
+            <TouchableOpacity testID="modal-header-back" onPress={onGoBack}>
+              <Text>Back</Text>
+            </TouchableOpacity>
+          )}
+          <Text testID="modal-header-title">{title}</Text>
+          {onClose && (
+            <TouchableOpacity testID="modal-header-close" onPress={onClose}>
+              <Text>×</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      );
     },
   };
 });

packages/react-native-sdk/src/components/ConnectModalContent.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react";
 import { View, Image, StyleSheet, ActivityIndicator } from "react-native";
 import type { EmbeddedProviderAuthType } from "@phantom/embedded-provider-core";
-import { Button, Icon, Text, useTheme, hexToRgba } from "@phantom/wallet-sdk-ui";
+import { Button, Icon, Text, useTheme, hexToRgba, ModalHeader } from "@phantom/wallet-sdk-ui";
 import { usePhantom } from "../PhantomContext";
 import { useConnect } from "../hooks/useConnect";
 
@@ -51,18 +51,21 @@ export function ConnectModalContent({ appIcon, onClose }: ConnectModalContentPro
     appIcon: {
       borderRadius: 28,
       height: 56,
+      marginBottom: 12,
       width: 56,
     },
     buttonContainer: {
       alignItems: "center",
       flexDirection: "column",
       gap: 12,
+      paddingHorizontal: 32,
       width: "100%",
     },
     container: {
       alignItems: "center",
       flexDirection: "column",
-      gap: 24,
+      gap: 12,
+      paddingBottom: 24,
       width: "100%",
     },
     errorContainer: {
@@ -77,6 +80,17 @@ export function ConnectModalContent({ appIcon, onClose }: ConnectModalContentPro
       color: errorTextColor,
       fontSize: 14,
     },
+    footer: {
+      alignItems: "center",
+      borderColor: theme.aux,
+      borderTopWidth: 1,
+      flexDirection: "row",
+      gap: 4,
+      justifyContent: "center",
+      marginTop: 24,
+      padding: 16,
+      width: "100%",
+    },
     loadingContainer: {
       alignItems: "center",
       flexDirection: "column",
@@ -91,6 +105,8 @@ export function ConnectModalContent({ appIcon, onClose }: ConnectModalContentPro
 
   return (
     <View style={styles.container}>
+      <ModalHeader title="Login or Sign Up" onClose={onClose} />
+
       {appIcon && <Image testID="app-icon" source={{ uri: appIcon }} style={styles.appIcon} />}
 
       {error && (
@@ -166,6 +182,16 @@ export function ConnectModalContent({ appIcon, onClose }: ConnectModalContentPro
           )}
         </View>
       )}
+
+      <View style={styles.footer}>
+        <Text variant="label" color={theme.secondary}>
+          Powered by
+        </Text>
+        <Icon type="phantom" size={16} color={theme.secondary} />
+        <Text variant="label" color={theme.secondary}>
+          Phantom
+        </Text>
+      </View>
     </View>
   );
 }

packages/react-native-sdk/src/components/ConnectedModalContent.test.tsx

@@ -12,7 +12,7 @@ jest.mock("../hooks/useDisconnect");
 /* eslint-disable @typescript-eslint/no-var-requires */
 jest.mock("@phantom/wallet-sdk-ui", () => {
   const React = require("react");
-  const { TouchableOpacity, Text } = require("react-native");
+  const { TouchableOpacity, Text, View } = require("react-native");
 
   return {
     ...jest.requireActual("@phantom/wallet-sdk-ui"),
@@ -41,8 +41,39 @@ jest.mock("@phantom/wallet-sdk-ui", () => {
         </TouchableOpacity>
       );
     },
-    Text: ({ children, variant }: { children: React.ReactNode; variant?: string }) => {
-      return <Text testID={variant}>{children}</Text>;
+    Text: ({ children, variant, style }: { children: React.ReactNode; variant?: string; style?: any }) => {
+      return (
+        <Text testID={variant} style={style}>
+          {children}
+        </Text>
+      );
+    },
+    ModalHeader: ({
+      title,
+      onClose,
+      goBack,
+      onGoBack,
+    }: {
+      title: string;
+      onClose?: () => void;
+      goBack?: boolean;
+      onGoBack?: () => void;
+    }) => {
+      return (
+        <View testID="modal-header">
+          {goBack && onGoBack && (
+            <TouchableOpacity testID="modal-header-back" onPress={onGoBack}>
+              <Text>Back</Text>
+            </TouchableOpacity>
+          )}
+          <Text testID="modal-header-title">{title}</Text>
+          {onClose && (
+            <TouchableOpacity testID="modal-header-close" onPress={onClose}>
+              <Text>×</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      );
     },
     hexToRgba: (_hex: string, opacity: number) => `rgba(255, 0, 0, ${opacity})`,
   };

packages/react-native-sdk/src/components/ConnectedModalContent.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { View, StyleSheet } from "react-native";
-import { Button, Text, useTheme, hexToRgba } from "@phantom/wallet-sdk-ui";
+import { Button, Text, useTheme, hexToRgba, ModalHeader } from "@phantom/wallet-sdk-ui";
 import { usePhantom } from "../PhantomContext";
 import { useDisconnect } from "../hooks/useDisconnect";
 
@@ -54,6 +54,14 @@ export function ConnectedModalContent({ onClose }: ConnectedModalContentProps) {
     addressText: {
       fontFamily: "monospace",
     },
+    container: {
+      alignItems: "center",
+      flexDirection: "column",
+      gap: 24,
+      paddingBottom: 24,
+      paddingHorizontal: 32,
+      width: "100%",
+    },
     errorContainer: {
       backgroundColor: errorBackgroundColor,
       borderColor: errorBorderColor,
@@ -65,7 +73,9 @@ export function ConnectedModalContent({ onClose }: ConnectedModalContentProps) {
   });
 
   return (
-    <>
+    <View style={styles.container}>
+      <ModalHeader title="Wallet" onClose={onClose} />
+
       {addresses && addresses.length > 0 && (
         <View style={styles.accountList}>
           {addresses.map((account, index) => (
@@ -92,6 +102,6 @@ export function ConnectedModalContent({ onClose }: ConnectedModalContentProps) {
       <Button onClick={handleDisconnect} disabled={isDisconnecting} isLoading={isDisconnecting} fullWidth>
         <Text variant="captionBold">{isDisconnecting ? "Disconnecting..." : "Disconnect"}</Text>
       </Button>
-    </>
+    </View>
   );
 }

packages/react-native-sdk/src/components/Modal.test.tsx

@@ -75,28 +75,6 @@ describe("Modal Component", () => {
       expect(container).toBeTruthy();
     });
 
-    it("should render the close button", () => {
-      const { getByTestId } = renderModal();
-      expect(() => getByTestId("icon-close")).not.toThrow();
-    });
-
-    it("should render the correct header text when not connected", () => {
-      const { getByText } = renderModal({ isConnected: false });
-      expect(getByText("Login or Sign Up")).toBeTruthy();
-    });
-
-    it("should render the correct header text when connected", () => {
-      const { getByText } = renderModal({ isConnected: true });
-      expect(getByText("Wallet")).toBeTruthy();
-    });
-
-    it("should render the Phantom branding in the footer", () => {
-      const { getByText, getByTestId } = renderModal();
-      expect(getByText("Powered by")).toBeTruthy();
-      expect(getByText("Phantom")).toBeTruthy();
-      expect(() => getByTestId("icon-phantom")).not.toThrow();
-    });
-
     it("should render children content", () => {
       const { getByTestId, getByText } = renderModal();
       expect(getByTestId("modal-child")).toBeTruthy();
@@ -111,14 +89,6 @@ describe("Modal Component", () => {
     });
   });
 
-  describe("Interactions", () => {
-    it("should have a close button", () => {
-      const { getByTestId } = renderModal();
-      const closeIcon = getByTestId("icon-close");
-      expect(closeIcon).toBeTruthy();
-    });
-  });
-
   describe("Styling", () => {
     it("should render with bottom sheet styling", () => {
       // Modal uses StyleSheet.create with theme colors and proper positioning
@@ -135,12 +105,4 @@ describe("Modal Component", () => {
       expect(container).toBeTruthy();
     });
   });
-
-  describe("Accessibility", () => {
-    it("should have an accessible close button", () => {
-      const { getByTestId } = renderModal();
-      const closeIcon = getByTestId("icon-close");
-      expect(closeIcon).toBeTruthy();
-    });
-  });
 });