Building a Web3 Asset Dashboard#
Step 1: Create a Project and Configure#
Before starting, some preparation work is required:
Create a Project and API Key#
Before using the wallet API, create a project and generate an API key on the developer portal:
- Log in to the Developer Management Platform.
- Create a new project.
- Generate an API key in the project settings.
Next, some configuration work is needed to be done by the developer.
REST Request Authentication Configuration#
When sending REST requests, authentication is required. Please refer to the REST Request Authentication Guide.
Node.js Environment Setup#
Import the necessary Node.js libraries and set your environment variables Node.js Environment Setup.
Step 2: Create an Account#
For asset dashboard scenarios, observation accounts are typically used to only track assets.
Now you can create an observation account (AccountId)to aggregate the addresses you want to monitor for batch querying of token balances and transaction history.
Wallet API providesWallet Account and Watch-Only Account.
Wallet Account: Requires authentication, can freely add tokens, and perform on-chain transactions.
Watch-Only Account: No authentication required, only tracks assets, and cannot send transactions.
Create a Watch-Only Account#
Call the POST /api/v5/waas/account/create-watch-only-account interface to create a watch-only account.
For example, to subscribe to the same address on different chains simultaneously, implement it as follows:
// Define your parameters
const addresses = [
{
"chainIndex":"1",
"address":"0x561815e02bac6128bbbbc551005ddfd92a5c24db",
},
{
"chainIndex":"10",
"address":"0x561815e02bac6128bbbbc551005ddfd92a5c24db",
}
];
const getCreateWatchOnlyAccountBody = {
addresses: addresses
};
// Define auxiliary function
const getCreateAccountData = async () => {
const apiRequestUrl = getRequestUrl(
apiBaseUrl,
'/api/v5/waas/account/create-watch-only-account'
);
return fetch(apiRequestUrl, {
method: 'post',
headers: headersParams,
body: JSON.stringify(getCreateWatchOnlyAccountBody),
})
.then((res) => res.json())
.then((res) => {
return res;
});
};
const { data: createWatchOnlyAccountData } = await getCreateWatchOnlyAccountData();
Step 3: Query Balances#
Watch-only accounts can directly call the POST /api/v5/waas/wallet/asset/all-token-balances-watch-only interface to view the tokens held by the account. Click here for details of this interface.
// Define parameters
const getAssetsParams = {
accountId: '13886e05-1265-4b79-8ac3-b7ab46211001',
};
// Define auxiliary function
const getAssetsData = async () => {
const apiRequestUrl = getRequestUrl(
apiBaseUrl,
'/api/v5/waas/asset/all-token-balances-watch-only',
getAssetsParams
);
return fetch(apiRequestUrl, {
method: 'GET',
headers: headersParams,
})
.then((res) => res.json())
.then((res) => {
return res;
});
};
const { data: getAssetsData } = await getAssetsData();
When assets are queried, you will receive a response like this:
{
"code": "0",
"data": [
{
"chainIndex": "1",
"tokenAddress": "0xdac17f958d2ee523a2206206994597c13d831ec7",
"symbol": "USDT",
"balance": "0.688467",
"tokenPrice": "0.99993",
"tokenType": "1"
},
{
"chainIndex": "1",
"tokenAddress": "0x514910771af9ca656af840dff83e8264ecf986ca",
"symbol": "LINK",
"balance": "0.000000366257612925",
"tokenPrice": "14.108071299717093",
"tokenType": "1"
}
],
"msg": "success"
}
At this point, you have basically implemented the basic functions needed to develop a Web3 asset dashboard.
Additionally, Wallet API provides a rich range of interfaces to fully meet the needs of exchange wallet developers. For details, please refer to the API Reference.