@reown/appkit-core-react-native 1.2.4 → 2.0.0-alpha.1

package/src/controllers/RouterController.ts

@@ -1,5 +1,12 @@
 import { proxy } from 'valtio';
-import type { WcWallet, CaipNetwork, Connector, SwapInputTarget } from '../utils/TypeUtil';
+import type { CaipNetwork } from '@reown/appkit-common-react-native';
+
+import type {
+  WcWallet,
+  Connector,
+  SwapInputTarget,
+  OnRampTransactionResult
+} from '../utils/TypeUtil';
 
 // -- Types --------------------------------------------- //
 type TransactionAction = {
@@ -28,6 +35,11 @@ export interface RouterControllerState {
     | 'EmailVerifyOtp'
     | 'GetWallet'
     | 'Networks'
+    | 'OnRamp'
+    | 'OnRampCheckout'
+    | 'OnRampLoading'
+    | 'OnRampSettings'
+    | 'OnRampTransaction'
     | 'SwitchNetwork'
     | 'Swap'
     | 'SwapSelectToken'
@@ -54,6 +66,7 @@ export interface RouterControllerState {
     email?: string;
     newEmail?: string;
     swapTarget?: SwapInputTarget;
+    onrampResult?: OnRampTransactionResult;
   };
   transactionStack: TransactionAction[];
 }
@@ -101,13 +114,14 @@ export const RouterController = {
     }
   },
 
