Skip to content

Commit 82ba8ed

Browse files
author
Nguyen Anh Tu
committed
feat(app): aa - update rn expo example with aa
1 parent bd7a78a commit 82ba8ed

File tree

4 files changed

+362
-21
lines changed

4 files changed

+362
-21
lines changed

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

Lines changed: 106 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from "react";
2-
import { Button, Dimensions, ScrollView, StyleSheet, Text, View, TextInput } from "react-native";
2+
import { Button, Dimensions, ScrollView, StyleSheet, Text, View, TextInput, Switch } from "react-native";
33
import Constants, { AppOwnership } from "expo-constants";
44
import * as Linking from "expo-linking";
55
import "@ethersproject/shims";
@@ -9,8 +9,17 @@ import * as WebBrowser from "expo-web-browser";
99
import * as SecureStore from "expo-secure-store";
1010
import Web3Auth, { WEB3AUTH_NETWORK, LOGIN_PROVIDER, ChainNamespace } from "@web3auth/react-native-sdk";
1111
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
12+
import { MMKVLoader, useMMKVStorage } from "react-native-mmkv-storage";
1213
// IMP END - Quick Start
1314
import { ethers } from "ethers";
15+
import {
16+
AccountAbstractionProvider,
17+
BiconomySmartAccount,
18+
ISmartAccount,
19+
KernelSmartAccount,
20+
SafeSmartAccount,
21+
TrustSmartAccount,
22+
} from "@web3auth/account-abstraction-provider";
1423

1524
// IMP START - Whitelist bundle ID
1625
const redirectUrl =
@@ -45,24 +54,97 @@ const privateKeyProvider = new EthereumPrivateKeyProvider({
4554
},
4655
});
4756

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

5880
export default function App() {
81+
const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null);
5982
const [loggedIn, setLoggedIn] = useState(false);
6083
const [provider, setProvider] = useState<any>(null);
6184
const [console, setConsole] = useState<string>("");
6285
const [email, setEmail] = useState<string>("");
86+
const [useAccountAbstraction, setUseAccountAbstraction] = useMMKVStorage<boolean>("useAccountAbstraction", storage, false);
87+
88+
const toggleAccountAbstraction = () => {
89+
setUseAccountAbstraction((prevState) => !prevState);
90+
};
6391

6492
useEffect(() => {
6593
const init = async () => {
94+
// setup aa provider
95+
let aaProvider: AccountAbstractionProvider | undefined;
96+
if (useAccountAbstraction) {
97+
const { bundlerUrl, paymasterUrl, smartAccountType } = AAConfig;
98+
99+
let smartAccountInit: ISmartAccount;
100+
switch (smartAccountType) {
101+
case "biconomy":
102+
smartAccountInit = new BiconomySmartAccount();
103+
break;
104+
case "kernel":
105+
smartAccountInit = new KernelSmartAccount();
106+
break;
107+
case "trust":
108+
smartAccountInit = new TrustSmartAccount();
109+
break;
110+
// case "light":
111+
// smartAccountInit = new LightSmartAccount();
112+
// break;
113+
// case "simple":
114+
// smartAccountInit = new SimpleSmartAccount();
115+
// break;
116+
case "safe":
117+
default:
118+
smartAccountInit = new SafeSmartAccount();
119+
break;
120+
}
121+
122+
aaProvider = new AccountAbstractionProvider({
123+
config: {
124+
chainConfig,
125+
bundlerConfig: {
126+
url: bundlerUrl ?? getDefaultBundlerUrl(chainConfig.chainId),
127+
},
128+
paymasterConfig: paymasterUrl
129+
? {
130+
url: paymasterUrl,
131+
}
132+
: undefined,
133+
smartAccountInit,
134+
},
135+
});
136+
}
137+
138+
const web3auth = new Web3Auth(WebBrowser, SecureStore, {
139+
clientId,
140+
privateKeyProvider,
141+
accountAbstractionProvider: aaProvider,
142+
// IMP START - Whitelist bundle ID
143+
redirectUrl,
144+
// IMP END - Whitelist bundle ID
145+
network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
146+
});
147+
setWeb3auth(web3auth);
66148
// IMP START - SDK Initialization
67149
await web3auth.init();
68150
// IMP END - SDK Initialization
@@ -73,11 +155,11 @@ export default function App() {
73155
}
74156
};
75157
init();
76-
}, []);
158+
}, [useAccountAbstraction]);
77159

