@reown/appkit-core-react-native 0.0.0-feat-coinbase-20250722202925 → 0.0.0-feat-onramp-20250722205908

package/src/controllers/SwapController.ts

@@ -1,23 +1,22 @@
 import { subscribeKey as subKey } from 'valtio/utils';
 import { proxy, subscribe as sub } from 'valtio';
-import {
-  NumberUtil,
-  type CaipAddress,
-  type CaipNetworkId
-} from '@reown/appkit-common-react-native';
+import { NumberUtil } from '@reown/appkit-common-react-native';
 
 import { ConstantsUtil } from '../utils/ConstantsUtil';
 import { SwapApiUtil } from '../utils/SwapApiUtil';
+import { NetworkController } from './NetworkController';
 import { BlockchainApiController } from './BlockchainApiController';
 import { OptionsController } from './OptionsController';
 import { SwapCalculationUtil } from '../utils/SwapCalculationUtil';
 import { SnackController } from './SnackController';
 import { RouterController } from './RouterController';
 import type { SwapInputTarget, SwapTokenWithBalance } from '../utils/TypeUtil';
+import { ConnectorController } from './ConnectorController';
+import { AccountController } from './AccountController';
 import { CoreHelperUtil } from '../utils/CoreHelperUtil';
+import { ConnectionController } from './ConnectionController';
 import { TransactionsController } from './TransactionsController';
 import { EventsController } from './EventsController';
-import { ConnectionsController } from './ConnectionsController';
 
 // -- Constants ---------------------------------------- //
 export const INITIAL_GAS_LIMIT = 150000;
