Portfolio Tracker

The "Portfolio Tracker" component provides an accounts assets and the amount of those assets.

Features

Collects source public key.
Upon submission, the accounts assets and amounts of those assets are displayed.
Provides insight into an accounts assets and the quantity of those assets.

Additional Resources

Review the documentation on Stellar accounts and transactions below

Visit SDEX 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.PortfolioTracker/>

@page "/PortfolioTracker"
@rendermode InteractiveAuto
 
@using Microsoft.JSInterop
 
<div class="container">
    <h2>Portfolio Tracker</h2>
    <form id="portfolioForm">
        <label for="stellarPublicKey">Your Public Key:</label>
        <input type="text" id="stellarPublicKey" name="stellarPublicKey" placeholder="Your Stellar public key" required>
        <button type="submit">Track Portfolio</button>
    </form>
    <p id="message"></p>
    <div id="portfolio" class="portfolio"></div>
</div>
 
@code {
    string stellarPublicKey { set; get; } = "";
    string portfolio { 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/portfolioTracker.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.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('portfolioForm');
        const publicKeyInput = document.getElementById('stellarPublicKey');
 
        // Check if publicKey input element exists
        if (publicKeyInput) {
            console.log("Public key input element found");
        } else {
            console.log("Public key input element not found");
        }
 
        form.addEventListener('submit', async (event) => {
            event.preventDefault();
 
            // Retrieve the publicKey value
            const publicKey = publicKeyInput.value.trim();
            console.log("Retrieved Public Key:", publicKey); // Debugging line
 
            // Validate if the publicKey is entered
            if (!publicKey || publicKey === '') {
                const message = document.getElementById('message');
                message.style.color = 'red';
                message.textContent = 'Please enter a valid Stellar public key.';
                return;
            }
 
            // Reset message and fetch data
            const message = document.getElementById('message');
            message.textContent = "Fetching portfolio...";
            message.style.color = "black";
 
            try {
                if (!/^G[A-Z2-7]{55}$/.test(publicKey)) {
                    throw new Error("Invalid Stellar public key format.");
                }
 
                const accountResponse = await server.accounts().accountId(publicKey).call();
 
                // Clear portfolio div
                const portfolioDiv = document.getElementById('portfolio');
                portfolioDiv.innerHTML = '';
 
                // Display balances
                accountResponse.balances.forEach(balance => {
                    const assetType = balance.asset_type === 'native' ? 'XLM' : balance.asset_code;
                    const balanceItem = document.createElement('div');
                    balanceItem.className = 'portfolio-item';
                    balanceItem.innerHTML = `<span>${assetType}:</span> ${balance.balance}`;
                    portfolioDiv.appendChild(balanceItem);
                });
 
                message.style.color = 'green';
                message.textContent = "Portfolio updated successfully!";
            } catch (error) {
                message.style.color = 'red';
                message.textContent = `Error: ${error.message}`;
                console.error('Error during account fetch:', error);
            }
        });
    });
</script>

HTML

 
<body>
  <div class="container">
    <h2>Portfolio Tracker</h2>
    <form id="portfolioForm">
        <label for="stellarPublicKey">Your Public Key:</label>
        <input type="text" id="stellarPublicKey" name="stellarPublicKey" placeholder="Your Stellar public key" required>
        <button type="submit">Track Portfolio</button>
    </form>
    <p id="message"></p>
    <div id="portfolio" class="portfolio"></div>
  </div>
</body>

Orderbook Txhistory