Skip to content

Commit d8bf3de

Browse files
chaitanyapottichaitanyapotti
authored
Merge pull request #122 from Web3Auth/feat/account-abstraction
account abstraction support
2 parents 6b78daa + 82ba8ed commit d8bf3de

File tree

10 files changed

+765
-90
lines changed

10 files changed

+765
-90
lines changed

‎demo/rn-bare-example/App.tsx‎

Lines changed: 108 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from "react";
2-
import { StyleSheet, Text, View, Button, ScrollView, Dimensions, TextInput } from "react-native";
2+
import { StyleSheet, Text, View, Button, ScrollView, Dimensions, TextInput, Switch } from "react-native";
33
import "@ethersproject/shims";
44
import { ethers } from "ethers";
55

@@ -8,6 +8,15 @@ import * as WebBrowser from "@toruslabs/react-native-web-browser";
88
import EncryptedStorage from "react-native-encrypted-storage";
99
import Web3Auth, { LOGIN_PROVIDER, WEB3AUTH_NETWORK, ChainNamespace } from "@web3auth/react-native-sdk";
1010
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
11+
import { MMKVLoader, useMMKVStorage } from "react-native-mmkv-storage";
12+
import {
13+
AccountAbstractionProvider,
14+
BiconomySmartAccount,
15+
ISmartAccount,
16+
KernelSmartAccount,
17+
SafeSmartAccount,
18+
TrustSmartAccount,
19+
} from "@web3auth/account-abstraction-provider";
1120
// IMP END - Quick Start
1221

1322
const scheme = "web3authrnexample"; // Or your desired app redirection scheme
@@ -40,24 +49,98 @@ const privateKeyProvider = new EthereumPrivateKeyProvider({
4049
},
4150
});
4251

43-
const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
44-
clientId,
45-
// IMP START - Whitelist bundle ID
46-
redirectUrl,
47-
// IMP END - Whitelist bundle ID
48-
network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
49-
privateKeyProvider,
50-
});
52+
const PIMLICO_API_KEY = "YOUR_PIMLICO_API_KEY";
53+
54+
export const getDefaultBundlerUrl = (chainId: string): string => {
55+
return `https://api.pimlico.io/v2/${Number(chainId)}/rpc?apikey=${PIMLICO_API_KEY}`;
56+
};
57+
58+
export type SmartAccountType = "safe" | "kernel" | "biconomy" | "trust";
59+
60+
export type AccountAbstractionConfig = {
61+
bundlerUrl?: string;
62+
paymasterUrl?: string;
63+
smartAccountType?: SmartAccountType;
64+
};
65+
66+
const AAConfig: AccountAbstractionConfig = {
67+
// bundlerUrl: "https://bundler.safe.global",
68+
// paymasterUrl: "https://paymaster.safe.global",
69+
smartAccountType: "safe",
70+
};
71+
72+
const storage = new MMKVLoader().initialize();
5173
// IMP END - SDK Initialization
5274

5375
export default function App() {
76+
const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null);
5477
const [loggedIn, setLoggedIn] = useState(false);
5578
const [provider, setProvider] = useState<any>(null);
5679
const [console, setConsole] = useState<string>("");
5780
const [email, setEmail] = useState<string>("");
81+
const [useAccountAbstraction, setUseAccountAbstraction] = useMMKVStorage<boolean>("useAccountAbstraction", storage, false);
82+
83+
const toggleAccountAbstraction = () => {
84+
setUseAccountAbstraction((prevState) => !prevState);
85+
};
5886

5987
useEffect(() => {
6088
const init = async () => {
89+
// setup aa provider
90+
let aaProvider: AccountAbstractionProvider | undefined;
91+
if (useAccountAbstraction) {
92+
const { bundlerUrl, paymasterUrl, smartAccountType } = AAConfig;
93+
94+
let smartAccountInit: ISmartAccount;
95+
switch (smartAccountType) {
96+
case "biconomy":
97+
smartAccountInit = new BiconomySmartAccount();
98+
break;
99+
case "kernel":
100+
smartAccountInit = new KernelSmartAccount();
101+
break;
102+
case "trust":
103+
smartAccountInit = new TrustSmartAccount();
104+
break;
105+
// case "light":
106+
// smartAccountInit = new LightSmartAccount();
107+
// break;
108+
// case "simple":
109+
// smartAccountInit = new SimpleSmartAccount();
110+
// break;
111+
case "safe":
112+
default:
113+
smartAccountInit = new SafeSmartAccount();
114+
break;
115+
}
116+
117+
aaProvider = new AccountAbstractionProvider({
118+
config: {
119+
chainConfig,
120+
bundlerConfig: {
121+
url: bundlerUrl ?? getDefaultBundlerUrl(chainConfig.chainId),
122+
},
123+
paymasterConfig: paymasterUrl
124+
? {
125+
url: paymasterUrl,
126+
}
127+
: undefined,
128+
smartAccountInit,
129+
},
130+
});
131+
}
132+
133+
const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
134+
clientId,
135+
// IMP START - Whitelist bundle ID
136+
redirectUrl,
137+
// IMP END - Whitelist bundle ID
138+
network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
139+
privateKeyProvider,
140+
accountAbstractionProvider: aaProvider,
141+
});
142+
setWeb3auth(web3auth);
143+
61144
// IMP START - SDK Initialization
62145
await web3auth.init();
63146

@@ -68,11 +151,11 @@ export default function App() {
68151
}
69152
};
70153
init();
71-
}, []);
154+
}, [useAccountAbstraction]);
72155

