Expand your realtime crypto wallet by integrating a dynamic feed of onchain activity.
Show all onchain activity for a wallet address in the 'Activity' tab of our app.
Now that you have a wallet capable of showing realtime token balances and total portfolio value, let’s enhance it by adding an Activity tab.
A key feature for any wallet is the ability to view past transaction activity. This includes native currency transfers, ERC20 token movements, NFT transfers, and decoded interactions with smart contracts. The Activity API provides a comprehensive, realtime feed of this onchain activity, letting you implement this functionality with a single API request across 60+ EVM chains.
Access the complete source code for this wallet on GitHub
Interact with the finished wallet app
This guide assumes you’ve completed the first guide, Build a Realtime Wallet. Your project should already be set up to fetch and display token balances.
You can see the activity feed in action by trying the live demo below. Click on the “Activity” tab to explore transaction history for the sample wallet:
Let’s start by adding a new getWalletActivity
async function to our server.js
file to fetch activity data from Sim APIs.
The function creates the request URL for the /v1/evm/activity/{address}
endpoint, adding the limit
as a query parameter.
The Activity API conveniently packages the transaction data within an activity
array in the response.
The array provides rich context for each event, such as block_time
, transaction_hash
, from
and to
addresses, value
, value_usd
, and more.
The Activity API supports pagination via offset
and limit
query parameters. For a production wallet, you might implement infinite scrolling or “Load More” buttons to fetch subsequent pages of activity.
Next, modify the app.get('/')
route handler, add a call to getWalletActivity
, and include its results in the data passed to res.render
.
Our updated app.get('/')
route handler now handles fetching of both token balances and wallet activity.
Both the tokens
and the newly fetched activities
arrays are then passed to the res.render
method.
This makes the complete dataset available to our wallet.ejs
template, enabling it to populate both the “Tokens” and “Activity” tabs with relevant, realtime onchain information.
The final step is to update our views/wallet.ejs
template to render the fetched activity data within the “Activity” tab.
CTRL+F for id="activity"
and locate the section for the Activity tab.
It currently contains a placeholder paragraph.
Replace that entire div
with the following EJS code:
This EJS transforms the raw data from the Activity API into an intuitive and visual transaction history. Here’s a breakdown of how it processes each activity item:
activity.type
(and activity.function.name
for contract calls).block_time
) is converted to a readable local date/time string.chain_id
) is displayed, providing important multichain context.Beyond these descriptive elements, the template also focuses on presenting the value and financial aspects of each transaction:
value
) is converted into a user-friendly decimal format (e.g., “1.5 ETH”). This conversion utilizes the decimals
property from token_metadata
.token_id
.value_usd
), if provided by the API, is formatted to two decimal places and shown, giving a sense of the transaction’s monetary worth.Restart your server by running node server.js
and refresh the app in the browser.
When you click on the Activity tab, you should now see a list of the latest transactions, similar to the screenshot at the beginning of this guide.
You successfully added a realtime, fully functional activity feed to your multichain wallet with a single API request. In the next and final guide of this series, Display NFTs & Collectibles, we will complete the wallet by adding support for viewing NFT collections.
Expand your realtime crypto wallet by integrating a dynamic feed of onchain activity.
Show all onchain activity for a wallet address in the 'Activity' tab of our app.
Now that you have a wallet capable of showing realtime token balances and total portfolio value, let’s enhance it by adding an Activity tab.
A key feature for any wallet is the ability to view past transaction activity. This includes native currency transfers, ERC20 token movements, NFT transfers, and decoded interactions with smart contracts. The Activity API provides a comprehensive, realtime feed of this onchain activity, letting you implement this functionality with a single API request across 60+ EVM chains.
Access the complete source code for this wallet on GitHub
Interact with the finished wallet app
This guide assumes you’ve completed the first guide, Build a Realtime Wallet. Your project should already be set up to fetch and display token balances.
You can see the activity feed in action by trying the live demo below. Click on the “Activity” tab to explore transaction history for the sample wallet:
Let’s start by adding a new getWalletActivity
async function to our server.js
file to fetch activity data from Sim APIs.
The function creates the request URL for the /v1/evm/activity/{address}
endpoint, adding the limit
as a query parameter.
The Activity API conveniently packages the transaction data within an activity
array in the response.
The array provides rich context for each event, such as block_time
, transaction_hash
, from
and to
addresses, value
, value_usd
, and more.
The Activity API supports pagination via offset
and limit
query parameters. For a production wallet, you might implement infinite scrolling or “Load More” buttons to fetch subsequent pages of activity.
Next, modify the app.get('/')
route handler, add a call to getWalletActivity
, and include its results in the data passed to res.render
.
Our updated app.get('/')
route handler now handles fetching of both token balances and wallet activity.
Both the tokens
and the newly fetched activities
arrays are then passed to the res.render
method.
This makes the complete dataset available to our wallet.ejs
template, enabling it to populate both the “Tokens” and “Activity” tabs with relevant, realtime onchain information.
The final step is to update our views/wallet.ejs
template to render the fetched activity data within the “Activity” tab.
CTRL+F for id="activity"
and locate the section for the Activity tab.
It currently contains a placeholder paragraph.
Replace that entire div
with the following EJS code:
This EJS transforms the raw data from the Activity API into an intuitive and visual transaction history. Here’s a breakdown of how it processes each activity item:
activity.type
(and activity.function.name
for contract calls).block_time
) is converted to a readable local date/time string.chain_id
) is displayed, providing important multichain context.Beyond these descriptive elements, the template also focuses on presenting the value and financial aspects of each transaction:
value
) is converted into a user-friendly decimal format (e.g., “1.5 ETH”). This conversion utilizes the decimals
property from token_metadata
.token_id
.value_usd
), if provided by the API, is formatted to two decimal places and shown, giving a sense of the transaction’s monetary worth.Restart your server by running node server.js
and refresh the app in the browser.
When you click on the Activity tab, you should now see a list of the latest transactions, similar to the screenshot at the beginning of this guide.
You successfully added a realtime, fully functional activity feed to your multichain wallet with a single API request. In the next and final guide of this series, Display NFTs & Collectibles, we will complete the wallet by adding support for viewing NFT collections.