Merge pull request #122 from Web3Auth/feat/account-abstraction

account abstraction support

Author: chaitanyapotti

demo/rn-bare-example/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { StyleSheet, Text, View, Button, ScrollView, Dimensions, TextInput } from "react-native";
+import { StyleSheet, Text, View, Button, ScrollView, Dimensions, TextInput, Switch } from "react-native";
 import "@ethersproject/shims";
 import { ethers } from "ethers";
 
@@ -8,6 +8,15 @@ import * as WebBrowser from "@toruslabs/react-native-web-browser";
 import EncryptedStorage from "react-native-encrypted-storage";
 import Web3Auth, { LOGIN_PROVIDER, WEB3AUTH_NETWORK, ChainNamespace } from "@web3auth/react-native-sdk";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { MMKVLoader, useMMKVStorage } from "react-native-mmkv-storage";
+import {
+  AccountAbstractionProvider,
+  BiconomySmartAccount,
+  ISmartAccount,
+  KernelSmartAccount,
+  SafeSmartAccount,
+  TrustSmartAccount,
+} from "@web3auth/account-abstraction-provider";
 // IMP END - Quick Start
 
 const scheme = "web3authrnexample"; // Or your desired app redirection scheme
@@ -40,24 +49,98 @@ const privateKeyProvider = new EthereumPrivateKeyProvider({
   },
 });
 
-const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
-  clientId,
-  // IMP START - Whitelist bundle ID
-  redirectUrl,
-  // IMP END - Whitelist bundle ID
-  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
-  privateKeyProvider,
-});
+const PIMLICO_API_KEY = "YOUR_PIMLICO_API_KEY";
+
+export const getDefaultBundlerUrl = (chainId: string): string => {
+  return `https://api.pimlico.io/v2/${Number(chainId)}/rpc?apikey=${PIMLICO_API_KEY}`;
+};
+
+export type SmartAccountType = "safe" | "kernel" | "biconomy" | "trust";
+
+export type AccountAbstractionConfig = {
+  bundlerUrl?: string;
+  paymasterUrl?: string;
+  smartAccountType?: SmartAccountType;
+};
+
+const AAConfig: AccountAbstractionConfig = {
+  // bundlerUrl: "https://bundler.safe.global",
+  // paymasterUrl: "https://paymaster.safe.global",
+  smartAccountType: "safe",
+};
+
+const storage = new MMKVLoader().initialize();
 // IMP END - SDK Initialization
 
 export default function App() {
+  const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null);
   const [loggedIn, setLoggedIn] = useState(false);
   const [provider, setProvider] = useState<any>(null);
   const [console, setConsole] = useState<string>("");
   const [email, setEmail] = useState<string>("");
+  const [useAccountAbstraction, setUseAccountAbstraction] = useMMKVStorage<boolean>("useAccountAbstraction", storage, false);
+
+  const toggleAccountAbstraction = () => {
+    setUseAccountAbstraction((prevState) => !prevState);
+  };
 
   useEffect(() => {
     const init = async () => {
+      // setup aa provider
+      let aaProvider: AccountAbstractionProvider | undefined;
+      if (useAccountAbstraction) {
+        const { bundlerUrl, paymasterUrl, smartAccountType } = AAConfig;
+
+        let smartAccountInit: ISmartAccount;
+        switch (smartAccountType) {
+          case "biconomy":
+            smartAccountInit = new BiconomySmartAccount();
+            break;
+          case "kernel":
+            smartAccountInit = new KernelSmartAccount();
+            break;
+          case "trust":
+            smartAccountInit = new TrustSmartAccount();
+            break;
+          // case "light":
+          //   smartAccountInit = new LightSmartAccount();
+          //   break;
+          // case "simple":
+          //   smartAccountInit = new SimpleSmartAccount();
+          //   break;
+          case "safe":
+          default:
+            smartAccountInit = new SafeSmartAccount();
+            break;
+        }
+
+        aaProvider = new AccountAbstractionProvider({
+          config: {
+            chainConfig,
+            bundlerConfig: {
+              url: bundlerUrl ?? getDefaultBundlerUrl(chainConfig.chainId),
+            },
+            paymasterConfig: paymasterUrl
+              ? {
+                  url: paymasterUrl,
+                }
+              : undefined,
+            smartAccountInit,
+          },
+        });
+      }
+
+      const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
+        clientId,
+        // IMP START - Whitelist bundle ID
+        redirectUrl,
+        // IMP END - Whitelist bundle ID
+        network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
+        privateKeyProvider,
+        accountAbstractionProvider: aaProvider,
+      });
+      setWeb3auth(web3auth);
+
       // IMP START - SDK Initialization
       await web3auth.init();
 
@@ -68,11 +151,11 @@ export default function App() {
       }
     };
     init();