@@ -45,7 +44,8 @@ class TransactionError extends Error {
 
 export interface SwapControllerState {
   // Loading states
-  loadingTokens: boolean;
+  initializing: boolean;
+  initialized: boolean;
   loadingPrices: boolean;
   loadingQuote?: boolean;
   loadingApprovalTransaction?: boolean;
@@ -68,6 +68,7 @@ export interface SwapControllerState {
   toTokenAmount: string;
   toTokenPriceInUSD: number;
   networkPrice: string;
+  networkBalanceInUSD: string;
   networkTokenSymbol: string;
   inputError: string | undefined;
 
@@ -95,7 +96,8 @@ type StateKey = keyof SwapControllerState;
 // -- State --------------------------------------------- //
 const initialState: SwapControllerState = {
   // Loading states
-  loadingTokens: false,
+  initializing: false,
+  initialized: false,
   loadingPrices: false,
   loadingQuote: false,
   loadingApprovalTransaction: false,
@@ -118,6 +120,7 @@ const initialState: SwapControllerState = {
   toTokenAmount: '',
   toTokenPriceInUSD: 0,
   networkPrice: '0',
+  networkBalanceInUSD: '0',
   networkTokenSymbol: '',
   inputError: undefined,
 
@@ -155,15 +158,10 @@ export const SwapController = {
   },
 
   getParams() {
-    const { activeAddress, activeNamespace, activeNetwork, connection } =
-      ConnectionsController.state;
-    const address = CoreHelperUtil.getPlainAddress(activeAddress);
-
-    if (!activeNamespace || !activeNetwork) {
-      throw new Error('No active namespace or network found to swap the tokens from.');
-    }
-
-    const networkAddress: CaipAddress = `${activeNetwork.caipNetworkId}:${ConstantsUtil.NATIVE_TOKEN_ADDRESS[activeNamespace]}`;
+    const caipAddress = AccountController.state.caipAddress;
+    const address = CoreHelperUtil.getPlainAddress(caipAddress);
+    const networkAddress = NetworkController.getActiveNetworkTokenAddress();
+    const type = ConnectorController.state.connectedConnector;
 
     if (!address) {
       throw new Error('No address found to swap the tokens from.');
@@ -179,9 +177,8 @@ export const SwapController = {
 
     return {
       networkAddress,
-      network: activeNetwork,
       fromAddress: address,
-      fromCaipAddress: activeAddress,
+      fromCaipAddress: caipAddress,
       sourceTokenAddress: state.sourceToken?.address,
       toTokenAddress: state.toToken?.address,
       toTokenAmount: state.toTokenAmount,
@@ -192,13 +189,13 @@ export const SwapController = {
       invalidSourceToken,
       invalidSourceTokenAmount,
       availableToSwap:
-        activeAddress && !invalidToToken && !invalidSourceToken && !invalidSourceTokenAmount,
-      isAuthConnector: !!connection?.properties?.provider
+        caipAddress && !invalidToToken && !invalidSourceToken && !invalidSourceTokenAmount,
+      isAuthConnector: type === 'AUTH'
     };
   },
 
   switchTokens() {
-    if (state.loadingTokens) {
+    if (state.initializing || !state.initialized) {
       return;
     }
 
@@ -223,36 +220,41 @@ export const SwapController = {
     this.swapTokens();
   },
 
+  resetState() {
+    state.myTokensWithBalance = initialState.myTokensWithBalance;
+    state.tokensPriceMap = initialState.tokensPriceMap;
+    state.initialized = initialState.initialized;
+    state.sourceToken = initialState.sourceToken;
+    state.sourceTokenAmount = initialState.sourceTokenAmount;
+    state.sourceTokenPriceInUSD = initialState.sourceTokenPriceInUSD;
+    state.toToken = initialState.toToken;
+    state.toTokenAmount = initialState.toTokenAmount;
+    state.toTokenPriceInUSD = initialState.toTokenPriceInUSD;
+    state.networkPrice = initialState.networkPrice;
+    state.networkTokenSymbol = initialState.networkTokenSymbol;
+    state.networkBalanceInUSD = initialState.networkBalanceInUSD;
+    state.inputError = initialState.inputError;
+  },
+
   async fetchTokens() {
-    try {
-      const { networkAddress } = this.getParams();
+    const { networkAddress } = this.getParams();
 
-      state.loadingTokens = true;
-      await this.getTokenList();
-      await this.getNetworkTokenPrice();
-      await this.getMyTokensWithBalance();
+    await this.getTokenList();
+    await this.getNetworkTokenPrice();
+    await this.getMyTokensWithBalance();
 
-      const networkToken = state.tokens?.find(token => token.address === networkAddress);
+    const networkToken = state.tokens?.find(token => token.address === networkAddress);
 
-      if (networkToken) {
-        state.networkTokenSymbol = networkToken.symbol;
-      }
+    if (networkToken) {
+      state.networkTokenSymbol = networkToken.symbol;
+    }
 
-      // Set default source token if not set
-      if (!state.sourceToken && state.myTokensWithBalance?.length) {
-        const sourceToken =
-          state.myTokensWithBalance?.find(token => token.address.startsWith(networkAddress)) ||
-          state.myTokensWithBalance?.[0];
+    const sourceToken =
+      state.myTokensWithBalance?.find(token => token.address.startsWith(networkAddress)) ||
+      state.myTokensWithBalance?.[0];
 
-        this.setSourceToken(sourceToken);
-        this.setSourceTokenAmount('1');
-      }
-    } catch (error) {
-      SnackController.showError('Failed to initialize swap');
-      RouterController.goBack();
-    } finally {
-      state.loadingTokens = false;
-    }
+    this.setSourceToken(sourceToken);
+    this.setSourceTokenAmount('1');
   },
 
   async getTokenList() {
@@ -278,23 +280,21 @@ export const SwapController = {
     }, {});
   },
 
-  async getMyTokensWithBalance(forceUpdate?: CaipAddress[]) {
-    await ConnectionsController.fetchBalance(forceUpdate);
-    const swapBalances = SwapApiUtil.mapBalancesToSwapTokens(ConnectionsController.state.balances);
-    if (!swapBalances) {
+  async getMyTokensWithBalance(forceUpdate?: string) {
+    const balances = await SwapApiUtil.getMyTokensWithBalance(forceUpdate);
+
+    if (!balances) {
       return;
     }
 
     await this.getInitialGasPrice();
-    this.setBalances(swapBalances);
+    this.setBalances(balances);
   },
 
-  getFilteredPopularTokens(balances?: SwapTokenWithBalance[]) {
-    if (!balances) {
-      return state.popularTokens;
-    }
-
-    return state.popularTokens?.filter(token => !balances.some(t => t.address === token.address));
+  getFilteredPopularTokens() {
+    return state.popularTokens?.filter(
+      token => !state.myTokensWithBalance?.some(t => t.address === token.address)
+    );
   },
 
   setSourceToken(sourceToken: SwapTokenWithBalance | undefined) {
@@ -318,10 +318,26 @@ export const SwapController = {
     }
   },
 
-  async getAddressPrice(address: CaipAddress) {
-    const [namespace, chain] = address.split(':');
-    const networkId: CaipNetworkId = `${namespace}:${chain}`;
+  async initializeState() {
+    if (state.initializing) {
+      return;
+    }
 
+    state.initializing = true;
+    if (!state.initialized) {
+      try {
+        await this.fetchTokens();
+        state.initialized = true;
+      } catch (error) {
+        state.initialized = false;
+        SnackController.showError('Failed to initialize swap');
+        RouterController.goBack();
+      }
+    }
+    state.initializing = false;
+  },
+
+  async getAddressPrice(address: string) {
     const existPrice = state.tokensPriceMap[address];
 
     if (existPrice) {
@@ -330,8 +346,7 @@ export const SwapController = {
 
     const response = await BlockchainApiController.fetchTokenPrice({
       projectId: OptionsController.state.projectId,
-      addresses: [address],
-      caipNetworkId: networkId
+      addresses: [address]
     });
     const fungibles = response?.fungibles || [];
     const allTokens = [...(state.tokens || []), ...(state.myTokensWithBalance || [])];
@@ -346,13 +361,10 @@ export const SwapController = {
 
   async getNetworkTokenPrice() {
     const { networkAddress } = this.getParams();
-    const [namespace, chain] = networkAddress.split(':');
-    const networkId: CaipNetworkId = `${namespace}:${chain}`;
 
     const response = await BlockchainApiController.fetchTokenPrice({
       projectId: OptionsController.state.projectId,
-      addresses: [networkAddress],
-      caipNetworkId: networkId
+      addresses: [networkAddress]
     });
 
     const token = response?.fungibles?.[0];
@@ -388,11 +400,24 @@ export const SwapController = {
   },
 
   setBalances(balances: SwapTokenWithBalance[]) {
-    state.myTokensWithBalance = balances;
+    const { networkAddress } = this.getParams();
+    const caipNetwork = NetworkController.state.caipNetwork;
+
+    if (!caipNetwork) {
+      return;
+    }
+
+    const networkToken = balances.find(token => token.address === networkAddress);
 
     balances.forEach(token => {
       state.tokensPriceMap[token.address] = token.price || 0;
     });
+
+    state.myTokensWithBalance = balances.filter(token => token.address?.startsWith(caipNetwork.id));
+
+    state.networkBalanceInUSD = networkToken
+      ? NumberUtil.multiply(networkToken.quantity.numeric, networkToken.price).toString()
+      : '0';
   },
 
   setToToken(toToken: SwapTokenWithBalance | undefined) {
@@ -414,7 +439,7 @@ export const SwapController = {
       : '';
   },
 
-  async setTokenPrice(address: CaipAddress, target: SwapInputTarget) {
+  async setTokenPrice(address: string, target: SwapInputTarget) {
     let price = state.tokensPriceMap[address] || 0;
 
     if (!price) {
@@ -439,12 +464,12 @@ export const SwapController = {
 
   // -- Swap ---------------------------------------------- //
   async swapTokens() {
-    const address = ConnectionsController.state.activeAddress;
+    const address = AccountController.state.address as `${string}:${string}:${string}`;
     const sourceToken = state.sourceToken;
     const toToken = state.toToken;
     const haveSourceTokenAmount = NumberUtil.bigNumber(state.sourceTokenAmount).isGreaterThan(0);
 
-    if (!toToken || !sourceToken || state.loadingPrices || !haveSourceTokenAmount || !address) {
+    if (!toToken || !sourceToken || state.loadingPrices || !haveSourceTokenAmount) {
       return;
     }
 
@@ -454,45 +479,39 @@ export const SwapController = {
       .multipliedBy(10 ** sourceToken.decimals)
       .integerValue();
 
-    try {
-      const quoteResponse = await BlockchainApiController.fetchSwapQuote({
-        userAddress: address,
-        projectId: OptionsController.state.projectId,
-        from: sourceToken.address,
-        to: toToken.address,
-        gasPrice: state.gasFee,
-        amount: amountDecimal.toString()
-      });
+    const quoteResponse = await BlockchainApiController.fetchSwapQuote({
+      userAddress: address,
+      projectId: OptionsController.state.projectId,
+      from: sourceToken.address,
+      to: toToken.address,
+      gasPrice: state.gasFee,
+      amount: amountDecimal.toString()
+    });
 
-      const quoteToAmount = quoteResponse?.quotes?.[0]?.toAmount;
+    state.loadingQuote = false;
 
-      if (!quoteToAmount) {
-        state.loadingQuote = false;
+    const quoteToAmount = quoteResponse?.quotes?.[0]?.toAmount;
 
-        return;
-      }
+    if (!quoteToAmount) {
+      return;
+    }
 
-      const toTokenAmount = NumberUtil.bigNumber(quoteToAmount)
-        .dividedBy(10 ** toToken.decimals)
-        .toString();
+    const toTokenAmount = NumberUtil.bigNumber(quoteToAmount)
+      .dividedBy(10 ** toToken.decimals)
+      .toString();
 
-      this.setToTokenAmount(toTokenAmount);
+    this.setToTokenAmount(toTokenAmount);
 
-      const isInsufficientToken = this.hasInsufficientToken(
-        state.sourceTokenAmount,
-        sourceToken.address
-      );
+    const isInsufficientToken = this.hasInsufficientToken(
+      state.sourceTokenAmount,
+      sourceToken.address
+    );
 
-      if (isInsufficientToken) {
-        state.inputError = 'Insufficient balance';
-      } else {
-        state.inputError = undefined;
-        this.setTransactionDetails();
-      }
-    } catch (error) {
-      SnackController.showError('Failed to get swap quote');
-    } finally {
-      state.loadingQuote = false;
+    if (isInsufficientToken) {
+      state.inputError = 'Insufficient balance';
+    } else {
+      state.inputError = undefined;
+      this.setTransactionDetails();
     }
   },
 
@@ -561,7 +580,7 @@ export const SwapController = {
       if (!response) {
         throw new Error('createAllowanceTransaction - No response from generateApproveCalldata');
       }
-      const gasLimit = await ConnectionsController.estimateGas({
+      const gasLimit = await ConnectionController.estimateGas({
         address: fromAddress as `0x${string}`,
         to: CoreHelperUtil.getPlainAddress(response.tx.to) as `0x${string}`,
         data: response.tx.data
@@ -614,7 +633,7 @@ export const SwapController = {
       return undefined;
     }
 
-    const amount = ConnectionsController.parseUnits(
+    const amount = ConnectionController.parseUnits(
       sourceTokenAmount,
       sourceToken.decimals
     )?.toString();
@@ -664,32 +683,42 @@ export const SwapController = {
   },
 
   async sendTransactionForApproval(data: TransactionParams) {
-    const { fromAddress, network } = this.getParams();
-    state.loadingApprovalTransaction = true;
+    const { fromAddress, isAuthConnector } = this.getParams();
 
-    SnackController.showLoading('Approve limit increase in your wallet');
+    state.loadingApprovalTransaction = true;
+    const approveLimitMessage = `Approve limit increase in your wallet`;
+
+    if (isAuthConnector) {
+      RouterController.pushTransactionStack({
+        view: null,
+        goBack: true,
+        onSuccess() {
+          SnackController.showLoading(approveLimitMessage);
+        }
+      });
+    } else {
+      SnackController.showLoading(approveLimitMessage);
+    }
 
     try {
-      await ConnectionsController.sendTransaction({
+      await ConnectionController.sendTransaction({
         address: fromAddress as `0x${string}`,
         to: data.to as `0x${string}`,
         data: data.data as `0x${string}`,
         value: BigInt(data.value),
         gasPrice: BigInt(data.gasPrice),
-        chainNamespace: ConnectionsController.state.activeNamespace,
-        network
+        chainNamespace: 'eip155'
       });
 
       await this.swapTokens();
       await this.getTransaction();
       state.approvalTransaction = undefined;
+      state.loadingApprovalTransaction = false;
     } catch (err) {
       const error = err as TransactionError;
       state.transactionError = error?.shortMessage as unknown as string;
-
-      SnackController.showError(error?.shortMessage ?? 'Transaction error');
-    } finally {
       state.loadingApprovalTransaction = false;
+      SnackController.showError(error?.shortMessage ?? 'Transaction error');
     }
   },
 
@@ -697,53 +726,68 @@ export const SwapController = {
     if (!data) {
       return undefined;
     }
-    const { fromAddress, isAuthConnector, network } = this.getParams();
 
-    state.loadingTransaction = true;
+    const { fromAddress, toTokenAmount, isAuthConnector } = this.getParams();
 
-    const snackbarSuccessMessage = `Swapped ${state.sourceToken?.symbol} to ${state.toToken?.symbol}`;
+    state.loadingTransaction = true;
 
-    SnackController.showLoading('Confirm transaction in your wallet');
+    const snackbarPendingMessage = `Swapping ${state.sourceToken
+      ?.symbol} to ${NumberUtil.formatNumberToLocalString(toTokenAmount, 3)} ${state.toToken
+      ?.symbol}`;
+    const snackbarSuccessMessage = `Swapped ${state.sourceToken
+      ?.symbol} to ${NumberUtil.formatNumberToLocalString(toTokenAmount, 3)} ${state.toToken
+      ?.symbol}`;
+
+    if (isAuthConnector) {
+      RouterController.pushTransactionStack({
+        view: 'Account',
+        goBack: false,
+        onSuccess() {
+          SnackController.showLoading(snackbarPendingMessage);
+          SwapController.resetState();
+        }
+      });
+    } else {
+      SnackController.showLoading('Confirm transaction in your wallet');
+    }
 
     try {
-      const forceUpdateAddresses = [state.sourceToken?.address, state.toToken?.address].filter(
-        Boolean
-      ) as CaipAddress[];
-
-      const transactionHash = await ConnectionsController.sendTransaction({
+      const forceUpdateAddresses = [state.sourceToken?.address, state.toToken?.address].join(',');
+      const transactionHash = await ConnectionController.sendTransaction({
         address: fromAddress as `0x${string}`,
         to: data.to as `0x${string}`,
         data: data.data as `0x${string}`,
         gas: data.gas,
         gasPrice: BigInt(data.gasPrice),
         value: data.value,
-        chainNamespace: ConnectionsController.state.activeNamespace,
-        network
+        chainNamespace: 'eip155'
       });
 
       state.loadingTransaction = false;
-
-      SnackController.showSuccess(snackbarSuccessMessage, true);
+      SnackController.showSuccess(snackbarSuccessMessage);
       EventsController.sendEvent({
         type: 'track',
         event: 'SWAP_SUCCESS',
         properties: {
-          network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+          network: NetworkController.state.caipNetwork?.id || '',
           swapFromToken: this.state.sourceToken?.symbol || '',
           swapToToken: this.state.toToken?.symbol || '',
           swapFromAmount: this.state.sourceTokenAmount || '',
           swapToAmount: this.state.toTokenAmount || '',
-          isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
         }
       });
-      RouterController.replace(isAuthConnector ? 'Account' : 'AccountDefault');
-      SwapController.clearTokens();
+      SwapController.resetState();
+
+      if (!isAuthConnector) {
+        RouterController.replace('AccountDefault');
+      }
+
       SwapController.getMyTokensWithBalance(forceUpdateAddresses);
+      AccountController.fetchTokenBalance();
 
       setTimeout(() => {
-        if (ConnectionsController.state.activeAddress) {
-          TransactionsController.fetchTransactions(ConnectionsController.state.activeAddress, true);
-        }
+        TransactionsController.fetchTransactions(AccountController.state.address, true);
       }, 5000);
 
       return transactionHash;
@@ -757,12 +801,12 @@ export const SwapController = {
         event: 'SWAP_ERROR',
         properties: {
           message: error?.shortMessage ?? error?.message ?? 'Unknown',
-          network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+          network: NetworkController.state.caipNetwork?.id || '',
           swapFromToken: this.state.sourceToken?.symbol || '',
           swapToToken: this.state.toToken?.symbol || '',
           swapFromAmount: this.state.sourceTokenAmount || '',
           swapToAmount: this.state.toTokenAmount || '',
-          isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
         }
       });
 
@@ -770,45 +814,8 @@ export const SwapController = {
     }
   },
 
-  clearTransactionLoaders() {
-    state.loadingApprovalTransaction = false;
-    state.loadingBuildTransaction = false;
-    state.loadingTransaction = false;
-  },
-
-  clearTokens() {
-    state.sourceToken = initialState.sourceToken;
-    state.sourceTokenAmount = initialState.sourceTokenAmount;
-    state.sourceTokenPriceInUSD = initialState.sourceTokenPriceInUSD;
-    state.toToken = initialState.toToken;
-    state.toTokenAmount = initialState.toTokenAmount;
-    state.toTokenPriceInUSD = initialState.toTokenPriceInUSD;
-    state.inputError = initialState.inputError;
-    state.loadingApprovalTransaction = initialState.loadingApprovalTransaction;
-    state.loadingBuildTransaction = initialState.loadingBuildTransaction;
-    state.loadingTransaction = initialState.loadingTransaction;
-    state.fetchError = initialState.fetchError;
-    state.transactionError = initialState.transactionError;
-    state.swapTransaction = initialState.swapTransaction;
-    state.approvalTransaction = initialState.approvalTransaction;
-  },
-
-  resetState() {
-    this.clearTokens();
-    state.myTokensWithBalance = initialState.myTokensWithBalance;
-    state.tokensPriceMap = initialState.tokensPriceMap;
-    state.networkPrice = initialState.networkPrice;
-    state.networkTokenSymbol = initialState.networkTokenSymbol;
-  },
-
   // -- Checks -------------------------------------------- //
   hasInsufficientToken(sourceTokenAmount: string, sourceTokenAddress: string) {
-    const { balances } = ConnectionsController.state;
-    const networkToken = balances?.find(t => t.address === undefined);
-    const networkBalanceInUSD = networkToken
-      ? NumberUtil.multiply(networkToken.quantity?.numeric ?? '0', networkToken.price).toString()
-      : '0';
-
     const isInsufficientSourceTokenForSwap = SwapCalculationUtil.isInsufficientSourceTokenForSwap(
       sourceTokenAmount,
       sourceTokenAddress,
@@ -816,12 +823,12 @@ export const SwapController = {
     );
 
     let insufficientNetworkTokenForGas = true;
-    if (ConnectionsController.state.accountType === 'smartAccount') {
+    if (AccountController.state.preferredAccountType === 'smartAccount') {
       // Smart Accounts may pay gas in any ERC20 token
       insufficientNetworkTokenForGas = false;
     } else {
       insufficientNetworkTokenForGas = SwapCalculationUtil.isInsufficientNetworkTokenForGas(
-        networkBalanceInUSD,
+        state.networkBalanceInUSD,
         state.gasPriceInUSD
       );
     }

package/src/controllers/ThemeController.ts

@@ -1,11 +1,10 @@
-import { Appearance } from 'react-native';
 import { proxy, subscribe as sub } from 'valtio';
 import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
 
 // -- Types --------------------------------------------- //
 export interface ThemeControllerState {
   themeMode?: ThemeMode;
-  themeVariables?: ThemeVariables;
+  themeVariables: ThemeVariables;
 }
 
 // -- State --------------------------------------------- //
@@ -23,18 +22,10 @@ export const ThemeController = {
   },
 
   setThemeMode(themeMode: ThemeControllerState['themeMode']) {
-    if (!themeMode) {
-      state.themeMode = Appearance.getColorScheme() as ThemeMode;
-    } else {
-      state.themeMode = themeMode;
-    }
+    state.themeMode = themeMode;
   },
 
   setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
-    if (!themeVariables) {
-      state.themeVariables = {};
-    }
-
     state.themeVariables = { ...state.themeVariables, ...themeVariables };
   }
 };