Use Arcana Auth SDK with the Shardeum Network
Web3 applications can integrate with the Arcana Auth SDK to authenticate users via social providers or passwordless login. Developers can easily enable authenticated users to access the Arcana wallet instantly and use it to sign blockchain transactions.
The Arcana Auth SDK provides a standard Ethereum provider which can be used to make blockchain calls for any supported blockchain networks including the Shardeum Network.
In this guide, you will learn how to integrate a Web3 app with the Arcana Auth SDK and enable authenticated users to sign blockchain transactions using the Shardeum Network.
Step 1: Register and Configure App
Use the Arcana Developer Dashboard to register and configure Web3 applications. Each registered application is assigned a unique Client ID. Follow the instructions in the How to Register and Configure Applications Guide. Save the Client ID as it will be required to integrate with the Arcana Auth SDK later.
Step 2: Install auth
npm
npm install --save @arcana/auth
yarn
yarn add @arcana/auth
CDN
<script src="https://cdn.jsdelivr.net/npm/@arcana/auth"></script>
<script src="https://unpkg.com/@arcana/auth"></script>
Step 3: Create and Initialize the AuthProvider
const { AuthProvider } = window.arcana.auth // From CDN
//or
import { AuthProvider, CHAIN } from '@arcana/auth' //From npm
const clientId = '9b74fe1913101eec12b06fb9b8fa579ced8b91f9' // Client ID Example
let provider;
const auth = new AuthProvider(`${clientId}`, {
network: "testnet",
alwaysVisible: true,
setWindowProvider: true,
position: "right",
theme: "dark"
});
provider = auth.provider;
Initialize the newly instantiated AuthProvider
.
try {
await auth.init()
} catch (e) {
// Handle exception case
}
To enable the Arcana wallet after integrating the Web3 app with the Arcana Auth SDK, a user must log into the app. Web3 app developers can easily onboard users via the built-in, plug-and-play login UI to quickly allow authenticated users to use the Arcana wallet and sign blockchain transactions.
await auth.connect();
Onboarding Options
The plug-and-play default authentication UI will only display only those social providers that are configured by the developer using the Arcana Developer Dashboard. If no social providers are configured, passwordless login is the only option that shows up.
Step 4: Configure & Switch to the Shardeum Network
To ensure that the Arcana wallet shows up for an authenticated user with pre-configured Shardeum Network, the developer must configure, and add Shardeum Network programmatically by using the wallet_addEthereumChain
JSON-RPC method and then switch to it via wallet_switchEthereumChain JSON-RPC method. Set up requisite hooks for JSON-RPC.
Enable JSON-RPC Hooks
// Assuming Auth SDK is integrated and initialized
try {
provider = auth.provider
const connected = await auth.isLoggedIn()
console.log({ connected })
setHooks()
} catch (e) {
// Handle exception case
}
// setHooks: Manage chain or account switch in Arcana wallet
function setHooks() {
provider.on('connect', async (params) => {
console.log({ type: 'connect', params: params })
const isLoggedIn = await auth.isLoggedIn()
console.log({ isLoggedIn })
})
provider.on('accountsChanged', (params) => {
//Handle
console.log({ type: 'accountsChanged', params: params })
})
provider.on('chainChanged', async (params) => {
console.log({ type: 'chainChanged', params: params })
})
}
Add Shardeum Network
The wallet_addEthereumChain
method is specified by EIP-3085.
try {
setRequest("wallet_addEthereumChain");
const response = await provider.request({
method: "wallet_addEthereumChain",
params: [
{
chainId: "8081",
chainName: "Shardeum",
blockExplorerUrls: ["https://explorer-liberty20.shardeum.org/"],
rpcUrls: ["https://liberty20.shardeum.org/"],
nativeCurrency: {
symbol: " SHM"
}
}
]
});
setResult(response);
} catch (e) {
console.log({ e });
...
}
Switch to the Shardeum Network
This method is specified by EIP-3326
try {
setRequest("wallet_switchEthereumChain");
const response = await provider.request({
method: "wallet_switchEthereumChain",
params: [
{
chainId: "8081"
}
]
});
setResult(response);
} catch (e) {
console.log({ e });
}
Network Switch Error
If the error code (error.code) is 4902, then the requested chain has not been added, and you have to request to add it via wallet_addEthereumChain
.
Other Web3 Wallet Operations
Now that the Arcana wallet is configured to use the Shardeum Network, the developer can plug in any of the Web3 wallet operations and enable the authenticated users to perform blockchain operations using the Shardeum network.
Get Accounts
Refer to the code below to fetch the authenticated user's wallet address to display in the app:
// get from eth_accounts
let from = ''
async function getAccounts() {
console.log('Requesting accounts')
try {
const accounts = await provider.request({ method: 'eth_accounts' })
console.log({ accounts })
from = accounts[0] // Use this account address to get wallet balance
} catch (e) {
console.log({ e })
}
}
Get Balance
Use this code to fetch the wallet address balance details:
let balance = ''
async function getBalance() {
console.log('Requesting Balance')
try {
provider.request({ method: 'eth_getBalance' }).then((balance) => {
// convert a currency unit from wei to ether
const balanceInEth = ethers.utils.formatEther(balance)
console.log(`balance: ${balanceInEth} ETH`)
})
} catch (e) {
console.log({ e })
}
}
Get User Information
Get the user information via the social provider token directly in the authenticated user's context and use it in the app. Note, the Arcana Network does not store this information anywhere.
const user = await provider.getUser()
Send Transaction
async function sendTransaction() {
setRequest('eth_sendTransaction')
const hash = await provider.request({
method: 'eth_sendTransaction',
params: [{
from,
gasPrice: 0,
to: '0xE28F01Cf69f27Ee17e552bFDFB7ff301ca07e780',
value: '0x0de0b6b3a7640000',
},],
})
console.log({ hash })
}
Get Public Key
const user = await provider.getUser()
const key = await provider.getPublicKey(user.email)
Send SHM
async function sendTransaction() {
setRequest('eth_sendTransaction')
const hash = await provider.request({
method: 'eth_sendTransaction',
params: [{
from,
gasPrice: 0,
to: '0xE28F01Cf69f27Ee17e552bFDFB7ff301ca07e780',
value: '0x0de0b6b3a7640000',
},],
})
console.log({ hash })
}
The Arcana wallet springs into action when a user initiates a 'send token' transaction through the wallet UI or the application code triggers the blockchain send transaction programmatically. The following figure shows how users can input the token amount, gas, and recipient details in the Arcana wallet UI for sending tokens.
The wallet displays a 'Proceed' button to allow for user confirmation before the send token transaction is executed on the configured blockchain network.