Show Wallet

Arcana wallet is an embedded Web3 wallet available to all the dApps that integrate with the Arcana Auth SDK.

In this guide, you will learn how a dApp can display the built-in Arcana wallet after integrating with the Auth SDK.

Prerequisites

Register and configure your application using the Arcana Developer Dashboard. Next, install the @arcana/auth package. Integrate the Auth SDK with your app. For details, see Arcana Auth Quick Start Guide.

const { AuthProvider } = window.arcana.auth // From CDN
//or
import { AuthProvider, CHAIN } from '@arcana/auth' //From npm

//clientId : Arcana Unique App Identifier via Dashboard
const clientId = 'xar_test_445007f942f9Ba718953094BbeeeeeB9484cAfd2'
const auth = new AuthProvider(`${clientId}`, { //required
  network: 'testnet', //defaults to 'testnet'
  position: 'left', //defaults to right
  theme: 'light', //defaults to dark
  alwaysVisible: false, //defaults to true, wallet always visible
  chainConfig: {
    chainId: CHAIN.POLYGON_MAINNET, //defaults to CHAIN.ETHEREUM_MAINNET
    rpcUrl: 'https://polygon-rpc.com', //defaults to 'https://rpc.ankr.com/eth'
  },
})

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

Make sure you have created the AuthProvider and initialized it before calling the showWallet() function in the context of the dApp.

A user must be successfully authenticated before calling the showWallet() function in the context of a dApp.

Display Wallet

After initializing the AuthProvider and once the user has authenticated, the application can call showWallet() to bring up the built-in wallet UI.

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

If the wallet is not already displayed in the context of the application, showWallet() will bring up the following wallet UI. If the wallet is displayed in the minimized state before the `showWallet() function is called, then it will cause the minimized wallet state to change into the maximized wallet UI.

That is all! You are all set to display the built-in Arcana wallet to authenticated users.

Note

If the AuthProvider is configured with the default alwaysVisible=true setting, the built-in Arcana wallet will be automatically displayed in the minimized form when the user logs in. If showWallet() is called or if the user clicks the minimized wallet UI, then the maximized wallet UI is displayed.

If the alwaysVisible=false setting is selected by the app developer, then the built-in Arcana wallet is not displayed automatically once the user logs in. It shows up only when a blockchain transaction is triggered. Developers can also bring up the wallet UI for authenticated users by making an explicit call to the showWallet() function. Note that the AuthProvider must be initialized and the user authenticated before the wallet is displayed.

What's Next?

Arcana wallet also supports typical Web3 wallet JSON-RPC calls. For a complete list, see JSON-RPC Specifications.

Show Wallet

Prerequisites

Display Wallet

What's Next?

See also