@blazium/ton-connect-mobile 1.2.1 → 1.2.4

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';
@@ -12,6 +13,8 @@ import {
   ScrollView,
   StyleSheet,
   Platform,
+  Image,
+  ActivityIndicator,
 } from 'react-native';
 import { useTonConnectUI, useTonConnectSDK } from './index';
 import type { WalletDefinition } from '../index';
@@ -41,26 +44,39 @@ 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>>({});
+  const [imageErrors, setImageErrors] = React.useState<Record<string, boolean>>({});
 
-  // Load wallets
+  // Load wallets and check availability
   React.useEffect(() => {
-    if (customWallets) {
-      setWallets(customWallets);
-    } else {
-      const supportedWallets = sdk.getSupportedWallets();
-      // CRITICAL FIX: On web, show all wallets with universalLink (they can open in new tab)
-      // On mobile, filter by platform
-      const platform = Platform.OS === 'ios' ? 'ios' : Platform.OS === 'android' ? 'android' : 'web';
-      let platformWallets: WalletDefinition[];
-      if (platform === 'web') {
-        // On web, show all wallets with universalLink (they can open in new tab)
-        platformWallets = supportedWallets.filter((w) => w.platforms.includes('web') || !!w.universalLink);
+    const loadWallets = async () => {
+      if (customWallets) {
+        setWallets(customWallets);
       } else {
-        platformWallets = supportedWallets.filter((w) => w.platforms.includes(platform));
+        const supportedWallets = sdk.getSupportedWallets();
+        // Show all wallets (like @tonconnect/ui-react does)
+        // Availability will be checked and displayed
+        setWallets(supportedWallets);
       }
-      setWallets(platformWallets);
+
+      // 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) => {
@@ -104,17 +120,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>
@@ -125,29 +147,50 @@ export function WalletSelectionModal({
             ) : (
               wallets.map((wallet) => {
                 const isConnecting = connectingWallet === wallet.name;
+                const isAvailable = walletAvailability[wallet.name] !== false;
+                const imageError = imageErrors[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}>
-                      {/* Always use placeholder to avoid web image loading issues */}
-                      <View style={styles.walletIconPlaceholder}>
-                        <Text style={styles.walletIconText}>
-                          {wallet.name.charAt(0).toUpperCase()}
-                        </Text>
-                      </View>
-                    </View>
-                    <View style={styles.walletInfo}>
-                      <Text style={styles.walletName}>{wallet.name}</Text>
-                      <Text style={styles.walletAppName}>{wallet.appName}</Text>
+                      {wallet.iconUrl && !imageError ? (
+                        <Image
+                          source={{ uri: wallet.iconUrl }}
+                          style={styles.walletIcon}
+                          onError={(error) => {
+                            console.log(`[WalletSelectionModal] Failed to load image for ${wallet.name}:`, wallet.iconUrl, error);
+                            setImageErrors((prev) => ({ ...prev, [wallet.name]: true }));
+                          }}
+                          onLoad={() => {
+                            console.log(`[WalletSelectionModal] Successfully loaded image for ${wallet.name}:`, wallet.iconUrl);
+                          }}
+                          resizeMode="cover"
+                        />
+                      ) : (
+                        <View style={styles.walletIconPlaceholder}>
+                          <Text style={styles.walletIconText}>
+                            {wallet.name.charAt(0).toUpperCase()}
+                          </Text>
+                        </View>
+                      )}
                     </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>
                 );
@@ -155,11 +198,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>
@@ -177,30 +226,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,
@@ -214,66 +269,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,
@@ -287,15 +341,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';

package/src/types/index.ts

@@ -187,6 +187,11 @@ export interface PlatformAdapter {
   randomBytes(length: number): Promise<Uint8Array>;
 }
 
+/**
+ * Network type
+ */
+export type Network = 'mainnet' | 'testnet';
+
 /**
  * SDK configuration
  */
@@ -211,6 +216,12 @@ export interface TonConnectMobileConfig {
    * Available: 'Tonkeeper', 'MyTonWallet', 'Wallet in Telegram', 'Tonhub'
    */
   preferredWallet?: string;
+  /** Network (mainnet/testnet) - default: 'mainnet' */
+  network?: Network;
+  /** TON API endpoint for balance checking (optional)
+   * Default: 'https://toncenter.com/api/v2' for mainnet, 'https://testnet.toncenter.com/api/v2' for testnet
+   */
+  tonApiEndpoint?: string;
 }
 
 /**
@@ -218,3 +229,44 @@ export interface TonConnectMobileConfig {
  */
 export type StatusChangeCallback = (status: ConnectionStatus) => void;
 
+/**
+ * Event types for TonConnectMobile
+ */
+export type TonConnectEventType = 'connect' | 'disconnect' | 'transaction' | 'error' | 'statusChange';
+
+/**
+ * Event listener callback
+ */
+export type TonConnectEventListener<T = any> = (data: T) => void;
+
+/**
+ * Transaction status
+ */
+export type TransactionStatus = 'pending' | 'confirmed' | 'failed' | 'unknown';
+
+/**
+ * Transaction status response
+ */
+export interface TransactionStatusResponse {
+  /** Transaction status */
+  status: TransactionStatus;
+  /** Transaction hash (if available) */
+  hash?: string;
+  /** Block number (if confirmed) */
+  blockNumber?: number;
+  /** Error message (if failed) */
+  error?: string;
+}
+
+/**
+ * Balance response
+ */
+export interface BalanceResponse {
+  /** Balance in nanotons */
+  balance: string;
+  /** Balance in TON (formatted) */
+  balanceTon: string;
+  /** Network */
+  network: Network;
+}
+