@oobit/react-native-sdk 1.0.0

package/dist/walletUtils.js

@@ -0,0 +1,192 @@
+"use strict";
+/**
+ * Wallet Integration Utilities
+ * Handles opening Apple Wallet (iOS) and Google Wallet (Android)
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isWalletAvailable = exports.openNativeWallet = void 0;
+const IntentLauncher = __importStar(require("expo-intent-launcher"));
+const react_native_1 = require("react-native");
+const types_1 = require("./types");
+/**
+ * Opens the native wallet app based on platform
+ * @returns Promise that resolves when wallet opens successfully
+ */
+const openNativeWallet = async () => {
+    try {
+        if (react_native_1.Platform.OS === "ios") {
+            return await openAppleWallet();
+        }
+        else if (react_native_1.Platform.OS === "android") {
+            return await openGoogleWallet();
+        }
+        else {
+            console.warn("Wallet opening not supported on this platform");
+            return false;
+        }
+    }
+    catch (error) {
+        console.error("Failed to open wallet:", error);
+        react_native_1.Alert.alert("Error", "Could not open wallet. Please check if the app is installed.");
+        return false;
+    }
+};
+exports.openNativeWallet = openNativeWallet;
+/**
+ * Opens Apple Wallet on iOS
+ * Uses multiple URL schemes in order of reliability
+ */
+const openAppleWallet = async () => {
+    const { passkit, fallback } = types_1.WALLET_URLS.ios;
+    try {
+        console.log("Attempting to open Apple Wallet...");
+        // Method 1: Try wallet:// scheme (documented as working in recent iOS)
+        try {
+            const canOpenWallet = await react_native_1.Linking.canOpenURL("wallet://");
+            if (canOpenWallet) {
+                await react_native_1.Linking.openURL("wallet://");
+                console.log("Successfully opened Apple Wallet via wallet:// scheme");
+                return true;
+            }
+        }
+        catch (walletError) {
+            console.log("wallet:// scheme failed, trying shoebox://:", walletError);
+        }
+        // Method 2: Try shoebox:// scheme (undocumented but widely used)
+        // Note: This is unofficial and could potentially cause App Store rejection
+        try {
+            const canOpenShoebox = await react_native_1.Linking.canOpenURL(passkit);
+            if (canOpenShoebox) {
+                await react_native_1.Linking.openURL(passkit);
+                console.log("Successfully opened Apple Wallet via shoebox:// scheme");
+                return true;
+            }
+        }
+        catch (shoeboxError) {
+            console.log("shoebox:// scheme failed:", shoeboxError);
+        }
+        // Method 3: Fallback to wallet.apple.com (opens in browser)
+        console.log("Direct schemes failed, falling back to web URL");
+        const canOpenFallback = await react_native_1.Linking.canOpenURL(fallback);
+        if (canOpenFallback) {
+            await react_native_1.Linking.openURL(fallback);
+            console.log("Opened wallet.apple.com in browser");
+            return true;
+        }
+        throw new Error("Apple Wallet not available");
+    }
+    catch (error) {
+        console.error("Failed to open Apple Wallet:", error);
+        throw error;
+    }
+};
+/**
+ * Opens Google Wallet on Android
+ * Matches the proven Android native implementation from LinksUtils.kt
+ */
+const openGoogleWallet = async () => {
+    const GOOGLE_WALLET_PACKAGE = "com.google.android.apps.walletnfcrel";
+    try {
+        console.log("Attempting to open Google Wallet...");
+        // First, try using the market:// scheme to just launch the app if it's installed
+        // This is the most reliable way to open an installed app without knowing the exact activity
+        try {
+            const canOpen = await react_native_1.Linking.canOpenURL(`market://launch?id=${GOOGLE_WALLET_PACKAGE}`);
+            console.log("Can open market launch URL:", canOpen);
+            if (canOpen) {
+                await react_native_1.Linking.openURL(`market://launch?id=${GOOGLE_WALLET_PACKAGE}`);
+                console.log("Successfully opened Google Wallet via market:// scheme");
+                return true;
+            }
+        }
+        catch (marketLaunchError) {
+            console.log("Market launch failed, trying intent launcher:", marketLaunchError);
+        }
+        // Fallback: Try intent launcher with ACTION_VIEW (no explicit className)
+        // This should open the app if it handles the VIEW action
+        try {
+            await IntentLauncher.startActivityAsync("android.intent.action.VIEW", {
+                packageName: GOOGLE_WALLET_PACKAGE,
+                flags: 268435456, // FLAG_ACTIVITY_NEW_TASK (0x10000000)
+            });
+            console.log("Successfully opened Google Wallet with VIEW intent");
+            return true;
+        }
+        catch (intentError) {
+            console.log("Intent launcher failed:", intentError);
+            // App is not installed, open Play Store
+            console.log("App appears to not be installed, opening Play Store");
+            try {
+                // Try native Play Store app first
+                const playStoreUrl = `market://details?id=${GOOGLE_WALLET_PACKAGE}`;
+                await react_native_1.Linking.openURL(playStoreUrl);
+                react_native_1.Alert.alert("Google Wallet", "Google Wallet is not installed. Opening Play Store to install the app.");
+                return false;
+            }
+            catch (marketError) {
+                console.log("Market URL failed, trying web Play Store:", marketError);
+                // Fallback to web Play Store
+                await react_native_1.Linking.openURL(`https://play.google.com/store/apps/details?id=${GOOGLE_WALLET_PACKAGE}`);
+                react_native_1.Alert.alert("Google Wallet", "Google Wallet is not installed. Opening Play Store to install the app.");
+                return false;
+            }
+        }
+    }
+    catch (error) {
+        console.error("Failed to open Google Wallet:", error);
+        throw error;
+    }
+};
+/**
+ * Check if wallet is available on the current platform
+ */
+const isWalletAvailable = async () => {
+    try {
+        if (react_native_1.Platform.OS === "ios") {
+            return await react_native_1.Linking.canOpenURL(types_1.WALLET_URLS.ios.passkit);
+        }
+        else if (react_native_1.Platform.OS === "android") {
+            return await react_native_1.Linking.canOpenURL(types_1.WALLET_URLS.android.googlePay);
+        }
+        return false;
+    }
+    catch (error) {
+        console.error("Error checking wallet availability:", error);
+        return false;
+    }
+};
+exports.isWalletAvailable = isWalletAvailable;
+//# sourceMappingURL=walletUtils.js.map

