From 4c2cdf8dd309edbe90aedad321862105c316ec94 Mon Sep 17 00:00:00 2001 From: Chaitanya Potti Date: Thu, 29 Aug 2024 22:40:24 +0800 Subject: [PATCH] update example --- demo/rn-bare-example/App.tsx | 160 +++++++++++-------------- demo/rn-bare-example/package-lock.json | 27 +---- demo/rn-bare-example/package.json | 2 +- 3 files changed, 77 insertions(+), 112 deletions(-) diff --git a/demo/rn-bare-example/App.tsx b/demo/rn-bare-example/App.tsx index 82563af..454ea2f 100644 --- a/demo/rn-bare-example/App.tsx +++ b/demo/rn-bare-example/App.tsx @@ -1,120 +1,109 @@ -import * as WebBrowser from '@toruslabs/react-native-web-browser'; +import * as WebBrowser from "@toruslabs/react-native-web-browser"; -import { - Button, - Dimensions, - ScrollView, - StyleSheet, - Text, - TextInput, - View, -} from 'react-native'; -import Web3Auth, { - IWeb3Auth, - LOGIN_PROVIDER, - OpenloginUserInfo, -} from '@web3auth/react-native-sdk'; -import { useEffect, useState } from 'react'; +import { Button, Dimensions, ScrollView, StyleSheet, Text, TextInput, View } from "react-native"; +import Web3Auth, { IWeb3Auth, LOGIN_PROVIDER, OpenloginUserInfo } from "@web3auth/react-native-sdk"; +import { useEffect, useState } from "react"; -import { ChainNamespace } from '@web3auth/react-native-sdk'; -import EncryptedStorage from 'react-native-encrypted-storage'; -import RPC from './ethersRPC'; // for using ethers.js +import { ChainNamespace } from "@web3auth/react-native-sdk"; +import EncryptedStorage from "react-native-encrypted-storage"; +import RPC from "./ethersRPC"; // for using ethers.js -const scheme = 'web3authrnbareexample'; // Or your desired app redirection scheme +const scheme = "web3authrnbareexample"; // Or your desired app redirection scheme const resolvedRedirectUrl = `${scheme}://openlogin`; -const clientId = - 'BFuUqebV5I8Pz5F7a5A2ihW7YVmbv_OHXnHYDv6OltAD5NGr6e-ViNvde3U4BHdn6HvwfkgobhVu4VwC-OSJkik'; +const clientId = "BFuUqebV5I8Pz5F7a5A2ihW7YVmbv_OHXnHYDv6OltAD5NGr6e-ViNvde3U4BHdn6HvwfkgobhVu4VwC-OSJkik"; const chainConfig = { chainNamespace: ChainNamespace.EIP155, - chainId: '0xaa36a7', - rpcTarget: 'https://rpc.ankr.com/eth_sepolia', + chainId: "0xaa36a7", + rpcTarget: "https://rpc.ankr.com/eth_sepolia", // Avoid using public rpcTarget in production. // Use services like Infura, Quicknode etc - displayName: 'Ethereum Sepolia Testnet', - blockExplorerUrl: 'https://sepolia.etherscan.io', - ticker: 'ETH', - tickerName: 'Ethereum', + displayName: "Ethereum Sepolia Testnet", + blockExplorerUrl: "https://sepolia.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", decimals: 18, - logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png', + logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png", }; export default function App() { - const [userInfo, setUserInfo] = useState(); - const [key, setKey] = useState(''); - const [console, setConsole] = useState(''); + const [userInfo, setUserInfo] = useState(null); + const [key, setKey] = useState(""); + const [localConsole, setLocalConsole] = useState(""); const [web3auth, setWeb3Auth] = useState(null); - const [email, setEmail] = useState('hello@tor.us'); + const [email, setEmail] = useState("hello@tor.us"); const login = async () => { try { if (!web3auth) { - setConsole('Web3auth not initialized'); + setLocalConsole("Web3auth not initialized"); return; } - setConsole('Logging in'); + setLocalConsole("Logging in"); await web3auth.login({ loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS, extraLoginOptions: { login_hint: email, }, }); - setConsole(`Logged in ${web3auth.privKey}`); + setLocalConsole(`Logged in ${web3auth.privKey}`); if (web3auth.privKey) { - setUserInfo(web3auth.userInfo()); + const userInfo = web3auth.userInfo(); + if (userInfo) setUserInfo(userInfo); setKey(web3auth.privKey); - uiConsole('Logged In'); + uiConsole("Logged In"); } } catch (e: unknown) { - setConsole((e as Error).message); + console.error(e); + setLocalConsole((e as Error).message); } }; const logout = async () => { if (!web3auth) { - setConsole('Web3auth not initialized'); + setLocalConsole("Web3auth not initialized"); return; } - setConsole('Logging out'); + setLocalConsole("Logging out"); await web3auth.logout(); if (!web3auth.privKey) { - setUserInfo(undefined); - setKey(''); - uiConsole('Logged out'); + setUserInfo(null); + setKey(""); + uiConsole("Logged out"); } }; const enableMFA = async () => { if (!web3auth) { - setConsole('Web3auth not initialized'); + setLocalConsole("Web3auth not initialized"); return; } - setConsole('Enable MFA'); + setLocalConsole("Enable MFA"); await web3auth.enableMFA(); - uiConsole('MFA enabled'); + uiConsole("MFA enabled"); }; const launchWalletSerices = async () => { if (!web3auth) { - setConsole('Web3auth not initialized'); + setLocalConsole("Web3auth not initialized"); return; } - setConsole('Launch Wallet Services'); + setLocalConsole("Launch Wallet Services"); await web3auth.launchWalletServices(chainConfig); }; const requestSignature = async () => { if (!web3auth) { - setConsole('Web3auth not initialized'); + setLocalConsole("Web3auth not initialized"); return; } if (!key) { - setConsole('User not logged in'); + setLocalConsole("User not logged in"); return; } @@ -127,7 +116,7 @@ export default function App() { // }, // null, // ]; - const params = ['Hello World', address]; + const params = ["Hello World", address]; // const params = [{ }]; // params.push('Hello World'); // params.push(address); @@ -200,8 +189,8 @@ export default function App() { // }, // ]; - setConsole('Request Signature'); - const res = await web3auth.request(chainConfig, 'personal_sign', params); + setLocalConsole("Request Signature"); + const res = await web3auth.request(chainConfig, "personal_sign", params); uiConsole(res); }; @@ -209,18 +198,19 @@ export default function App() { const init = async () => { const auth = new Web3Auth(WebBrowser, EncryptedStorage, { clientId, - network: 'sapphire_devnet', // or other networks + network: "sapphire_devnet", // or other networks useCoreKitKey: false, loginConfig: {}, enableLogging: true, - buildEnv: 'testing', + buildEnv: "testing", redirectUrl: resolvedRedirectUrl, }); setWeb3Auth(auth); await auth.init(); if (auth?.privKey) { - uiConsole('Re logged in'); - setUserInfo(auth.userInfo()); + uiConsole("Re logged in"); + const userInfo = auth.userInfo(); + if (userInfo) setUserInfo(userInfo); setKey(auth.privKey); } }; @@ -228,64 +218,58 @@ export default function App() { }, []); const getChainId = async () => { - setConsole('Getting chain id'); + setLocalConsole("Getting chain id"); const networkDetails = await RPC.getChainId(); uiConsole(networkDetails); }; const getAccounts = async () => { if (!key) { - setConsole('User not logged in'); + setLocalConsole("User not logged in"); return; } - setConsole('Getting account'); + setLocalConsole("Getting account"); const address = await RPC.getAccounts(key); uiConsole(address); }; const getBalance = async () => { if (!key) { - setConsole('User not logged in'); + setLocalConsole("User not logged in"); return; } - setConsole('Fetching balance'); + setLocalConsole("Fetching balance"); const balance = await RPC.getBalance(key); uiConsole(balance); }; const sendTransaction = async () => { if (!key) { - setConsole('User not logged in'); + setLocalConsole("User not logged in"); return; } - setConsole('Sending transaction'); + setLocalConsole("Sending transaction"); const tx = await RPC.sendTransaction(key); uiConsole(tx); }; const signMessage = async () => { if (!key) { - setConsole('User not logged in'); + setLocalConsole("User not logged in"); return; } - setConsole('Signing message'); + setLocalConsole("Signing message"); const message = await RPC.signMessage(key); uiConsole(message); }; const uiConsole = (...args: unknown[]) => { - setConsole(JSON.stringify(args || {}, null, 2) + '\n\n\n\n' + console); + setLocalConsole(JSON.stringify(args || {}, null, 2) + "\n\n\n\n" + localConsole); }; const loggedInView = (