@reown/appkit-core-react-native 1.0.2 → 1.1.1

package/src/controllers/NetworkController.ts

@@ -1,6 +1,7 @@
 import { proxy, ref } from 'valtio';
 import type { CaipNetwork, CaipNetworkId } from '../utils/TypeUtil';
 import { PublicStateController } from './PublicStateController';
+import { NetworkUtil } from '@reown/appkit-common-react-native';
 
 // -- Types --------------------------------------------- //
 export interface NetworkControllerClient {
@@ -18,12 +19,14 @@ export interface NetworkControllerState {
   caipNetwork?: CaipNetwork;
   requestedCaipNetworks?: CaipNetwork[];
   approvedCaipNetworkIds?: CaipNetworkId[];
+  smartAccountEnabledNetworks: number[];
 }
 
 // -- State --------------------------------------------- //
 const state = proxy<NetworkControllerState>({
   supportsAllNetworks: true,
-  isDefaultCaipNetwork: false
+  isDefaultCaipNetwork: false,
+  smartAccountEnabledNetworks: []
 });
 
 // -- Controller ---------------------------------------- //
@@ -57,12 +60,41 @@ export const NetworkController = {
     state.requestedCaipNetworks = requestedNetworks;
   },
 
+  setSmartAccountEnabledNetworks(
+    smartAccountEnabledNetworks: NetworkControllerState['smartAccountEnabledNetworks']
+  ) {
+    state.smartAccountEnabledNetworks = smartAccountEnabledNetworks;
+  },
+
+  checkIfSmartAccountEnabled() {
+    const networkId = NetworkUtil.caipNetworkIdToNumber(state.caipNetwork?.id);
+
+    if (!networkId) {
+      return false;
+    }
+
+    return Boolean(state.smartAccountEnabledNetworks?.includes(Number(networkId)));
+  },
+
   async getApprovedCaipNetworksData() {
     const data = await this._getClient().getApprovedCaipNetworksData();
     state.supportsAllNetworks = data.supportsAllNetworks;
     state.approvedCaipNetworkIds = data.approvedCaipNetworkIds;
   },
 
+  getApprovedCaipNetworks() {
+    return state.approvedCaipNetworkIds
+      ?.map(id => state.requestedCaipNetworks?.find(network => network.id === id))
+      .filter(Boolean) as CaipNetwork[];
+  },
+
+  getSmartAccountEnabledNetworks() {
+    return this.getApprovedCaipNetworks().filter(
+      network =>
+        state.smartAccountEnabledNetworks?.find(networkId => network.id === `eip155:${networkId}`)
+    );
+  },
+
   async switchActiveNetwork(network: NetworkControllerState['caipNetwork']) {
     await this._getClient().switchCaipNetwork(network);
     state.caipNetwork = network;
@@ -75,5 +107,6 @@ export const NetworkController = {
     }
     state.approvedCaipNetworkIds = undefined;
     state.supportsAllNetworks = true;
+    state.smartAccountEnabledNetworks = [];
   }
 };

package/src/controllers/OptionsController.ts

@@ -1,5 +1,14 @@
 import { proxy, ref } from 'valtio';
