Add Account Activity

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.

View Source Code

Access the complete source code for this wallet on GitHub

Try Live Demo

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.

See It in Action

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:

Fetch Wallet Activity

Let’s start by adding a new getWalletActivity async function to our server.js file to fetch activity data from Sim APIs.

server.js (getWalletActivity)

async function getWalletActivity(walletAddress, limit = 25) { // Default to fetching 25 activities
    if (!walletAddress) return [];

    // The Activity API is currently in beta.
    // We add a 'limit' query parameter to control how many activities are returned.
    const url = `https://api.sim.dune.com/v1/evm/activity/${walletAddress}?limit=${limit}`;

    try {
        const response = await fetch(url, {
            headers: {
                'X-Sim-Api-Key': SIM_API_KEY, // Your API key from .env
                'Content-Type': 'application/json'
            }
        });

        if (!response.ok) {
            const errorBody = await response.text();
            console.error(`Activity API request failed with status ${response.status}: ${response.statusText}`, errorBody);
            throw new Error(`Activity API request failed: ${response.statusText}`);
        }

        const data = await response.json();
        // The API returns activity items in the 'activity' key of the JSON response.
        return data.activity || []; 
    } catch (error) {
        console.error("Error fetching wallet activity:", error.message);
        return []; // Return empty array on error
    }
}

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.

Add Activity into the Server Route

Next, modify the app.get('/') route handler, add a call to getWalletActivity, and include its results in the data passed to res.render.

server.js (app.get('/') updated for activity)

app.get('/', async (req, res) => {
    const { 
        walletAddress = '',
        tab = 'tokens'
    } = req.query;

    let tokens = [];
    let activities = [];
    let collectibles = [];
    let totalWalletUSDValue = 0;
    let errorMessage = null;

    if (walletAddress) {
        try {

            [tokens, activities] = await Promise.all([
                getWalletBalances(walletAddress),
                getWalletActivity(walletAddress, 25) // Fetching 25 recent activities
            ]);

            // Calculate the total USD value from the fetched tokens
            if (tokens && tokens.length > 0) {
                tokens.forEach(token => {
                    let individualValue = parseFloat(token.value_usd);
                    if (!isNaN(individualValue)) {
                        totalWalletUSDValue += individualValue;
                    }
                });
            }
            
            totalWalletUSDValue = numbro(totalWalletUSDValue).format('$0,0.00');

        } catch (error) {
            console.error("Error in route handler:", error);
            errorMessage = "Failed to fetch wallet data. Please try again.";
            // tokens will remain empty, totalWalletUSDValue will be 0
        }
    }

    res.render('wallet', {
        walletAddress: walletAddress,
        currentTab: tab,
        totalWalletUSDValue: totalWalletUSDValue, // We'll calculate this in the next section
        tokens: tokens,
        activities: activities, // Placeholder for Guide 2
        collectibles: [], // Placeholder for Guide 3
        errorMessage: errorMessage
    });
});

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.

Show Activity in the Frontend

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:

views/wallet.ejs (Activity tab content)

