Skip to main content

Builder Settings

Product

Plug and Play
Core Kit

SDK

Platform

import { useEffect, useState } from "react";
import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES, IProvider, WEB3AUTH_NETWORK } from "@web3auth/base";
import Web3 from "web3";

import "./App.css";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const clientId =
"BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io

const chainConfig = {
chainId: "0x1", // Please use 0x1 for Mainnet
rpcTarget: "https://rpc.ankr.com/eth",
chainNamespace: CHAIN_NAMESPACES.EIP155,
displayName: "Ethereum Mainnet",
blockExplorerUrl: "https://etherscan.io/",
ticker: "ETH",
tickerName: "Ethereum",
logo: "https://images.toruswallet.io/eth.svg",
};


const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig: chainConfig }
});

const web3auth = new Web3Auth({
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider: privateKeyProvider,
});

function App() {
const [provider, setProvider] = useState<IProvider | null>(null);
const [loggedIn, setLoggedIn] = useState(false);

useEffect(() => {
const init = async () => {
try {
await web3auth.initModal();
setProvider(web3auth.provider);

if (web3auth.connected) {
setLoggedIn(true);
}
} catch (error) {
console.error(error);
}
};

init();
}, []);

const login = async () => {
const web3authProvider = await web3auth.connect();
setProvider(web3authProvider);
if (web3auth.connected) {
setLoggedIn(true);
}
};

const getUserInfo = async () => {
const user = await web3auth.getUserInfo();
uiConsole(user);
};

const logout = async () => {
await web3auth.logout();
setProvider(null);
setLoggedIn(false);
uiConsole("logged out");
};

const getAccounts = async () => {
if (!provider) {
uiConsole("provider not initialized yet");
return;
}
const web3 = new Web3(provider as any);

// Get user's Ethereum public address
const address = await web3.eth.getAccounts();
uiConsole(address);
};

const getBalance = async () => {
if (!provider) {
uiConsole("provider not initialized yet");
return;
}
const web3 = new Web3(provider as any);

// Get user's Ethereum public address
const address = (await web3.eth.getAccounts())[0];

// Get user's balance in ether
const balance = web3.utils.fromWei(
await web3.eth.getBalance(address), // Balance is in wei
"ether"
);
uiConsole(balance);
};

const signMessage = async () => {
if (!provider) {
uiConsole("provider not initialized yet");
return;
}
const web3 = new Web3(provider as any);

// Get user's Ethereum public address
const fromAddress = (await web3.eth.getAccounts())[0];

const originalMessage = "YOUR_MESSAGE";

// Sign the message
const signedMessage = await web3.eth.personal.sign(
originalMessage,
fromAddress,
"test password!" // configure your own password here.
);
uiConsole(signedMessage);
};

function uiConsole(...args: any[]): void {
const el = document.querySelector("#console>p");
if (el) {
el.innerHTML = JSON.stringify(args || {}, null, 2);
}
console.log(...args);
}

const loggedInView = (
<>
<div className="flex-container">
<div>
<button onClick={getUserInfo} className="card">
Get User Info
</button>
</div>
<div>
<button onClick={getAccounts} className="card">
Get Accounts
</button>
</div>
<div>
<button onClick={getBalance} className="card">
Get Balance
</button>
</div>
<div>
<button onClick={signMessage} className="card">
Sign Message
</button>
</div>
<div>
<button onClick={logout} className="card">
Log Out
</button>
</div>
</div>
</>
);

const unloggedInView = (
<button onClick={login} className="card">
Login
</button>
);

return (
<div className="container">
<h1 className="title">
<a target="_blank" href="https://web3auth.io/docs/sdk/pnp/web/modal" rel="noreferrer">
Web3Auth{" "}
</a>
& ReactJS (Webpack) Quick Start
</h1>

<div className="grid">{loggedIn ? loggedInView : unloggedInView}</div>
<div id="console" style={{ whiteSpace: "pre-line" }}>
<p style={{ whiteSpace: "pre-line" }}></p>
</div>

<footer className="footer">
<a
href="https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/react-modal-quick-start"
target="_blank"
rel="noopener noreferrer"
>
Source code
</a>
</footer>
</div>
);
}

export default App;