-import type { CustomWallet, Metadata, ProjectId, SdkVersion, Tokens } from '../utils/TypeUtil';
+import type {
+  CustomWallet,
+  Features,
+  Metadata,
+  ProjectId,
+  SdkType,
+  SdkVersion,
+  Tokens
+} from '../utils/TypeUtil';
+import { ConstantsUtil } from '../utils/ConstantsUtil';
 
 // -- Types --------------------------------------------- //
 export interface ClipboardClient {
@@ -15,17 +24,21 @@ export interface OptionsControllerState {
   customWallets?: CustomWallet[];
   tokens?: Tokens;
   enableAnalytics?: boolean;
-  sdkType: string;
+  sdkType: SdkType;
   sdkVersion: SdkVersion;
   metadata?: Metadata;
   isSiweEnabled?: boolean;
+  features?: Features;
+  debug?: boolean;
 }
 
 // -- State --------------------------------------------- //
 const state = proxy<OptionsControllerState>({
   projectId: '',
   sdkType: 'appkit',
-  sdkVersion: 'react-native-wagmi-undefined'
+  sdkVersion: 'react-native-wagmi-undefined',
+  features: ConstantsUtil.DEFAULT_FEATURES,
+  debug: false
 });
 
 // -- Controller ---------------------------------------- //
@@ -76,6 +89,14 @@ export const OptionsController = {
     state.isSiweEnabled = isSiweEnabled;
   },
 
+  setFeatures(features: OptionsControllerState['features']) {
+    state.features = { ...ConstantsUtil.DEFAULT_FEATURES, ...features };
+  },
+
+  setDebug(debug: OptionsControllerState['debug']) {
+    state.debug = debug;
+  },
+
   isClipboardAvailable() {
     return !!state._clipboardClient;
   },
@@ -83,7 +104,7 @@ export const OptionsController = {
   copyToClipboard(value: string) {
     const client = state._clipboardClient;
     if (client) {
-      client.setString(value);
+      client?.setString(value);
     }
   }
 };

package/src/controllers/RouterController.ts

@@ -2,25 +2,46 @@ import { proxy } from 'valtio';
 import type { WcWallet, CaipNetwork, Connector } from '../utils/TypeUtil';
 
 // -- Types --------------------------------------------- //
+type TransactionAction = {
+  goBack: boolean;
+  view: RouterControllerState['view'] | null;
+  close?: boolean;
+  replace?: boolean;
+  onSuccess?: () => void;
+  onCancel?: () => void;
+};
+
 export interface RouterControllerState {
   view:
     | 'Account'
+    | 'AccountDefault'
+    | 'AllWallets'
     | 'Connect'
-    | 'ConnectingWalletConnect'
+    | 'ConnectSocials'
     | 'ConnectingExternal'
-    | 'Networks'
-    | 'SwitchNetwork'
-    | 'AllWallets'
-    | 'WhatIsAWallet'
-    | 'WhatIsANetwork'
-    | 'GetWallet'
+    | 'ConnectingSiwe'
+    | 'ConnectingSocial'
+    | 'ConnectingFarcaster'
+    | 'ConnectingWalletConnect'
+    | 'Create'
     | 'EmailVerifyDevice'
     | 'EmailVerifyOtp'
-    | 'UpdateEmailWallet'
+    | 'GetWallet'
+    | 'Networks'
+    | 'SwitchNetwork'
+    | 'Transactions'
     | 'UpdateEmailPrimaryOtp'
     | 'UpdateEmailSecondaryOtp'
+    | 'UpdateEmailWallet'
     | 'UpgradeEmailWallet'
-    | 'ConnectingSiwe';
+    | 'UpgradeToSmartAccount'
+    | 'WalletCompatibleNetworks'
+    | 'WalletReceive'
+    | 'WalletSend'
+    | 'WalletSendPreview'
+    | 'WalletSendSelectToken'
+    | 'WhatIsANetwork'
+    | 'WhatIsAWallet';
   history: RouterControllerState['view'][];
   data?: {
     connector?: Connector;
@@ -29,12 +50,14 @@ export interface RouterControllerState {
     email?: string;
     newEmail?: string;
   };
+  transactionStack: TransactionAction[];
 }
 
 // -- State --------------------------------------------- //
 const state = proxy<RouterControllerState>({
   view: 'Connect',
-  history: ['Connect']
+  history: ['Connect'],
+  transactionStack: []
 });
 
 // -- Controller ---------------------------------------- //
@@ -49,6 +72,30 @@ export const RouterController = {
     }
   },
 
+  pushTransactionStack(action: TransactionAction) {
+    state.transactionStack.push(action);
+  },
+
+  popTransactionStack(cancel?: boolean) {
+    const action = state.transactionStack.pop();
+
+    if (!action) {
+      return;
+    }
+
+    if (cancel) {
+      this.goBack();
+      action?.onCancel?.();
+    } else {
+      if (action.goBack) {
+        this.goBack();
+      } else if (action.view) {
+        this.reset(action.view);
+      }
+      action?.onSuccess?.();
+    }
+  },
+
   reset(view: RouterControllerState['view']) {
     state.view = view;
     state.history = [view];

package/src/controllers/SendController.ts

@@ -0,0 +1,234 @@
+import { subscribeKey as subKey } from 'valtio/vanilla/utils';
+import { proxy, ref, subscribe as sub } from 'valtio/vanilla';
+import { ContractUtil, type Balance } from '@reown/appkit-common-react-native';
+import { AccountController } from './AccountController';
+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';
+
+// -- Types --------------------------------------------- //
+export interface TxParams {
+  receiverAddress: string;
+  sendTokenAmount: number;
+  gasPrice: bigint;
+  decimals: string;
+}
+
+export interface ContractWriteParams {
+  receiverAddress: string;
+  tokenAddress: string;
+  sendTokenAmount: number;
+  decimals: string;
+}
+
+export interface SendControllerState {
+  token?: Balance;
+  sendTokenAmount?: number;
+  receiverAddress?: string;
+  receiverProfileName?: string;
+  receiverProfileImageUrl?: string;
+  gasPrice?: bigint;
+  gasPriceInUSD?: number;
+  loading: boolean;
+}
+
+type StateKey = keyof SendControllerState;
+
+// -- State --------------------------------------------- //
+const state = proxy<SendControllerState>({
+  loading: false
+});
+
+// -- Controller ---------------------------------------- //
+export const SendController = {
+  state,
+
+  subscribe(callback: (newState: SendControllerState) => void) {
+    return sub(state, () => callback(state));
+  },
+
+  subscribeKey<K extends StateKey>(key: K, callback: (value: SendControllerState[K]) => void) {
+    return subKey(state, key, callback);
+  },
+
+  setToken(token: SendControllerState['token']) {
+    if (token) {
+      state.token = ref(token);
+    }
+  },
+
+  setTokenAmount(sendTokenAmount: SendControllerState['sendTokenAmount']) {
+    state.sendTokenAmount = sendTokenAmount;
+  },
+
+  setReceiverAddress(receiverAddress: SendControllerState['receiverAddress']) {
+    state.receiverAddress = receiverAddress;
+  },
+
+  setReceiverProfileImageUrl(
+    receiverProfileImageUrl: SendControllerState['receiverProfileImageUrl']
+  ) {
+    state.receiverProfileImageUrl = receiverProfileImageUrl;
+  },
+
+  setReceiverProfileName(receiverProfileName: SendControllerState['receiverProfileName']) {
+    state.receiverProfileName = receiverProfileName;
+  },
+
+  setGasPrice(gasPrice: SendControllerState['gasPrice']) {
+    state.gasPrice = gasPrice;
+  },
+
+  setGasPriceInUsd(gasPriceInUSD: SendControllerState['gasPriceInUSD']) {
+    state.gasPriceInUSD = gasPriceInUSD;
+  },
+
+  setLoading(loading: SendControllerState['loading']) {
+    state.loading = loading;
+  },
+
+  sendToken() {
+    if (this.state.token?.address && this.state.sendTokenAmount && this.state.receiverAddress) {
+      state.loading = true;
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SEND_INITIATED',
+        properties: {
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
+          token: this.state.token.address,
+          amount: this.state.sendTokenAmount,
+          network: NetworkController.state.caipNetwork?.id || ''
+        }
+      });
+      this.sendERC20Token({
+        receiverAddress: this.state.receiverAddress,
+        tokenAddress: this.state.token.address,
+        sendTokenAmount: this.state.sendTokenAmount,
+        decimals: this.state.token.quantity.decimals
+      });
+    } else if (
+      this.state.receiverAddress &&
+      this.state.sendTokenAmount &&
+      this.state.gasPrice &&
+      this.state.token?.quantity.decimals
+    ) {
+      state.loading = true;
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SEND_INITIATED',
+        properties: {
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
+          token: this.state.token?.symbol,
+          amount: this.state.sendTokenAmount,
+          network: NetworkController.state.caipNetwork?.id || ''
+        }
+      });
+      this.sendNativeToken({
+        receiverAddress: this.state.receiverAddress,
+        sendTokenAmount: this.state.sendTokenAmount,
+        gasPrice: this.state.gasPrice,
+        decimals: this.state.token.quantity.decimals
+      });
+    }
+  },
+
+  async sendNativeToken(params: TxParams) {
+    RouterController.pushTransactionStack({
+      view: 'Account',
+      goBack: false
+    });
+
+    const to = params.receiverAddress as `0x${string}`;
+    const address = AccountController.state.address as `0x${string}`;
+    const value = ConnectionController.parseUnits(
+      params.sendTokenAmount.toString(),
+      Number(params.decimals)
+    );
+    const data = '0x';
+
+    try {
+      await ConnectionController.sendTransaction({
+        to,
+        address,
+        data,
+        value,
+        gasPrice: params.gasPrice
+      });
+      SnackController.showSuccess('Transaction started');
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SEND_SUCCESS',
+        properties: {
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
+          token: this.state.token?.symbol || '',
+          amount: params.sendTokenAmount,
+          network: NetworkController.state.caipNetwork?.id || ''
+        }
+      });
+      this.resetSend();
+    } catch (error) {
+      state.loading = false;
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SEND_ERROR',
+        properties: {
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
+          token: this.state.token?.symbol || '',
+          amount: params.sendTokenAmount,
+          network: NetworkController.state.caipNetwork?.id || ''
+        }
+      });
+      SnackController.showError('Something went wrong');
+    }
+  },
+
+  async sendERC20Token(params: ContractWriteParams) {
+    RouterController.pushTransactionStack({
+      view: 'Account',
+      goBack: false
+    });
+
+    const amount = ConnectionController.parseUnits(
+      params.sendTokenAmount.toString(),
+      Number(params.decimals)
+    );
+
+    try {
+      if (
+        AccountController.state.address &&
+        params.sendTokenAmount &&
+        params.receiverAddress &&
+        params.tokenAddress
+      ) {
+        const tokenAddress = CoreHelperUtil.getPlainAddress(
+          params.tokenAddress as `${string}:${string}:${string}`
+        ) as `0x${string}`;
+        await ConnectionController.writeContract({
+          fromAddress: AccountController.state.address as `0x${string}`,
+          tokenAddress,
+          receiverAddress: params.receiverAddress as `0x${string}`,
+          tokenAmount: amount,
+          method: 'transfer',
+          abi: ContractUtil.getERC20Abi(tokenAddress)
+        });
+        SnackController.showSuccess('Transaction started');
+        this.resetSend();
+      }
+    } catch (error) {
+      state.loading = false;
+      SnackController.showError('Something went wrong');
+    }
+  },
+
+  resetSend() {
+    state.token = undefined;
+    state.sendTokenAmount = undefined;
+    state.receiverAddress = undefined;
+    state.receiverProfileImageUrl = undefined;
+    state.receiverProfileName = undefined;
+    state.loading = false;
+  }
+};

