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();

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 });
}

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.

See Also

• Arcana wallet Developers' Guide
• Arcana Auth SDK Usage Guide
• Arcana Auth SDK Reference Guide