@blazium/ton-connect-mobile 1.1.4 → 1.2.0

package/dist/index.d.ts

@@ -9,7 +9,8 @@ import { type WalletDefinition } from './core/wallets';
  */
 export declare class TonConnectError extends Error {
     code?: string | undefined;
-    constructor(message: string, code?: string | undefined);
+    recoverySuggestion?: string | undefined;
+    constructor(message: string, code?: string | undefined, recoverySuggestion?: string | undefined);
 }
 export declare class ConnectionTimeoutError extends TonConnectError {
     constructor();
@@ -18,7 +19,7 @@ export declare class TransactionTimeoutError extends TonConnectError {
     constructor();
 }
 export declare class UserRejectedError extends TonConnectError {
-    constructor();
+    constructor(message?: string);
 }
 export declare class ConnectionInProgressError extends TonConnectError {
     constructor();
@@ -99,6 +100,11 @@ export declare class TonConnectMobile {
      * Get current wallet being used
      */
     getCurrentWallet(): WalletDefinition;
+    /**
+     * Check if a wallet is available on the current platform
+     * Note: This is a best-effort check and may not be 100% accurate
+     */
+    isWalletAvailable(walletName?: string): Promise<boolean>;
     /**
      * Set preferred wallet for connections
      */
@@ -135,3 +141,5 @@ export declare class TonConnectMobile {
 export * from './types';
 export type { WalletDefinition } from './core/wallets';
 export { SUPPORTED_WALLETS, getWalletByName, getDefaultWallet, getWalletsForPlatform } from './core/wallets';
+export * from './utils/transactionBuilder';
+export * from './utils/retry';

package/dist/index.js

@@ -29,30 +29,31 @@ const wallets_1 = require("./core/wallets");
  * Custom error classes
  */
 class TonConnectError extends Error {
-    constructor(message, code) {
+    constructor(message, code, recoverySuggestion) {
         super(message);
         this.code = code;
+        this.recoverySuggestion = recoverySuggestion;
         this.name = 'TonConnectError';
     }
 }
 exports.TonConnectError = TonConnectError;
 class ConnectionTimeoutError extends TonConnectError {
     constructor() {
-        super('Connection request timed out', 'CONNECTION_TIMEOUT');
+        super('Connection request timed out. The wallet did not respond in time.', 'CONNECTION_TIMEOUT', 'Please make sure the wallet app is installed and try again. If the issue persists, check your internet connection.');
         this.name = 'ConnectionTimeoutError';
     }
 }
 exports.ConnectionTimeoutError = ConnectionTimeoutError;
 class TransactionTimeoutError extends TonConnectError {
     constructor() {
-        super('Transaction request timed out', 'TRANSACTION_TIMEOUT');
+        super('Transaction request timed out. The wallet did not respond in time.', 'TRANSACTION_TIMEOUT', 'Please check the wallet app and try again. Make sure you approve or reject the transaction in the wallet.');
         this.name = 'TransactionTimeoutError';
     }
 }
 exports.TransactionTimeoutError = TransactionTimeoutError;
 class UserRejectedError extends TonConnectError {
-    constructor() {
-        super('User rejected the request', 'USER_REJECTED');
+    constructor(message) {
+        super(message || 'User rejected the request', 'USER_REJECTED', 'The user cancelled the operation in the wallet app.');
         this.name = 'UserRejectedError';
     }
 }
@@ -645,6 +646,28 @@ class TonConnectMobile {
     getCurrentWallet() {
         return this.currentWallet;
     }
+    /**
+     * Check if a wallet is available on the current platform
+     * Note: This is a best-effort check and may not be 100% accurate
+     */
+    async isWalletAvailable(walletName) {
+        const wallet = walletName ? (0, wallets_1.getWalletByName)(walletName) : this.currentWallet;
+        if (!wallet) {
+            return false;
+        }
+        // On web, check if wallet supports web platform
+        // eslint-disable-next-line no-undef
+        if (typeof globalThis !== 'undefined' && globalThis.window) {
+            return wallet.platforms.includes('web');
+        }
+        // On mobile, we can't reliably check if wallet is installed
+        // Return true if wallet supports the current platform
+        // eslint-disable-next-line no-undef
+        const platform = typeof globalThis !== 'undefined' && globalThis.Platform
+            ? globalThis.Platform.OS === 'ios' ? 'ios' : 'android'
+            : 'android';
+        return wallet.platforms.includes(platform);
+    }
     /**
      * Set preferred wallet for connections
      */
@@ -805,3 +828,6 @@ Object.defineProperty(exports, "SUPPORTED_WALLETS", { enumerable: true, get: fun
 Object.defineProperty(exports, "getWalletByName", { enumerable: true, get: function () { return wallets_2.getWalletByName; } });
 Object.defineProperty(exports, "getDefaultWallet", { enumerable: true, get: function () { return wallets_2.getDefaultWallet; } });
 Object.defineProperty(exports, "getWalletsForPlatform", { enumerable: true, get: function () { return wallets_2.getWalletsForPlatform; } });
+// Export utilities
+__exportStar(require("./utils/transactionBuilder"), exports);
+__exportStar(require("./utils/retry"), exports);

package/dist/react/TonConnectUIProvider.js

@@ -44,6 +44,7 @@ exports.useTonConnectModal = useTonConnectModal;
 exports.useTonConnectSDK = useTonConnectSDK;
 const react_1 = __importStar(require("react"));
 const index_1 = require("../index");
+const WalletSelectionModal_1 = require("./WalletSelectionModal");
 const TonConnectUIContext = (0, react_1.createContext)(null);
 /**
  * TonConnectUIProvider - React context provider for TON Connect
@@ -98,8 +99,10 @@ function TonConnectUIProvider({ config, children, sdkInstance, }) {
     }, [sdk, updateWalletState]);
     // Open modal
     const openModal = (0, react_1.useCallback)(async () => {
-        setModalOpen(true);
-    }, []);
+        if (!walletState?.connected) {
+            setModalOpen(true);
+        }
+    }, [walletState?.connected]);
     // Close modal
     const closeModal = (0, react_1.useCallback)(() => {
         setModalOpen(false);
@@ -164,7 +167,9 @@ function TonConnectUIProvider({ config, children, sdkInstance, }) {
         tonConnectUI,
         sdk,
     };
-    return react_1.default.createElement(TonConnectUIContext.Provider, { value: contextValue }, children);
+    return (react_1.default.createElement(TonConnectUIContext.Provider, { value: contextValue },
+        children,
+        react_1.default.createElement(WalletSelectionModal_1.WalletSelectionModal, { visible: modalOpen && !walletState?.connected, onClose: closeModal })));
 }
 /**
  * Hook to access TonConnectUI instance

package/dist/react/WalletSelectionModal.d.ts

@@ -0,0 +1,20 @@
+/**
+ * WalletSelectionModal component
+ * Provides a beautiful wallet selection UI compatible with @tonconnect/ui-react
+ */
+import type { WalletDefinition } from '../index';
+export interface WalletSelectionModalProps {
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Callback when modal should close */
+    onClose: () => void;
+    /** Custom wallet list (optional, uses SDK's supported wallets by default) */
+    wallets?: WalletDefinition[];
+    /** Custom styles */
+    style?: any;
+}
+/**
+ * WalletSelectionModal - Beautiful wallet selection modal
+ * Compatible with @tonconnect/ui-react modal behavior
+ */
+export declare function WalletSelectionModal({ visible, onClose, wallets: customWallets, style, }: WalletSelectionModalProps): JSX.Element;

package/dist/react/WalletSelectionModal.js

@@ -0,0 +1,213 @@
+"use strict";
+/**
+ * WalletSelectionModal component
+ * Provides a beautiful wallet selection UI compatible with @tonconnect/ui-react
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalletSelectionModal = WalletSelectionModal;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const index_1 = require("./index");
+/**
+ * WalletSelectionModal - Beautiful wallet selection modal
+ * Compatible with @tonconnect/ui-react modal behavior
+ */
+function WalletSelectionModal({ visible, onClose, wallets: customWallets, style, }) {
+    const tonConnectUI = (0, index_1.useTonConnectUI)();
+    const sdk = (0, index_1.useTonConnectSDK)();
+    const [wallets, setWallets] = react_1.default.useState([]);
+    const [connectingWallet, setConnectingWallet] = react_1.default.useState(null);
+    // Load wallets
+    react_1.default.useEffect(() => {
+        if (customWallets) {
+            setWallets(customWallets);
+        }
+        else {
+            const supportedWallets = sdk.getSupportedWallets();
+            // Filter wallets for current platform
+            const platform = react_native_1.Platform.OS === 'ios' ? 'ios' : react_native_1.Platform.OS === 'android' ? 'android' : 'web';
+            const platformWallets = supportedWallets.filter((w) => w.platforms.includes(platform));
+            setWallets(platformWallets);
+        }
+    }, [sdk, customWallets]);
+    // Handle wallet selection
+    const handleSelectWallet = async (wallet) => {
+        try {
+            setConnectingWallet(wallet.name);
+            // Set preferred wallet
+            sdk.setPreferredWallet(wallet.name);
+            // Close modal
+            onClose();
+            // Small delay to ensure modal closes
+            await new Promise((resolve) => setTimeout(() => resolve(), 100));
+            // Connect
+            await tonConnectUI.connectWallet();
+        }
+        catch (error) {
+            console.error('Wallet connection error:', error);
+            setConnectingWallet(null);
+            // Re-open modal on error
+            onClose();
+            setTimeout(() => {
+                // Modal will be re-opened by parent if needed
+            }, 500);
+        }
+    };
+    return (react_1.default.createElement(react_native_1.Modal, { visible: visible, animationType: "slide", transparent: true, onRequestClose: onClose },
+        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.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.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 }, wallet.iconUrl ? (react_1.default.createElement(react_native_1.Image, { source: { uri: wallet.iconUrl }, style: styles.walletIcon })) : (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...")))));
+                }))),
+                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"))))));
+}
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'flex-end',
+    },
+    modalContainer: {
+        backgroundColor: '#1a1a1a',
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+        maxHeight: '85%',
+        paddingBottom: react_native_1.Platform.OS === 'ios' ? 34 : 20,
+    },
+    header: {
+        padding: 24,
+        borderBottomWidth: 1,
+        borderBottomColor: '#2a2a2a',
+        position: 'relative',
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: 'bold',
+        color: '#ffffff',
+        marginBottom: 8,
+    },
+    subtitle: {
+        fontSize: 15,
+        color: '#999999',
+        lineHeight: 20,
+    },
+    closeButton: {
+        position: 'absolute',
+        top: 24,
+        right: 24,
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: '#2a2a2a',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    closeButtonText: {
+        color: '#ffffff',
+        fontSize: 18,
+        fontWeight: '600',
+    },
+    walletList: {
+        padding: 16,
+        maxHeight: 400,
+    },
+    walletItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        backgroundColor: '#2a2a2a',
+        borderRadius: 16,
+        marginBottom: 12,
+        minHeight: 72,
+    },
+    walletItemConnecting: {
+        opacity: 0.7,
+    },
+    walletIconContainer: {
+        marginRight: 16,
+    },
+    walletIcon: {
+        width: 48,
+        height: 48,
+        borderRadius: 12,
+    },
+    walletIconPlaceholder: {
+        width: 48,
+        height: 48,
+        borderRadius: 12,
+        backgroundColor: '#3a3a3a',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    walletIconText: {
+        color: '#ffffff',
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+    walletInfo: {
+        flex: 1,
+    },
+    walletName: {
+        fontSize: 17,
+        fontWeight: '600',
+        color: '#ffffff',
+        marginBottom: 4,
+    },
+    walletAppName: {
+        fontSize: 14,
+        color: '#999999',
+    },
+    connectingIndicator: {
+        marginLeft: 12,
+    },
+    connectingText: {
+        fontSize: 14,
+        color: '#0088cc',
+        fontWeight: '500',
+    },
+    emptyState: {
+        padding: 40,
+        alignItems: 'center',
+    },
+    emptyStateText: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#ffffff',
+        marginBottom: 8,
+    },
+    emptyStateSubtext: {
+        fontSize: 14,
+        color: '#999999',
+        textAlign: 'center',
+    },
+    footer: {
+        padding: 16,
+        borderTopWidth: 1,
+        borderTopColor: '#2a2a2a',
+    },
+    footerText: {
+        fontSize: 12,
+        color: '#666666',
+        textAlign: 'center',
+        lineHeight: 16,
+    },
+});

package/dist/react/index.d.ts

@@ -6,3 +6,5 @@ export { TonConnectUIProvider, useTonConnectUI, useTonWallet, useTonConnectModal
 export type { TonConnectUIProviderProps, TonConnectUI, WalletState, Account, TransactionResponse, SignDataRequest, SignDataResponse, } from './TonConnectUIProvider';
 export { TonConnectButton } from './TonConnectButton';
 export type { TonConnectButtonProps } from './TonConnectButton';
+export { WalletSelectionModal } from './WalletSelectionModal';
+export type { WalletSelectionModalProps } from './WalletSelectionModal';

package/dist/react/index.js

@@ -4,7 +4,7 @@
  * Re-export all React components and hooks
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TonConnectButton = exports.useTonConnectSDK = exports.useTonConnectModal = exports.useTonWallet = exports.useTonConnectUI = exports.TonConnectUIProvider = void 0;
+exports.WalletSelectionModal = exports.TonConnectButton = exports.useTonConnectSDK = exports.useTonConnectModal = exports.useTonWallet = exports.useTonConnectUI = exports.TonConnectUIProvider = void 0;
 var TonConnectUIProvider_1 = require("./TonConnectUIProvider");
 Object.defineProperty(exports, "TonConnectUIProvider", { enumerable: true, get: function () { return TonConnectUIProvider_1.TonConnectUIProvider; } });
 Object.defineProperty(exports, "useTonConnectUI", { enumerable: true, get: function () { return TonConnectUIProvider_1.useTonConnectUI; } });
@@ -13,3 +13,5 @@ Object.defineProperty(exports, "useTonConnectModal", { enumerable: true, get: fu
 Object.defineProperty(exports, "useTonConnectSDK", { enumerable: true, get: function () { return TonConnectUIProvider_1.useTonConnectSDK; } });
 var TonConnectButton_1 = require("./TonConnectButton");
 Object.defineProperty(exports, "TonConnectButton", { enumerable: true, get: function () { return TonConnectButton_1.TonConnectButton; } });
+var WalletSelectionModal_1 = require("./WalletSelectionModal");
+Object.defineProperty(exports, "WalletSelectionModal", { enumerable: true, get: function () { return WalletSelectionModal_1.WalletSelectionModal; } });

package/dist/utils/retry.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Retry Utilities
+ * Helper functions for retrying operations with exponential backoff
+ */
+export interface RetryOptions {
+    /** Maximum number of retry attempts (default: 3) */
+    maxAttempts?: number;
+    /** Initial delay in milliseconds (default: 1000) */
+    initialDelay?: number;
+    /** Maximum delay in milliseconds (default: 10000) */
+    maxDelay?: number;
+    /** Multiplier for exponential backoff (default: 2) */
+    multiplier?: number;
+    /** Function to determine if error should be retried (default: retry all errors) */
+    shouldRetry?: (error: Error) => boolean;
+}
+/**
+ * Retry a function with exponential backoff
+ * @param fn - Function to retry
+ * @param options - Retry options
+ * @returns Promise that resolves with the function result
+ */
+export declare function retry<T>(fn: () => Promise<T>, options?: RetryOptions): Promise<T>;
+/**
+ * Retry with custom delay function
+ * @param fn - Function to retry
+ * @param getDelay - Function that returns delay for each attempt (attempt number, last error)
+ * @param maxAttempts - Maximum number of attempts
+ * @returns Promise that resolves with the function result
+ */
+export declare function retryWithCustomDelay<T>(fn: () => Promise<T>, getDelay: (attempt: number, error: Error | null) => number, maxAttempts?: number): Promise<T>;

package/dist/utils/retry.js

@@ -0,0 +1,67 @@
+"use strict";
+/**
+ * Retry Utilities
+ * Helper functions for retrying operations with exponential backoff
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.retry = retry;
+exports.retryWithCustomDelay = retryWithCustomDelay;
+/**
+ * Retry a function with exponential backoff
+ * @param fn - Function to retry
+ * @param options - Retry options
+ * @returns Promise that resolves with the function result
+ */
+async function retry(fn, options = {}) {
+    const { maxAttempts = 3, initialDelay = 1000, maxDelay = 10000, multiplier = 2, shouldRetry = () => true, } = options;
+    let lastError = null;
+    let delay = initialDelay;
+    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+        try {
+            return await fn();
+        }
+        catch (error) {
+            lastError = error instanceof Error ? error : new Error(String(error));
+            // Don't retry if shouldRetry returns false
+            if (!shouldRetry(lastError)) {
+                throw lastError;
+            }
+            // Don't retry on last attempt
+            if (attempt === maxAttempts) {
+                throw lastError;
+            }
+            // Wait before retrying
+            await new Promise((resolve) => setTimeout(() => resolve(), delay));
+            // Increase delay for next attempt (exponential backoff)
+            delay = Math.min(delay * multiplier, maxDelay);
+        }
+    }
+    // This should never be reached, but TypeScript needs it
+    throw lastError || new Error('Retry failed');
+}
+/**
+ * Retry with custom delay function
+ * @param fn - Function to retry
+ * @param getDelay - Function that returns delay for each attempt (attempt number, last error)
+ * @param maxAttempts - Maximum number of attempts
+ * @returns Promise that resolves with the function result
+ */
+async function retryWithCustomDelay(fn, getDelay, maxAttempts = 3) {
+    let lastError = null;
+    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+        try {
+            return await fn();
+        }
+        catch (error) {
+            lastError = error instanceof Error ? error : new Error(String(error));
+            // Don't retry on last attempt
+            if (attempt === maxAttempts) {
+                throw lastError;
+            }
+            // Wait before retrying
+            const delay = getDelay(attempt, lastError);
+            await new Promise((resolve) => setTimeout(() => resolve(), delay));
+        }
+    }
+    throw lastError || new Error('Retry failed');
+}

package/dist/utils/transactionBuilder.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Transaction Builder Utilities
+ * Helper functions for building TON Connect transaction requests
+ */
+import type { SendTransactionRequest } from '../types';
+/**
+ * Convert TON amount to nanotons
+ * @param tonAmount - Amount in TON (e.g., 1.5 for 1.5 TON)
+ * @returns Amount in nanotons as string
+ */
+export declare function tonToNano(tonAmount: number | string): string;
+/**
+ * Convert nanotons to TON
+ * @param nanotons - Amount in nanotons as string
+ * @returns Amount in TON as number
+ */
+export declare function nanoToTon(nanotons: string): number;
+/**
+ * Build a simple TON transfer transaction
+ * @param to - Recipient address (EQ... format)
+ * @param amount - Amount in TON (will be converted to nanotons)
+ * @param validUntil - Optional expiration timestamp (default: 5 minutes from now)
+ * @returns Transaction request
+ */
+export declare function buildTransferTransaction(to: string, amount: number | string, validUntil?: number): SendTransactionRequest;
+/**
+ * Build a transaction with multiple recipients
+ * @param transfers - Array of {to, amount} transfers
+ * @param validUntil - Optional expiration timestamp (default: 5 minutes from now)
+ * @returns Transaction request
+ */
+export declare function buildMultiTransferTransaction(transfers: Array<{
+    to: string;
+    amount: number | string;
+}>, validUntil?: number): SendTransactionRequest;
+/**
+ * Build a transaction with custom payload
+ * @param to - Recipient address
+ * @param amount - Amount in TON
+ * @param payload - Base64 encoded payload
+ * @param validUntil - Optional expiration timestamp
+ * @returns Transaction request
+ */
+export declare function buildTransactionWithPayload(to: string, amount: number | string, payload: string, validUntil?: number): SendTransactionRequest;
+/**
+ * Build a transaction with state init (for contract deployment)
+ * @param to - Recipient address
+ * @param amount - Amount in TON
+ * @param stateInit - Base64 encoded state init
+ * @param validUntil - Optional expiration timestamp
+ * @returns Transaction request
+ */
+export declare function buildTransactionWithStateInit(to: string, amount: number | string, stateInit: string, validUntil?: number): SendTransactionRequest;
+/**
+ * Validate TON address format
+ * @param address - Address to validate
+ * @returns true if address is valid
+ */
+export declare function isValidTonAddress(address: string): boolean;
+/**
+ * Format TON address for display (with ellipsis)
+ * @param address - Full address
+ * @param startLength - Characters to show at start (default: 6)
+ * @param endLength - Characters to show at end (default: 4)
+ * @returns Formatted address
+ */
+export declare function formatTonAddress(address: string, startLength?: number, endLength?: number): string;