Skip to content

Commit

Permalink
update example
Browse files Browse the repository at this point in the history
  • Loading branch information
@chaitanyapotti
chaitanyapotti committed Aug 29, 2024
1 parent 6b58997 commit 4c2cdf8
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 112 deletions.
160 changes: 72 additions & 88 deletions demo/rn-bare-example/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<OpenloginUserInfo | undefined>();
const [key, setKey] = useState<string | undefined>('');
const [console, setConsole] = useState<string>('');
const [userInfo, setUserInfo] = useState<OpenloginUserInfo | null>(null);
const [key, setKey] = useState<string | undefined>("");
const [localConsole, setLocalConsole] = useState<string>("");
const [web3auth, setWeb3Auth] = useState<IWeb3Auth | null>(null);
const [email, setEmail] = useState('[email protected]');
const [email, setEmail] = useState("[email protected]");

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;
}

Expand All @@ -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);
Expand Down Expand Up @@ -200,92 +189,87 @@ 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);
};

useEffect(() => {
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);
}
};
init();
}, []);

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 = (
<View style={styles.buttonArea}>
<Button title="Get User Info" onPress={() => uiConsole(userInfo)} />
<Button title="Enable MFA" onPress={() => enableMFA()} />
<Button
title="launch Wallet Services"
onPress={() => launchWalletSerices()}
/>
<Button
title="Request Signature from Wallet Services"
onPress={() => requestSignature()}
/>
<Button title="launch Wallet Services" onPress={() => launchWalletSerices()} />
<Button title="Request Signature from Wallet Services" onPress={() => requestSignature()} />
<Button title="Get Chain ID" onPress={() => getChainId()} />
<Button title="Get Accounts" onPress={() => getAccounts()} />
<Button title="Get Balance" onPress={() => getBalance()} />
Expand All @@ -300,7 +284,7 @@ export default function App() {
<View style={styles.buttonArea}>
<TextInput
editable
onChangeText={text => setEmail(text)}
onChangeText={(text) => setEmail(text)}
value={email}
// eslint-disable-next-line react-native/no-inline-styles
style={{ padding: 10 }}
Expand All @@ -315,7 +299,7 @@ export default function App() {
<View style={styles.consoleArea}>
<Text style={styles.consoleText}>Console:</Text>
<ScrollView style={styles.console}>
<Text>{console}</Text>
<Text>{localConsole}</Text>
</ScrollView>
</View>
</View>
Expand All @@ -325,32 +309,32 @@ export default function App() {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
paddingTop: 50,
paddingBottom: 30,
},
consoleArea: {
margin: 20,
alignItems: 'center',
justifyContent: 'center',
alignItems: "center",
justifyContent: "center",
flex: 1,
},
console: {
flex: 1,
backgroundColor: '#CCCCCC',
color: '#ffffff',
backgroundColor: "#CCCCCC",
color: "#ffffff",
padding: 10,
width: Dimensions.get('window').width - 60,
width: Dimensions.get("window").width - 60,
},
consoleText: {
padding: 10,
},
buttonArea: {
flex: 2,
alignItems: 'center',
justifyContent: 'space-around',
alignItems: "center",
justifyContent: "space-around",
paddingBottom: 30,
},
});
Loading

0 comments on commit 4c2cdf8

Please sign in to comment.