Tutorial: Building a Feature to Track UserOps using DeCommas API
Account Abstraction is one of the hottest topics this year. It redefines how users interact with decentralized networks. Traditionally, blockchain transactions are initiated by externally owned accounts (EOAs), such as individual wallets. However, with Account Abstraction(AA), the focus shifts to smart contract accounts as the primary type for users. This shift allows users to interact with the blockchain using smart contracts without requiring changes to the underlying protocol and without signing each transaction as it is in ordinary web3 wallet.
This innovative web3 technology has become a trend because it introduces a more flexible and user-friendly approach to interacting with decentralized networks. By allowing smart contracts to play a central role, it simplifies processes and enhances security. This aligns with the ongoing industry effort to improve the overall user experience in blockchain with the macro goal of achieving mass adoption.
Due to the interest and demand for Account Abstraction, DeCommas API has developed new UserOps endpoints. User operations are similar to transaction details used by a smart contract account, which allows Account Abstraction to function without needing changes to the Ethereum or layer 2 blockchains that support ERC-4337.
In this Tutorial we will explore how to use DeCommas API endpoints UserOps to build a feature that shows user operations. Before we dive in, let’s take a look at what UserOps actually is.
What is UserOps?
UserOps offer a detailed look into user actions within abstracted accounts. Imagine it as a personalized diary of every move within the blockchain ecosystem, but with a level of depth and specificity that sets it apart.
UserOps can be compared to the web3 transaction history features which offer a basic record of on-chain activity. With that difference, UserOps gives deeper data, providing users with the insights of every action users did within the app, like user operation fee, actual gas cost, verification gas limit, creating smart accounts and more.
It is a tool tailored specifically for Account Abstraction, giving users insights into the ‘who,’ ‘what,’ ‘when,’ and the ‘how’ of their interactions within decentralized networks.
DeCommas’ UserOps API stands out because it is one of the first API services to provide such endpoints in the market. We set AA data accessibility, providing developers with comprehensive APIs and robust infrastructure to build user-centric applications.
Tutorial: Building a Feature to Track UserOps using DeCommas API
This tutorial dives into leveraging DeCommas’ UserOps endpoints to build a powerful tool for tracking and analyzing user activity within the Account Abstraction (AA) ecosystem, while explaining how to call the API, what the API returns and giving an example of data in the API response that developers can use in building their apps.
That will not be all; we will also recap how to get your personal mission control API key and set it up. Specifically, we will examine:
●Get Your Personal Mission Control API Key
●Setting Up Mission Control API in Your Development Environment
●Tutorial: Building a Feature to Track UserOps using DeCommas API
Get Your Personal Mission Control API Key
If you could remember previous tutorials, you need access to the Mission Control API to get your personal mission control API key. Fortunately, it’s often free to use with consistently low response times of 150 milliseconds. You can obtain your API key by following these steps:
Step 1: Visit https://build.decommas.io/
Step 2: Click “Get Started”
Step 3: Provide your email address for verification
Step 4: Check your email for the verification link, and click it to access with URL https://dashboard.decommas.io/ , your gateway to API keys.
Ensure your API keys are stored using robust security and readily accessible for future use. Furthermore, you can consult our documentation here for further research.
Setting Up the Mission Control API in your Development Environment
Raw HTTPS Requests:
GET https://datalayer.decommas.net/datalayer/api/v1/transaction_user_operations/{chain_name}/{tx_hash}?api-key={YOUR_API_KEY}The above is an example URL of one of the UserOps API. All you need to do is to use any of the available URLs in your code via the GET method in any language of your choice, and do not forget to replace placeholder values with your actual values.
Example Setup in JavaScript:
fetch(`https://datalayer.decommas.net/datalayer/api/v1/user_operations/${address}?api-key=${YOUR_API_KEY}`)
.then(response => response.json())
.then(data => {
const status = data.status;
const results = data.result;
console.log(status);
console.log(results);
})
.catch(error => {
console.error(`Error. Reason for Error: ${error}`);
});
Building a Feature to Track UserOps using DeCommas API
This section will walk you through the process of utilizing DeCommas’ UserOps endpoints to build a feature focussed on tracking UserOps Account Abstraction. This feature can be useful for developers to create a more user-centric web3 experience for users interested in AA.
Here are three key endpoints the DeCommas API offers to build this feature:
- User Operation
- User Operations
- Transaction User Operations
Using UserOps Endpoints in Your App
1. User Operation Endpoint
This endpoint allows you to retrieve detailed information about a specific user operation, identified by its network name and operation hash. Its use lies in providing in-depth insights into a specific user action, enabling you to analyze its type, timestamp, sender address, target addresses, and many other operation data.
API URL:
GET
https://datalayer.decommas.net/datalayer/api/v1/user_operation/{chain_name}/{user_operation_hash}Example:
// For security purposes we recommend store API key as environment variable
const API_KEY = "YOUR_API_KEY";
// Replace these with actual values
const chainName = "ethereum";
const userOperationHash = "0x1234567890abcdef";
// Fetch the user operation details
fetch(`https://datalayer.decommas.net/datalayer/api/v1/user_operation/${chainName}/${userOperationHash}?api-key={API_KEY}`)
.then(response => response.json())
.then(data => {
const status = data.status;
const result = data.result;
console.log(`User Operation Details:\n`);
console.log(result);
// Use the data for your desired purpose
const sender = result.sender;
const target = result.target;
const block_timestamp = result.block_timestamp;
const user_operation_fee = result.user_operation_fee;
const actual_gas_cost = result.actual_gas_cost;
// and many more…
// (do refer to available responses as given below in 'Response Example')
})
.catch(error => {
console.error(`Error fetching user operation: ${error}`);
});Response Example (ALL FIELDS ARE MANDATORY):
{
"status": 0,
"result": {
"chain_name": "string",
"chain_id": 0,
"user_operation_hash": "string",
"transaction_hash": "string",
"block_number": 0,
"block_timestamp": 0,
"transaction_index": 0,
"log_index": 0,
"sender": "string",
"target": "string",
"paymaster": "string",
"bundler": "string",
"entry_point": "string",
"user_operation_fee": "string",
"actual_gas_cost": "string",
"actual_gas_used": "string",
"call_gas_limit": "string",
"verification_gas_limit": "string",
"pre_verification_gas": "string",
"max_fee_per_gas": "string",
"max_priority_fee_per_gas": "string",
"method": "string",
"method_hash": "string"
}
}After retrieving data info from this API call, you get a structured array with details like entry point and actual gas cost. Use this data for your feature to track UserOps and provide users with necessary info by displaying a sorted list of actions held by users, creating a clear overview.
2. User Operations
This endpoint lets you retrieve a comprehensive list of user operations for a specific address, covering your chosen networks, or all networks (default). The results are sorted by time in descending order, providing a clear chronological overview of the user’s activity.
API URL:
GET https://datalayer.decommas.net/datalayer/api/v1/user_operations/{address}?api-key= {YOUR-API-KEY}Example:
// For security purposes we recommend store API key as environment variable
const API_KEY = "YOUR_API_KEY";
const address = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'; // any address
// Fetch user operations details
fetch(`https://datalayer.decommas.net/datalayer/api/v1/user_operations/${address}?api-key=${API_KEY})
.then(response => response.json())
.then(data => {
const status = data.status;
const results = data.result;
console.log(`User Operations Details:\n`);
// This time, result is an array because result returns more than one user operation (i.e; user operations endpoint)
console.table(results);
for(let result of results) {
// Use the data for your desired purpose
const sender = result.sender;
const target = result.target;
const block_timestamp = result.block_timestamp;
const user_operation_fee = result.user_operation_fee;
const actual_gas_cost = result.actual_gas_cost;
// and many more…
// (do refer to available responses as given below in 'Response Example')
}
})
.catch(error => {
console.error(`Error fetching user operation: ${error}`);
});Response Example (ALL FIELDS ARE MANDATORY):
{
"status": 0,
"result": [
{
"chain_name": "string",
"chain_id": 0,
"user_operation_hash": "string",
"transaction_hash": "string",
"block_number": 0,
"block_timestamp": 0,
"transaction_index": 0,
"log_index": 0,
"sender": "string",
"target": "string",
"paymaster": "string",
"bundler": "string",
"entry_point": "string",
"user_operation_fee": "string",
"actual_gas_cost": "string",
"actual_gas_used": "string",
"call_gas_limit": "string",
"verification_gas_limit": "string",
"pre_verification_gas": "string",
"max_fee_per_gas": "string",
"max_priority_fee_per_gas": "string",
"method": "string",
"method_hash": "string"
},
{
"chain_name": "string",
"chain_id": 0,
"user_operation_hash": "string",
"transaction_hash": "string",
"block_number": 0,
"block_timestamp": 0,
"transaction_index": 0,
"log_index": 0,
"sender": "string",
"target": "string",
"paymaster": "string",
"bundler": "string",
"entry_point": "string",
"user_operation_fee": "string",
"actual_gas_cost": "string",
"actual_gas_used": "string",
"call_gas_limit": "string",
"verification_gas_limit": "string",
"pre_verification_gas": "string",
"max_fee_per_gas": "string",
"max_priority_fee_per_gas": "string",
"method": "string",
"method_hash": "string"
},
…
]
}As you can see the code fetches user operation details from DeCommas API for a specific address, giving you key information like chain name, user operation hash, sender, target, and more in an array. Improve your feature by using this data to show a straightforward, sorted list of tokens held by the user. With these data points, it becomes straightforward to create a clear summary of the users operations in your feature.
3. Transaction User Operations
This endpoint helps you extract all user operations within a specific transaction using network name and transaction hash, with results organized by transfer log in ascending order. Its main purpose is to enable you to understand the complete sequence of actions involved in a transaction.
API URL:
GET https://datalayer.decommas.net/datalayer/api/v1/user_operations/{address}?api-key= {YOUR-API-KEY}Example:
// For security purposes we recommend store API key as environment variable
const API_KEY = "YOUR_API_KEY";
// Replace these with actual values
const chainName = "ethereum";
const tx_hash = "some_transaction_hash";
// Fetch user operations details
fetch(`https://datalayer.decommas.net/datalayer/api/v1/transaction_user_operations/${chain_name}/${tx_hash}?api-key=${API_KEY})
.then(response => response.json())
.then(data => {
const status = data.status;
const results = data.result;
console.log(`User Operations Details Based On Transaction Hash (${tx_hash}):\n`);
// This time, result is an array because result returns more than one user operation for the given tx_hash (i.e; transaction user operations endpoint)
console.table(results);
for(let result of results) {
// Use the data for your desired purpose
const sender = result.sender;
const target = result.target;
const block_timestamp = result.block_timestamp;
const user_operation_fee = result.user_operation_fee;
const actual_gas_cost = result.actual_gas_cost;
// and many more…
// (do refer to available responses as given below in 'Response Example')
}
})
.catch(error => {
console.error(`Error fetching user operation: ${error}`);
});Response Example (ALL FIELDS ARE MANDATORY):
{
"status": 0,
"result": [
{
"chain_name": "string",
"chain_id": 0,
"user_operation_hash": "string",
"transaction_hash": "string",
"block_number": 0,
"block_timestamp": 0,
"transaction_index": 0,
"log_index": 0,
"sender": "string",
"target": "string",
"paymaster": "string",
"bundler": "string",
"entry_point": "string",
"user_operation_fee": "string",
"actual_gas_cost": "string",
"actual_gas_used": "string",
"call_gas_limit": "string",
"verification_gas_limit": "string",
"pre_verification_gas": "string",
"max_fee_per_gas": "string",
"max_priority_fee_per_gas": "string",
"method": "string",
"method_hash": "string"
},
{
"chain_name": "string",
"chain_id": 0,
"user_operation_hash": "string",
"transaction_hash": "string",
"block_number": 0,
"block_timestamp": 0,
"transaction_index": 0,
"log_index": 0,
"sender": "string",
"target": "string",
"paymaster": "string",
"bundler": "string",
"entry_point": "string",
"user_operation_fee": "string",
"actual_gas_cost": "string",
"actual_gas_used": "string",
"call_gas_limit": "string",
"verification_gas_limit": "string",
"pre_verification_gas": "string",
"max_fee_per_gas": "string",
"max_priority_fee_per_gas": "string",
"method": "string",
"method_hash": "string"
},
…
]
}This endpoint gives back an array with key details like chain name, user operation hash, sender, and more. This is handy for connecting user operations to a specific transaction hash. To enhance your app, use this array to make a simple list of tokens held by the user with chain id parameters. Using these data points makes it easy to generate a full summary of the users’ tokens in your feature.
Wrapping up — Your first steps to Building a Feature to Track UserOps using DeCommas API
In this tutorial, we examined the latest UserOps endpoints in the DeCommas API, unveiling their functionalities and concluding with practical insights on integrating these endpoints into your projects.
This tutorial provides an overview of how to use the DeCommas API UserOps endpoints to build features that enhance a user’s Account Abstraction experience. Consider this as the starting point for your long Account Abstraction journey, as we have provided you with all the necessary steps to begin building your own features for AA oriented apps.
If you have questions or hit a roadblock, please contact us at [email protected]. We’ll be happy to assist.
Happy building!