Skip to content

Watch Assets

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 dApps can use the JSON RPC calls supported by the Arcana wallet to watch native and custom tokens associated with a specified wallet address.

Prerequisites

Register and configure your application using the Arcana Developer Dashboard. Next, install the @arcana/auth package. Integrate the Auth SDK with your dApp. 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 already initialized the wallet before invoking any JSON RPC calls for watching token assets using the Arcana wallet.

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

Watch Assets

Once the application is registered, configured and integrated with the Auth SDK, you can build functionality in the dApp for watching token assets associated with the logged in user's wallet address by implementing a 'watchAssets' function as shown in the following code sample:

async function watchAsset() {
  setRequest('eth_sendTransaction')
  const hash = await provider.request({
    method: 'wallet_watchAsset',
      params: {
        type: 'ERC20',
        options: {
          address: '0xB983E01458529665007fF7E0CDdeCDB74B967Eb6',
          symbol: 'FOO',
          decimals: 18,
          image: 'https://foo.io/token-image.svg',
      },
    },
  })
  console.log({ hash })
}

When a new asset is bought or shared with the authenticated user's wallet address, the dApp that has plugged in code to watch assets can add the newly added asset into the Arcana wallet. When the user checks the assets section of the wallet, they can see the newly added asset.

Similarly, if a dApp has plugged in code to watch assets can remove the newly sold asset from the associated Arcana wallet. When the user checks the assets section of the wallet, they can see that the asset that was sold is removed as they no longer own it.

That is all! You are all set to watch assets associated with the specified Arcana wallet.

What's Next?

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

See also


Last update: January 11, 2023 by shaloo