78160
const login = async () => {
79161
try {
80-
if (!web3auth.ready) {
162+
if (!web3auth?.ready) {
81163
setConsole("Web3auth not initialized");
82164
return;
83165
}
@@ -107,7 +189,7 @@ export default function App() {
107189
};
108190

109191
const logout = async () => {
110-
if (!web3auth.ready) {
192+
if (!web3auth?.ready) {
111193
setConsole("Web3auth not initialized");
112194
return;
113195
}
@@ -220,6 +302,18 @@ export default function App() {
220302

221303
const unloggedInView = (
222304
<View style={styles.buttonAreaLogin}>
305+
<View style={{ marginBottom: 20 }}>
306+
<View
307+
style={{
308+
flexDirection: "row",
309+
alignItems: "center",
310+
justifyContent: "space-between",
311+
}}
312+
>
313+
<Text style={{ paddingRight: 6 }}>Use Account Abstraction:</Text>
314+
<Switch onValueChange={toggleAccountAbstraction} value={useAccountAbstraction} />
315+
</View>
316+
</View>
223317
<TextInput style={styles.inputEmail} placeholder="Enter email" onChangeText={setEmail} />
224318
<Button title="Login with Web3Auth" onPress={login} />
225319
</View>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@ PODS:
7070
- hermes-engine (0.74.1):
7171
- hermes-engine/Pre-built (= 0.74.1)
7272
- hermes-engine/Pre-built (0.74.1)
73+
- MMKV (1.3.9):
74+
- MMKVCore (~> 1.3.9)
75+
- MMKVCore (1.3.9)
7376
- OpenSSL-Universal (3.3.2000)
7477
- RCT-Folly (2024.01.01.00):
7578
- boost
@@ -999,6 +1002,28 @@ PODS:
9991002
- React-Mapbuffer (0.74.1):
10001003
- glog
10011004
- React-debug
1005+
- react-native-mmkv-storage (0.11.2):
1006+
- DoubleConversion
1007+
- glog
1008+
- hermes-engine
1009+
- MMKV (~> 1.3.9)
1010+
- RCT-Folly (= 2024.01.01.00)
1011+
- RCTRequired
1012+
- RCTTypeSafety
1013+
- React-Codegen
1014+
- React-Core
1015+
- React-debug
1016+
- React-Fabric
1017+
- React-featureflags
1018+
- React-graphics
1019+
- React-ImageManager
1020+
- React-NativeModulesApple
1021+
- React-RCTFabric
1022+
- React-rendererdebug
1023+
- React-utils
1024+
- ReactCommon/turbomodule/bridging
1025+
- ReactCommon/turbomodule/core
1026+
- Yoga
10021027
- react-native-quick-crypto (0.7.5):
10031028
- DoubleConversion
10041029
- glog
@@ -1298,6 +1323,7 @@ DEPENDENCIES:
12981323
- React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`)
12991324
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
13001325
- React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
1326+
- react-native-mmkv-storage (from `../node_modules/react-native-mmkv-storage`)
13011327
- react-native-quick-crypto (from `../node_modules/react-native-quick-crypto`)
13021328
- React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
13031329
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1326,6 +1352,8 @@ DEPENDENCIES:
13261352

13271353
SPEC REPOS:
13281354
trunk:
1355+
- MMKV
1356+
- MMKVCore
13291357
- OpenSSL-Universal
13301358
- SocketRocket
13311359

@@ -1413,6 +1441,8 @@ EXTERNAL SOURCES:
14131441
:path: "../node_modules/react-native/ReactCommon/logger"
14141442
React-Mapbuffer:
14151443
:path: "../node_modules/react-native/ReactCommon"
1444+
react-native-mmkv-storage:
1445+
:path: "../node_modules/react-native-mmkv-storage"
14161446
react-native-quick-crypto:
14171447
:path: "../node_modules/react-native-quick-crypto"
14181448
React-nativeconfig:
@@ -1482,6 +1512,8 @@ SPEC CHECKSUMS:
14821512
fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
14831513
glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
14841514
hermes-engine: 16b8530de1b383cdada1476cf52d1b52f0692cbc
1515+
MMKV: 817ba1eea17421547e01e087285606eb270a8dcb
1516+
MMKVCore: af055b00e27d88cd92fad301c5fecd1ff9b26dd9
14851517
OpenSSL-Universal: b60a3702c9fea8b3145549d421fdb018e53ab7b4
14861518
RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
14871519
RCTDeprecation: efb313d8126259e9294dc4ee0002f44a6f676aba
@@ -1507,6 +1539,7 @@ SPEC CHECKSUMS:
15071539
React-jsitracing: 233d1a798fe0ff33b8e630b8f00f62c4a8115fbc
15081540
React-logger: 7e7403a2b14c97f847d90763af76b84b152b6fce
15091541
React-Mapbuffer: 11029dcd47c5c9e057a4092ab9c2a8d10a496a33
1542+
react-native-mmkv-storage: 9e84e8d0cc66402128d01a642022de0145303491
15101543
react-native-quick-crypto: 7085e4e4607e7e8fa57f4193f994d5262d351e45
15111544
React-nativeconfig: b0073a590774e8b35192fead188a36d1dca23dec
15121545
React-NativeModulesApple: df46ff3e3de5b842b30b4ca8a6caae6d7c8ab09f

0 commit comments

Comments
 (0)