@blazium/ton-connect-mobile 1.1.1 → 1.1.3

package/dist/react/TonConnectUIProvider.js

@@ -0,0 +1,209 @@
+"use strict";
+/**
+ * React integration layer for @tonconnect/ui-react compatibility
+ * Provides TonConnectUIProvider, hooks, and components compatible with @tonconnect/ui-react API
+ */
+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.TonConnectUIProvider = TonConnectUIProvider;
+exports.useTonConnectUI = useTonConnectUI;
+exports.useTonWallet = useTonWallet;
+exports.useTonConnectModal = useTonConnectModal;
+exports.useTonConnectSDK = useTonConnectSDK;
+const react_1 = __importStar(require("react"));
+const index_1 = require("../index");
+const TonConnectUIContext = (0, react_1.createContext)(null);
+/**
+ * TonConnectUIProvider - React context provider for TON Connect
+ * Compatible with @tonconnect/ui-react API
+ */
+function TonConnectUIProvider({ config, children, sdkInstance, }) {
+    const [sdk] = (0, react_1.useState)(() => sdkInstance || new index_1.TonConnectMobile(config));
+    const [walletState, setWalletState] = (0, react_1.useState)(null);
+    const [modalOpen, setModalOpen] = (0, react_1.useState)(false);
+    const [isConnecting, setIsConnecting] = (0, react_1.useState)(false);
+    // Update wallet state from SDK status
+    const updateWalletState = (0, react_1.useCallback)((status) => {
+        if (status.connected && status.wallet) {
+            setWalletState({
+                account: {
+                    address: status.wallet.address,
+                    chain: -239, // TON mainnet chain ID
+                    publicKey: status.wallet.publicKey,
+                },
+                wallet: status.wallet,
+                connected: true,
+            });
+        }
+        else {
+            setWalletState({
+                account: null,
+                wallet: null,
+                connected: false,
+            });
+        }
+    }, []);
+    // Subscribe to SDK status changes
+    (0, react_1.useEffect)(() => {
+        // Set initial state
+        const initialStatus = sdk.getStatus();
+        updateWalletState(initialStatus);
+        // Subscribe to changes
+        const unsubscribe = sdk.onStatusChange((status) => {
+            updateWalletState(status);
+            // Close modal when connected
+            if (status.connected) {
+                setModalOpen(false);
+                setIsConnecting(false);
+            }
+        });
+        return () => {
+            unsubscribe();
+            // CRITICAL FIX: Cleanup SDK on unmount to prevent memory leaks
+            // Note: SDK has its own cleanup via destroy(), but we don't call it here
+            // to allow SDK to persist across component remounts (e.g., navigation)
+        };
+    }, [sdk, updateWalletState]);
+    // Open modal
+    const openModal = (0, react_1.useCallback)(async () => {
+        setModalOpen(true);
+    }, []);
+    // Close modal
+    const closeModal = (0, react_1.useCallback)(() => {
+        setModalOpen(false);
+        setIsConnecting(false);
+    }, []);
+    // Connect wallet
+    const connectWallet = (0, react_1.useCallback)(async () => {
+        // CRITICAL FIX: Use functional update to avoid race condition
+        setIsConnecting((prev) => {
+            if (prev) {
+                // Already connecting, return early
+                return prev;
+            }
+            return true;
+        });
+        // Wait for connection
+        try {
+            await sdk.connect();
+            // Status update will be handled by the subscription
+        }
+        catch (error) {
+            setIsConnecting(false);
+            throw error;
+        }
+    }, [sdk]);
+    // Disconnect
+    const disconnect = (0, react_1.useCallback)(async () => {
+        await sdk.disconnect();
+        setModalOpen(false);
+    }, [sdk]);
+    // Send transaction
+    const sendTransaction = (0, react_1.useCallback)(async (transaction) => {
+        const response = await sdk.sendTransaction(transaction);
+        return {
+            boc: response.boc,
+            signature: response.signature,
+        };
+    }, [sdk]);
+    // Sign data
+    const signData = (0, react_1.useCallback)(async (request) => {
+        const response = await sdk.signData(request.data, request.version);
+        return {
+            signature: response.signature,
+            timestamp: response.timestamp,
+        };
+    }, [sdk]);
+    // Create TonConnectUI instance
+    const tonConnectUI = {
+        openModal,
+        closeModal,
+        connectWallet,
+        disconnect,
+        sendTransaction,
+        signData,
+        wallet: walletState,
+        modalState: {
+            open: modalOpen,
+        },
+        uiVersion: '1.0.0',
+    };
+    const contextValue = {
+        tonConnectUI,
+        sdk,
+    };
+    return react_1.default.createElement(TonConnectUIContext.Provider, { value: contextValue }, children);
+}
+/**
+ * Hook to access TonConnectUI instance
+ * Compatible with @tonconnect/ui-react useTonConnectUI hook
+ */
+function useTonConnectUI() {
+    const context = (0, react_1.useContext)(TonConnectUIContext);
+    if (!context) {
+        throw new Error('useTonConnectUI must be used within TonConnectUIProvider');
+    }
+    return context.tonConnectUI;
+}
+/**
+ * Hook to access wallet state
+ * Compatible with @tonconnect/ui-react useTonWallet hook
+ */
+function useTonWallet() {
+    const tonConnectUI = useTonConnectUI();
+    return tonConnectUI.wallet;
+}
+/**
+ * Hook to access modal state
+ * Compatible with @tonconnect/ui-react useTonConnectModal hook
+ */
+function useTonConnectModal() {
+    const tonConnectUI = useTonConnectUI();
+    return {
+        open: tonConnectUI.modalState.open,
+        close: tonConnectUI.closeModal,
+        openModal: tonConnectUI.openModal,
+    };
+}
+/**
+ * Hook to access SDK instance (for advanced usage)
+ */
+function useTonConnectSDK() {
+    const context = (0, react_1.useContext)(TonConnectUIContext);
+    if (!context) {
+        throw new Error('useTonConnectSDK must be used within TonConnectUIProvider');
+    }
+    return context.sdk;
+}

