Send Funds P2P

The "Send Funds" component allows users to initiate a single peer-2-peer transactions by providing sender and receiver information along with the transaction details.

Features

Collects sender address, secret key, receiver address, amount, and optional memo.
Provides a straightforward form for users to send transactions.

Configuration

Install the Stellar SDK Version required for your project. We are using and recommend the latest Protocol 20 supported SDK.

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.XlmPayment/>

@page "/MakePayment"
@rendermode InteractiveAuto
 
<h2>Stellar XLM Payment</h2>
<div>
    <input type="text" id="senderSecretinone" placeholder="Enter sender's secret key">
    <input type="text" id="receiverPublicKeyinone" placeholder="Enter receiver's public key">
    <input type="number" id="amountinone" placeholder="Enter amount in XLM">
    <button onclick="makePaymentinone()">Send Payment</button>
</div>
 
@code{
    string senderSecretKey { set; get; } = "";
    string receiverPublicKey { set; get; } = "";
    int amount { set; get; } = 0;
 
    
}
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/11.2.2/stellar-sdk.min.js"></script>
<script src="your-file-path/js/xlmPayment.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 language="javascript">
    document.addEventListener("DOMContentLoaded", async function () {
    try {
        horizonServer = new StellarSdk.Horizon.Server('https://horizon-testnet.stellar.org');
    console.log("Stellar SDK Server instance created:", horizonServer);
    } catch (e) {
        console.error("Error creating StellarSdk.Server instance:", e);
    return;
    }
 
    document.getElementById("stellarTransactionForm").addEventListener("submit", function (e) {
        e.preventDefault();
 
    // Set the TimeBounds for the transaction
    const timeBounds = {
        minTime: Math.floor(Date.now() / 1000) - 60, // Set minTime to now - 60 seconds (adjust as needed)
    maxTime: Math.floor(Date.now() / 1000) + 120, // Set maxTime to now + 120 seconds (adjust as needed)
        };
 
    const feeStroops = "100"; // Specify the fee in stroops as a string
    const senderAddress = document.getElementById("senderAddress").value;
    const secretKey = document.getElementById("secretKey").value;
    const receiverAddress = document.getElementById("receiverAddress").value;
    const amount = document.getElementById("amount").value;
    const memo = document.getElementById("memo").value;
 
    // Load the sender account
    horizonServer.loadAccount(senderAddress)
    .then(function (account) {
                // Build the transaction with TimeBounds
                const transaction = new horizonServer.TransactionBuilder(account, {
        fee: feeStroops,
    networkPassphrase: StellarSDK.Networks.TESTNET,
    timebounds: timeBounds, // Set the TimeBounds
                    })
    .addOperation(
    horizonServer.Operation.payment({
        destination: receiverAddress,
    asset: horizonServer.Asset.native(),
    amount: amount,
                        })
    )
    .addMemo(horizonServer.Memo.text(memo))
    .build();
 
    // Sign the transaction
    transaction.sign(horizonServer.Keypair.fromSecret(secretKey));
 
    // Submit the transaction to the network
    return horizonServer.submitTransaction(transaction);
            })
    .then(function (result) {
        console.log("Transaction Successful!", result);
                // Handle success, e.g., show a success message to the user
            })
    .catch(function (error) {
        console.error("Transaction Failed:", error);
                // Handle error, e.g., display an error message to the user
            });
    });
});
</script>

HTML

 
<div id="SendFunds">
    <div class="lg:flex p-2">
        <!-- Form Section (Takes Half on Desktop) -->
        <div class="w-full">
            <form id="stellarTransactionForm">
                <div class="mb-4">
                    <label for="senderAddress">Sender Address:</label>
                    <input type="text" id="senderAddress" name="senderAddress">
                </div>
                <div class="mb-4">
                    <label for="secretKey">Secret Key:</label>
                    <input type="text" id="secretKey" name="secretKey">
                </div>
                <div class="mb-4">
                    <label for="receiverAddress">Receiver Address:</label>
                    <input type="text" id="receiverAddress" name="receiverAddress">
                </div>
                <div class="mb-4">
                    <label for="amount">Amount:</label>
                    <input type="text" id="amount" name="amount">
                </div>
                <div class="mb-4">
                    <label for="memo">Memo:</label>
                    <input type="text" id="memo" name="memo">
                </div>
                <button type="submit">Send Transaction</button>
            </form>
        </div>
    </div>
</div>

Removesigner Signxdr