BTCPayServerPlugins/Plugins/BTCPayServer.Plugins.Prism/Components/PrismBalances.razor

<div class="row mt-4">
    @if (DestinationBalance?.Any() is true)
    {
        <div class="col-sm-12 col-md-6 col-xxl-constrain border border-light">
            <h4 class="text-center p-2">Destination Pending Balances</h4>
            <table class="table table-responsive">
                <tr>
                    <th>Destination</th>
                    <th>Sats</th>
                    <th>Actions</th>
                </tr>
                @foreach (var (dest, balance) in DestinationBalance)
                {
                    <tr>
                        <td class="text-truncate" style="max-width: 200px">@dest</td>
                        <td>@(balance / 1000m)</td>
                        <td>
                            @if (UpdatingDestination == dest)
                            {
                                <input type="number" @bind="UpdatingValue" min="0" />
                                
                                <button type="button" class="btn btn-sm btn-link" @onclick="() => UpdatingDestination = null">Cancel</button>
                                <button type="button" class="btn btn-sm btn-link" @onclick="Update">Update</button>
                            }
                            else
                            {
                                
                                <button type="button" class="btn btn-sm btn-link" @onclick="() => StartUpdate(dest,balance)">Update</button>
                            }
                        </td>
                    </tr>
                }
            </table>
        </div>
    }

    @if (PendingPayouts?.Any() is true)
    {
        <div class="col-sm-12 col-md-6 col-xxl-constrain  border border-light">
            <h4 class="text-center p-2">Pending Payouts</h4>
            <table class="table">
                <tr>
                    <th>Payout Id</th>
                    <th>Reserve fee</th>
                    <th>Amount</th>
                </tr>
                @foreach (var (payoutId, pendingPayout) in PendingPayouts)
                {
                    <tr>
                        <td>@payoutId</td>
                        <td>@pendingPayout.FeeCharged</td>
                        <td>@pendingPayout.PayoutAmount</td>
                    </tr>
                }
            </table>
        </div>
    }
</div>

@code {

    private string? UpdatingDestination { get; set; }
    private long? UpdatingValue { get; set; }
    
    [Parameter]
    public Dictionary<string, long> DestinationBalance { get; set; }

    [Parameter]
    public Dictionary<string, PendingPayout> PendingPayouts { get; set; }
    
    [Parameter]
    public EventCallback<(string destination, long newBalance)> OnUpdate { get; set; }

    private EventCallback StartUpdate(string dest, long balance)
    {
        UpdatingDestination = dest;
        UpdatingValue = Convert.ToInt32(balance/1000m);
        return EventCallback.Empty;
    }
    private async Task Update()
    {
        if (UpdatingDestination is null || UpdatingValue is null)
        {
            return;
        }
        await OnUpdate.InvokeAsync((UpdatingDestination, Convert.ToInt64(UpdatingValue.Value * 1000m)));
        UpdatingDestination = null;
    }
    

}