-  }, []);
+  }, [useAccountAbstraction]);
 
   const login = async () => {
     try {
-      if (!web3auth.ready) {
+      if (!web3auth?.ready) {
         setConsole("Web3auth not initialized");
         return;
       }
@@ -103,7 +186,7 @@ export default function App() {
   };
 
   const logout = async () => {
-    if (!web3auth.ready) {
+    if (!web3auth?.ready) {
       setConsole("Web3auth not initialized");
       return;
     }
@@ -222,7 +305,7 @@ export default function App() {
 
   const loggedInView = (
     <View style={styles.buttonArea}>
-      <Button title="Get User Info" onPress={() => uiConsole(web3auth.userInfo())} />
+      <Button title="Get User Info" onPress={() => uiConsole(web3auth?.userInfo())} />
       <Button title="Get Accounts" onPress={() => getAccounts()} />
       <Button title="Get Balance" onPress={() => getBalance()} />
       <Button title="Sign Message" onPress={() => signMessage()} />
@@ -234,6 +317,18 @@ export default function App() {
 
   const unloggedInView = (
     <View style={styles.buttonAreaLogin}>
+      <View style={{ marginBottom: 20 }}>
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <Text style={{ paddingRight: 6 }}>Use Account Abstraction:</Text>
+          <Switch onValueChange={toggleAccountAbstraction} value={useAccountAbstraction} />
+        </View>
+      </View>
       <TextInput style={styles.inputEmail} placeholder="Enter email" onChangeText={setEmail} />
       <Button title="Login with Web3Auth" onPress={login} />
     </View>

demo/rn-bare-example/ios/Podfile.lock

@@ -7,6 +7,9 @@ PODS:
   - hermes-engine (0.74.2):
     - hermes-engine/Pre-built (= 0.74.2)
   - hermes-engine/Pre-built (0.74.2)
+  - MMKV (1.3.9):
+    - MMKVCore (~> 1.3.9)
+  - MMKVCore (1.3.9)
   - OpenSSL-Universal (3.3.1000)
   - RCT-Folly (2024.01.01.00):
     - boost
@@ -938,6 +941,28 @@ PODS:
     - React-debug
   - react-native-encrypted-storage (4.0.3):
     - React-Core
+  - react-native-mmkv-storage (0.11.2):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - MMKV (~> 1.3.9)
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-quick-crypto (0.7.5):
     - DoubleConversion
     - glog
@@ -1229,6 +1254,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - react-native-encrypted-storage (from `../node_modules/react-native-encrypted-storage`)
+  - react-native-mmkv-storage (from `../node_modules/react-native-mmkv-storage`)
   - react-native-quick-crypto (from `../node_modules/react-native-quick-crypto`)
   - "react-native-web-browser (from `../node_modules/@toruslabs/react-native-web-browser`)"
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
@@ -1258,6 +1284,8 @@ DEPENDENCIES:
 
 SPEC REPOS:
   trunk:
+    - MMKV
+    - MMKVCore
     - OpenSSL-Universal
     - SocketRocket
 
@@ -1325,6 +1353,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   react-native-encrypted-storage:
     :path: "../node_modules/react-native-encrypted-storage"
+  react-native-mmkv-storage:
+    :path: "../node_modules/react-native-mmkv-storage"
   react-native-quick-crypto:
     :path: "../node_modules/react-native-quick-crypto"
   react-native-web-browser:
@@ -1385,6 +1415,8 @@ SPEC CHECKSUMS:
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
   hermes-engine: 01d3e052018c2a13937aca1860fbedbccd4a41b7
+  MMKV: 817ba1eea17421547e01e087285606eb270a8dcb
+  MMKVCore: af055b00e27d88cd92fad301c5fecd1ff9b26dd9
   OpenSSL-Universal: 57f92a826947ee3183556bf5e22d7dff8d55f834
   RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
   RCTDeprecation: b03c35057846b685b3ccadc9bfe43e349989cdb2
@@ -1411,6 +1443,7 @@ SPEC CHECKSUMS:
   React-logger: 29fa3e048f5f67fe396bc08af7606426d9bd7b5d
   React-Mapbuffer: bf56147c9775491e53122a94c423ac201417e326
   react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
+  react-native-mmkv-storage: 9e84e8d0cc66402128d01a642022de0145303491
   react-native-quick-crypto: 7085e4e4607e7e8fa57f4193f994d5262d351e45
   react-native-web-browser: 087b454e1e94b58b40ba73f54251d77486144d19
   React-nativeconfig: 9f223cd321823afdecf59ed00861ab2d69ee0fc1