package/src/controllers/SnackController.ts

@@ -1,17 +1,25 @@
 import { proxy } from 'valtio';
+import { OptionsController } from './OptionsController';
 
 // -- Types --------------------------------------------- //
+interface Message {
+  shortMessage: string;
+  longMessage?: string;
+}
+
 export interface SnackControllerState {
   message: string;
   variant: 'error' | 'success';
   open: boolean;
+  long: boolean;
 }
 
 // -- State --------------------------------------------- //
 const state = proxy<SnackControllerState>({
   message: '',
   variant: 'success',
-  open: false
+  open: false,
+  long: false
 });
 
 // -- Controller ---------------------------------------- //
@@ -30,7 +38,26 @@ export const SnackController = {
     state.open = true;
   },
 
+  showInternalError(error: Message) {
+    const { debug } = OptionsController.state;
+
+    if (debug) {
+      state.message = error.shortMessage;
+      state.variant = 'error';
+      state.open = true;
+      state.long = true;
+    }
+
+    if (error.longMessage) {
+      // eslint-disable-next-line no-console
+      console.error(error.longMessage);
+    }
+  },
+
   hide() {
     state.open = false;
+    state.long = false;
+    state.message = '';
+    state.variant = 'success';
   }
 };

package/src/controllers/SwapController.ts