package/dist/react/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React integration exports
+ * Re-export all React components and hooks
+ */
+export { TonConnectUIProvider, useTonConnectUI, useTonWallet, useTonConnectModal, useTonConnectSDK, } from './TonConnectUIProvider';
+export type { TonConnectUIProviderProps, TonConnectUI, WalletState, Account, TransactionResponse, SignDataRequest, SignDataResponse, } from './TonConnectUIProvider';
+export { TonConnectButton } from './TonConnectButton';
+export type { TonConnectButtonProps } from './TonConnectButton';

package/dist/react/index.js

@@ -0,0 +1,15 @@
+"use strict";
+/**
+ * React integration exports
+ * Re-export all React components and hooks
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TonConnectButton = exports.useTonConnectSDK = exports.useTonConnectModal = exports.useTonWallet = exports.useTonConnectUI = exports.TonConnectUIProvider = void 0;
+var TonConnectUIProvider_1 = require("./TonConnectUIProvider");
+Object.defineProperty(exports, "TonConnectUIProvider", { enumerable: true, get: function () { return TonConnectUIProvider_1.TonConnectUIProvider; } });
+Object.defineProperty(exports, "useTonConnectUI", { enumerable: true, get: function () { return TonConnectUIProvider_1.useTonConnectUI; } });
+Object.defineProperty(exports, "useTonWallet", { enumerable: true, get: function () { return TonConnectUIProvider_1.useTonWallet; } });
+Object.defineProperty(exports, "useTonConnectModal", { enumerable: true, get: function () { return TonConnectUIProvider_1.useTonConnectModal; } });
+Object.defineProperty(exports, "useTonConnectSDK", { enumerable: true, get: function () { return TonConnectUIProvider_1.useTonConnectSDK; } });
+var TonConnectButton_1 = require("./TonConnectButton");
+Object.defineProperty(exports, "TonConnectButton", { enumerable: true, get: function () { return TonConnectButton_1.TonConnectButton; } });

package/dist/react/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/dist/types/index.d.ts

@@ -76,7 +76,9 @@ export interface ConnectionRequestPayload {
         name: 'ton_addr';
     }>;
     /** Return strategy - how wallet should return to the app */
-    returnStrategy?: 'back' | 'none';
+    returnStrategy?: 'back' | 'post_redirect' | 'none';
+    /** Return scheme for mobile apps (required by many wallets for proper callback handling) */
+    returnScheme?: string;
 }
 /**
  * Connection response payload (received from wallet)
@@ -133,7 +135,7 @@ export interface TransactionRequestPayload {
     /** Return URL scheme (for mobile apps) */
     returnScheme?: string;
     /** Return strategy */