-  reset(view: RouterControllerState['view']) {
+  reset(view: RouterControllerState['view'], data?: RouterControllerState['data']) {
     state.view = view;
     state.history = [view];
+    state.data = data;
   },
 
   replace(view: RouterControllerState['view'], data?: RouterControllerState['data']) {
-    if (state.history.length > 1 && state.history.at(-1) !== view) {
+    if (state.history.length >= 1 && state.history.at(-1) !== view) {
       state.view = view;
       state.history[state.history.length - 1] = view;
       state.data = data;

package/src/controllers/SendController.ts

@@ -6,8 +6,8 @@ import { ConnectionController } from './ConnectionController';
 import { SnackController } from './SnackController';
 import { CoreHelperUtil } from '../utils/CoreHelperUtil';
 import { EventsController } from './EventsController';
-import { NetworkController } from './NetworkController';
 import { RouterController } from './RouterController';
+import { ConnectionsController } from './ConnectionsController';
 
 // -- Types --------------------------------------------- //
 export interface TxParams {
@@ -100,7 +100,7 @@ export const SendController = {
           isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
           token: this.state.token.address,
           amount: this.state.sendTokenAmount,
-          network: NetworkController.state.caipNetwork?.id || ''
+          network: ConnectionsController.state.activeNetwork?.caipNetworkId || ''
         }
       });
       this.sendERC20Token({
@@ -123,7 +123,7 @@ export const SendController = {
           isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
           token: this.state.token?.symbol,
           amount: this.state.sendTokenAmount,
-          network: NetworkController.state.caipNetwork?.id || ''
+          network: ConnectionsController.state.activeNetwork?.caipNetworkId || ''
         }
       });
       this.sendNativeToken({
@@ -165,7 +165,7 @@ export const SendController = {
           isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
           token: this.state.token?.symbol || '',
           amount: params.sendTokenAmount,
-          network: NetworkController.state.caipNetwork?.id || ''
+          network: ConnectionsController.state.activeNetwork?.caipNetworkId || ''
         }
       });
       this.resetSend();
@@ -178,7 +178,7 @@ export const SendController = {
           isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
           token: this.state.token?.symbol || '',
           amount: params.sendTokenAmount,
-          network: NetworkController.state.caipNetwork?.id || ''
+          network: ConnectionsController.state.activeNetwork?.caipNetworkId || ''
         }
       });
       SnackController.showError('Something went wrong');

package/src/controllers/SwapController.ts

@@ -1,10 +1,9 @@
 import { subscribeKey as subKey } from 'valtio/utils';
 import { proxy, subscribe as sub } from 'valtio';
-import { NumberUtil } from '@reown/appkit-common-react-native';
+import { NumberUtil, type CaipAddress } 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';
@@ -14,9 +13,9 @@ 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;
@@ -158,9 +157,15 @@ export const SwapController = {
   },
 
   getParams() {
-    const caipAddress = AccountController.state.caipAddress;
-    const address = CoreHelperUtil.getPlainAddress(caipAddress);
-    const networkAddress = NetworkController.getActiveNetworkTokenAddress();
+    const { activeAddress, activeNamespace, activeNetwork } = 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 type = ConnectorController.state.connectedConnector;
 
     if (!address) {
@@ -178,7 +183,7 @@ export const SwapController = {
     return {
       networkAddress,
       fromAddress: address,
-      fromCaipAddress: caipAddress,
+      fromCaipAddress: activeAddress,
       sourceTokenAddress: state.sourceToken?.address,
       toTokenAddress: state.toToken?.address,
       toTokenAmount: state.toTokenAmount,
@@ -189,7 +194,7 @@ export const SwapController = {
       invalidSourceToken,
       invalidSourceTokenAmount,
       availableToSwap:
-        caipAddress && !invalidToToken && !invalidSourceToken && !invalidSourceTokenAmount,
+        activeAddress && !invalidToToken && !invalidSourceToken && !invalidSourceTokenAmount,
       isAuthConnector: type === 'AUTH'
     };
   },
@@ -282,7 +287,6 @@ export const SwapController = {
 
   async getMyTokensWithBalance(forceUpdate?: string) {
     const balances = await SwapApiUtil.getMyTokensWithBalance(forceUpdate);
-
     if (!balances) {
       return;
     }
@@ -401,7 +405,7 @@ export const SwapController = {
 
   setBalances(balances: SwapTokenWithBalance[]) {
     const { networkAddress } = this.getParams();
-    const caipNetwork = NetworkController.state.caipNetwork;
+    const caipNetwork = ConnectionsController.state.activeNetwork;
 
     if (!caipNetwork) {
       return;
@@ -413,7 +417,9 @@ export const SwapController = {
       state.tokensPriceMap[token.address] = token.price || 0;
     });
 
-    state.myTokensWithBalance = balances.filter(token => token.address?.startsWith(caipNetwork.id));
+    state.myTokensWithBalance = balances.filter(
+      token => token.address?.startsWith(caipNetwork.caipNetworkId)
+    );
 
     state.networkBalanceInUSD = networkToken
       ? NumberUtil.multiply(networkToken.quantity.numeric, networkToken.price).toString()
@@ -464,12 +470,12 @@ export const SwapController = {
 
   // -- Swap ---------------------------------------------- //
   async swapTokens() {
-    const address = AccountController.state.address as `${string}:${string}:${string}`;
+    const address = ConnectionsController.state.activeAddress;
     const sourceToken = state.sourceToken;
     const toToken = state.toToken;
     const haveSourceTokenAmount = NumberUtil.bigNumber(state.sourceTokenAmount).isGreaterThan(0);
 
-    if (!toToken || !sourceToken || state.loadingPrices || !haveSourceTokenAmount) {
+    if (!toToken || !sourceToken || state.loadingPrices || !haveSourceTokenAmount || !address) {
       return;
     }
 
@@ -479,39 +485,44 @@ export const SwapController = {
       .multipliedBy(10 ** sourceToken.decimals)
       .integerValue();
 
-    const quoteResponse = await BlockchainApiController.fetchSwapQuote({
-      userAddress: address,
-      projectId: OptionsController.state.projectId,
-      from: sourceToken.address,
-      to: toToken.address,
-      gasPrice: state.gasFee,
-      amount: amountDecimal.toString()
-    });
+    try {
+      const quoteResponse = await BlockchainApiController.fetchSwapQuote({
+        userAddress: address,
+        projectId: OptionsController.state.projectId,
+        from: sourceToken.address,
+        to: toToken.address,
+        gasPrice: state.gasFee,
+        amount: amountDecimal.toString()
+      });
 
-    state.loadingQuote = false;
+      state.loadingQuote = false;
 
-    const quoteToAmount = quoteResponse?.quotes?.[0]?.toAmount;
+      const quoteToAmount = quoteResponse?.quotes?.[0]?.toAmount;
 
-    if (!quoteToAmount) {
-      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();
+      if (isInsufficientToken) {
+        state.inputError = 'Insufficient balance';
+      } else {
+        state.inputError = undefined;
+        this.setTransactionDetails();
+      }
+    } catch (error) {
+      SnackController.showError('Failed to get swap quote');
+      state.loadingQuote = false;
     }
   },
 
@@ -580,7 +591,7 @@ export const SwapController = {
       if (!response) {
         throw new Error('createAllowanceTransaction - No response from generateApproveCalldata');
       }
-      const gasLimit = await ConnectionController.estimateGas({
+      const gasLimit = await ConnectionsController.estimateGas({
         address: fromAddress as `0x${string}`,
         to: CoreHelperUtil.getPlainAddress(response.tx.to) as `0x${string}`,
         data: response.tx.data
@@ -633,7 +644,7 @@ export const SwapController = {
       return undefined;
     }
 
-    const amount = ConnectionController.parseUnits(
+    const amount = ConnectionsController.parseUnits(
       sourceTokenAmount,
       sourceToken.decimals
     )?.toString();
@@ -701,13 +712,13 @@ export const SwapController = {
     }
 
     try {
-      await ConnectionController.sendTransaction({
+      await ConnectionsController.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: 'eip155'
+        chainNamespace: ConnectionsController.state.activeNamespace
       });
 
       await this.swapTokens();
@@ -726,7 +737,6 @@ export const SwapController = {
     if (!data) {
       return undefined;
     }
-
     const { fromAddress, toTokenAmount, isAuthConnector } = this.getParams();
 
     state.loadingTransaction = true;
@@ -753,14 +763,14 @@ export const SwapController = {
 
     try {
       const forceUpdateAddresses = [state.sourceToken?.address, state.toToken?.address].join(',');
-      const transactionHash = await ConnectionController.sendTransaction({
+      const transactionHash = await ConnectionsController.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: 'eip155'
+        chainNamespace: ConnectionsController.state.activeNamespace
       });
 
       state.loadingTransaction = false;
@@ -769,7 +779,7 @@ export const SwapController = {
         type: 'track',
         event: 'SWAP_SUCCESS',
         properties: {
-          network: NetworkController.state.caipNetwork?.id || '',
+          network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
           swapFromToken: this.state.sourceToken?.symbol || '',
           swapToToken: this.state.toToken?.symbol || '',
           swapFromAmount: this.state.sourceTokenAmount || '',
@@ -801,7 +811,7 @@ export const SwapController = {
         event: 'SWAP_ERROR',
         properties: {
           message: error?.shortMessage ?? error?.message ?? 'Unknown',
-          network: NetworkController.state.caipNetwork?.id || '',
+          network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
           swapFromToken: this.state.sourceToken?.symbol || '',
           swapToToken: this.state.toToken?.symbol || '',
           swapFromAmount: this.state.sourceTokenAmount || '',

package/src/controllers/ThemeController.ts

@@ -1,10 +1,11 @@
+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 --------------------------------------------- //
@@ -22,10 +23,18 @@ export const ThemeController = {
   },
 
   setThemeMode(themeMode: ThemeControllerState['themeMode']) {
-    state.themeMode = themeMode;
+    if (!themeMode) {
+      state.themeMode = Appearance.getColorScheme() as ThemeMode;
+    } else {
+      state.themeMode = themeMode;
+    }
   },
 
   setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
+    if (!themeVariables) {
+      state.themeVariables = {};
+    }
+
     state.themeVariables = { ...state.themeVariables, ...themeVariables };
   }
 };

package/src/controllers/TransactionsController.ts

@@ -3,9 +3,9 @@ import { proxy, subscribe as sub } from 'valtio/vanilla';
 import { OptionsController } from './OptionsController';
 import { EventsController } from './EventsController';
 import { SnackController } from './SnackController';
-import { NetworkController } from './NetworkController';
 import { BlockchainApiController } from './BlockchainApiController';
 import { AccountController } from './AccountController';
+import { ConnectionsController } from './ConnectionsController';
 
 // -- Types --------------------------------------------- //
 type TransactionByMonthMap = Record<string, Transaction[]>;
@@ -121,7 +121,7 @@ export const TransactionsController = {
   },
 
   filterByConnectedChain(transactions: Transaction[]) {
-    const chainId = NetworkController.state.caipNetwork?.id;
+    const chainId = ConnectionsController.state.activeCaipNetworkId;
     const filteredTransactions = transactions.filter(
       transaction => transaction.metadata.chain === chainId
     );

package/src/index.ts

@@ -21,6 +21,11 @@ export {
   type ConnectionControllerState
 } from './controllers/ConnectionController';
 
+export {
+  ConnectionsController,
+  type ConnectionsControllerState
+} from './controllers/ConnectionsController';
+
 export {
   ConnectorController,
   type ConnectorControllerState
@@ -56,12 +61,12 @@ export {
 
 export { SendController, type SendControllerState } from './controllers/SendController';
 
+export { OnRampController, type OnRampControllerState } from './controllers/OnRampController';
 export { WebviewController, type WebviewControllerState } from './controllers/WebviewController';
 
 // -- Utils -------------------------------------------------------------------
 export { ApiUtil } from './utils/ApiUtil';
 export { AssetUtil } from './utils/AssetUtil';
-export { ConnectionUtil } from './utils/ConnectionUtil';
 export { ConstantsUtil } from './utils/ConstantsUtil';
 export { CoreHelperUtil } from './utils/CoreHelperUtil';
 export { StorageUtil } from './utils/StorageUtil';

package/src/utils/AssetUtil.ts

@@ -1,5 +1,5 @@
 import { AssetController } from '../controllers/AssetController';
-import type { CaipNetwork, Connector, WcWallet } from './TypeUtil';
+import type { Connector, WcWallet } from './TypeUtil';
 
 export const AssetUtil = {
   getWalletImage(wallet?: WcWallet) {
@@ -14,13 +14,11 @@ export const AssetUtil = {
     return undefined;
   },
 
-  getNetworkImage(network?: CaipNetwork) {
-    if (network?.imageUrl) {
-      return network?.imageUrl;
-    }
+  getNetworkImage(networkId?: string | number) {
+    //TODO: check if imageUrl case is needed
 
-    if (network?.imageId) {
-      return AssetController.state.networkImages[network.imageId];
+    if (networkId) {
+      return AssetController.state.networkImages[networkId];
     }
 
     return undefined;