@@ -0,0 +1,108 @@
+import { subscribeKey as subKey } from 'valtio/utils';
+import { proxy, subscribe as sub } from 'valtio';
+
+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';
+
+// -- Constants ---------------------------------------- //
+export const INITIAL_GAS_LIMIT = 150000;
+export const TO_AMOUNT_DECIMALS = 6;
+
+// -- Types --------------------------------------------- //
+
+export interface SwapControllerState {
+  // Input values
+  networkPrice: string;
+  networkTokenSymbol: string;
+
+  // Tokens
+  tokensPriceMap: Record<string, number>;
+
+  // Calculations
+  gasFee: string;
+  gasPriceInUSD?: number;
+}
+
+type StateKey = keyof SwapControllerState;
+
+// -- State --------------------------------------------- //
+const initialState: SwapControllerState = {
+  // Input values
+  networkPrice: '0',
+  networkTokenSymbol: '',
+
+  // Tokens
+  tokensPriceMap: {},
+
+  // Calculations
+  gasFee: '0',
+  gasPriceInUSD: 0
+};
+
+const state = proxy<SwapControllerState>(initialState);
+
+// -- Controller ---------------------------------------- //
+export const SwapController = {
+  state,
+
+  subscribe(callback: (newState: SwapControllerState) => void) {
+    return sub(state, () => callback(state));
+  },
+
+  subscribeKey<K extends StateKey>(key: K, callback: (value: SwapControllerState[K]) => void) {
+    return subKey(state, key, callback);
+  },
+
+  getParams() {
+    const caipNetwork = NetworkController.state.caipNetwork;
+    const networkAddress = `${caipNetwork?.id}:${ConstantsUtil.NATIVE_TOKEN_ADDRESS}`;
+
+    return {
+      networkAddress
+    };
+  },
+
+  resetState() {
+    state.tokensPriceMap = initialState.tokensPriceMap;
+    state.networkPrice = initialState.networkPrice;
+    state.networkTokenSymbol = initialState.networkTokenSymbol;
+  },
+
+  //this
+  async getNetworkTokenPrice() {
+    const { networkAddress } = this.getParams();
+
+    const response = await BlockchainApiController.fetchTokenPrice({
+      projectId: OptionsController.state.projectId,
+      addresses: [networkAddress]
+    });
+    const token = response?.fungibles?.[0];
+    const price = token?.price.toString() || '0';
+    state.tokensPriceMap[networkAddress] = parseFloat(price);
+    state.networkTokenSymbol = token?.symbol || '';
+    state.networkPrice = price;
+  },
+
+  //this
+  async getInitialGasPrice() {
+    const res = await SwapApiUtil.fetchGasPrice();
+
+    if (!res) {
+      return { gasPrice: null, gasPriceInUsd: null };
+    }
+
+    const value = res.standard;
+    const gasFee = BigInt(value);
+    const gasLimit = BigInt(INITIAL_GAS_LIMIT);
+    const gasPrice = SwapCalculationUtil.getGasPriceInUSD(state.networkPrice, gasLimit, gasFee);
+
+    state.gasFee = value;
+    state.gasPriceInUSD = gasPrice;
+
+    return { gasPrice: gasFee, gasPriceInUSD: state.gasPriceInUSD };
+  }
+};