@reown/appkit-core-react-native 0.0.0-canary-20241010175718 → 0.0.0-develop-20241106142253

package/src/controllers/ConnectionController.ts

@@ -1,8 +1,14 @@
-import { subscribeKey as subKey } from 'valtio/utils';
 import { proxy, ref } from 'valtio';
+import { subscribeKey as subKey } from 'valtio/utils';
+import type { SocialProvider } from '@reown/appkit-common-react-native';
 import { CoreHelperUtil } from '../utils/CoreHelperUtil';
 import { StorageUtil } from '../utils/StorageUtil';
-import type { Connector, WcWallet } from '../utils/TypeUtil';
+import type {
+  Connector,
+  SendTransactionArgs,
+  WcWallet,
+  WriteContractArgs
+} from '../utils/TypeUtil';
 import { RouterController } from './RouterController';
 import { ConnectorController } from './ConnectorController';
 
@@ -21,7 +27,13 @@ export interface ConnectionControllerClient {
   ) => Promise<void>;
   connectExternal?: (options: ConnectExternalOptions) => Promise<void>;
   signMessage: (message: string) => Promise<string>;
+  sendTransaction: (args: SendTransactionArgs) => Promise<`0x${string}` | null>;
+  parseUnits: (value: string, decimals: number) => bigint;
+  formatUnits: (value: bigint, decimals: number) => string;
+  writeContract: (args: WriteContractArgs) => Promise<`0x${string}` | null>;
   disconnect: () => Promise<void>;
