@blazium/ton-connect-mobile 1.2.1 → 1.2.4

package/dist/react/WalletSelectionModal.js

@@ -2,6 +2,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
  */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -20,27 +21,38 @@ function WalletSelectionModal({ visible, onClose, wallets: customWallets, style,
     const sdk = (0, index_1.useTonConnectSDK)();
     const [wallets, setWallets] = react_1.default.useState([]);
     const [connectingWallet, setConnectingWallet] = react_1.default.useState(null);
-    // Load wallets
+    const [walletAvailability, setWalletAvailability] = react_1.default.useState({});
+    const [imageErrors, setImageErrors] = react_1.default.useState({});
+    // Load wallets and check availability
     react_1.default.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 = react_native_1.Platform.OS === 'ios' ? 'ios' : react_native_1.Platform.OS === 'android' ? 'android' : 'web';
-            let platformWallets;
-            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);
+            }
+            // Check availability for all wallets
+            const availability = {};
+            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;
+                }
             }
-            setWallets(platformWallets);
+            setWalletAvailability(availability);
+        };
+        if (visible) {
+            loadWallets();
         }
-    }, [sdk, customWallets]);
+    }, [sdk, customWallets, visible]);
     // Handle wallet selection
     const handleSelectWallet = async (wallet) => {
         // Prevent multiple simultaneous connection attempts
@@ -74,26 +86,39 @@ function WalletSelectionModal({ visible, onClose, wallets: customWallets, style,
         react_1.default.createElement(react_native_1.View, { style: [styles.overlay, style] },
             react_1.default.createElement(react_native_1.View, { style: styles.modalContainer },
                 react_1.default.createElement(react_native_1.View, { style: styles.header },
-                    react_1.default.createElement(react_native_1.Text, { style: styles.title }, "Connect your TON wallet"),
-                    react_1.default.createElement(react_native_1.Text, { style: styles.subtitle }, "Choose a wallet to connect to this app"),
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.backButton, onPress: onClose },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.backButtonText }, "\u2190")),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.title }, "Wallets"),
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.closeButton, onPress: onClose },
                         react_1.default.createElement(react_native_1.Text, { style: styles.closeButtonText }, "\u2715"))),
