@blazium/ton-connect-mobile 1.2.0 → 1.2.3

package/src/react/TonConnectUIProvider.tsx

@@ -4,8 +4,8 @@
  */
 
 import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
-import { TonConnectMobile, ConnectionStatus, WalletInfo, SendTransactionRequest } from '../index';
-import type { TonConnectMobileConfig } from '../types';
+import { TonConnectMobile, ConnectionStatus, WalletInfo, SendTransactionRequest, WalletDefinition, Network, BalanceResponse, TransactionStatusResponse } from '../index';
+import type { TonConnectMobileConfig, TonConnectEventType, TonConnectEventListener } from '../types';
 import { WalletSelectionModal } from './WalletSelectionModal';
 
 /**
@@ -54,6 +54,7 @@ export interface SignDataResponse {
 
 /**
  * TonConnect UI instance interface (compatible with @tonconnect/ui-react)
+ * Includes all features from @tonconnect/ui-react for full compatibility
  */
 export interface TonConnectUI {
   /** Open connection modal */
@@ -68,6 +69,24 @@ export interface TonConnectUI {
   sendTransaction: (transaction: SendTransactionRequest) => Promise<TransactionResponse>;
   /** Sign data */
   signData: (request: SignDataRequest) => Promise<SignDataResponse>;
+  /** Restore connection from stored session */
+  restoreConnection: () => Promise<void>;
+  /** Set wallet list (customize available wallets) */
+  setWalletList: (wallets: WalletDefinition[]) => void;
+  /** Get current network */
+  getNetwork: () => Network;
+  /** Set network (mainnet/testnet) */
+  setNetwork: (network: Network) => void;
+  /** Get wallet balance */
+  getBalance: (address?: string) => Promise<BalanceResponse>;
+  /** Get transaction status */
+  getTransactionStatus: (boc: string, maxAttempts?: number, intervalMs?: number) => Promise<TransactionStatusResponse>;
+  /** Get transaction status by hash */
+  getTransactionStatusByHash: (txHash: string, address: string) => Promise<TransactionStatusResponse>;
+  /** Add event listener */
+  on: <T = any>(event: TonConnectEventType, listener: TonConnectEventListener<T>) => () => void;
+  /** Remove event listener */
+  off: <T = any>(event: TonConnectEventType, listener: TonConnectEventListener<T>) => void;
   /** Current wallet state */
   wallet: WalletState | null;
   /** Modal open state */
@@ -109,18 +128,38 @@ export function TonConnectUIProvider({
   children,
   sdkInstance,
 }: TonConnectUIProviderProps): JSX.Element {
-  const [sdk] = useState<TonConnectMobile>(() => sdkInstance || new TonConnectMobile(config));
+  // CRITICAL: Initialize SDK only once
+  const [sdk] = useState<TonConnectMobile>(() => {
+    if (sdkInstance) {
+      return sdkInstance;
+    }
+    try {
+      return new TonConnectMobile(config);
+    } catch (error) {
+      console.error('[TonConnectUIProvider] Failed to initialize SDK:', error);
+      throw error;
+    }
+  });
   const [walletState, setWalletState] = useState<WalletState | null>(null);
   const [modalOpen, setModalOpen] = useState(false);
   const [isConnecting, setIsConnecting] = useState(false);
+  const [customWalletList, setCustomWalletList] = useState<WalletDefinition[] | null>(null);
+
+  // Get chain ID based on network
+  const getChainId = useCallback((network: Network): number => {
+    // TON mainnet chain ID: -239
+    // TON testnet chain ID: -3
+    return network === 'testnet' ? -3 : -239;
+  }, []);
 
   // Update wallet state from SDK status
   const updateWalletState = useCallback((status: ConnectionStatus) => {
     if (status.connected && status.wallet) {
+      const network = sdk.getNetwork();
       setWalletState({
         account: {
           address: status.wallet.address,
-          chain: -239, // TON mainnet chain ID
+          chain: getChainId(network),
           publicKey: status.wallet.publicKey,
         },
         wallet: status.wallet,
@@ -133,7 +172,7 @@ export function TonConnectUIProvider({
         connected: false,
       });
     }
-  }, []);
+  }, [sdk, getChainId]);
 
   // Subscribe to SDK status changes
   useEffect(() => {
@@ -202,11 +241,24 @@ export function TonConnectUIProvider({
   // Send transaction
   const sendTransaction = useCallback(
     async (transaction: SendTransactionRequest): Promise<TransactionResponse> => {
-      const response = await sdk.sendTransaction(transaction);
-      return {
-        boc: response.boc,
-        signature: response.signature,
-      };
+      try {
+        // Validate transaction before sending
+        if (!transaction || !transaction.messages || transaction.messages.length === 0) {
+          throw new Error('Invalid transaction: messages array is required and cannot be empty');
+        }
+        if (!transaction.validUntil || transaction.validUntil <= Date.now()) {
+          throw new Error('Invalid transaction: validUntil must be in the future');
+        }
+
+        const response = await sdk.sendTransaction(transaction);
+        return {
+          boc: response.boc,
+          signature: response.signature,
+        };
+      } catch (error) {
+        console.error('[TonConnectUIProvider] Transaction error:', error);
+        throw error;
+      }
     },
     [sdk]
   );
@@ -214,15 +266,92 @@ export function TonConnectUIProvider({
   // 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,
-      };
+      try {
+        // Validate request
+        if (!request || (!request.data && request.data !== '')) {
+          throw new Error('Invalid sign data request: data is required');
+        }
+
+        const response = await sdk.signData(request.data, request.version);
+        return {
+          signature: response.signature,
+          timestamp: response.timestamp,
+        };
+      } catch (error) {
+        console.error('[TonConnectUIProvider] Sign data error:', error);
+        throw error;
+      }
     },
     [sdk]
   );
 
+  // Restore connection from stored session
+  const restoreConnection = useCallback(async (): Promise<void> => {
+    try {
+      // SDK automatically loads session on initialization
+      // This method triggers a re-check of the stored session
+      const status = sdk.getStatus();
+      if (status.connected && status.wallet) {
+        updateWalletState(status);
+      }
+    } catch (error) {
+      console.error('[TonConnectUIProvider] Restore connection error:', error);
+      throw error;
+    }
+  }, [sdk, updateWalletState]);
+
+  // Set wallet list (customize available wallets)
+  const setWalletList = useCallback((wallets: WalletDefinition[]): void => {
+    if (!wallets || !Array.isArray(wallets)) {
+      throw new Error('Wallet list must be an array');
+    }
+    setCustomWalletList(wallets);
+  }, []);
+
+  // Get network
+  const getNetwork = useCallback((): Network => {
+    return sdk.getNetwork();
+  }, [sdk]);
+
+  // Set network
+  const setNetwork = useCallback((network: Network): void => {
+    sdk.setNetwork(network);
+    // Update wallet state to reflect new chain ID
+    const status = sdk.getStatus();
+    updateWalletState(status);
+  }, [sdk, updateWalletState]);
+
+  // Get balance
+  const getBalance = useCallback(async (address?: string): Promise<BalanceResponse> => {
+    return await sdk.getBalance(address);
+  }, [sdk]);
+
+  // Get transaction status
+  const getTransactionStatus = useCallback(async (
+    boc: string,
+    maxAttempts: number = 10,
+    intervalMs: number = 2000
+  ): Promise<TransactionStatusResponse> => {
+    return await sdk.getTransactionStatus(boc, maxAttempts, intervalMs);
+  }, [sdk]);
+
+  // Get transaction status by hash
+  const getTransactionStatusByHash = useCallback(async (
+    txHash: string,
+    address: string
+  ): Promise<TransactionStatusResponse> => {
+    return await sdk.getTransactionStatusByHash(txHash, address);
+  }, [sdk]);
+
+  // Event listeners
+  const on = useCallback(<T = any>(event: TonConnectEventType, listener: TonConnectEventListener<T>): (() => void) => {
+    return sdk.on(event, listener);
+  }, [sdk]);
+
+  const off = useCallback(<T = any>(event: TonConnectEventType, listener: TonConnectEventListener<T>): void => {
+    sdk.off(event, listener);
+  }, [sdk]);
+
   // Create TonConnectUI instance
   const tonConnectUI: TonConnectUI = {
     openModal,
@@ -231,6 +360,15 @@ export function TonConnectUIProvider({
     disconnect,
     sendTransaction,
     signData,
+    restoreConnection,
+    setWalletList,
+    getNetwork,
+    setNetwork,
+    getBalance,
+    getTransactionStatus,
+    getTransactionStatusByHash,
+    on,
+    off,
     wallet: walletState,
     modalState: {
       open: modalOpen,
@@ -250,6 +388,7 @@ export function TonConnectUIProvider({
       <WalletSelectionModal
         visible={modalOpen && !walletState?.connected}
         onClose={closeModal}
+        wallets={customWalletList || undefined}
       />
     </TonConnectUIContext.Provider>
   );

package/src/react/WalletSelectionModal.tsx

@@ -1,6 +1,7 @@
 /**
  * WalletSelectionModal component
  * Provides a beautiful wallet selection UI compatible with @tonconnect/ui-react
+ * Matches the exact UI/UX of @tonconnect/ui-react wallet selection modal
  */
 
 import React from 'react';
@@ -11,8 +12,9 @@ import {
   TouchableOpacity,
   ScrollView,
   StyleSheet,
-  Image,
   Platform,
+  Image,
+  ActivityIndicator,
 } from 'react-native';
 import { useTonConnectUI, useTonConnectSDK } from './index';
 import type { WalletDefinition } from '../index';
@@ -42,27 +44,56 @@ export function WalletSelectionModal({
   const sdk = useTonConnectSDK();
   const [wallets, setWallets] = React.useState<WalletDefinition[]>([]);
   const [connectingWallet, setConnectingWallet] = React.useState<string | null>(null);
+  const [walletAvailability, setWalletAvailability] = React.useState<Record<string, boolean>>({});
 
-  // Load wallets
+  // Load wallets and check availability
   React.useEffect(() => {
-    if (customWallets) {
-      setWallets(customWallets);
-    } else {
-      const supportedWallets = sdk.getSupportedWallets();
-      // Filter wallets for current platform
-      const platform = Platform.OS === 'ios' ? 'ios' : Platform.OS === 'android' ? 'android' : 'web';
-      const platformWallets = supportedWallets.filter((w) => w.platforms.includes(platform));
-      setWallets(platformWallets);
+    const loadWallets = async () => {
+      if (customWallets) {
+        setWallets(customWallets);
+      } else {
+        const supportedWallets = sdk.getSupportedWallets();
+        // Show all wallets (like @tonconnect/ui-react does)
+        // Availability will be checked and displayed
+        setWallets(supportedWallets);
+      }
+
+      // Check availability for all wallets
+      const availability: Record<string, boolean> = {};
+      const walletsToCheck = customWallets || sdk.getSupportedWallets();
+      for (const wallet of walletsToCheck) {
+        try {
+          const isAvailable = await sdk.isWalletAvailable(wallet.name);
+          availability[wallet.name] = isAvailable;
+        } catch (error) {
+          availability[wallet.name] = false;
+        }
+      }
+      setWalletAvailability(availability);
+    };
+
+    if (visible) {
+      loadWallets();
     }
-  }, [sdk, customWallets]);
+  }, [sdk, customWallets, visible]);
 
   // Handle wallet selection
   const handleSelectWallet = async (wallet: WalletDefinition) => {
+    // Prevent multiple simultaneous connection attempts
+    if (connectingWallet) {
+      return;
+    }
+
     try {
       setConnectingWallet(wallet.name);
       
       // Set preferred wallet
-      sdk.setPreferredWallet(wallet.name);
+      try {
+        sdk.setPreferredWallet(wallet.name);
+      } catch (error) {
+        console.error('[WalletSelectionModal] Failed to set preferred wallet:', error);
+        // Continue anyway - SDK will use default wallet
+      }
       
       // Close modal
       onClose();
@@ -73,13 +104,9 @@ export function WalletSelectionModal({
       // Connect
       await tonConnectUI.connectWallet();
     } catch (error) {
-      console.error('Wallet connection error:', error);
+      console.error('[WalletSelectionModal] Wallet connection error:', error);
       setConnectingWallet(null);
-      // Re-open modal on error
-      onClose();
-      setTimeout(() => {
-        // Modal will be re-opened by parent if needed
-      }, 500);
+      // Error is handled by SDK/UI, just reset connecting state
     }
   };
 
@@ -92,17 +119,23 @@ export function WalletSelectionModal({
     >
       <View style={[styles.overlay, style]}>
         <View style={styles.modalContainer}>
-          {/* Header */}
+          {/* Header - matches @tonconnect/ui-react style */}
           <View style={styles.header}>
-            <Text style={styles.title}>Connect your TON wallet</Text>
-            <Text style={styles.subtitle}>Choose a wallet to connect to this app</Text>
+            <TouchableOpacity style={styles.backButton} onPress={onClose}>
+              <Text style={styles.backButtonText}>←</Text>
+            </TouchableOpacity>
+            <Text style={styles.title}>Wallets</Text>
             <TouchableOpacity style={styles.closeButton} onPress={onClose}>
               <Text style={styles.closeButtonText}>✕</Text>
             </TouchableOpacity>
           </View>
 
-          {/* Wallet List */}
-          <ScrollView style={styles.walletList} showsVerticalScrollIndicator={false}>
+          {/* Wallet Grid - matches @tonconnect/ui-react grid layout */}
+          <ScrollView 
+            style={styles.walletList} 
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.walletGrid}
+          >
             {wallets.length === 0 ? (
               <View style={styles.emptyState}>
                 <Text style={styles.emptyStateText}>No wallets available</Text>
@@ -113,16 +146,28 @@ export function WalletSelectionModal({
             ) : (
               wallets.map((wallet) => {
                 const isConnecting = connectingWallet === wallet.name;
+                const isAvailable = walletAvailability[wallet.name] !== false;
                 return (
                   <TouchableOpacity
                     key={wallet.name}
-                    style={[styles.walletItem, isConnecting && styles.walletItemConnecting]}
-                    onPress={() => handleSelectWallet(wallet)}
-                    disabled={isConnecting}
+                    style={[
+                      styles.walletCard,
+                      !isAvailable && styles.walletCardUnavailable,
+                      isConnecting && styles.walletCardConnecting,
+                    ]}
+                    onPress={() => isAvailable && !isConnecting && handleSelectWallet(wallet)}
+                    disabled={!isAvailable || isConnecting}
                   >
                     <View style={styles.walletIconContainer}>
-                      {wallet.iconUrl ? (
-                        <Image source={{ uri: wallet.iconUrl }} style={styles.walletIcon} />
+                      {wallet.iconUrl && Platform.OS !== 'web' ? (
+                        <Image
+                          source={{ uri: wallet.iconUrl }}
+                          style={styles.walletIcon}
+                          onError={() => {
+                            // Fallback to placeholder on error
+                          }}
+                          resizeMode="cover"
+                        />
                       ) : (
                         <View style={styles.walletIconPlaceholder}>
                           <Text style={styles.walletIconText}>
@@ -131,14 +176,15 @@ export function WalletSelectionModal({
                         </View>
                       )}
                     </View>
-                    <View style={styles.walletInfo}>
-                      <Text style={styles.walletName}>{wallet.name}</Text>
-                      <Text style={styles.walletAppName}>{wallet.appName}</Text>
-                    </View>
+                    <Text style={styles.walletName} numberOfLines={1}>
+                      {wallet.name}
+                    </Text>
                     {isConnecting && (
-                      <View style={styles.connectingIndicator}>
-                        <Text style={styles.connectingText}>Connecting...</Text>
-                      </View>
+                      <ActivityIndicator 
+                        size="small" 
+                        color="#0088cc" 
+                        style={styles.connectingSpinner}
+                      />
                     )}
                   </TouchableOpacity>
                 );
@@ -146,11 +192,17 @@ export function WalletSelectionModal({
             )}
           </ScrollView>
 
-          {/* Footer */}
+          {/* Footer - matches @tonconnect/ui-react footer */}
           <View style={styles.footer}>
-            <Text style={styles.footerText}>
-              By connecting, you agree to the app's Terms of Service and Privacy Policy
-            </Text>
+            <View style={styles.footerContent}>
+              <View style={styles.tonConnectLogo}>
+                <Text style={styles.tonConnectLogoText}>TON</Text>
+              </View>
+              <Text style={styles.footerText}>TON Connect</Text>
+            </View>
+            <TouchableOpacity style={styles.helpButton}>
+              <Text style={styles.helpButtonText}>?</Text>
+            </TouchableOpacity>
           </View>
         </View>
       </View>
@@ -168,30 +220,36 @@ const styles = StyleSheet.create({
     backgroundColor: '#1a1a1a',
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
-    maxHeight: '85%',
+    maxHeight: '90%',
     paddingBottom: Platform.OS === 'ios' ? 34 : 20,
   },
   header: {
-    padding: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
     borderBottomWidth: 1,
     borderBottomColor: '#2a2a2a',
-    position: 'relative',
+  },
+  backButton: {
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backButtonText: {
+    color: '#ffffff',
+    fontSize: 20,
+    fontWeight: '600',
   },
   title: {
-    fontSize: 28,
+    fontSize: 20,
     fontWeight: 'bold',
     color: '#ffffff',
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 15,
-    color: '#999999',
-    lineHeight: 20,
+    flex: 1,
+    textAlign: 'center',
   },
   closeButton: {
-    position: 'absolute',
-    top: 24,
-    right: 24,
     width: 32,
     height: 32,
     borderRadius: 16,
@@ -205,66 +263,65 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
   walletList: {
-    padding: 16,
-    maxHeight: 400,
+    flex: 1,
   },
-  walletItem: {
+  walletGrid: {
     flexDirection: 'row',
-    alignItems: 'center',
+    flexWrap: 'wrap',
     padding: 16,
-    backgroundColor: '#2a2a2a',
-    borderRadius: 16,
-    marginBottom: 12,
-    minHeight: 72,
+    justifyContent: 'flex-start',
+  },
+  walletCard: {
+    width: '25%',
+    aspectRatio: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    marginBottom: 16,
+  },
+  walletCardUnavailable: {
+    opacity: 0.5,
   },
-  walletItemConnecting: {
+  walletCardConnecting: {
     opacity: 0.7,
   },
   walletIconContainer: {
-    marginRight: 16,
+    width: 64,
+    height: 64,
+    marginBottom: 8,
   },
   walletIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 12,
+    width: 64,
+    height: 64,
+    borderRadius: 16,
   },
   walletIconPlaceholder: {
-    width: 48,
-    height: 48,
-    borderRadius: 12,
-    backgroundColor: '#3a3a3a',
+    width: 64,
+    height: 64,
+    borderRadius: 16,
+    backgroundColor: '#2a2a2a',
     justifyContent: 'center',
     alignItems: 'center',
   },
   walletIconText: {
     color: '#ffffff',
-    fontSize: 20,
+    fontSize: 24,
     fontWeight: 'bold',
   },
-  walletInfo: {
-    flex: 1,
-  },
   walletName: {
-    fontSize: 17,
-    fontWeight: '600',
+    fontSize: 12,
+    fontWeight: '500',
     color: '#ffffff',
-    marginBottom: 4,
-  },
-  walletAppName: {
-    fontSize: 14,
-    color: '#999999',
-  },
-  connectingIndicator: {
-    marginLeft: 12,
+    textAlign: 'center',
+    maxWidth: '100%',
   },
-  connectingText: {
-    fontSize: 14,
-    color: '#0088cc',
-    fontWeight: '500',
+  connectingSpinner: {
+    marginTop: 4,
   },
   emptyState: {
     padding: 40,
     alignItems: 'center',
+    width: '100%',
   },
   emptyStateText: {
     fontSize: 18,
@@ -278,15 +335,48 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     padding: 16,
     borderTopWidth: 1,
     borderTopColor: '#2a2a2a',
   },
+  footerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tonConnectLogo: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    backgroundColor: '#0088cc',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+  },
+  tonConnectLogoText: {
+    color: '#ffffff',
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
   footerText: {
     fontSize: 12,
-    color: '#666666',
-    textAlign: 'center',
-    lineHeight: 16,
+    color: '#ffffff',
+    fontWeight: '500',
+  },
+  helpButton: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#2a2a2a',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  helpButtonText: {
+    color: '#999999',
+    fontSize: 14,
+    fontWeight: '600',
   },
 });
 

package/src/react/index.ts

@@ -19,6 +19,7 @@ export type {
   SignDataRequest,
   SignDataResponse,
 } from './TonConnectUIProvider';
+export type { Network, BalanceResponse, TransactionStatusResponse, TransactionStatus } from '../types';
 export { TonConnectButton } from './TonConnectButton';
 export type { TonConnectButtonProps } from './TonConnectButton';
 export { WalletSelectionModal } from './WalletSelectionModal';