Custom Wallet UI

In this guide, you will learn how Web3 apps that integrate with the Arcana Auth SDK can disable the built-in Arcana Wallet UI altogether and use a custom wallet UI to allow authenticated users to sign blockchain transactions.

To use the white-labeled auth feature, the developers must first use the Arcana Developer Dashboard to register the app, configure authentication providers and only then integrate the app with the Arcana Auth SDK and onboard users.

In addition, developers must also build custom wallet UI and call the standard Ethereum JSON RPC calls supported by the Arcana Auth SDK for enabling the authenticated users to programmatically sign blockchain transactions.

Prerequisites

• To use the Arcana Developer Dashboard, developers can sign in using one of the supported social providers or opt for passwordless sign-in.

  • Google
  • Discord
  • Twitter
  • GitHub

Step 1: Developer Dashboard Login

Go to https://dashboard.arcana.network and login using one of the available options.

Step 2: Register Application

After logging in, the Manage Apps dashboard screen is displayed.

List Registered Apps

Each app registered for a developer account is represented by a card in the Manage Apps screen of the Arcana Developer Dashboard.

Initiate App Registration

In the 'Manage Apps' dashboard, click Create New App wizard to register a new app.

Registration Settings

To register a new app, the developer needs to provide the following settings.

• App name
• Default Blockchain
• Wallet UI Mode

App Name

Add a unique name for the app. It can be edited later. After registration, a unique Client ID is associated with each app name. This Client ID is never changed, even if the app name is altered.

All emails related to a registered app billing or user login will mention the latest app name as displayed in the dashboard. Once an app is deleted, the Client ID is no longer valid. Creating a new app with the same name and registering it with Arcana will result in a new Client ID associated with the same name.

Default Blockchain

The default blockchain refers to the chain selection displayed in the wallet once the user logs into an app that is integrated with the Arcana Auth. The default chain can be changed programmatically via the app developer once the user approves switching of the chain. Also, the user can change the default chain anytime by using the wallet UI.

Wallet UI Mode

The wallet UI mode setting allows the developers to choose whether they want to enable the built-in Arcana wallet UI in the context of their app or build a custom wallet UI for the app users. Note, this is a one-time setting at the time of registering the app.

By default, Arcana wallet UI is enabled for all registered apps. Selecting Custom Wallet UI option disables the built-in Arcana wallet UI altogether.

Confirm Registration

After providing all the required inputs, click Create to register the app.

After registration, the app dashboard displays the Arcana Testnet usage statistics for the newly registered app. By default, the app is registered for Testnet usage and a unique Client ID assigned corresponding to the Testnet configuration profile. With this Testnet Client ID, the app can only be deployed on the Arcana Testnet.

Click Configure in the LHS menu to view and edit Arcana Auth usage configuration settings.

To use a custom wallet UI, make sure you specify the Wallet UI Mode setting as 'Custom UI' before clicking the create button.

You can view the Wallet UI Mode setting in the app configuration dashboard.

Step 3: Configure Authentication Providers

Follow the instructions to configure authentication providers before integrating the app with the Arcana Auth SDK.

Step 4: Integrate App

Use the appropriate integration method as per the app type and integrate the app with the Arcana Auth SDK.

Step 5: Onboard Users

Apps that are integrated with the Arcana Auth SDK can choose the built-in plug-and-play login UI or use custom login ui to onboard users. For details, see onboarding users documentation.

Step 6: Plug in Custom Wallet UI

Once user onboarding logic is in place, developers can add code to wire the custom wallet UI by using the standard Ethereum EIP-1193 provider. This provider can be obtained after instantiating the AuthProvider while integrating the app with the Arcana Auth SDK.

Use the provider for calling JSON-RPC Web3 wallet operations and display UI notifications for allowing the users to approve or reject the blockchain request. Note that in case of the white-labeled auth feature where Arcana wallet is disabled, there will be no notification pop-ups generated by the Arcana Auth SDK. Once the app developer issues the JSON-RPC wallet operations supported by the Arcana Auth SDK, the transaction is assumed to be approved and directly submitted to the requisite network as specified in the blockchain request.

Here is a sample code snippet to demonstrate how a vanilla HTML/CSS/JS app can integrate with the Arcana Auth SDK, onboard users via plug-and-play login UI and use the standard EIP-1193 Ethereum provider for plugging in wallet functionality and blockchain signing operations with a custom wallet UI.

import { AuthProvider } from "@arcana/auth";
import { ethers } from 'ethers';

let provider;
const auth = new AuthProvider('xar_live_nnnnnnnnnnnnnnncdddddddd')  //Use registered app client Id

// initialize the Arcana AuthProvider before calling any AuthProvider functions
...
await auth.init()
...

// onboard users - for e.g. using plug-and-play ui

const arcanaProvider = await auth.connect()

// alternatively, onboard users by calling loginWithLink, loginWithSocial, loginWithBearer for passwordless, social or custom IAM providers.
...

const provider = new ethers.providers.Web3Provider(arcanaProvider)

// Call ethers provider APIs see https://docs.ethers.org/v5/api/providers/provider/ for details
await provider.getBlockNumber()

// Use the Arcana provider to sign transactions using JSON RPC calls

async function signTransaction() {

  // Display a notification in custom wallet UI  showing the transaction details and seeking user's approval

  ...

  // Once user approves, issue the request via the Arcana Auth SDK to sign transaction

  const { sig } = await arcanaProvider.request({
    method: 'eth_signTransaction',
    params: [
      {
        from, // sender account address
        gasPrice: 0,
        to: '0xE28F01Cf69f27Ee17e552bFDFB7ff301ca07e780', // receiver account address
        value: '0x0de0b6b3a7640000',
      },
    ],
  })
  console.log({ sig })
}

...

// Similarly, for send tokens or eth_sendtransaction functionality in custom wallet UI, 
// first display a notification to the user showing the transaction details and seeking user's approval

...

// Use the Arcana provider to issue the send transaction

async function sendTransaction() {
  const hash = await arcanaProvider.request({
    method: 'eth_sendTransaction',
      params: [{
      from,
      gasPrice: 0,
      to: '0xE28F01Cf69f27Ee17e552bFDFB7ff301ca07e780', // receiver account address
      value: '0x0de0b6b3a7640000',
    },],
  })
  console.log({ hash })
}

...

That is all!

The Web3 app is all set to use custom wallet UI and allow authenticated app users to sign blockchain transactions.

What's Next?

After registering the app, configuring authentication providers, integrating the Arcana Auth SDK with the app and onboarding users, developers can further add code in the app to sign blockchain transactions, send and receive native, ERC20, or custom tokens, and more.

For a complete list of other JSON RPC calls supported by the Arcana wallet, see JSON-RPC Specifications.

See also

• Send transactions
• Check the wallet account balance
• Watch crypto assets
• Arcana Auth SDK Usage Guide
• Arcana Auth SDK Reference Guide