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.