Integrate Arcana Auth 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.

Arcana Auth SDK provides standard Ethereum provider which can be used to make blockchain calls any supported blockchains including the Shardeum Network.

In this guide, you will learn how to integrate a Web3 app with the Auth SDK and enable the authenticated app users to use Shardeum Network.

Step 1: Register and Configure App

Use 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 SDK

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,
  position: "right",
  theme: "dark"
});
provider = auth.provider;

Initialize the newly instantiated AuthProvider.

try {
  await auth.init()
} catch (e) {
  // Handle exception case
}

To enable Arcana wallet after integrating the Web3 app with the Auth SDK, a user must log into the app. Web3 application developers can use Arcana plug-and-play authentication to quickly onboard users and allow them 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, add Shardeum Network programmatically by using 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

For logged in users, you can get the user information via the social provider token directly and 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 the Arcana wallet screen that shows up allowing users to input the token amount, gas, and recipient details 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.