Transaction History

Help your users understand their history of transactions, like never before.

We just saw how you can get a single transaction classified and displayed.

It's also possible to get a full list of classified transactions, including those that you don't know about (because they weren't executed through the wallet), but are still relevant to the user.

In this page we'll learn how to use Translate Txs to do just that.

You call the endpoint by passing a wallet address, a chain, and a timeframe you're interested in. The timeframe can be set either with startBlock / endBlock or with startTimestamp / endTimestamp.

Let's start with a simple example, of pulling the last 10 transactions for the user:

const axios = require('axios');

const NOVES_API_KEY = process.env.NOVES_API_KEY;

async function getTransactions(chain, accountAddress, options = {}) {
    const baseURL = 'https://translate.noves.fi';
    const endpoint = `${baseURL}/evm/${chain}/txs/${accountAddress}`;

    try {
        const response = await axios.get(endpoint, {
            params: options,
            headers: {
                apiKey: NOVES_API_KEY,
            },
        });
        const data = response.data;
        return data.items;
    } catch (error) {
        console.error('Error fetching transactions:', error);
        return null;
    }
}

// Replace with the desired chain
const chain = 'eth';

// Replace with the user address
const account = '0x9B1054d24dC31a54739B6d8950af5a7dbAa56815';

// Optional parameters
const options = {
    viewAsAccountAddress: account,
};

getTransactions(chain, account, options).then((data) => {
    console.log(JSON.stringify(data, null, 2));
});

Note how we didn't pass time-filtering parameters. If none are passed, the endpoint defaults to the last 10 transactions for the account.

The output will be an array of classified transactions like this:

[
    {
        "txTypeVersion": 2,
        "chain": "eth",
        "accountAddress": "0x9B1054d24dC31a54739B6d8950af5a7dbAa56815",
        "classificationData": {
            "type": "sendToBridge",
            "source": {
                "type": "human"
            },
            "description": "Sent 0.05 ETH to a bridge.",
            "sent": [
                {
                    "action": "bridged",
                    "from": {
                        "name": "This wallet",
                        "address": "0x9B1054d24dC31a54739B6d8950af5a7dbAa56815"
                    },
                    "to": {
                        "name": "Linea: ZkEvmV2 Proxy",
                        "address": "0xd19d4B5d358258f05D7B411E21A1460D11B0876F"
                    },
                    "amount": "0.0501561775168",
                    "token": {
                        "symbol": "ETH",
                        "name": "ETH",
                        "decimals": 18,
                        "address": "ETH"
                    }
                },
                {
                    "action": "paidGas",
                    "from": {
                        "name": "This wallet",
                        "address": "0x9B1054d24dC31a54739B6d8950af5a7dbAa56815"
                    },
                    "to": {
                        "name": null,
                        "address": null
                    },
                    "amount": "0.000762772503715481",
                    "token": {
                        "symbol": "ETH",
                        "name": "ETH",
                        "decimals": 18,
                        "address": "ETH"
                    }
                }
            ],
            "received": []
        },
        "rawTransactionData": {
            "transactionHash": "0xa8ca17148245f2dccf16713f2c772bad39e99691ba06c7e8ace54eb5ee070a20",
            "fromAddress": "0x9B1054d24dC31a54739B6d8950af5a7dbAa56815",
            "toAddress": "0xd19d4B5d358258f05D7B411E21A1460D11B0876F",
            "blockNumber": 18243799,
            "gas": 99283,
            "gasPrice": 11619304823,
            "transactionFee": {
                "amount": 762772503715481,
                "token": {
                    "symbol": "ETH",
                    "decimals": 18
                }
            },
            "timestamp": 1696019855
        }
    }
]

Assuming you wanted to display these sequentially in a list-like component, here's a simple way of doing it in React.

We'll be pulling timestamp and description in this example:

const TransactionsList = () => {
    const [transactions, setTransactions] = useState([]);

    useEffect(() => {
        async function loadData() {
            const data = await getTransactions(chain, account);
            setTransactions(data);
        }
        loadData();
    }, []);

    return (
        <div>
            <h2>Recent Transactions</h2>
            <ul>
                {transactions.map((tx, index) => (
                    <li key={index}>
                        <strong>Date:</strong> {new Date(tx.rawTransactionData.timestamp * 1000).toLocaleDateString()}
                        <br />
                        <strong>Description:</strong> {tx.classificationData.description}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default TransactionsList;