-    returnStrategy?: 'back' | 'none';
+    returnStrategy?: 'back' | 'post_redirect' | 'none';
 }
 /**
  * Transaction response payload (received from wallet)

package/package.json

@@ -1,15 +1,27 @@
 {
   "name": "@blazium/ton-connect-mobile",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Production-ready TON Connect Mobile SDK for React Native and Expo. Implements the real TonConnect protocol for mobile applications using deep links and callbacks.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js",
+      "react-native": "./dist/react/index.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/blaziumdev/ton-connect-mobile.git"
   },
   "scripts": {
     "build": "tsc",
+    "postbuild": "node scripts/postbuild.js",
     "prepublishOnly": "npm run build",
     "example": "cd example && npm start"
   },
@@ -31,6 +43,7 @@
     "react-native-get-random-values": "^1.9.0"
   },
   "peerDependencies": {
+    "react": "*",
     "react-native": "*"
   },
   "peerDependenciesMeta": {

package/src/core/protocol.ts

@@ -130,19 +130,25 @@ export function decodeBase64URL<T>(encoded: string): T {
 export function buildConnectionRequest(
   manifestUrl: string,
   returnScheme: string,
-  walletUniversalLink?: string
+  walletUniversalLink?: string,
+  returnStrategy?: 'back' | 'post_redirect' | 'none',
+  requiresReturnScheme?: boolean
 ): string {
-  // TON Connect protocol: payload should only contain manifestUrl, items, and returnStrategy
-  // returnScheme is NOT part of the official protocol payload
-  // For mobile apps, wallets should infer the callback scheme from the manifest or use a default
+  // Build payload with required fields
   const payload: ConnectionRequestPayload = {
     manifestUrl,
     items: [{ name: 'ton_addr' }],
-    returnStrategy: 'back',
-    // NOTE: returnScheme is NOT in the official TON Connect protocol
-    // Wallets should handle mobile app callbacks differently
+    returnStrategy: returnStrategy || 'back',
   };
 
+  // CRITICAL FIX: Many wallets (Tonhub, MyTonWallet, Telegram Wallet) require returnScheme
+  // in the payload to properly handle mobile app callbacks. While not in the official
+  // protocol spec, it's a de-facto requirement for mobile apps.
+  if (requiresReturnScheme !== false) {
+    // Default to true if not specified - safer to include it
+    payload.returnScheme = returnScheme;
+  }
+
   const encoded = encodeBase64URL(payload);
   
   // Use custom wallet universal link if provided
@@ -164,7 +170,9 @@ export function buildTransactionRequest(
   manifestUrl: string,
   request: SendTransactionRequest,
   returnScheme: string,
-  walletUniversalLink?: string
+  walletUniversalLink?: string,
+  returnStrategy?: 'back' | 'post_redirect' | 'none',
+  requiresReturnScheme?: boolean
 ): string {
   const payload: TransactionRequestPayload = {
     manifestUrl,
@@ -179,11 +187,14 @@ export function buildTransactionRequest(
       network: request.network,
       from: request.from,
     },
-    returnStrategy: 'back',
-    // NOTE: returnScheme is NOT in the official TON Connect protocol
-    // Wallets should handle mobile app callbacks differently
+    returnStrategy: returnStrategy || 'back',
   };
 
+  // CRITICAL FIX: Include returnScheme for mobile wallets that require it
+  if (requiresReturnScheme !== false) {
+    payload.returnScheme = returnScheme;
+  }
+
   const encoded = encodeBase64URL(payload);
   
   // Use custom wallet universal link if provided

package/src/core/wallets.ts

@@ -16,6 +16,10 @@ export interface WalletDefinition {
   iconUrl?: string;
   /** Platform support */
   platforms: ('ios' | 'android' | 'web')[];
+  /** Preferred return strategy for this wallet */
+  preferredReturnStrategy?: 'back' | 'post_redirect' | 'none';
+  /** Whether this wallet requires returnScheme in payload */
+  requiresReturnScheme?: boolean;
 }
 
 /**
@@ -28,6 +32,8 @@ export const SUPPORTED_WALLETS: WalletDefinition[] = [
     universalLink: 'https://app.tonkeeper.com/ton-connect',
     deepLink: 'tonkeeper://',
     platforms: ['ios', 'android'],
+    preferredReturnStrategy: 'back',
+    requiresReturnScheme: true, // CRITICAL FIX: Mobile apps need returnScheme for proper callback handling
   },
   {
     name: 'MyTonWallet',
@@ -35,6 +41,8 @@ export const SUPPORTED_WALLETS: WalletDefinition[] = [
     universalLink: 'https://connect.mytonwallet.org',
     deepLink: 'mytonwallet://',
     platforms: ['ios', 'android', 'web'],
+    preferredReturnStrategy: 'post_redirect',
+    requiresReturnScheme: true, // MyTonWallet requires explicit returnScheme
   },
   {
     name: 'Wallet in Telegram',
@@ -42,6 +50,8 @@ export const SUPPORTED_WALLETS: WalletDefinition[] = [
     universalLink: 'https://wallet.tonapi.io/ton-connect',
     deepLink: 'tg://',
     platforms: ['ios', 'android'],
+    preferredReturnStrategy: 'post_redirect',
+    requiresReturnScheme: true, // Telegram Wallet requires explicit returnScheme
   },
   {
     name: 'Tonhub',
@@ -49,6 +59,8 @@ export const SUPPORTED_WALLETS: WalletDefinition[] = [
     universalLink: 'https://tonhub.com/ton-connect',
     deepLink: 'tonhub://',
     platforms: ['ios', 'android'],
+    preferredReturnStrategy: 'post_redirect',
+    requiresReturnScheme: true, // Tonhub requires explicit returnScheme for proper callback
   },
 ];