Generate Payment XDR

The "Generate Payment XDR" component generates a payment xdr envelope string.

Features

Collects source secret key, recievers public address, and payment amount in XLM.
Upon Submission, The XDR Envelope string is displayed.
Provides a straightforward way to generate an XDR string to pass amoungst multiple eligible signers.

Additional Resources

Stellar uses a binary format called External Data Representation (XDR) to store and transmit ledger data, transactions, results, history, and messages. XDR is designed to be efficient for network communication but is not readable by humans.

To make XDR data more accessible, tools like Horizon and the Stellar SDKs are used to convert XDR into formats that are easier to understand and work with. These conversions help developers interact with Stellar's data and integrate it into applications more effectively.

Visit XDR Documentation

C#

Install the Pakana.Stellar.Components NuGet package via the NuGet Package Manager Console.

.Net8.0 or greater is required.

dotnet add package Pakana.Stellar.Components

ℹ️

StellarSDK Dependency will install automatically

NuGet Package Implementation

<pakana.stellar.components.Pages.GeneratePaymentXdr/>

@page "/EnvelopeGenerator"
@rendermode InteractiveAuto
   
    <h1>Stellar XDR Payment Envelope Generator</h1>
    <label for="senderSecretKey">Sender's Secret Key:</label>
    <input type="text" id="senderSecretKey" />
    <br>
    <br>
    <label for="receiverPublicKey">Receiver's Public Key:</label>
    <input type="text" id="receiverPublicKey" />
    <br>
    <br>
    <label for="amount">Amount to Send (XLM):</label>
    <input type="number" id="amount" />
    <br>
    <br>
<button id="generateButton" onclick="generateEnvelope()">Generate XDR Envelope</button>
 
    <div id="xdrDisplay" style="margin-top: 20px; display: none;">
        <h3>Generated XDR Envelope:</h3>
        <textarea id="xdrTextArea" rows="6" cols="60" readonly></textarea><br>
        <button onclick="copyXdr()">Copy XDR</button>
        <p id="copyStatus"></p>
    </div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/11.2.2/stellar-sdk.min.js"></script>
<script src="your-file-path/js/xdrPayGenerator.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-02*
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/11.2.2/stellar-sdk.js"></script>

JavaScript

 
<script>
async function generateEnvelope() {
    try {
        console.log('Generating XDR envelope...');
        const senderSecretKey =
            document.getElementById('senderSecretKey').value.trim();
        const receiverPublicKey =
            document.getElementById('receiverPublicKey').value.trim();
        const amount = document.getElementById('amount').value.trim();
        console.log('Sender secret key:', senderSecretKey);
        console.log('Receiver public key:', receiverPublicKey);
        console.log('Amount:', amount);
        // Validate inputs
        if (!StellarSdk.StrKey.isValidEd25519SecretSeed(senderSecretKey)) {
            alert('Invalid sender secret key!');
            return;
        }
        if (!receiverPublicKey) {
            alert('Receiver public key is required!');
            return;
        }
        if (!StellarSdk.StrKey.isValidEd25519PublicKey(receiverPublicKey)) {
            alert('Invalid receiver public key!');
            return;
        }
        if (!amount || isNaN(amount) || parseFloat(amount) <= 0) {
            alert('Invalid amount!');
            return;
        }
        // Stellar keypair of sending account
        const senderKeypair =
            StellarSdk.Keypair.fromSecret(senderSecretKey);
        const server = new StellarSdk.Horizon.Server('https://horizontestnet.stellar.org');
        // Load sender account details from the server
        const account = await server.loadAccount(senderKeypair.publicKey());
        // Calculate current time and set time bounds for the transaction (1 
        hour from now)
        const currentTime = Math.floor(Date.now() / 1000);
        const maxTime = currentTime + 3600; // 1 hour in seconds
        // Create a new transaction for payment operation with time bounds
        const transaction = new StellarSdk.TransactionBuilder(account, {
            fee: StellarSdk.BASE_FEE,
            networkPassphrase: StellarSdk.Networks.TESTNET,
            timebounds: {
                minTime: currentTime,
                maxTime: maxTime
            }
        })
            .addOperation(StellarSdk.Operation.payment({
                destination: receiverPublicKey,
                asset: StellarSdk.Asset.native(),
                amount: amount.toString() // Convert amount to string
            }))
            .build();
        // Sign the transaction
        transaction.sign(senderKeypair);
        // Get the XDR string of the transaction
        const xdrString = transaction.toEnvelope().toXDR('base64');
        // Display the XDR string
        document.getElementById('xdrTextArea').value = xdrString;
        document.getElementById('xdrDisplay').style.display = 'block';
    } catch (error) {
        console.error('Error generating XDR envelope:', error);
        alert('Error generating XDR envelope: ' + error.message);
    }
}
// Function to copy XDR string to clipboard
function copyXdr() {
    const xdrTextArea = document.getElementById('xdrTextArea');
    xdrTextArea.select();
    document.execCommand('copy');
    document.getElementById('copyStatus').innerText = 'Copied!';
}
// Attach click event listener to the button
const generateButton = document.getElementById('generateButton');
if (generateButton) {
    generateButton.addEventListener('click', generateEnvelope);
} else {
    console.error('Button element not found!');
}
</script >

HTML

 
<body>
    <h1>Stellar XDR Payment Envelope Generator</h1>
    <label for="senderSecretKey">Sender's Secret Key:</label>
    <input type="text" id="senderSecretKey" />
    <br>
    <br>
    <label for="receiverPublicKey">Receiver's Public Key:</label>
    <input type="text" id="receiverPublicKey" />
    <br>
    <br>
    <label for="amount">Amount to Send (XLM):</label>
    <input type="number" id="amount" />
    <br>
    <br>
    <button id="generateButton">Generate XDR Envelope</button>
    <div id="xdrDisplay" style="margin-top: 20px; display: none;">
        <h3>Generated XDR Envelope:</h3>
        <textarea id="xdrTextArea" rows="6" cols="60" readonly></textarea><br>
        <button onclick="copyXdr()">Copy XDR</button>
        <p id="copyStatus"></p>
    </div>
</body>

Generatekeypair Keydecryption