<!-- Activity Tab Pane (for Guide 2) -->
<div id="activity" class="tab-pane <%= currentTab === 'activity' ? 'active' : '' %>">
<% if (activities && activities.length > 0) { %>
    <% activities.forEach(activity => { %>
        <div class="list-item">
            <div class="item-icon-placeholder">
                <% if (activity.type === 'receive') { %>
                    ↓
                <% } else if (activity.type === 'send') { %>
                    ↑
                <% } else if (activity.type === 'call') { %>
                    ⇆ <!-- Icon for contract call -->
                <% } else { %>
                    ✓ <!-- Generic icon for other types -->
                <% } %>
            </div>
            <div class="item-info">
                <% 
                    let activityTitle = activity.type.charAt(0).toUpperCase() + activity.type.slice(1);
                    let activityColorClass = activity.type; // Used for potential CSS styling

                    if (activity.type === 'call' && activity.function && activity.function.name) {
                        activityTitle = `Call: ${activity.function.name}`;
                        activityColorClass = 'call';
                    } else if (activity.type === 'receive' || activity.type === 'send') {
                        const tokenSymbol = activity.token_metadata?.symbol || 
                                            (activity.asset_type === 'native' ? 
                                                (activity.chain_id === 1 || activity.chain_id === 8453 || activity.chain_id === 10 ? 'ETH' : 'Native') : 
                                                'Token');
                        activityTitle = `${activity.type === 'receive' ? 'Received' : 'Sent'} ${tokenSymbol}`;
                    }
                %>
                <p class="item-name activity-direction <%= activityColorClass %>"><%= activityTitle %></p>
                
                <p class="activity-address">
                    <% 
                        let partyLabel = '', partyAddress = '';
                        if (activity.type === 'receive') { 
                            partyLabel = 'From'; 
                            partyAddress = activity.from; 
                        } else if (activity.type === 'send') { 
                            partyLabel = 'To'; 
                            partyAddress = activity.to; 
                        } else if (activity.type === 'call') { 
                            partyLabel = 'Contract'; 
                            partyAddress = activity.to; 
                        } else { 
                            partyLabel = 'With'; 
                            partyAddress = activity.to || activity.from || 'Unknown'; 
                        }
                    %>
                    
                    <% if (partyAddress && partyAddress !== 'Unknown') { %>
                        <%= partyLabel %> 
                        <span class="mono">
                            <%= partyAddress.substring(0, 6) %>...<%= partyAddress.substring(partyAddress.length - 4) %>
                        </span>
                    <% } else { %>
                        Interaction
                    <% } %>
                </p>
                
                <p class="activity-timestamp">
                    <span class="mono"><%= new Date(activity.block_time).toLocaleDateString(); %></span>
                </p>
            </div>
            <div class="item-value-right">
                <% if (activity.type === 'call') { %>
                    <p class="activity-amount-right <%= activityColorClass %>" style="font-family: var(--font-primary);">
                        Interaction
                    </p>
                <% } else if (activity.value) { %>
                    <p class="activity-amount-right <%= activityColorClass %>">
                        <%
                        let amountDisplay = '0';
                        const decimals = typeof activity.token_metadata?.decimals === 'number' ? activity.token_metadata.decimals : 18;
                        if (decimals !== null) {
                            const valueStr = activity.value.toString();
                            const padded = valueStr.padStart(decimals + 1, '0');
                            let intPart = padded.slice(0, -decimals);
                            let fracPart = padded.slice(-decimals).replace(/0+$/, '');
                            if (!intPart) intPart = '0';
                            if (fracPart) {
                                amountDisplay = `${intPart}.${fracPart}`;
                            } else {
                                amountDisplay = intPart;
                            }
                            const amountNum = parseFloat(amountDisplay);
                            if (amountNum > 0 && amountNum < 0.0001) {
                                amountDisplay = '<0.0001';
                            }
                            if (amountNum > 1e12 || amountDisplay.length > 12) {
                                amountDisplay = amountNum.toExponential(2);
                            }
                        } else {
                            amountDisplay = activity.id || String(activity.value);
                        }
                        // Clean up the symbol: remove $ and anything after space/dash/bracket, and limit length
                        let symbol = activity.token_metadata?.symbol || (activity.asset_type === 'native'
                            ? (activity.chain_id === 1 || activity.chain_id === 8453 || activity.chain_id === 10 ? 'ETH' : 'NTV')
                            : (activity.id ? '' : 'Tokens'));
                        if (symbol) {
                            symbol = symbol.replace('$', '').split(/[\s\-\[]/)[0].substring(0, 8);
                        }
                        %>
                        <% if (activity.type === 'receive') { %>+<% } else if (activity.type === 'send') { %>-<% } %><%= amountDisplay %> <span class="mono"><%= symbol %></span>
                    </p>
                <% } %>
            </div>
        </div>
    <% }); %>
<% } else if (walletAddress) { %>
    <p style="text-align: center; padding-top: 30px; color: var(--color-text-muted);">No activity found for this wallet.</p>
<% } else { %>
    <p style="text-align: center; padding-top: 30px; color: var(--color-text-muted);">Enter a wallet address to see activity.</p>
<% } %>
</div>

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:

• A list entry is generated for each transaction.
• An icon visually indicates the transaction’s nature: receive (↓), send (↑), or contract call (⇆).
• A descriptive title is dynamically constructed using the activity.type (and activity.function.name for contract calls).
• The transaction’s timestamp (block_time) is converted to a readable local date/time string.
• The chain ID (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:

• The transaction amount (raw value) is converted into a user-friendly decimal format (e.g., “1.5 ETH”). This conversion utilizes the decimals property from token_metadata.
• For NFTs, if a standard decimal value isn’t applicable, the template displays the token_id.
• The USD value (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.

Conclusion

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.