Integrate Embedded Wallets with the Shardeum Blockchain in JavaScript
While using the Web3Auth React SDK, you get access to the Web3Auth provider. You can pair it up with the libraries like ethers.js, viem etc. to make EVM based blockchain calls, like getting user's account, fetch balance, sign transaction, send transaction, read from and write to the smart contract, etc. We have highlighted a few here for getting you started quickly on that.
Chain details for Shardeum
- Testnet
- Chain ID: 0x1F92
- Public RPC URL: https://atomium.shardeum.org
- Display Name: Shardeum Atomium Testnet
- Block Explorer Link: https://explorer-atomium.shardeum.org
- Ticker: SHM
- Ticker Name: Shardeum
For VanillaJS, Angular and other frameworks
Installation
To interact with the blockchain, you can use either the viem or
ethers.js library with Web3Auth.
- viem
- ethers.js
- npm
- Yarn
- pnpm
- Bun
npm install --save viem
yarn add viem
pnpm add viem
bun add viem
- npm
- Yarn
- pnpm
- Bun
npm install --save ethers
yarn add ethers
pnpm add ethers
bun add ethers
Initializing provider
Using eip155 as chainNamespace while initializing web3auth will provide an
EIP1193 compatible provider as web3auth.provider
after successful authentication.
Initializing and instantiating the Web3Auth SDK
import { Web3Auth, WEB3AUTH_NETWORK } from '@web3auth/modal'
const web3AuthOptions: Web3AuthOptions = {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
}
Getting the Web3Auth provider
After initializing Web3Auth, the next step is to initialize the provider and use it for your operations.
// Initialize for PnP Web SDK
await web3auth.init()
// Trigger the login
await web3auth.connect()
// await web3auth.connectTo(); // For custom flow
// Get the provider
const provider = web3auth.provider
// Continue using the `provider`
Get Account and Balance
- viem
- ethers.js
/*
Use code from the above Initializing Provider here
*/
// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
// For ethers v5
// const signer = ethersProvider.getSigner();
const signer = await ethersProvider.getSigner()
// Get user's Ethereum public address
const address = signer.getAddress()
// Get user's balance in ether
// For ethers v5
// const balance = ethers.utils.formatEther(
// await ethersProvider.getBalance(address) // Balance is in wei
// );
const balance = ethers.utils.formatEther(
await provider.getBalance(address) // Balance is in wei
)
const publicClient = createPublicClient({
chain: mainnet, // for mainnet
transport: custom(this.provider),
})
const walletClient = createWalletClient({
chain: mainnet,
transport: custom(this.provider),
})
// Get user's Ethereum public address
const address = await walletClient.getAddresses()
// Get user's balance in ether
const balance = await publicClient.getBalance({ address: address[0] })
Send Transaction
- viem
- ethers.js
/*
Use code from the above Initializing Provider here
*/
// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
const signer = await provider.getSigner()
const destination = '0x7aFac68875d2841dc16F1730Fba43974060b907A'
const amount = ethers.parseEther('1.0') // Convert 1 ether to wei
// Submit transaction to the blockchain
const tx = await signer.sendTransaction({
to: destination,
value: amount,
})
// Wait for the transaction to be mined
const receipt = await tx.wait()
/*
Use code from the above Initializing Provider here
*/
const publicClient = createPublicClient({
chain: mainnet, // for mainnet
transport: custom(this.provider),
})
const walletClient = createWalletClient({
chain: mainnet, // for mainnet
transport: custom(this.provider),
})
// data for the transaction
const destination = '<ADDRESS>'
const amount = parseEther('0.0001')
const address = await this.getAccounts()
const address = await walletClient.getAddresses()
// Submit transaction to the blockchain
const hash = await walletClient.sendTransaction({
account: address[0],
to: destination,
value: amount,
})
const receipt = await publicClient.waitForTransactionReceipt({ hash })