TX History

The "Transaction History" component provides an account's transaction history and on-chain records.

Features

Collects source public key.
Upon submission, the transaction records are populated.
A URL to the on-chain transaction history is provided.
Provides a straightforward way to view transaction history and on-chain transaction file.

Additional Resources

Transaction history provides a way to view an account's transaction history and on-chain records.

Review the documentation on accounts and Stellar transactions below

Visit Stellar Documentation

C#

Install the PakanaRazorSDEX NuGet package via the NuGet Package Manager Console.

.Net8.0 or greater is required.

dotnet add package PakanaRazorSDEX --version 0.0.4

Stellar Horizon Dependency will install automatically

NuGet Package Implementation

<PakanaRazorSDEX.Component.TxHistory/>

@page "/TxHistory"
@rendermode InteractiveAuto
 
@using Microsoft.JSInterop
 
<div class="container">
    <h2>TX History</h2>
    <form id="transactionForm">
        <label for="publicKey">Your Public Key:</label>
        <input type="text" id="publicKey" name="publicKey" placeholder="Your Stellar public key" required>
        <button type="submit">Fetch Transactions</button>
    </form>
    <div class="filters">
        <select id="sortOrder">
            <option value="desc">Descending</option>
            <option value="asc">Ascending</option>
        </select>
    </div>
    <p id="message"></p>
    <div id="transactionList" class="transaction-list"></div>
</div>
 
@code {
    string publicKey { set; get; } = "";
    string transactionList { set; get; } = "";
 
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/13.0.0/stellar-sdk.min.js"></script>
<script src="./_content/PakanaRazorSDEX/js/txHistory.js"></script>
<script src="./_content/PakanaRazorSDEX/js/global.js"></script>

Javascript

We've provided simple HTML and JavaScript that can be used in your project as partial-components or be customized and integrated into your existing codebase.

Stellar CDN

*Current Version as of 2024-24-12*
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/13.0.0/stellar-sdk.min.js"></script>

JavaScript

 
<script>
        document.getElementById('transactionForm').addEventListener('submit', async (event) => {
            event.preventDefault();
 
            // Gather form inputs
            const publicKey = document.getElementById('publicKey').value.trim();
            const sortOrder = document.getElementById('sortOrder').value;
 
            // Reset message
            const message = document.getElementById('message');
            message.textContent = "Fetching transactions...";
            message.style.color = "black";
 
            try {
                const { Horizon } = window.StellarSdk;
 
                // Fetch transactions
                let transactions = await server.transactions()
                    .forAccount(publicKey)
                    .order(sortOrder)
                    .call();
 
                // Display transactions
                const transactionList = document.getElementById('transactionList');
                transactionList.innerHTML = '';
 
                transactions.records.forEach(tx => {
                    const transactionItem = document.createElement('div');
                    transactionItem.className = 'transaction-item';
 
                    // Format date to a human-readable format
                    const date = new Date(tx.created_at);
                    const formattedDate = date.toLocaleString();
 
                    transactionItem.innerHTML = `
                        <span>ID:</span> <a href="https://horizon.stellar.org/transactions/${tx.id}" target="_blank">${tx.id.substring(0, 6)}...</a>
                        <span>Date:</span> ${formattedDate}
                        <span>Price:</span> ${tx.fee_charged / 10000000} XLM
                    `;
                    transactionList.appendChild(transactionItem);
                });
 
                message.style.color = 'green';
                message.textContent = "Transactions fetched successfully!";
            } catch (error) {
                message.style.color = 'red';
                message.textContent = `Error: ${error.message}`;
                console.error('Full error:', error);
            }
        });
    </script>

HTML

 
<body>
    <div class="container">
        <h2>TX History</h2>
        <form id="transactionForm">
            <label for="publicKey">Your Public Key:</label>
            <input type="text" id="publicKey" name="publicKey" placeholder="Your Stellar public key" required>
            <button type="submit">Fetch Transactions</button>
        </form>
        <div class="filters">
            <select id="sortOrder">
                <option value="desc">Descending</option>
                <option value="asc">Ascending</option>
            </select>
 
        </div>
        <p id="message"></p>
        <div id="transactionList" class="transaction-list"></div>
    </div>
</body>

Portfoliotracker Createmultisig