@blazium/ton-connect-mobile 1.1.1 → 1.1.3

package/src/index.ts

@@ -22,11 +22,13 @@ import {
   validateConnectionResponse,
   validateTransactionRequest,
   validateTransactionResponse,
+  decodeBase64URL,
 } from './core/protocol';
 import type {
   ConnectionResponsePayload,
   TransactionResponsePayload,
   ErrorResponse,
+  ConnectionRequestPayload,
 } from './types';
 import { verifyConnectionProof, generateSessionId } from './core/crypto';
 import { ExpoAdapter } from './adapters/expo';
@@ -99,6 +101,11 @@ export class TonConnectMobile {
     reject: (error: Error) => void;
     timeout: number | null;
   } | null = null;
+  private signDataPromise: {
+    resolve: (response: { signature: string; timestamp: number }) => void;
+    reject: (error: Error) => void;
+    timeout: number | null;
+  } | null = null;
 
   constructor(config: TonConnectMobileConfig) {
     // Validate config
@@ -219,6 +226,41 @@ export class TonConnectMobile {
     const parsed = parseCallbackURL(url, this.config.scheme);
     console.log('[TON Connect] Parsed callback:', parsed.type, parsed.data ? 'has data' : 'no data');
 
+    // CRITICAL FIX: Check for sign data response first (before other handlers)
+    if (this.signDataPromise && !this.signDataPromise.timeout) {
+      // Sign data request is pending
+      if (parsed.type === 'error' && parsed.data) {
+        const errorData = parsed.data as ErrorResponse;
+        if (errorData?.error) {
+          const promise = this.signDataPromise;
+          this.signDataPromise = null;
+          if (errorData.error.code === 300) {
+            promise.reject(new UserRejectedError());
+          } else {
+            promise.reject(new TonConnectError(errorData.error.message || 'Sign data failed'));
+          }
+          return;
+        }
+      }
+
+      // Check for sign data response format
+      // Note: TON Connect protocol may return sign data in different format
+      // We check for signature field in the response
+      if (parsed.data && typeof parsed.data === 'object') {
+        const data = parsed.data as any;
+        if (data.signature && typeof data.signature === 'string') {
+          const promise = this.signDataPromise;
+          this.signDataPromise = null;
+          promise.resolve({
+            signature: data.signature,
+            timestamp: data.timestamp || Date.now(),
+          });
+          return;
+        }
+      }
+    }
+
+    // Handle connection responses
     if (parsed.type === 'connect' && parsed.data) {
       this.handleConnectionResponse(parsed.data as ConnectionResponsePayload);
     } else if (parsed.type === 'transaction' && parsed.data) {
@@ -349,11 +391,35 @@ export class TonConnectMobile {
     // Build connection request URL (use wallet's universal link)
     console.log('[TON Connect] Building connection request URL for wallet:', this.currentWallet.name);
     console.log('[TON Connect] Using universal link:', this.currentWallet.universalLink);
-    const url = buildConnectionRequest(this.config.manifestUrl, this.config.scheme, this.currentWallet.universalLink);
-    console.log('[TON Connect] Built URL:', url.substring(0, 100) + '...');
+    console.log('[TON Connect] Wallet return strategy:', this.currentWallet.preferredReturnStrategy || 'back');
+    console.log('[TON Connect] Wallet requires returnScheme:', this.currentWallet.requiresReturnScheme !== false);
+    
+    const url = buildConnectionRequest(
+      this.config.manifestUrl,
+      this.config.scheme,
+      this.currentWallet.universalLink,
+      this.currentWallet.preferredReturnStrategy,
+      this.currentWallet.requiresReturnScheme
+    );
     
-    // DEBUG: Log the URL being opened
-    console.log('[TON Connect] Opening URL:', url);
+    // DEBUG: Decode and log the payload for debugging
+    try {
+      const urlParts = url.split('?');
+      if (urlParts.length > 1) {
+        const payload = urlParts[1];
+        // CRITICAL FIX: Handle URL encoding - payload might have additional encoding
+        const cleanPayload = decodeURIComponent(payload);
+        const decoded = decodeBase64URL<ConnectionRequestPayload>(cleanPayload);
+        console.log('[TON Connect] Connection request payload:', JSON.stringify(decoded, null, 2));
+      }
+    } catch (e: any) {
+      // Log decode errors for debugging but don't fail
+      console.log('[TON Connect] Could not decode payload for logging:', e?.message || e);
+      // This is just for logging, the actual URL is correct
+    }
+    
+    console.log('[TON Connect] Built URL:', url.substring(0, 100) + '...');
+    console.log('[TON Connect] Full URL:', url);
     console.log('[TON Connect] Manifest URL:', this.config.manifestUrl);
     console.log('[TON Connect] Return scheme:', this.config.scheme);
     console.log('[TON Connect] Adapter type:', this.adapter.constructor.name);
@@ -437,7 +503,14 @@ export class TonConnectMobile {
     }
 
     // Build transaction request URL (use universal link for Android compatibility)
-    const url = buildTransactionRequest(this.config.manifestUrl, request, this.config.scheme, this.currentWallet.universalLink);
+    const url = buildTransactionRequest(
+      this.config.manifestUrl,
+      request,
+      this.config.scheme,
+      this.currentWallet.universalLink,
+      this.currentWallet.preferredReturnStrategy,
+      this.currentWallet.requiresReturnScheme
+    );
 
     // Create promise for transaction
     return new Promise<{ boc: string; signature: string }>((resolve, reject) => {
@@ -490,6 +563,156 @@ export class TonConnectMobile {
     });
   }
 
+  /**
+   * Sign data (for authentication, etc.)
+   * Note: Not all wallets support signData. This is a TON Connect extension.
+   */
+  async signData(data: string | Uint8Array, version: string = '1.0'): Promise<{ signature: string; timestamp: number }> {
+    // Check if connected
+    if (!this.currentStatus.connected || !this.currentStatus.wallet) {
+      throw new TonConnectError('Not connected to wallet. Call connect() first.');
+    }
+
+    // Helper function to encode bytes to base64
+    const base64EncodeBytes = (bytes: Uint8Array): string => {
+      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+      let result = '';
+      let i = 0;
+      
+      while (i < bytes.length) {
+        const a = bytes[i++];
+        const b = i < bytes.length ? bytes[i++] : 0;
+        const c = i < bytes.length ? bytes[i++] : 0;
+        
+        const bitmap = (a << 16) | (b << 8) | c;
+        
+        result += chars.charAt((bitmap >> 18) & 63);
+        result += chars.charAt((bitmap >> 12) & 63);
+        result += i - 2 < bytes.length ? chars.charAt((bitmap >> 6) & 63) : '=';
+        result += i - 1 < bytes.length ? chars.charAt(bitmap & 63) : '=';
+      }
+      
+      return result;
+    };
+
+    // Helper function to get TextEncoder
+    const getTextEncoder = (): { encode(input: string): Uint8Array } => {
+      // eslint-disable-next-line no-undef
+      if (typeof globalThis !== 'undefined' && (globalThis as any).TextEncoder) {
+        // eslint-disable-next-line no-undef
+        return new (globalThis as any).TextEncoder();
+      }
+      // Fallback: manual encoding
+      return {
+        encode(input: string): Uint8Array {
+          const bytes = new Uint8Array(input.length);
+          for (let i = 0; i < input.length; i++) {
+            bytes[i] = input.charCodeAt(i);
+          }
+          return bytes;
+        },
+      };
+    };
+
+    // Convert data to base64
+    let dataBase64: string;
+    if (typeof data === 'string') {
+      // Check if it's already base64
+      const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
+      if (base64Regex.test(data) && data.length % 4 === 0) {
+        // Likely base64, use as-is
+        dataBase64 = data;
+      } else {
+        // Not base64, encode it
+        const encoder = getTextEncoder();
+        const bytes = encoder.encode(data);
+        dataBase64 = base64EncodeBytes(bytes);
+      }
+    } else {
+      // Uint8Array - convert to base64
+      dataBase64 = base64EncodeBytes(data);
+    }
+
+    // Build sign data request
+    const payload = {
+      manifestUrl: this.config.manifestUrl,
+      data: dataBase64,
+      version,
+      returnStrategy: this.currentWallet.preferredReturnStrategy || 'back',
+      returnScheme: this.currentWallet.requiresReturnScheme !== false ? this.config.scheme : undefined,
+    };
+
+    // Encode payload
+    const { encodeBase64URL } = require('./core/protocol');
+    const encoded = encodeBase64URL(payload);
+
+    // Build URL
+    const baseUrl = this.currentWallet.universalLink.endsWith('/ton-connect')
+      ? this.currentWallet.universalLink
+      : `${this.currentWallet.universalLink}/ton-connect`;
+    const url = `${baseUrl}/sign-data?${encoded}`;
+
+    // Open wallet app and wait for response
+    return new Promise<{ signature: string; timestamp: number }>((resolve, reject) => {
+      let timeout: number | null = null;
+      let resolved = false;
+
+      // CRITICAL FIX: Check if sign data is already in progress
+      if (this.signDataPromise) {
+        throw new TonConnectError('Sign data request already in progress');
+      }
+
+      // Create promise for sign data
+      const signDataPromise = {
+        resolve: (response: { signature: string; timestamp: number }) => {
+          if (timeout !== null) {
+            clearTimeout(timeout);
+          }
+          resolved = true;
+          if (this.signDataPromise === signDataPromise) {
+            this.signDataPromise = null;
+          }
+          resolve(response);
+        },
+        reject: (error: Error) => {
+          if (timeout !== null) {
+            clearTimeout(timeout);
+          }
+          resolved = true;
+          if (this.signDataPromise === signDataPromise) {
+            this.signDataPromise = null;
+          }
+          reject(error);
+        },
+        timeout: null as number | null,
+      };
+
+      // Set timeout
+      timeout = setTimeout(() => {
+        if (!resolved && this.signDataPromise === signDataPromise) {
+          this.signDataPromise = null;
+          signDataPromise.reject(new TonConnectError('Sign data request timed out'));
+        }
+      }, this.config.transactionTimeout) as unknown as number;
+
+      signDataPromise.timeout = timeout;
+
+      // Store promise for callback handling
+      // CRITICAL FIX: Don't mutate handleCallback method - use a separate tracking mechanism
+      this.signDataPromise = signDataPromise;
+
+      // Open URL
+      this.adapter.openURL(url, this.config.skipCanOpenURLCheck).then(() => {
+        // URL opened, wait for callback
+        // Callback will be handled by handleCallback method checking signDataPromise
+      }).catch((error: Error) => {
+        // Clear promise on error
+        this.signDataPromise = null;
+        signDataPromise.reject(new TonConnectError(`Failed to open wallet: ${error?.message || String(error)}`));
+      });
+    });
+  }
+
   /**
    * Disconnect from wallet
    */
@@ -688,6 +911,7 @@ export class TonConnectMobile {
     this.statusChangeCallbacks.clear();
     this.connectionPromise = null;
     this.transactionPromise = null;
+    this.signDataPromise = null;
   }
 }
 

package/src/react/TonConnectButton.tsx

@@ -0,0 +1,107 @@
+/**
+ * TonConnectButton component
+ * Compatible with @tonconnect/ui-react TonConnectButton
+ */
+
+import React, { useState } from 'react';
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, ViewStyle, TextStyle } from 'react-native';
+import { useTonConnectUI, useTonWallet } from './index';
+
+export interface TonConnectButtonProps {
+  /** Button text when disconnected */
+  text?: string;
+  /** Button text when connected */
+  connectedText?: string;
+  /** Custom styles */
+  style?: ViewStyle;
+  /** Custom text styles */
+  textStyle?: TextStyle;
+  /** Callback when button is pressed */
+  onPress?: () => void;
+}
+
+/**
+ * TonConnectButton - Button component for connecting/disconnecting wallet
+ * Compatible with @tonconnect/ui-react TonConnectButton
+ */
+export function TonConnectButton({
+  text = 'Connect Wallet',
+  connectedText = 'Disconnect',
+  style,
+  textStyle,
+  onPress,
+}: TonConnectButtonProps): JSX.Element {
+  const tonConnectUI = useTonConnectUI();
+  const wallet = useTonWallet();
+  const isConnected = wallet?.connected || false;
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlePress = async () => {
+    // CRITICAL FIX: Prevent multiple simultaneous presses
+    if (isLoading) {
+      return;
+    }
+
+    if (onPress) {
+      onPress();
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      if (isConnected) {
+        await tonConnectUI.disconnect();
+      } else {
+        // CRITICAL FIX: Only open modal, don't auto-connect
+        // The modal should handle wallet selection and connection
+        // This allows users to choose which wallet to connect
+        await tonConnectUI.openModal();
+        // Note: connectWallet() should be called by the modal/wallet selection UI
+        // Not automatically here, to allow wallet selection
+      }
+    } catch (error) {
+      // CRITICAL FIX: Handle errors gracefully
+      console.error('TonConnectButton error:', error);
+      // Error is already handled by the SDK/UI, just reset loading state
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[styles.button, style, isLoading && styles.buttonDisabled]}
+      onPress={handlePress}
+      disabled={isLoading}
+    >
+      {isLoading ? (
+        <ActivityIndicator color="#ffffff" />
+      ) : (
+        <Text style={[styles.buttonText, textStyle]}>
+          {isConnected ? connectedText : text}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: '#0088cc',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+

package/src/react/TonConnectUIProvider.tsx

@@ -0,0 +1,290 @@
+/**
+ * React integration layer for @tonconnect/ui-react compatibility
+ * Provides TonConnectUIProvider, hooks, and components compatible with @tonconnect/ui-react API
+ */
+
+import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import { TonConnectMobile, ConnectionStatus, WalletInfo, SendTransactionRequest } from '../index';
+import type { TonConnectMobileConfig } from '../types';
+
+/**
+ * Account information (compatible with @tonconnect/ui-react)
+ */
+export interface Account {
+  address: string;
+  chain: number;
+  publicKey?: string;
+}
+
+/**
+ * Wallet state (compatible with @tonconnect/ui-react)
+ */
+export interface WalletState {
+  account: Account | null;
+  wallet: WalletInfo | null;
+  connected: boolean;
+}
+
+/**
+ * Transaction response (compatible with @tonconnect/ui-react)
+ */
+export interface TransactionResponse {
+  boc: string;
+  signature: string;
+}
+
+/**
+ * Sign data request
+ */
+export interface SignDataRequest {
+  /** Data to sign (will be base64 encoded) */
+  data: string | Uint8Array;
+  /** Optional version */
+  version?: string;
+}
+
+/**
+ * Sign data response
+ */
+export interface SignDataResponse {
+  signature: string;
+  timestamp: number;
+}
+
+/**
+ * TonConnect UI instance interface (compatible with @tonconnect/ui-react)
+ */
+export interface TonConnectUI {
+  /** Open connection modal */
+  openModal: () => Promise<void>;
+  /** Close connection modal */
+  closeModal: () => void;
+  /** Connect to wallet */
+  connectWallet: () => Promise<void>;
+  /** Disconnect from wallet */
+  disconnect: () => Promise<void>;
+  /** Send transaction */
+  sendTransaction: (transaction: SendTransactionRequest) => Promise<TransactionResponse>;
+  /** Sign data */
+  signData: (request: SignDataRequest) => Promise<SignDataResponse>;
+  /** Current wallet state */
+  wallet: WalletState | null;
+  /** Modal open state */
+  modalState: {
+    open: boolean;
+  };
+  /** UI kit version */
+  uiVersion: string;
+}
+
+/**
+ * Context value
+ */
+interface TonConnectUIContextValue {
+  tonConnectUI: TonConnectUI;
+  sdk: TonConnectMobile;
+}
+
+const TonConnectUIContext = createContext<TonConnectUIContextValue | null>(null);
+
+/**
+ * TonConnectUIProvider props
+ */
+export interface TonConnectUIProviderProps {
+  /** SDK configuration */
+  config: TonConnectMobileConfig;
+  /** Children */
+  children: ReactNode;
+  /** Optional SDK instance (for testing or custom instances) */
+  sdkInstance?: TonConnectMobile;
+}
+
+/**
+ * TonConnectUIProvider - React context provider for TON Connect
+ * Compatible with @tonconnect/ui-react API
+ */
+export function TonConnectUIProvider({
+  config,
+  children,
+  sdkInstance,
+}: TonConnectUIProviderProps): JSX.Element {
+  const [sdk] = useState<TonConnectMobile>(() => sdkInstance || new TonConnectMobile(config));
+  const [walletState, setWalletState] = useState<WalletState | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+
+  // Update wallet state from SDK status
+  const updateWalletState = useCallback((status: ConnectionStatus) => {
+    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
+  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 = useCallback(async () => {
+    setModalOpen(true);
+  }, []);
+
+  // Close modal
+  const closeModal = useCallback(() => {
+    setModalOpen(false);
+    setIsConnecting(false);
+  }, []);
+
+  // Connect wallet
+  const connectWallet = 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 = useCallback(async () => {
+    await sdk.disconnect();
+    setModalOpen(false);
+  }, [sdk]);
+
+  // Send transaction
+  const sendTransaction = useCallback(
+    async (transaction: SendTransactionRequest): Promise<TransactionResponse> => {
+      const response = await sdk.sendTransaction(transaction);
+      return {
+        boc: response.boc,
+        signature: response.signature,
+      };
+    },
+    [sdk]
+  );
+
+  // Sign data
+  const signData = useCallback(
+    async (request: SignDataRequest): Promise<SignDataResponse> => {
+      const response = await sdk.signData(request.data, request.version);
+      return {
+        signature: response.signature,
+        timestamp: response.timestamp,
+      };
+    },
+    [sdk]
+  );
+
+  // Create TonConnectUI instance
+  const tonConnectUI: TonConnectUI = {
+    openModal,
+    closeModal,
+    connectWallet,
+    disconnect,
+    sendTransaction,
+    signData,
+    wallet: walletState,
+    modalState: {
+      open: modalOpen,
+    },
+    uiVersion: '1.0.0',
+  };
+
+  const contextValue: TonConnectUIContextValue = {
+    tonConnectUI,
+    sdk,
+  };
+
+  return <TonConnectUIContext.Provider value={contextValue}>{children}</TonConnectUIContext.Provider>;
+}
+
+/**
+ * Hook to access TonConnectUI instance
+ * Compatible with @tonconnect/ui-react useTonConnectUI hook
+ */
+export function useTonConnectUI(): TonConnectUI {
+  const context = 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
+ */
+export function useTonWallet(): WalletState | null {
+  const tonConnectUI = useTonConnectUI();
+  return tonConnectUI.wallet;
+}
+
+/**
+ * Hook to access modal state
+ * Compatible with @tonconnect/ui-react useTonConnectModal hook
+ */
+export function useTonConnectModal(): { open: boolean; close: () => void; openModal: () => Promise<void> } {
+  const tonConnectUI = useTonConnectUI();
+  return {
+    open: tonConnectUI.modalState.open,
+    close: tonConnectUI.closeModal,
+    openModal: tonConnectUI.openModal,
+  };
+}
+
+/**
+ * Hook to access SDK instance (for advanced usage)
+ */
+export function useTonConnectSDK(): TonConnectMobile {
+  const context = useContext(TonConnectUIContext);
+  if (!context) {
+    throw new Error('useTonConnectSDK must be used within TonConnectUIProvider');
+  }
+  return context.sdk;
+}
+

package/src/react/index.ts

@@ -0,0 +1,24 @@
+/**
+ * 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';
+