@blazium/ton-connect-mobile 1.1.1 → 1.1.2

package/src/react/TonConnectButton.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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 {
+        await tonConnectUI.openModal();
+        await tonConnectUI.connectWallet();
+      }
+    } 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';
+

package/src/types/index.ts

@@ -82,9 +82,9 @@ export interface ConnectionRequestPayload {
     name: 'ton_addr';
   }>;
   /** Return strategy - how wallet should return to the app */
-  returnStrategy?: 'back' | 'none';
-  // NOTE: returnScheme is NOT part of the official TON Connect protocol
-  // For mobile apps, wallets should handle callbacks based on the manifest URL
+  returnStrategy?: 'back' | 'post_redirect' | 'none';
+  /** Return scheme for mobile apps (required by many wallets for proper callback handling) */
+  returnScheme?: string;
 }
 
 /**
@@ -143,7 +143,7 @@ export interface TransactionRequestPayload {
   /** Return URL scheme (for mobile apps) */
   returnScheme?: string;
   /** Return strategy */
-  returnStrategy?: 'back' | 'none';
+  returnStrategy?: 'back' | 'post_redirect' | 'none';
 }
 
 /**