+  getEnsAddress: (value: string) => Promise<false | string>;
+  getEnsAvatar: (value: string) => Promise<false | string>;
 }
 
 export interface ConnectionControllerState {
@@ -37,6 +49,7 @@ export interface ConnectionControllerState {
   pressedWallet?: WcWallet;
   recentWallets?: WcWallet[];
   connectedWalletImageUrl?: string;
+  connectedSocialProvider?: SocialProvider;
 }
 
 type StateKey = keyof ConnectionControllerState;
@@ -73,15 +86,11 @@ export const ConnectionController = {
     state.wcPromise = this._getClient().connectWalletConnect(uri => {
       state.wcUri = uri;
       state.wcPairingExpiry = CoreHelperUtil.getPairingExpiry();
-      ConnectorController.setConnectedConnector('WALLET_CONNECT');
-      StorageUtil.setConnectedConnector('WALLET_CONNECT');
     }, walletUniversalLink);
   },
 
   async connectExternal(options: ConnectExternalOptions) {
     await this._getClient().connectExternal?.(options);
-    ConnectorController.setConnectedConnector(options.type);
-    StorageUtil.setConnectedConnector(options.type);
   },
 
   async signMessage(message: string) {
@@ -122,6 +131,40 @@ export const ConnectionController = {
     }
   },
 
+  setConnectedSocialProvider(provider: ConnectionControllerState['connectedSocialProvider']) {
+    state.connectedSocialProvider = provider;
+
+    if (provider) {
+      StorageUtil.setConnectedSocialProvider(provider);
+    } else {
+      StorageUtil.removeConnectedSocialProvider();
+    }
+  },
+
+  parseUnits(value: string, decimals: number) {
+    return this._getClient().parseUnits(value, decimals);
+  },
+
+  formatUnits(value: bigint, decimals: number) {
+    return this._getClient().formatUnits(value, decimals);
+  },
+
+  async sendTransaction(args: SendTransactionArgs) {
+    return this._getClient().sendTransaction(args);
+  },
+
+  async writeContract(args: WriteContractArgs) {
+    return this._getClient().writeContract(args);
+  },
+
+  async getEnsAddress(value: string) {
+    return this._getClient().getEnsAddress(value);
+  },
+
+  async getEnsAvatar(value: string) {
+    return this._getClient().getEnsAvatar(value);
+  },
+
   clearUri() {
     state.wcUri = undefined;
     state.wcPairingExpiry = undefined;
@@ -132,16 +175,16 @@ export const ConnectionController = {
   resetWcConnection() {
     this.clearUri();
     state.pressedWallet = undefined;
-    state.connectedWalletImageUrl = undefined;
+    ConnectionController.setConnectedSocialProvider(undefined);
+    ConnectionController.setConnectedWalletImageUrl(undefined);
     ConnectorController.setConnectedConnector(undefined);
     StorageUtil.removeWalletConnectDeepLink();
-    StorageUtil.removeConnectedWalletImageUrl();
-    StorageUtil.removeConnectedConnector();
   },
 
   async disconnect() {
     await this._getClient().disconnect();
     this.resetWcConnection();
+    // remove transactions
     RouterController.reset('Connect');
   }
 };

package/src/controllers/ConnectorController.ts

@@ -1,6 +1,7 @@
 import { subscribeKey as subKey } from 'valtio/utils';
 import { proxy, ref } from 'valtio';
 import type { Connector, ConnectorType } from '../utils/TypeUtil';
+import { StorageUtil } from '../utils/StorageUtil';
 
 // -- Types --------------------------------------------- //
 export interface ConnectorControllerState {
@@ -40,8 +41,19 @@ export const ConnectorController = {
     return state.connectors.find(c => c.type === 'AUTH');
   },
 
-  setConnectedConnector(connectorType: ConnectorControllerState['connectedConnector']) {
+  setConnectedConnector(
+    connectorType: ConnectorControllerState['connectedConnector'],
+    saveStorage = true
+  ) {
     state.connectedConnector = connectorType;
+
+    if (saveStorage) {
+      if (connectorType) {
+        StorageUtil.setConnectedConnector(connectorType);
+      } else {
+        StorageUtil.removeConnectedConnector();
+      }
+    }
   },
 
   setAuthLoading(loading: ConnectorControllerState['authLoading']) {

package/src/controllers/EnsController.ts

@@ -0,0 +1,39 @@
+import { subscribeKey as subKey } from 'valtio/vanilla/utils';
+import { proxy, subscribe as sub } from 'valtio/vanilla';
+import { BlockchainApiController } from './BlockchainApiController';
+import type { BlockchainApiEnsError } from '../utils/TypeUtil';
+
+// -- Types --------------------------------------------- //
+
+export interface EnsControllerState {
+  loading: boolean;
+}
+
+type StateKey = keyof EnsControllerState;
+
+// -- State --------------------------------------------- //
+const state = proxy<EnsControllerState>({
+  loading: false
+});
+
+// -- Controller ---------------------------------------- //
+export const EnsController = {
+  state,
+
+  subscribe(callback: (newState: EnsControllerState) => void) {
+    return sub(state, () => callback(state));
+  },
+
+  subscribeKey<K extends StateKey>(key: K, callback: (value: EnsControllerState[K]) => void) {
+    return subKey(state, key, callback);
+  },
+
+  async resolveName(name: string) {
+    try {
+      return await BlockchainApiController.lookupEnsName(name);
+    } catch (e) {
+      const error = e as BlockchainApiEnsError;
+      throw new Error(error?.reasons?.[0]?.description || 'Error resolving name');
+    }
+  }
+};

package/src/controllers/EventsController.ts

@@ -1,4 +1,3 @@
-import { Platform } from 'react-native';
 import { proxy, subscribe as sub } from 'valtio/vanilla';
 import { ApiController } from './ApiController';
 import { OptionsController } from './OptionsController';
@@ -34,17 +33,6 @@ export const EventsController = {
     return sub(state, () => callback(state));
   },
 
-  _getApiHeaders() {
-    const { projectId, sdkType, sdkVersion } = OptionsController.state;
-
-    return {
-      'x-project-id': projectId,
-      'x-sdk-type': sdkType,
-      'x-sdk-version': sdkVersion,
-      'User-Agent': `${Platform.OS}-${Platform.Version}`
-    };
-  },
-
   async _sendAnalyticsEvent(data: EventsControllerState['data'], timestamp: number) {
     if (excluded.includes(data.event)) {
       return;
@@ -53,7 +41,7 @@ export const EventsController = {
     try {
       await api.post({
         path: '/e',
-        headers: this._getApiHeaders(),
+        headers: ApiController._getApiHeaders(),
         body: {
           eventId: CoreHelperUtil.getUUID(),
           bundleId: CoreHelperUtil.getBundleId(),

package/src/controllers/ModalController.ts

@@ -5,6 +5,7 @@ import { RouterController } from './RouterController';
 import { PublicStateController } from './PublicStateController';
 import { EventsController } from './EventsController';
 import { ApiController } from './ApiController';
+import { ConnectorController } from './ConnectorController';
 
 // -- Types --------------------------------------------- //
 export interface ModalControllerState {
@@ -34,7 +35,8 @@ export const ModalController = {
     if (options?.view) {
       RouterController.reset(options.view);
     } else if (AccountController.state.isConnected) {
-      RouterController.reset('Account');
+      const isUniversalWallet = ConnectorController.state.connectedConnector === 'AUTH';
+      RouterController.reset(isUniversalWallet ? 'Account' : 'AccountDefault');
     } else {
       RouterController.reset('Connect');
     }

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,34 @@ 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[];
+  },
+
   async switchActiveNetwork(network: NetworkControllerState['caipNetwork']) {
     await this._getClient().switchCaipNetwork(network);
     state.caipNetwork = network;
@@ -75,5 +100,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,19 @@ export interface OptionsControllerState {
   customWallets?: CustomWallet[];
   tokens?: Tokens;
   enableAnalytics?: boolean;
-  sdkType: string;
+  sdkType: SdkType;
   sdkVersion: SdkVersion;
   metadata?: Metadata;
   isSiweEnabled?: boolean;
+  features?: Features;
 }
 
 // -- State --------------------------------------------- //
 const state = proxy<OptionsControllerState>({
   projectId: '',
   sdkType: 'appkit',
-  sdkVersion: 'react-native-wagmi-undefined'
+  sdkVersion: 'react-native-wagmi-undefined',
+  features: ConstantsUtil.DEFAULT_FEATURES
 });
 
 // -- Controller ---------------------------------------- //
@@ -76,6 +87,10 @@ export const OptionsController = {
     state.isSiweEnabled = isSiweEnabled;
   },
 
+  setFeatures(features: OptionsControllerState['features']) {
+    state.features = { ...ConstantsUtil.DEFAULT_FEATURES, ...features };
+  },
+
   isClipboardAvailable() {
     return !!state._clipboardClient;
   },
@@ -83,7 +98,7 @@ export const OptionsController = {
   copyToClipboard(value: string) {
     const client = state._clipboardClient;
     if (client) {
-      client.setString(value);
+      client?.setString(value);
     }
   }
 };

package/src/controllers/RouterController.ts

@@ -1,26 +1,48 @@
 import { proxy } from 'valtio';
 import type { WcWallet, CaipNetwork, Connector } from '../utils/TypeUtil';
+import type { SocialProvider } from '@reown/appkit-common-react-native';
 
 // -- 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;
@@ -28,13 +50,16 @@ export interface RouterControllerState {
     network?: CaipNetwork;
     email?: string;
     newEmail?: string;
+    socialProvider?: SocialProvider;
   };
+  transactionStack: TransactionAction[];
 }
 
 // -- State --------------------------------------------- //
 const state = proxy<RouterControllerState>({
   view: 'Connect',
-  history: ['Connect']
+  history: ['Connect'],
+  transactionStack: []
 });
 
 // -- Controller ---------------------------------------- //
@@ -49,6 +74,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;
+  }
+};