73156
const login = async () => {
74157
try {
75-
if (!web3auth.ready) {
158+
if (!web3auth?.ready) {
76159
setConsole("Web3auth not initialized");
77160
return;
78161
}
@@ -103,7 +186,7 @@ export default function App() {
103186
};
104187

105188
const logout = async () => {
106-
if (!web3auth.ready) {
189+
if (!web3auth?.ready) {
107190
setConsole("Web3auth not initialized");
108191
return;
109192
}
@@ -222,7 +305,7 @@ export default function App() {
222305

223306
const loggedInView = (
224307
<View style={styles.buttonArea}>
225-
<Button title="Get User Info" onPress={() => uiConsole(web3auth.userInfo())} />
308+
<Button title="Get User Info" onPress={() => uiConsole(web3auth?.userInfo())} />
226309
<Button title="Get Accounts" onPress={() => getAccounts()} />
227310
<Button title="Get Balance" onPress={() => getBalance()} />
228311
<Button title="Sign Message" onPress={() => signMessage()} />
@@ -234,6 +317,18 @@ export default function App() {
234317

235318
const unloggedInView = (
236319
<View style={styles.buttonAreaLogin}>
320+
<View style={{ marginBottom: 20 }}>
321+
<View
322+
style={{
323+
flexDirection: "row",
324+
alignItems: "center",
325+
justifyContent: "space-between",
326+
}}
327+
>
328+
<Text style={{ paddingRight: 6 }}>Use Account Abstraction:</Text>
329+
<Switch onValueChange={toggleAccountAbstraction} value={useAccountAbstraction} />
330+
</View>
331+
</View>
237332
<TextInput style={styles.inputEmail} placeholder="Enter email" onChangeText={setEmail} />
238333
<Button title="Login with Web3Auth" onPress={login} />
239334
</View>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ PODS:
77
- hermes-engine (0.74.2):
88
- hermes-engine/Pre-built (= 0.74.2)
99
- hermes-engine/Pre-built (0.74.2)
10+
- MMKV (1.3.9):
11+
- MMKVCore (~> 1.3.9)
12+
- MMKVCore (1.3.9)
1013
- OpenSSL-Universal (3.3.1000)
1114
- RCT-Folly (2024.01.01.00):
1215
- boost
@@ -938,6 +941,28 @@ PODS:
938941
- React-debug
939942
- react-native-encrypted-storage (4.0.3):
940943
- React-Core
944+
- react-native-mmkv-storage (0.11.2):
945+
- DoubleConversion
946+
- glog
947+
- hermes-engine
948+
- MMKV (~> 1.3.9)
949+
- RCT-Folly (= 2024.01.01.00)
950+
- RCTRequired
951+
- RCTTypeSafety
952+
- React-Codegen
953+
- React-Core
954+
- React-debug
955+
- React-Fabric
956+
- React-featureflags
957+
- React-graphics
958+
- React-ImageManager
959+
- React-NativeModulesApple
960+
- React-RCTFabric
961+
- React-rendererdebug
962+
- React-utils
963+
- ReactCommon/turbomodule/bridging
964+
- ReactCommon/turbomodule/core
965+
- Yoga
941966
- react-native-quick-crypto (0.7.5):
942967
- DoubleConversion
943968
- glog
@@ -1229,6 +1254,7 @@ DEPENDENCIES:
12291254
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
12301255
- React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
12311256
- react-native-encrypted-storage (from `../node_modules/react-native-encrypted-storage`)
1257+
- react-native-mmkv-storage (from `../node_modules/react-native-mmkv-storage`)
12321258
- react-native-quick-crypto (from `../node_modules/react-native-quick-crypto`)
12331259
- "react-native-web-browser (from `../node_modules/@toruslabs/react-native-web-browser`)"
12341260
- React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
@@ -1258,6 +1284,8 @@ DEPENDENCIES:
12581284

12591285
SPEC REPOS:
12601286
trunk:
1287+
- MMKV
1288+
- MMKVCore
12611289
- OpenSSL-Universal
12621290
- SocketRocket
12631291

@@ -1325,6 +1353,8 @@ EXTERNAL SOURCES:
13251353
:path: "../node_modules/react-native/ReactCommon"
13261354
react-native-encrypted-storage:
13271355
:path: "../node_modules/react-native-encrypted-storage"
1356+
react-native-mmkv-storage:
1357+
:path: "../node_modules/react-native-mmkv-storage"
13281358
react-native-quick-crypto:
13291359
:path: "../node_modules/react-native-quick-crypto"
13301360
react-native-web-browser:
@@ -1385,6 +1415,8 @@ SPEC CHECKSUMS:
13851415
fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
13861416
glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
13871417
hermes-engine: 01d3e052018c2a13937aca1860fbedbccd4a41b7
1418+
MMKV: 817ba1eea17421547e01e087285606eb270a8dcb
1419+
MMKVCore: af055b00e27d88cd92fad301c5fecd1ff9b26dd9
13881420
OpenSSL-Universal: 57f92a826947ee3183556bf5e22d7dff8d55f834
13891421
RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
13901422
RCTDeprecation: b03c35057846b685b3ccadc9bfe43e349989cdb2
@@ -1411,6 +1443,7 @@ SPEC CHECKSUMS:
14111443
React-logger: 29fa3e048f5f67fe396bc08af7606426d9bd7b5d
14121444
React-Mapbuffer: bf56147c9775491e53122a94c423ac201417e326
14131445
react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
1446+
react-native-mmkv-storage: 9e84e8d0cc66402128d01a642022de0145303491
14141447
react-native-quick-crypto: 7085e4e4607e7e8fa57f4193f994d5262d351e45
14151448
react-native-web-browser: 087b454e1e94b58b40ba73f54251d77486144d19
14161449
React-nativeconfig: 9f223cd321823afdecf59ed00861ab2d69ee0fc1

0 commit comments

Comments
 (0)