@oobit/react-native-sdk 3.0.0 → 3.0.1

package/README.md

@@ -1,6 +1,6 @@
 # @oobit/react-native-sdk
 
-A React Native SDK that enables wallet apps to integrate Oobit's crypto payment services. Let your users pay with cryptocurrency through Oobit's secure payment infrastructure.
+A React Native SDK that enables wallet apps to integrate Oobit's crypto-to-card payment services.
 
 [![npm version](https://img.shields.io/npm/v/@oobit/react-native-sdk.svg)](https://www.npmjs.com/package/@oobit/react-native-sdk)
 [![license](https://img.shields.io/npm/l/@oobit/react-native-sdk.svg)](https://github.com/oobit-tech/react-native-SDK/blob/main/LICENSE)
@@ -8,361 +8,39 @@ A React Native SDK that enables wallet apps to integrate Oobit's crypto payment
 ## Installation
 
 ```bash
-npm install @oobit/react-native-sdk
-# or
-yarn add @oobit/react-native-sdk
-```
-
-### Peer Dependencies
-
-Make sure you have these installed:
-
-```bash
-npm install react-native-webview expo-linking expo-clipboard expo-intent-launcher expo-local-authentication
-# or
-yarn add react-native-webview expo-linking expo-clipboard expo-intent-launcher expo-local-authentication
+npm install @oobit/react-native-sdk react-native-webview
 ```
 
 ## Quick Start
 
-```typescript
-import { WidgetSDK } from '@oobit/react-native-sdk';
-import { View, Alert } from 'react-native';
-
-function MyApp() {
-  return (
-    <View style={{ flex: 1 }}>
-      <WidgetSDK
-        accessToken="your-jwt-token-from-backend"
-        userWalletAddress="0x1234...abcd"
-        environment="production"
-        onReady={() => {
-          console.log('Widget loaded successfully');
-        }}
-        onError={(code, message) => {
-          Alert.alert('Error', message);
-        }}
-        onClose={() => {
-          console.log('User closed the widget');
-        }}
-        onTransactionRequested={(token, amount, address, tag) => {
-          console.log(`Send ${amount} ${token.symbol} to ${address}`);
-        }}
-      />
-    </View>
-  );
-}
-```
-
-## Props
-
-### Required Props
-
-#### `accessToken: string`
-JWT access token from your backend for authentication.
-
-```typescript
-<WidgetSDK accessToken="eyJhbGciOiJIUzI1NiIs..." />
-```
-
-#### `userWalletAddress: string`
-The user's external wallet address for crypto deposits.
-
-```typescript
-<WidgetSDK userWalletAddress="0x1234567890abcdef..." />
-```
-
-### Optional Props
-
-#### `environment?: 'development' | 'production'`
-The environment to use. Defaults to `'production'`.
-
-```typescript
-<WidgetSDK environment="development" />
-```
-
-#### `debug?: boolean`
-Enable debug logging to console. Defaults to `false`.
-
-```typescript
-<WidgetSDK debug={true} />
-```
-
-#### `loadingIndicatorColor?: string`
-Custom color for the loading indicator. Defaults to `'#007AFF'`.
-
-```typescript
-<WidgetSDK loadingIndicatorColor="#6200EE" />
-```
-
-### Callback Props
-
-#### `onReady?: () => void`
-Called when the widget has finished loading and is ready for interaction.
-
-```typescript
-<WidgetSDK
-  onReady={() => {
-    console.log('Widget is ready!');
-    setIsLoading(false);
-  }}
-/>
-```
-
-#### `onError?: (code: SDKErrorCode | string, message: string) => void`
-Called when an error occurs in the widget.
-
-**Error Codes:**
-- `TOKEN_EXPIRED` - The access token has expired
-- `PARSE_ERROR` - Failed to parse a message from the widget
-- `WEBVIEW_ERROR` - The WebView failed to load
-
-```typescript
-<WidgetSDK
-  onError={(code, message) => {
-    console.error(`Widget error [${code}]: ${message}`);
-
-    if (code === 'TOKEN_EXPIRED') {
-      // Refresh token and reload
-      refreshAuth();
-    }
-  }}
-/>
-```
-
-#### `onClose?: () => void`
-Called when the user requests to close the widget.
-
-```typescript
-<WidgetSDK
-  onClose={() => {
-    navigation.goBack();
-  }}
-/>
-```
-
-#### `onTransactionRequested?: (token, cryptoAmount, depositAddress, depositAddressTag) => void`
-Called when a crypto transaction is requested.
-
-```typescript
-<WidgetSDK
-  onTransactionRequested={(token, cryptoAmount, depositAddress, depositAddressTag) => {
-    console.log(`Send ${cryptoAmount} ${token.symbol} to ${depositAddress}`);
-    // Navigate to your send crypto screen
-    navigation.navigate('SendCrypto', {
-      token,
-      amount: cryptoAmount,
-      address: depositAddress,
-      tag: depositAddressTag,
-    });
-  }}
-/>
-```
-
-#### `onLoadingChange?: (isLoading: boolean) => void`
-Called when the loading state changes.
-
-```typescript
-<WidgetSDK
-  onLoadingChange={(isLoading) => {
-    setShowCustomLoader(isLoading);
-  }}
-/>
-```
-
-## Ref Methods
-
-You can control the widget programmatically using a ref:
-
-```typescript
-import { useRef } from 'react';
-import { WidgetSDK, WidgetSDKRef } from '@oobit/react-native-sdk';
-
-function MyScreen() {
-  const widgetRef = useRef<WidgetSDKRef>(null);
-
-  const handleBackPress = () => {
-    widgetRef.current?.navigateBack();
-  };
-
-  const handleRetry = () => {
-    widgetRef.current?.reload();
-  };
+```tsx
+import { WidgetSDK } from "@oobit/react-native-sdk";
 
+function PaymentScreen() {
   return (
     <WidgetSDK
-      ref={widgetRef}
-      accessToken={token}
-      userWalletAddress={address}
+      accessToken="prod_your-jwt-token"
+      userWalletAddress="0x1234..."
+      onTransactionRequested={(transaction) => {
+        // Navigate to your transaction confirmation screen
+        navigation.navigate("ConfirmTransaction", { transaction });
+      }}
+      onClose={() => navigation.goBack()}
     />
   );
 }
 ```
 
-### Available Methods
-
-| Method | Description |
-|--------|-------------|
-| `navigateBack()` | Navigate back within the widget |
-| `reload()` | Reload the widget |
-
-## TypeScript Support
-
-The SDK is fully typed. Import types as needed:
-
-```typescript
-import type {
-  WidgetSDKConfig,
-  WidgetSDKRef,
-  SDKErrorCode,
-  DepositToken,
-} from '@oobit/react-native-sdk';
-```
-
-### Message Type Constants
-
-For advanced use cases where you need to handle messages directly:
-
-```typescript
-import { MessageTypes } from '@oobit/react-native-sdk';
-
-// Use constants instead of strings
-if (message.type === MessageTypes.ERROR) {
-  // Handle error
-}
-```
-
-## Native Wallet Integration
-
-The SDK automatically handles adding cards to Apple Wallet (iOS) and Google Pay (Android).
-
-You can also manually open the wallet from your React Native app:
-
-```typescript
-import { openNativeWallet, isWalletAvailable } from '@oobit/react-native-sdk';
-
-// Check if wallet is available
-const available = await isWalletAvailable();
-
-if (available) {
-  // Open native wallet
-  await openNativeWallet();
-}
-```
-
-## Platform Support
-
-| Platform | Supported | Notes |
-|----------|-----------|-------|
-| iOS | ✅ | Includes Apple Wallet integration |
-| Android | ✅ | Includes Google Pay integration |
-| Web | ❌ | React Native only |
-
-## Complete Example
-
-```typescript
-import React, { useState, useRef } from 'react';
-import { View, Button, StyleSheet, Alert } from 'react-native';
-import { WidgetSDK, WidgetSDKRef } from '@oobit/react-native-sdk';
-
-export default function PaymentScreen() {
-  const [showWidget, setShowWidget] = useState(false);
-  const widgetRef = useRef<WidgetSDKRef>(null);
-
-  if (showWidget) {
-    return (
-      <View style={styles.container}>
-        <WidgetSDK
-          ref={widgetRef}
-          accessToken="your-jwt-token"
-          userWalletAddress="0x1234..."
-          environment="production"
-          debug={__DEV__}
-          onReady={() => {
-            console.log('Widget ready');
-          }}
-          onError={(code, message) => {
-            Alert.alert('Error', `${code}: ${message}`);
-            if (code === 'WEBVIEW_ERROR') {
-              // Offer retry option
-              Alert.alert('Error', 'Failed to load. Retry?', [
-                { text: 'Cancel', onPress: () => setShowWidget(false) },
-                { text: 'Retry', onPress: () => widgetRef.current?.reload() },
-              ]);
-            }
-          }}
-          onClose={() => {
-            setShowWidget(false);
-          }}
-          onTransactionRequested={(token, amount, address, tag) => {
-            Alert.alert(
-              'Transaction Requested',
-              `Send ${amount} ${token.symbol} to ${address}`,
-            );
-          }}
-          onLoadingChange={(isLoading) => {
-            console.log('Loading:', isLoading);
-          }}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      <Button
-        title="Open Payment Widget"
-        onPress={() => setShowWidget(true)}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-```
-
-## Dependencies
-
-### Required Peer Dependencies
-
-```json
-{
-  "react": ">=18.0.0",
-  "react-native": ">=0.70.0",
-  "react-native-webview": ">=13.0.0",
-  "expo-linking": ">=6.0.0",
-  "expo-clipboard": ">=5.0.0",
-  "expo-intent-launcher": ">=6.0.0",
-  "expo-local-authentication": ">=14.0.0"
-}
-```
-
-## Troubleshooting
-
-### Widget Not Loading
-
-1. Verify `accessToken` is valid and not expired
-2. Check that `userWalletAddress` is a valid address
-3. Enable `debug={true}` to see console logs
-4. Verify all peer dependencies are installed
-
-### Callbacks Not Firing
-
-1. Enable debug mode to see message logs
-2. Check that your widget is sending proper postMessage events
-3. Verify message format matches expected structure
-
-### Error: TOKEN_EXPIRED
+## Documentation
 
-The access token has expired. Fetch a new token from your backend and re-render the widget with the new token.
+For complete documentation, guides, and API reference, visit:
 
-### Error: WEBVIEW_ERROR
+**[Oobit Developer Docs](https://docs.oobit.com/docs/getting-started)**
 
-The WebView failed to load. This could be a network issue. Use `widgetRef.current?.reload()` to retry.
+- [Getting Started](https://docs.oobit.com/docs/getting-started) - Installation and setup
+- [Component Reference](https://docs.oobit.com/docs/component) - Props and methods
+- [Handling Transactions](https://docs.oobit.com/docs/transactions) - Transaction flow guide
+- [TypeScript Types](https://docs.oobit.com/docs/types) - Type definitions
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oobit/react-native-sdk",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "React Native SDK for integrating Oobit crypto payments into wallet apps",
   "main": "dist/index.js",
   "module": "dist/index.js",