package/dist/walletUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"walletUtils.js","sourceRoot":"","sources":["../src/walletUtils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@oobit/react-native-sdk",
+  "version": "1.0.0",
+  "description": "React Native/Expo SDK for embedding web widgets with native wallet integration",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "react-native": "dist/index.js",
+  "source": "src/index.ts",
+  "keywords": [
+    "react-native",
+    "expo",
+    "widget",
+    "webview",
+    "wallet",
+    "sdk"
+  ],
+  "author": "Oobit",
+  "license": "UNLICENSED",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oobit-tech/react-native-SDK.git"
+  },
+  "peerDependencies": {
+    "expo-linking": ">=6.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-webview": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-intent-launcher": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "eslint": "^9.39.1",
+    "expo-intent-launcher": "~13.0.7",
+    "expo-linking": "~8.0.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-webview": "13.15.0",
+    "typescript": "~5.9.2"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/WidgetSDK.tsx

@@ -0,0 +1,292 @@
+/**
+ * Widget SDK Component
+ * Embeds the web widget in a WebView and handles bidirectional communication
+ */
+
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { ActivityIndicator, BackHandler, Linking, Platform, StyleSheet, View } from "react-native";
+import { WebView, WebViewMessageEvent } from "react-native-webview";
+import { WIDGET_CONFIG } from "./config";
+import { WidgetMessage, WidgetSDKConfig } from "./types";
+import { isWalletAvailable, openNativeWallet } from "./walletUtils";
+
+export interface WidgetSDKRef {
+  navigateBack: () => void;
+}
+
+export const WidgetSDK = forwardRef<WidgetSDKRef, WidgetSDKConfig>(
+  (
+    {
+      accessToken,
+      userWalletAddress,
+      onReady,
+      onCardCreated,
+      onError,
+      onClose,
+      onTransactionRequested,
+    },
+    ref
+  ) => {
+    const webViewRef = useRef<WebView>(null);
+    const [walletAvailable, setWalletAvailable] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const hasLoadedOnce = useRef(false);
+
+    // Check wallet availability on mount
+    useEffect(() => {
+      checkWalletAvailability();
+    }, []);
+
+    // Handle Android hardware back button
+    useEffect(() => {
+      const backHandler = BackHandler.addEventListener(
+        "hardwareBackPress",
+        () => {
+          // Send back pressed message to widget
+          sendMessageToWidget({
+            type: "native:back-pressed",
+            timestamp: Date.now(),
+          });
+          // Return true to prevent default back behavior
+          return true;
+        }
+      );
+
+      return () => backHandler.remove();
+    }, []);
+
+    // Expose navigateBack method via ref
+    useImperativeHandle(ref, () => ({
+      navigateBack: () => {
+        sendMessageToWidget({
+          type: "native:navigate-back",
+          timestamp: Date.now(),
+        });
+      },
+    }));
+
+    const checkWalletAvailability = async () => {
+      const available = await isWalletAvailable();
+      setWalletAvailable(available);
+    };
+
+    /**
+     * Handle messages from the web widget
+     */
+    const handleMessage = (event: WebViewMessageEvent) => {
+      try {
+        const message: WidgetMessage = JSON.parse(event.nativeEvent.data);
+
+        console.log("[WidgetSDK] Received message:", message.type);
+
+        switch (message.type) {
+          case "widget:ready":
+            handleReady();
+            break;
+
+          case "widget:open-wallet":
+            handleOpenWallet();
+            break;
+
+          case "widget:card-created":
+            handleCardCreated(message);
+            break;
+
+          case "widget:error":
+            handleError(message);
+            break;
+
+          case "widget:close":
+            handleClose();
+            break;
+
+          case "widget:transaction-requested":
+            handleTransactionRequested(message);
+            break;
+
+          case "widget:token-expired":
+            console.error("[WidgetSDK] Access token expired");
+            onError?.("TOKEN_EXPIRED", "Access token has expired");
+            break;
+
+          default:
+            console.warn("[WidgetSDK] Unknown message type:", message);
+        }
+      } catch (error) {
+        console.error("[WidgetSDK] Failed to parse message:", error);
+        onError?.("PARSE_ERROR", "Failed to parse widget message");
+      }
+    };
+
+    const handleReady = () => {
+      console.log("[WidgetSDK] Widget ready");
+      onReady?.();
+
+      // Send platform info to widget
+      sendMessageToWidget({
+        type: "native:platform-info",
+        payload: {
+          platform: Platform.OS,
+          walletAvailable,
+        },
+      });
+    };
+
+    const handleOpenWallet = async () => {
+      console.log("[WidgetSDK] Opening native wallet...");
+
+      const success = await openNativeWallet();
+
+      // Notify widget of result
+      sendMessageToWidget({
+        type: "native:wallet-opened",
+        payload: { success },
+      });
+    };
+
+    const handleCardCreated = (message: WidgetMessage) => {
+      if (message.type !== "widget:card-created") return;
+
+      const { cardId, cardType, last4 } = message.payload;
+      console.log("[WidgetSDK] Card created:", cardId);
+
+      onCardCreated?.(cardId, cardType, last4);
+    };
+
+    const handleError = (message: WidgetMessage) => {
+      if (message.type !== "widget:error") return;
+
+      const { code, message: errorMessage } = message.payload;
+      console.error("[WidgetSDK] Widget error:", code, errorMessage);
+
+      onError?.(code, errorMessage);
+    };
+
+    const handleClose = () => {
+      console.log("[WidgetSDK] Widget closed");
+      onClose?.();
+    };
+
+    const handleTransactionRequested = (message: WidgetMessage) => {
+      if (message.type !== "widget:transaction-requested") return;
+
+      const { token, cryptoAmount, depositAddress, depositAddressTag } = message.payload;
+      console.log("[WidgetSDK] Transaction requested:", {
+        token,
+        cryptoAmount,
+        depositAddress,
+        depositAddressTag,
+      });
+
+      onTransactionRequested?.(token, cryptoAmount, depositAddress, depositAddressTag);
+    };
+
+    /**
+     * Send message to the web widget
+     */
+    const sendMessageToWidget = (message: any) => {
+      const js = `
+      window.postMessage(${JSON.stringify(message)}, '*');
+      true;
+    `;
+
+      webViewRef.current?.injectJavaScript(js);
+    };
+
+    /**
+     * Build the widget URL with query parameters
+     */
+    const finalWidgetUrl = useMemo(() => {
+      // Construct URL with token, platform, and wallet address
+      const params = new URLSearchParams({
+        token: accessToken,
+        platform: Platform.OS,
+        userWalletAddress: userWalletAddress,
+      });
+
+      const url = `${WIDGET_CONFIG.URL}?${params.toString()}`;
+      console.log("[WidgetSDK] Widget URL:", url.substring(0, 100) + "...");
+      return url;
+    }, [accessToken, userWalletAddress]);
+
+    return (
+      <View style={styles.container}>
+        <WebView
+          ref={webViewRef}
+          style={styles.webview}
+          source={{ uri: finalWidgetUrl }}
+          onMessage={handleMessage}
+          onLoadEnd={() => {
+            if (!hasLoadedOnce.current) {
+              hasLoadedOnce.current = true;
+              setIsLoading(false);
+            }
+          }}
+          onError={(syntheticEvent) => {
+            const { nativeEvent } = syntheticEvent;
+            console.error("[WidgetSDK] WebView error:", nativeEvent);
+            setIsLoading(false);
+            onError?.("WEBVIEW_ERROR", "Failed to load widget");
+          }}
+          // IMPORTANT: Allow external URLs to open in native apps
+          onShouldStartLoadWithRequest={(request) => {
+            const { url } = request;
+
+            // Allow wallet URLs to open in native apps
+            if (
+              url.startsWith("shoebox://") || // Apple Wallet
+              url.includes("pay.google.com") || // Google Wallet
+              url.includes("wallet.google.com") ||
+              url.includes("wallet.apple.com")
+            ) {
+              console.log("[WidgetSDK] Opening external URL:", url);
+              Linking.openURL(url).catch((err) => {
+                console.error("[WidgetSDK] Failed to open URL:", err);
+              });
+              return false; // Don't load in WebView
+            }
+
+            // Allow normal widget navigation
+            return true;
+          }}
+          // Security settings
+          javaScriptEnabled={true}
+          domStorageEnabled={true}
+          allowsInlineMediaPlayback={true}
+          // iOS specific
+          bounces={false}
+          allowsBackForwardNavigationGestures={true}
+          // Android specific
+          mixedContentMode="always"
+        />
+        {isLoading && (
+          <View style={styles.loadingOverlay}>
+            <ActivityIndicator size="large" color="#007AFF" />
+          </View>
+        )}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  webview: {
+    flex: 1,
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/config.ts

@@ -0,0 +1,22 @@
+/**
+ * Widget SDK Configuration
+ * Environment-based configuration for the widget URL
+ */
+
+declare const __DEV__: boolean;
+
+/**
+ * Widget URL configuration
+ * - Development: Uses localhost (update IP for your network)
+ * - Production: Uses production widget URL
+ */
+export const WIDGET_CONFIG = {
+  /**
+   * Base widget URL
+   * In development (__DEV__ = true), uses localhost
+   * In production (__DEV__ = false), uses production URL
+   */
+  URL: __DEV__
+    ? "https://oobit-widget-dev.web.app" // Development: Vite dev server default
+    : "https://widget.oobit.com", // Production: Oobit widget URL
+} as const;

package/src/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Widget SDK - Public API
+ * Export all public components, types, and utilities
+ */
+
+export { WidgetSDK } from './WidgetSDK';
+export type { WidgetSDKRef } from './WidgetSDK';
+
+// Export all message types for clients to use
+export type {
+  // Configuration
+  WidgetSDKConfig,
+  DepositToken,
+
+  // Widget → Native message types
+  WidgetMessageType,
+  BaseWidgetMessage,
+  WidgetMessage,
+  WidgetReadyMessage,
+  OpenWalletMessage,
+  CardCreatedMessage,
+  WidgetErrorMessage,
+  WidgetCloseMessage,
+  TransactionRequestedMessage,
+
+  // Native → Widget message types
+  NativeMessageType,
+  NativeMessage,
+  NativeBackPressedMessage,
+  NativeNavigateBackMessage,
+  NativePlatformInfoMessage,
+  NativeWalletOpenedMessage,
+} from './types';
+
+// Export constants
+export { WALLET_URLS, MessageTypes } from './types';
+export { WIDGET_CONFIG } from './config';
+
+// Export wallet utilities
+export { openNativeWallet, isWalletAvailable } from './walletUtils';