-                react_1.default.createElement(react_native_1.ScrollView, { style: styles.walletList, showsVerticalScrollIndicator: false }, wallets.length === 0 ? (react_1.default.createElement(react_native_1.View, { style: styles.emptyState },
+                react_1.default.createElement(react_native_1.ScrollView, { style: styles.walletList, showsVerticalScrollIndicator: false, contentContainerStyle: styles.walletGrid }, wallets.length === 0 ? (react_1.default.createElement(react_native_1.View, { style: styles.emptyState },
                     react_1.default.createElement(react_native_1.Text, { style: styles.emptyStateText }, "No wallets available"),
                     react_1.default.createElement(react_native_1.Text, { style: styles.emptyStateSubtext }, "Please install a TON wallet app to continue"))) : (wallets.map((wallet) => {
                     const isConnecting = connectingWallet === wallet.name;
-                    return (react_1.default.createElement(react_native_1.TouchableOpacity, { key: wallet.name, style: [styles.walletItem, isConnecting && styles.walletItemConnecting], onPress: () => handleSelectWallet(wallet), disabled: isConnecting },
-                        react_1.default.createElement(react_native_1.View, { style: styles.walletIconContainer },
-                            react_1.default.createElement(react_native_1.View, { style: styles.walletIconPlaceholder },
-                                react_1.default.createElement(react_native_1.Text, { style: styles.walletIconText }, wallet.name.charAt(0).toUpperCase()))),
-                        react_1.default.createElement(react_native_1.View, { style: styles.walletInfo },
-                            react_1.default.createElement(react_native_1.Text, { style: styles.walletName }, wallet.name),
-                            react_1.default.createElement(react_native_1.Text, { style: styles.walletAppName }, wallet.appName)),
-                        isConnecting && (react_1.default.createElement(react_native_1.View, { style: styles.connectingIndicator },
-                            react_1.default.createElement(react_native_1.Text, { style: styles.connectingText }, "Connecting...")))));
+                    const isAvailable = walletAvailability[wallet.name] !== false;
+                    const imageError = imageErrors[wallet.name] || false;
+                    return (react_1.default.createElement(react_native_1.TouchableOpacity, { key: wallet.name, style: [
+                            styles.walletCard,
+                            !isAvailable && styles.walletCardUnavailable,
+                            isConnecting && styles.walletCardConnecting,
+                        ], onPress: () => isAvailable && !isConnecting && handleSelectWallet(wallet), disabled: !isAvailable || isConnecting },
+                        react_1.default.createElement(react_native_1.View, { style: styles.walletIconContainer }, wallet.iconUrl && !imageError ? (react_1.default.createElement(react_native_1.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" })) : (react_1.default.createElement(react_native_1.View, { style: styles.walletIconPlaceholder },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.walletIconText }, wallet.name.charAt(0).toUpperCase())))),
+                        react_1.default.createElement(react_native_1.Text, { style: styles.walletName, numberOfLines: 1 }, wallet.name),
+                        isConnecting && (react_1.default.createElement(react_native_1.ActivityIndicator, { size: "small", color: "#0088cc", style: styles.connectingSpinner }))));
                 }))),
                 react_1.default.createElement(react_native_1.View, { style: styles.footer },
-                    react_1.default.createElement(react_native_1.Text, { style: styles.footerText }, "By connecting, you agree to the app's Terms of Service and Privacy Policy"))))));
+                    react_1.default.createElement(react_native_1.View, { style: styles.footerContent },
+                        react_1.default.createElement(react_native_1.View, { style: styles.tonConnectLogo },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.tonConnectLogoText }, "TON")),
+                        react_1.default.createElement(react_native_1.Text, { style: styles.footerText }, "TON Connect")),
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.helpButton },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.helpButtonText }, "?")))))));
 }
 const styles = react_native_1.StyleSheet.create({
     overlay: {
@@ -105,30 +130,36 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: '#1a1a1a',
         borderTopLeftRadius: 24,
         borderTopRightRadius: 24,
-        maxHeight: '85%',
+        maxHeight: '90%',
         paddingBottom: react_native_1.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,
@@ -142,66 +173,65 @@ const styles = react_native_1.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,
@@ -215,14 +245,47 @@ const styles = react_native_1.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/dist/react/index.d.ts

@@ -4,6 +4,7 @@
  */
 export { TonConnectUIProvider, useTonConnectUI, useTonWallet, useTonConnectModal, useTonConnectSDK, } from './TonConnectUIProvider';
 export type { TonConnectUIProviderProps, TonConnectUI, WalletState, Account, TransactionResponse, 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/dist/types/index.d.ts

@@ -175,6 +175,10 @@ export interface PlatformAdapter {
     /** Generate random bytes */
     randomBytes(length: number): Promise<Uint8Array>;
 }
+/**
+ * Network type
+ */
+export type Network = 'mainnet' | 'testnet';
 /**
  * SDK configuration
  */
@@ -199,8 +203,50 @@ 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;
 }
 /**
  * Event listener callback type
  */
 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blazium/ton-connect-mobile",
-  "version": "1.2.1",
+  "version": "1.2.4",
   "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",

package/src/core/wallets.ts

@@ -31,6 +31,7 @@ export const SUPPORTED_WALLETS: WalletDefinition[] = [
     appName: 'Tonkeeper',
     universalLink: 'https://app.tonkeeper.com/ton-connect',
     deepLink: 'tonkeeper://',
+    iconUrl: 'https://tonkeeper.com/assets/tonconnect-icon.png',
     platforms: ['ios', 'android', 'web'], // CRITICAL FIX: Tonkeeper Web is supported
     preferredReturnStrategy: 'post_redirect', // CRITICAL FIX: 'back' strategy may not send callback properly, use 'post_redirect'
     requiresReturnScheme: true, // CRITICAL FIX: Mobile apps need returnScheme for proper callback handling
@@ -40,6 +41,7 @@ export const SUPPORTED_WALLETS: WalletDefinition[] = [
     appName: 'MyTonWallet',
     universalLink: 'https://connect.mytonwallet.org',
     deepLink: 'mytonwallet://',
+    iconUrl: 'https://static.mytonwallet.io/icon-256.png',
     platforms: ['ios', 'android', 'web'],
     preferredReturnStrategy: 'post_redirect',
     requiresReturnScheme: true, // MyTonWallet requires explicit returnScheme
@@ -47,8 +49,9 @@ export const SUPPORTED_WALLETS: WalletDefinition[] = [
   {
     name: 'Wallet in Telegram',
     appName: 'Wallet',
-    universalLink: 'https://wallet.tonapi.io/ton-connect',
+    universalLink: 'https://wallet.tg/ton-connect',
     deepLink: 'tg://',
+    iconUrl: 'https://wallet.tg/images/logo-288.png',
     platforms: ['ios', 'android'],
     preferredReturnStrategy: 'post_redirect',
     requiresReturnScheme: true, // Telegram Wallet requires explicit returnScheme
@@ -58,6 +61,7 @@ export const SUPPORTED_WALLETS: WalletDefinition[] = [
     appName: 'Tonhub',
     universalLink: 'https://tonhub.com/ton-connect',
     deepLink: 'tonhub://',
+    iconUrl: 'https://tonhub.com/tonconnect_logo.png',
     platforms: ['ios', 'android'],
     preferredReturnStrategy: 'post_redirect',
     requiresReturnScheme: true, // Tonhub requires explicit returnScheme for proper callback