@blazium/ton-connect-mobile 1.1.5 → 1.2.1

package/src/react/WalletSelectionModal.tsx

@@ -0,0 +1,301 @@
+/**
+ * WalletSelectionModal component
+ * Provides a beautiful wallet selection UI compatible with @tonconnect/ui-react
+ */
+
+import React from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { useTonConnectUI, useTonConnectSDK } from './index';
+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 function WalletSelectionModal({
+  visible,
+  onClose,
+  wallets: customWallets,
+  style,
+}: WalletSelectionModalProps): JSX.Element {
+  const tonConnectUI = useTonConnectUI();
+  const sdk = useTonConnectSDK();
+  const [wallets, setWallets] = React.useState<WalletDefinition[]>([]);
+  const [connectingWallet, setConnectingWallet] = React.useState<string | null>(null);
+
+  // Load wallets
+  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);
+      } else {
+        platformWallets = supportedWallets.filter((w) => w.platforms.includes(platform));
+      }
+      setWallets(platformWallets);
+    }
+  }, [sdk, customWallets]);
+
+  // Handle wallet selection
+  const handleSelectWallet = async (wallet: WalletDefinition) => {
+    // Prevent multiple simultaneous connection attempts
+    if (connectingWallet) {
+      return;
+    }
+
+    try {
+      setConnectingWallet(wallet.name);
+      
+      // Set preferred wallet
+      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();
+      
+      // Small delay to ensure modal closes
+      await new Promise<void>((resolve) => setTimeout(() => resolve(), 100));
+      
+      // Connect
+      await tonConnectUI.connectWallet();
+    } catch (error) {
+      console.error('[WalletSelectionModal] Wallet connection error:', error);
+      setConnectingWallet(null);
+      // Error is handled by SDK/UI, just reset connecting state
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      transparent={true}
+      onRequestClose={onClose}
+    >
+      <View style={[styles.overlay, style]}>
+        <View style={styles.modalContainer}>
+          {/* Header */}
+          <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.closeButton} onPress={onClose}>
+              <Text style={styles.closeButtonText}>✕</Text>
+            </TouchableOpacity>
+          </View>
+
+          {/* Wallet List */}
+          <ScrollView style={styles.walletList} showsVerticalScrollIndicator={false}>
+            {wallets.length === 0 ? (
+              <View style={styles.emptyState}>
+                <Text style={styles.emptyStateText}>No wallets available</Text>
+                <Text style={styles.emptyStateSubtext}>
+                  Please install a TON wallet app to continue
+                </Text>
+              </View>
+            ) : (
+              wallets.map((wallet) => {
+                const isConnecting = connectingWallet === wallet.name;
+                return (
+                  <TouchableOpacity
+                    key={wallet.name}
+                    style={[styles.walletItem, isConnecting && styles.walletItemConnecting]}
+                    onPress={() => handleSelectWallet(wallet)}
+                    disabled={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>
+                    </View>
+                    {isConnecting && (
+                      <View style={styles.connectingIndicator}>
+                        <Text style={styles.connectingText}>Connecting...</Text>
+                      </View>
+                    )}
+                  </TouchableOpacity>
+                );
+              })
+            )}
+          </ScrollView>
+
+          {/* 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>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = 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: 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/src/react/index.ts

@@ -21,4 +21,6 @@ export type {
 } from './TonConnectUIProvider';
 export { TonConnectButton } from './TonConnectButton';
 export type { TonConnectButtonProps } from './TonConnectButton';
+export { WalletSelectionModal } from './WalletSelectionModal';
+export type { WalletSelectionModalProps } from './WalletSelectionModal';
 

package/src/utils/retry.ts

@@ -0,0 +1,101 @@
+/**
+ * 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 async function retry<T>(
+  fn: () => Promise<T>,
+  options: RetryOptions = {}
+): Promise<T> {
+  const {
+    maxAttempts = 3,
+    initialDelay = 1000,
+    maxDelay = 10000,
+    multiplier = 2,
+    shouldRetry = () => true,
+  } = options;
+
+  let lastError: Error | null = 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<void>((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
+ */
+export async function retryWithCustomDelay<T>(
+  fn: () => Promise<T>,
+  getDelay: (attempt: number, error: Error | null) => number,
+  maxAttempts: number = 3
+): Promise<T> {
+  let lastError: Error | null = 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<void>((resolve) => setTimeout(() => resolve(), delay));
+    }
+  }
+
+  throw lastError || new Error('Retry failed');
+}
+

package/src/utils/transactionBuilder.ts

@@ -0,0 +1,202 @@
+/**
+ * Transaction Builder Utilities
+ * Helper functions for building TON Connect transaction requests
+ */
+
+import type { SendTransactionRequest, TransactionMessage } 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 function tonToNano(tonAmount: number | string): string {
+  const amount = typeof tonAmount === 'string' ? parseFloat(tonAmount) : tonAmount;
+  if (isNaN(amount) || amount < 0) {
+    throw new Error('Invalid TON amount');
+  }
+  const nanotons = Math.floor(amount * 1_000_000_000);
+  return nanotons.toString();
+}
+
+/**
+ * Convert nanotons to TON
+ * @param nanotons - Amount in nanotons as string
+ * @returns Amount in TON as number
+ */
+export function nanoToTon(nanotons: string): number {
+  const nano = BigInt(nanotons);
+  return Number(nano) / 1_000_000_000;
+}
+
+/**
+ * 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 function buildTransferTransaction(
+  to: string,
+  amount: number | string,
+  validUntil?: number
+): SendTransactionRequest {
+  // Validate address
+  if (!to || typeof to !== 'string') {
+    throw new Error('Recipient address is required');
+  }
+  if (!isValidTonAddress(to)) {
+    throw new Error(`Invalid TON address format: ${to}`);
+  }
+
+  // Validate amount
+  const nanoAmount = tonToNano(amount);
+  if (BigInt(nanoAmount) <= 0n) {
+    throw new Error('Transaction amount must be greater than 0');
+  }
+
+  // Validate validUntil
+  const expiration = validUntil || Date.now() + 5 * 60 * 1000; // 5 minutes default
+  if (expiration <= Date.now()) {
+    throw new Error('Transaction expiration must be in the future');
+  }
+
+  return {
+    validUntil: expiration,
+    messages: [
+      {
+        address: to,
+        amount: nanoAmount,
+      },
+    ],
+  };
+}
+
+/**
+ * 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 function buildMultiTransferTransaction(
+  transfers: Array<{ to: string; amount: number | string }>,
+  validUntil?: number
+): SendTransactionRequest {
+  // Validate transfers array
+  if (!transfers || !Array.isArray(transfers) || transfers.length === 0) {
+    throw new Error('Transfers array is required and cannot be empty');
+  }
+  if (transfers.length > 255) {
+    throw new Error('Maximum 255 transfers allowed per transaction');
+  }
+
+  // Validate each transfer
+  const messages = transfers.map((transfer, index) => {
+    if (!transfer.to || typeof transfer.to !== 'string') {
+      throw new Error(`Transfer ${index + 1}: Recipient address is required`);
+    }
+    if (!isValidTonAddress(transfer.to)) {
+      throw new Error(`Transfer ${index + 1}: Invalid TON address format: ${transfer.to}`);
+    }
+    const nanoAmount = tonToNano(transfer.amount);
+    if (BigInt(nanoAmount) <= 0n) {
+      throw new Error(`Transfer ${index + 1}: Amount must be greater than 0`);
+    }
+    return {
+      address: transfer.to,
+      amount: nanoAmount,
+    };
+  });
+
+  // Validate validUntil
+  const expiration = validUntil || Date.now() + 5 * 60 * 1000;
+  if (expiration <= Date.now()) {
+    throw new Error('Transaction expiration must be in the future');
+  }
+
+  return {
+    validUntil: expiration,
+    messages,
+  };
+}
+
+/**
+ * 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 function buildTransactionWithPayload(
+  to: string,
+  amount: number | string,
+  payload: string,
+  validUntil?: number
+): SendTransactionRequest {
+  return {
+    validUntil: validUntil || Date.now() + 5 * 60 * 1000,
+    messages: [
+      {
+        address: to,
+        amount: tonToNano(amount),
+        payload,
+      },
+    ],
+  };
+}
+
+/**
+ * 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 function buildTransactionWithStateInit(
+  to: string,
+  amount: number | string,
+  stateInit: string,
+  validUntil?: number
+): SendTransactionRequest {
+  return {
+    validUntil: validUntil || Date.now() + 5 * 60 * 1000,
+    messages: [
+      {
+        address: to,
+        amount: tonToNano(amount),
+        stateInit,
+      },
+    ],
+  };
+}
+
+/**
+ * Validate TON address format
+ * @param address - Address to validate
+ * @returns true if address is valid
+ */
+export function isValidTonAddress(address: string): boolean {
+  // TON addresses start with EQ or 0Q and are 48 characters long (base64)
+  return /^(EQ|0Q)[A-Za-z0-9_-]{46}$/.test(address);
+}
+
+/**
+ * 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 function formatTonAddress(
+  address: string,
+  startLength: number = 6,
+  endLength: number = 4
+): string {
+  if (address.length <= startLength + endLength) {
+    return address;
+  }
+  return `${address.substring(0, startLength)}...${address.substring(address.length - endLength)}`;
+}
+