@reown/appkit-core-react-native 0.0.0-feat-wallet-features-20240925132010 → 0.0.0-feat-smart-account-20241016175931

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,6 +60,22 @@ 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;
@@ -81,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;
   },

package/src/controllers/RouterController.ts

@@ -1,5 +1,6 @@
 import { proxy } from 'valtio';
 import type { WcWallet, CaipNetwork, Connector } from '../utils/TypeUtil';
+import type { SocialProvider } from '@reown/appkit-common-react-native';
 
 // -- Types --------------------------------------------- //
 type TransactionAction = {
@@ -17,9 +18,13 @@ export interface RouterControllerState {
     | 'AccountDefault'
     | 'AllWallets'
     | 'Connect'
+    | 'ConnectSocials'
     | 'ConnectingExternal'
     | 'ConnectingSiwe'
+    | 'ConnectingSocial'
+    | 'ConnectingFarcaster'
     | 'ConnectingWalletConnect'
+    | 'Create'
     | 'EmailVerifyDevice'
     | 'EmailVerifyOtp'
     | 'GetWallet'
@@ -30,6 +35,7 @@ export interface RouterControllerState {
     | 'UpdateEmailSecondaryOtp'
     | 'UpdateEmailWallet'
     | 'UpgradeEmailWallet'
+    | 'UpgradeToSmartAccount'
     | 'WalletCompatibleNetworks'
     | 'WalletReceive'
     | 'WalletSend'
@@ -44,6 +50,7 @@ export interface RouterControllerState {
     network?: CaipNetwork;
     email?: string;
     newEmail?: string;
+    socialProvider?: SocialProvider;
   };
   transactionStack: TransactionAction[];
 }

package/src/controllers/SendController.ts

@@ -97,7 +97,7 @@ export const SendController = {
         type: 'track',
         event: 'SEND_INITIATED',
         properties: {
-          isSmartAccount: false,
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
           token: this.state.token.address,
           amount: this.state.sendTokenAmount,
           network: NetworkController.state.caipNetwork?.id || ''
@@ -120,7 +120,7 @@ export const SendController = {
         type: 'track',
         event: 'SEND_INITIATED',
         properties: {
-          isSmartAccount: false,
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
           token: this.state.token?.symbol,
           amount: this.state.sendTokenAmount,
           network: NetworkController.state.caipNetwork?.id || ''
@@ -162,7 +162,7 @@ export const SendController = {
         type: 'track',
         event: 'SEND_SUCCESS',
         properties: {
-          isSmartAccount: false,
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
           token: this.state.token?.symbol || '',
           amount: params.sendTokenAmount,
           network: NetworkController.state.caipNetwork?.id || ''
@@ -175,7 +175,7 @@ export const SendController = {
         type: 'track',
         event: 'SEND_ERROR',
         properties: {
-          isSmartAccount: false,
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount',
           token: this.state.token?.symbol || '',
           amount: params.sendTokenAmount,
           network: NetworkController.state.caipNetwork?.id || ''

package/src/controllers/TransactionsController.ts

@@ -5,6 +5,7 @@ import { EventsController } from './EventsController';
 import { SnackController } from './SnackController';
 import { NetworkController } from './NetworkController';
 import { BlockchainApiController } from './BlockchainApiController';
+import { AccountController } from './AccountController';
 
 // -- Types --------------------------------------------- //
 type TransactionByMonthMap = Record<string, Transaction[]>;
@@ -55,7 +56,6 @@ export const TransactionsController = {
 
       const nonSpamTransactions = this.filterSpamTransactions(response?.data ?? []);
       let filteredTransactions = [...state.transactions, ...nonSpamTransactions];
-      filteredTransactions = [...state.transactions, ...nonSpamTransactions];
 
       if (reset) {
         filteredTransactions = nonSpamTransactions;
@@ -75,7 +75,7 @@ export const TransactionsController = {
           address: accountAddress,
           projectId,
           cursor: state.next,
-          isSmartAccount: false
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
         }
       });
       SnackController.showError('Failed to fetch transactions');

package/src/controllers/WebviewController.ts

@@ -0,0 +1,48 @@
+import type { SocialProvider } from '@reown/appkit-common-react-native';
+import { proxy, subscribe as sub } from 'valtio';
+
+// -- Types --------------------------------------------- //
+export interface WebviewControllerState {
+  frameViewVisible: boolean;
+  webviewVisible: boolean;
+  webviewUrl?: string;
+  connecting?: boolean;
+  connectingProvider?: SocialProvider;
+}
+
+// -- State --------------------------------------------- //
+const state = proxy<WebviewControllerState>({
+  frameViewVisible: false,
+  webviewVisible: false,
+  connecting: false,
+  connectingProvider: undefined
+});
+
+// -- Controller ---------------------------------------- //
+export const WebviewController = {
+  state,
+
+  subscribe(callback: (newState: WebviewControllerState) => void) {
+    return sub(state, () => callback(state));
+  },
+
+  setFrameViewVisible(frameViewVisible: WebviewControllerState['frameViewVisible']) {
+    state.frameViewVisible = frameViewVisible;
+  },
+
+  setWebviewVisible(visible: WebviewControllerState['webviewVisible']) {
+    state.webviewVisible = visible;
+  },
+
+  setWebviewUrl(url: WebviewControllerState['webviewUrl']) {
+    state.webviewUrl = url;
+  },
+
+  setConnecting(connecting: WebviewControllerState['connecting']) {
+    state.connecting = connecting;
+  },
+
+  setConnectingProvider(provider: WebviewControllerState['connectingProvider']) {
+    state.connectingProvider = provider;
+  }
+};

package/src/index.ts

@@ -56,6 +56,8 @@ export {
 
 export { SendController, type SendControllerState } from './controllers/SendController';
 
+export { WebviewController, type WebviewControllerState } from './controllers/WebviewController';
+
 // -- Utils -------------------------------------------------------------------
 export { ApiUtil } from './utils/ApiUtil';
 export { AssetUtil } from './utils/AssetUtil';

package/src/utils/ConstantsUtil.ts

@@ -1,3 +1,11 @@
+import type { Features } from './TypeUtil';
+
+const defaultFeatures: Features = {
+  email: true,
+  emailShowWallets: true,
+  socials: ['x', 'discord', 'apple', 'facebook', 'farcaster']
+};
+
 export const ConstantsUtil = {
   FOUR_MINUTES_MS: 240000,
 
@@ -9,5 +17,7 @@ export const ConstantsUtil = {
 
   LINKING_ERROR: 'LINKING_ERROR',
 
-  NATIVE_TOKEN_ADDRESS: '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee'
+  NATIVE_TOKEN_ADDRESS: '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
+
+  DEFAULT_FEATURES: defaultFeatures
 };

package/src/utils/StorageUtil.ts

@@ -1,12 +1,14 @@
 /* eslint-disable no-console */
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import type { ConnectorType, WcWallet } from './TypeUtil';
+import type { SocialProvider } from '@reown/appkit-common-react-native';
 
 // -- Helpers -----------------------------------------------------------------
 const WC_DEEPLINK = 'WALLETCONNECT_DEEPLINK_CHOICE';
 const RECENT_WALLET = '@w3m/recent';
 const CONNECTED_WALLET_IMAGE_URL = '@w3m/connected_wallet_image_url';
 const CONNECTED_CONNECTOR = '@w3m/connected_connector';
+const CONNECTED_SOCIAL = '@appkit/connected_social';
 
 // -- Utility -----------------------------------------------------------------
 export const StorageUtil = {
@@ -134,5 +136,33 @@ export const StorageUtil = {
     } catch {
       console.info('Unable to remove Connected Wallet Image URL');
     }
+  },
+
+  async setConnectedSocialProvider(provider: SocialProvider) {
+    try {
+      await AsyncStorage.setItem(CONNECTED_SOCIAL, JSON.stringify(provider));
+    } catch {
+      console.info('Unable to set Connected Social Provider');
+    }
+  },
+
+  async getConnectedSocialProvider() {
+    try {
+      const provider = (await AsyncStorage.getItem(CONNECTED_SOCIAL)) as SocialProvider;
+
+      return provider ? JSON.parse(provider) : undefined;
+    } catch {
+      console.info('Unable to get Connected Social Provider');
+    }
+
+    return undefined;
+  },
+
+  async removeConnectedSocialProvider() {
+    try {
+      await AsyncStorage.removeItem(CONNECTED_SOCIAL);
+    } catch {
+      console.info('Unable to remove Connected Social Provider');
+    }
   }
 };

package/src/utils/TypeUtil.ts

@@ -1,4 +1,5 @@
-import type { Balance, Transaction } from '@reown/appkit-common-react-native';
+import { type EventEmitter } from 'events';
+import type { Balance, SocialProvider, Transaction } from '@reown/appkit-common-react-native';
 
 export interface BaseError {
   message?: string;
@@ -55,11 +56,31 @@ export type CaipNamespaces = Record<
   }
 >;
 
+export type SdkType = 'appkit';
+
 export type SdkVersion =
   | `react-native-wagmi-${string}`
   | `react-native-ethers5-${string}`
   | `react-native-ethers-${string}`;
 
+export type Features = {
+  /**
+   * @description Enable or disable the email feature. Enabled by default.
+   * @type {boolean}
+   */
+  email?: boolean;
+  /**
+   * @description Show or hide the regular wallet options when email is enabled. Enabled by default.
+   * @type {boolean}
+   */
+  emailShowWallets?: boolean;
+  /**
+   * @description Enable or disable the socials feature. Enabled by default.
+   * @type {FeaturesSocials[]}
+   */
+  socials?: SocialProvider[] | false;
+};
+
 // -- ApiController Types -------------------------------------------------------
 export interface WcWallet {
   id: string;
@@ -356,18 +377,34 @@ export type Event =
   | {
       type: 'track';
       event: 'CLICK_SIGN_SIWE_MESSAGE';
+      properties: {
+        network: string;
+        isSmartAccount: boolean;
+      };
     }
   | {
       type: 'track';
       event: 'CLICK_CANCEL_SIWE';
+      properties: {
+        network: string;
+        isSmartAccount: boolean;
+      };
     }
   | {
       type: 'track';
       event: 'SIWE_AUTH_SUCCESS';
+      properties: {
+        network: string;
+        isSmartAccount: boolean;
+      };
     }
   | {
       type: 'track';
       event: 'SIWE_AUTH_ERROR';
+      properties: {
+        network: string;
+        isSmartAccount: boolean;
+      };
     }
   | {
       type: 'track';
@@ -433,6 +470,35 @@ export type Event =
         token: string;
         amount: number;
       };
+    }
+  | {
+      type: 'track';
+      event: 'SOCIAL_LOGIN_STARTED';
+      properties: {
+        provider: SocialProvider;
+      };
+    }
+  | {
+      type: 'track';
+      event: 'SOCIAL_LOGIN_SUCCESS';
+      properties: {
+        provider: SocialProvider;
+      };
+    }
+  | {
+      type: 'track';
+      event: 'SOCIAL_LOGIN_ERROR';
+      properties: {
+        provider: SocialProvider;
+      };
+    }
+  | {
+      type: 'track';
+      event: 'SET_PREFERRED_ACCOUNT_TYPE';
+      properties: {
+        accountType: AppKitFrameAccountType;
+        network: string;
+      };
     };
 
 // -- Send Controller Types -------------------------------------
@@ -457,24 +523,46 @@ export interface WriteContractArgs {
 
 // -- Email Types ------------------------------------------------
 /**
- * Matches type defined for packages/email/src/AppKitFrameProvider.ts
+ * Matches type defined for packages/wallet/src/AppKitFrameProvider.ts
  * It's duplicated in order to decouple scaffold from email package
  */
+
+export type AppKitFrameAccountType = 'eoa' | 'smartAccount';
+
 export interface AppKitFrameProvider {
   readonly id: string;
   readonly name: string;
+  getEventEmitter(): EventEmitter;
   getSecureSiteURL(): string;
   getSecureSiteDashboardURL(): string;
   getSecureSiteIconURL(): string;
   getSecureSiteHeaders(): Record<string, string>;
-  getLoginEmailUsed(): Promise<boolean>;
   getEmail(): string | undefined;
+  getUsername(): string | undefined;
+  getLastUsedChainId(): Promise<number | undefined>;
   rejectRpcRequest(): void;
   connectEmail(payload: { email: string }): Promise<{
     action: 'VERIFY_DEVICE' | 'VERIFY_OTP';
   }>;
   connectDevice(): Promise<unknown>;
+  connectSocial(uri: string): Promise<{
+    chainId: string | number;
+    email: string;
+    address: string;
+    accounts?:
+      | {
+          type: AppKitFrameAccountType;
+          address: string;
+        }[]
+      | undefined;
+    userName?: string | undefined;
+  }>;
+  getSocialRedirectUri(payload: { provider: SocialProvider }): Promise<{
+    uri: string;
+  }>;
   connectOtp(payload: { otp: string }): Promise<unknown>;
+  connectFarcaster: () => Promise<{ username: string }>;
+  getFarcasterUri(): Promise<{ url: string }>;
   isConnected(): Promise<{
     isConnected: boolean;
   }>;
@@ -495,17 +583,31 @@ export interface AppKitFrameProvider {
   syncDappData(payload: {
     projectId: string;
     sdkVersion: SdkVersion;
+    sdkType: SdkType;
     metadata?: Metadata;
   }): Promise<unknown>;
   connect(payload?: { chainId: number | undefined }): Promise<{
     chainId: number;
     email: string;
     address: string;
+    smartAccountDeployed: boolean;
+    preferredAccountType: AppKitFrameAccountType;
   }>;
   switchNetwork(chainId: number): Promise<{
     chainId: number;
   }>;
+  setPreferredAccount(type: AppKitFrameAccountType): Promise<{
+    type: AppKitFrameAccountType;
+    address: string;
+  }>;
+  getSmartAccountEnabledNetworks(): Promise<{
+    smartAccountEnabledNetworks: number[];
+  }>;
   disconnect(): Promise<unknown>;
   request(req: any): Promise<any>;
   AuthView: () => JSX.Element | null;
+  Webview: () => JSX.Element | null;
+  onSetPreferredAccount: (
+    callback: (values: { type: AppKitFrameAccountType; address: string }) => void
+  ) => void;
 }