@crossmint/client-sdk-react-native-ui 0.8.0 → 0.8.1

package/README.md

@@ -1,67 +1,146 @@
 # Crossmint React Native SDK
 
-This package provides a React Native UI for integrating Crossmint authentication and wallet functionality into your mobile apps.
+> **Create chain-agnostic wallets for your React Native apps in minutes**  
+> Supports Solana, 20+ EVM chains (Polygon, Base, etc.), with secure mobile authentication.
 
-## Installation
+## 🚀 Quick Start
 
 ```bash
 pnpm add @crossmint/client-sdk-react-native-ui expo-secure-store expo-web-browser
 ```
 
-## Authentication with Secure Storage
+### 1. Setup Providers
 
-The React Native SDK uses [Expo's SecureStore](https://docs.expo.dev/versions/latest/sdk/securestore/) for secure, encrypted storage of authentication tokens. This provides a platform-native secure storage solution that encrypts sensitive data on the device.
-
-### Using the Default Secure Storage
-
-The `CrossmintAuthProvider` uses SecureStorage by default:
+**Option A: With Crossmint Authentication (Recommended)**
 
 ```tsx
-import { CrossmintProvider, CrossmintAuthProvider } from "@crossmint/client-sdk-react-native-ui";
+import {
+  CrossmintProvider,
+  CrossmintAuthProvider,
+  CrossmintWalletProvider
+} from "@crossmint/client-sdk-react-native-ui";
 
 export default function App() {
   return (
-    <CrossmintProvider
-      apiKey="YOUR_API_KEY"
-    >
+    <CrossmintProvider apiKey={process.env.EXPO_PUBLIC_CROSSMINT_API_KEY}>
       <CrossmintAuthProvider>
-        {/* Your app content */}
+        <CrossmintWalletProvider
+          createOnLogin={{
+            chain: "solana",
+            signer: { type: "email" }
+          }}
+        >
+          <MainApp />
+        </CrossmintWalletProvider>
       </CrossmintAuthProvider>
     </CrossmintProvider>
   );
 }
 ```
 
-### Authentication Hooks
+**Option B: 🔧 Bring Your Own Authentication**
+
+Already have authentication? Skip Crossmint Auth and use wallets with your existing system:
+
+📖 **[Complete Custom Auth Guide](https://docs.crossmint.com/wallets/advanced/bring-your-own-auth#react-native)** - Full setup with server-side examples and implementation details.
+
+```tsx
+import {
+  CrossmintProvider,
+  CrossmintWalletProvider
+} from "@crossmint/client-sdk-react-native-ui";
+
+export default function App() {
+  return (
+    <CrossmintProvider apiKey={process.env.EXPO_PUBLIC_CROSSMINT_API_KEY}>
+      {/* No CrossmintAuthProvider needed! */}
+      <CrossmintWalletProvider>
+        <MainApp />
+      </CrossmintWalletProvider>
+    </CrossmintProvider>
+  );
+}
+```
+
+### 2. Use Authentication & Wallets
 
-Once the providers are set up, you can use the authentication hooks in your components:
+The React Native SDK uses [Expo's SecureStore](https://docs.expo.dev/versions/latest/sdk/securestore/) for secure, encrypted storage of authentication tokens. This provides a platform-native secure storage solution that encrypts sensitive data on the device.
 
 ```tsx
-import { useCrossmintAuth } from "@crossmint/client-sdk-react-native-ui";
+import { View, Button, Text } from "react-native";
+import { useCrossmintAuth, useWallet } from "@crossmint/client-sdk-react-native-ui";
 
-function ProfileScreen() {
-  const { user, status, logout, login } = useCrossmintAuth();
+export default function MainApp() {
+  const { loginWithOAuth, logout, user } = useCrossmintAuth();
+  const { wallet, status } = useWallet();
 
-  if (status === "logged-out") {
+  if (!user) {
     return (
-      <View>
-        <Button
-          title="Sign in with Google"
-          onPress={() => login("google")}
+      <View style={{ padding: 20 }}>
+        <Button 
+          title="Login with Google" 
+          onPress={() => loginWithOAuth("google")} 
         />
       </View>
     );
   }
 
-  return (
-    <View>
-      <Text>Welcome, {user?.email}</Text>
-      <Button title="Logout" onPress={logout} />
-    </View>
-  );
+  if (status === "loaded") {
+    return (
+      <View style={{ padding: 20 }}>
+        <Text>Welcome {user.email}!</Text>
+        <Text>Wallet: {wallet?.address}</Text>
+        <Button 
+          title="Send 1 USDC" 
+          onPress={() => wallet?.send(recipient, "usdc", "1.0")} 
+        />
+        <Button title="Logout" onPress={logout} />
+      </View>
+    );
+  }
+
+  return <Text>Loading wallet...</Text>;
 }
 ```
 
+## 🔐 Authentication
+
+### OAuth Login Methods
+```tsx
+const { loginWithOAuth } = useCrossmintAuth();
+
+// Available OAuth providers
+<Button title="Google" onPress={() => loginWithOAuth("google")} />
+<Button title="Twitter" onPress={() => loginWithOAuth("twitter")} />
+```
+
+## 💳 Wallets
+
+### Multi-Chain Support
+- **Solana**: Native SOL, SPL tokens
+- **EVM Chains**: Ethereum, Polygon, Base, Arbitrum, and 15+ more
+- **Unified API**: Same code works across all chains
+
+### Using Wallets
+```tsx
+const { wallet, getOrCreateWallet } = useWallet();
+
+// Get wallet info
+const address = wallet?.address;
+const balance = await wallet?.balances();
+
+// Send tokens
+const tx = await wallet?.send(recipient, "usdc", "10.5");
+console.log("Transaction:", tx.explorerLink);
+
+// For advanced use cases
+const customWallet = await getOrCreateWallet({
+  chain: "<your-chain>",
+  signer: { type: "<your-signer-type>" }
+});
+```
+
+
 ## Custom Storage Provider
 
 If you need to implement a custom storage solution, you can implement the `StorageProvider` interface and pass it to the `CrossmintAuthProvider`:
@@ -98,4 +177,28 @@ function App() {
 }
 ```
 
-For more detailed documentation, please visit the [Crossmint Developer Docs](https://docs.crossmint.com/).
+## 🛠️ Environment Setup
+
+1. Get your API key from [Crossmint Console](https://staging.crossmint.com/console/projects/apiKeys)
+
+2. Add to your `.env`:
+```bash
+EXPO_PUBLIC_CROSSMINT_API_KEY=your_api_key_here
+```
+
+3. Configure deep linking in `app.json`:
+```json
+{
+  "expo": {
+    "scheme": "your-app-scheme"
+  }
+}
+```
+
+## 📚 Examples & Documentation
+
+- **[Wallets Expo Quickstart](https://github.com/Crossmint/wallets-expo-quickstart)** - Create and interact with Crossmint wallets using Crossmint Auth for React Native.
+
+---
+
+**Questions?** Visit our [documentation](https://docs.crossmint.com/introduction/about-crossmint) or contact our support team. 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-native-ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -26,12 +26,12 @@
     "react-native-webview": "13.12.5",
     "@crossmint/client-sdk-auth": "1.2.16",
     "@crossmint/client-sdk-base": "1.5.7",
-    "@crossmint/client-sdk-react-base": "0.5.5",
+    "@crossmint/client-sdk-react-base": "0.5.6",
     "@crossmint/client-sdk-rn-window": "0.2.2",
-    "@crossmint/client-signers": "0.0.18",
     "@crossmint/common-sdk-auth": "1.0.38",
+    "@crossmint/client-signers": "0.0.18",
     "@crossmint/common-sdk-base": "0.8.1",
-    "@crossmint/wallets-sdk": "0.10.5"
+    "@crossmint/wallets-sdk": "0.10.6"
   },
   "devDependencies": {
     "@types/react": "19.0.12"