Create Claimable Balance

The "Create Claimable Balance" component creates a unrestricted claimable balance to be claimed by the destination account specified.

Features

Collects Issuer public and secret key, receiver publickey, asset code and amount.
Provides a straightforward form for users to create a claimable balance and proactively issue trustlines directly to their custom assets or XLM native.

Additional Resources

A Claimable Balance is a way to transfer ownership of an asset. It's like setting up a future payment that someone can claim later on. This feature enables you to send payments to accounts that might not be ready to receive them right away.

Visit Claimable Balance 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.CreateClaimableBalance/>

@page "/Createbalance"
@inject IJSRuntime JSRuntime
@rendermode InteractiveAuto
 
<h1>Create Claimable Balance with Custom Token</h1>
 
<form id="claimableBalanceForm">
    <label for="sourceSecretKey">Source Account Secret Key:</label>
    <input type="text" id="sourceSecretKey" required><br><br>
    <label for="recipientAccount">Recipient Account:</label>
    <input type="text" id="recipientAccount" required><br><br>
    <label for="tokenCode">Token Code:</label>
    <input type="text" id="tokenCode" required><br><br>
    <label for="tokenIssuer">Token Issuer:</label>
    <input type="text" id="tokenIssuer" required><br><br>
    <label for="tokenAmountsecret">Token Amount:</label>
    <input type="number" id="tokenAmountsecret" required><br><br>
    <button type="submit">Create Claimable Balance</button>
</form>
<div id="message">@Message</div>
 
@code {
    private FormDataModel FormData = new FormDataModel();
    private string Message;
 
    private async Task HandleSubmit()
    {
        try
        {
            var result = await JSRuntime.InvokeAsync<string>(
                "createClaimableBalance",
                FormData.SourceSecretKey,
                FormData.RecipientAccount,
                FormData.TokenCode,
                FormData.TokenIssuer,
                FormData.tokenAmountsecret.ToString());
 
            Message = $"Claimable balance created successfully for {FormData.tokenAmountsecret} {FormData.TokenCode}.";
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Error creating claimable balance: {ex.Message}");
            Message = "Failed to create claimable balance. Please try again.";
        }
    }
 
    public class FormDataModel
    {
        public string SourceSecretKey { get; set; }
        public string RecipientAccount { get; set; }
        public string TokenCode { get; set; }
        public string TokenIssuer { get; set; }
        public decimal tokenAmountsecret { get; set; }
    }
}
 
@{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/11.2.2/stellar-sdk.js"></script>
    <script src="your-file-path/js/createClaimableBal.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>
    document.getElementById('claimableBalanceForm').addEventListener('submit', function (event) {
        event.preventDefault();
 
    const sourceSecretKey = document.getElementById('sourceSecretKey').value;
    const recipientAccount = document.getElementById('recipientAccount').value;
    const tokenCode = document.getElementById('tokenCode').value;
    const tokenIssuer = document.getElementById('tokenIssuer').value;
    const tokenAmount = document.getElementById('tokenAmount').value;
 
    const server = new StellarSdk.Horizon.Server('https://horizon-testnet.stellar.org');
    const sourceKeys = StellarSdk.Keypair.fromSecret(sourceSecretKey);
 
    server.loadAccount(sourceKeys.publicKey())
                .then(account => {
                    const asset = new StellarSdk.Asset(tokenCode, tokenIssuer);
 
    const claimableBalanceEntry = {
        asset: asset,
    amount: tokenAmount,
    claimants: [
    new StellarSdk.Claimant(recipientAccount, StellarSdk.Claimant.predicateUnconditional())
    ]
                    };
 
    const transaction = new StellarSdk.TransactionBuilder(account, {
        fee: StellarSdk.BASE_FEE,
    networkPassphrase: StellarSdk.Networks.TESTNET
                    })
    .addOperation(StellarSdk.Operation.createClaimableBalance(claimableBalanceEntry))
    .setTimeout(30)
    .build();
 
    transaction.sign(sourceKeys);
 
    return server.submitTransaction(transaction);
                })
                .then(result => {
        console.log('Claimable balance created successfully:', result);
    document.getElementById('message').textContent = `Claimable balance created successfully for ${tokenAmount} ${tokenCode}.`;
                })
                .catch(error => {
        console.error('Error creating claimable balance:', error);
    document.getElementById('message').textContent = 'Failed to create claimable balance. Please try again.';
                });
        });
</script>

HTML

 
<body>
    <h1>Create Claimable Balance with Custom Token</h1>
 
    <form id="claimableBalanceForm">
        <label for="sourceSecretKey">Source Account Secret Key:</label>
        <input type="text" id="sourceSecretKey" required><br><br>
 
        <label for="recipientAccount">Recipient Account:</label>
        <input type="text" id="recipientAccount" required><br><br>
 
        <label for="tokenCode">Token Code:</label>
        <input type="text" id="tokenCode" required><br><br>
 
        <label for="tokenIssuer">Token Issuer:</label>
        <input type="text" id="tokenIssuer" required><br><br>
 
        <label for="tokenAmount">Token Amount:</label>
        <input type="number" id="tokenAmount" required><br><br>
 
        <button type="submit">Create Claimable Balance</button>
    </form>
 
    <div id="message"></div>
</body>

Addsigner Createcustomtoken