Using Shardeum with Arcana Auth
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 on Shardeum and other supported networks.
Arcana Auth comes pre-configured with the Shardeum Sphinx 1.x network. Users will see the Shardeum network once they log into a Web3 app that is integrated with the Arcana Auth SDK and they can use the Shardeum network out of the box.
In this guide, you will learn how developers can integrate a Web3 app with the Arcana Auth SDK and enable authenticated users to sign blockchain transactions using the Shardeum Network and the Arcana wallet. Developers can also programmatically add and switch to other Shardeum network flavors that are not present in the pre-configured network list.
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.
Configure Shardeum Network
The Shardeum network is pre-configured in the Arcana Auth product. But it is not set as the default network.
To ensure that the Arcana wallet shows up for an authenticated user with a pre-configured Shardeum Network, the developer simply needs to select it from the pre-configured chains list and set it as the default network using the Arcana Developer Dashboard.
If required, other Shardeum network flavors such as Liberty can also be manually added to the list of pre-configured networks using the dashboard.
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 } from '@arcana/auth' //From npm
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.
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
}
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. Once the developer has integrated the Web3 app with the Arcana Auth SDK and plugged in the required code to onboard users, a user must log into the app to access the Arcana wallet.
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: Programmatically Use Shardeum Network
Web3 app developers can integrate the app with the Arcana Auth SDK and call wallet_addEthereumChain
JSON-RPC method to programmatically add other flavors of Shardeum networks in the list of pre-configured networks via the Arcana Developer Dashboard. They can also switch to the required network via the wallet_switchEthereumChain
call. Make sure that the requisite hooks for JSON-RPC are set up in the app.
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 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 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
.
Web3 Wallet Operations
Now that the Arcana wallet is all set 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 'Preview' button to let the user review transaction details before issuing it. Once the user confirms, the send token transaction is executed on the configured Shardeum blockchain network.