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.
See also
- Arcana wallet capabilities
- Configure Arcana wallet Visibility
- Send transaction
- Watch Token Assets
- Check account balance
- Auth SDK Reference Guide