btcpayserver/BTCPayServer/Components/StoreLightningBalance/Default.cshtml

@model BTCPayServer.Components.StoreLightningBalance.StoreLightningBalanceViewModel

<div id="StoreLightningBalance-@Model.Store.Id" class="widget store-lightning-balance">
    <div class="d-flex gap-3 align-items-center justify-content-between mb-2">
        <h6>Lightning Balance</h6>
        @if (Model.CryptoCode != Model.DefaultCurrency && Model.Balance != null)
        {
            <div class="btn-group btn-group-sm gap-0 currency-toggle" role="group">
                <input type="radio" class="btn-check" name="StoreLightningBalance-currency" id="StoreLightningBalance-currency_@Model.CryptoCode" value="@Model.CryptoCode" autocomplete="off" checked>
                <label class="btn btn-outline-secondary px-2 py-1" for="StoreLightningBalance-currency_@Model.CryptoCode">@Model.CryptoCode</label>
                <input type="radio" class="btn-check" name="StoreLightningBalance-currency" id="StoreLightningBalance-currency_@Model.DefaultCurrency" value="@Model.DefaultCurrency" autocomplete="off">
                <label class="btn btn-outline-secondary px-2 py-1" for="StoreLightningBalance-currency_@Model.DefaultCurrency">@Model.DefaultCurrency</label>
            </div>
        }
    </div>
    @if (!string.IsNullOrEmpty(Model.ProblemDescription))
    {
        <p>@Model.ProblemDescription</p>
    }
    else if (Model.Balance != null)
    {
        <div class="balances d-flex flex-wrap">
            @if (Model.Balance.OffchainBalance != null)
            {
                <div class="balance">
                    <h3 class="d-inline-block me-1" data-balance="@Model.TotalOffchain">@Model.TotalOffchain</h3>
                    <span class="text-secondary fw-semibold text-nowrap">
                        <span class="currency">@Model.CryptoCode</span> in channels
                    </span>

                    <div class="balance-details collapse" id="balanceDetailsOffchain">
                        @if (Model.Balance.OffchainBalance.Opening != null)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold" data-balance="@Model.Balance.OffchainBalance.Opening">
                                    @Model.Balance.OffchainBalance.Opening
                                </span>
                                <span class="text-secondary text-nowrap">
                                    <span class="currency">@Model.CryptoCode</span> opening channels
                                </span>
                            </div>
                        }
                        @if (Model.Balance.OffchainBalance.Local != null)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold" data-balance="@Model.Balance.OffchainBalance.Local">
                                    @Model.Balance.OffchainBalance.Local
                                </span>
                                <span class="text-secondary text-nowrap">
                                    <span class="currency">@Model.CryptoCode</span> local balance
                                </span>
                            </div>
                        }
                        @if (Model.Balance.OffchainBalance.Remote != null)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold" data-balance="@Model.Balance.OffchainBalance.Remote">
                                    @Model.Balance.OffchainBalance.Remote
                                </span>
                                <span class="text-secondary text-nowrap">
                                    <span class="currency">@Model.CryptoCode</span> remote balance
                                </span>
                            </div>
                        }
                        @if (Model.Balance.OffchainBalance.Closing != null)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold" data-balance="@Model.Balance.OffchainBalance.Closing">
                                    @Model.Balance.OffchainBalance.Closing
                                </span>
                                <span class="text-secondary text-nowrap">
                                    <span class="currency">@Model.CryptoCode</span> closing channels
                                </span>
                            </div>
                        }
                    </div>
                </div>
            }
            @if (Model.Balance.OnchainBalance != null)
            {
                <div class="balance">
                    <h3 class="d-inline-block me-1" data-balance="@Model.TotalOnchain">@Model.TotalOnchain</h3>
                    <span class="text-secondary fw-semibold text-nowrap">
                        <span class="currency">@Model.CryptoCode</span> on-chain
                    </span>
                    <div class="balance-details collapse" id="balanceDetailsOnchain">
                        @if (Model.Balance.OnchainBalance.Confirmed != null)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold" data-balance="@Model.Balance.OnchainBalance.Confirmed">
                                    @Model.Balance.OnchainBalance.Confirmed
                                </span>
                                <span class="text-secondary text-nowrap">
                                    <span class="currency">@Model.CryptoCode</span> confirmed
                                </span>
                            </div>
                        }
                        @if (Model.Balance.OnchainBalance.Unconfirmed != null)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold" data-balance="@Model.Balance.OnchainBalance.Unconfirmed">
                                    @Model.Balance.OnchainBalance.Unconfirmed
                                </span>
                                <span class="text-secondary text-nowrap">
                                    <span class="currency">@Model.CryptoCode</span> unconfirmed
                                </span>
                            </div>
                        }
                        @if (Model.Balance.OnchainBalance.Reserved != null)
                        {
                            <div class="mt-2">
                                <span class="fw-semibold" data-balance="@Model.Balance.OnchainBalance.Reserved">
                                    @Model.Balance.OnchainBalance.Reserved
                                </span>
                                <span class="text-secondary text-nowrap">
                                    <span class="currency">@Model.CryptoCode</span> reserved
                                </span>
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
        @if (Model.Balance.OffchainBalance != null && Model.Balance.OnchainBalance != null)
        {
            <button class="d-inline-flex align-items-center btn btn-link text-primary fw-semibold p-0 mt-3 ms-n1" type="button" data-bs-toggle="collapse" data-bs-target=".balance-details" aria-expanded="false" aria-controls="balanceDetailsOffchain balanceDetailsOnchain">
                <vc:icon symbol="caret-down"/>
                <span class="ms-1">Details</span>
            </button>
        }
    }
    else
    {
        <div class="loading d-flex justify-content-center p-3">
            <div class="spinner-border text-light" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <script>
            (async () => {
                const url = @Safe.Json(Url.Action("LightningBalance", "UIStores", new { storeId = Model.Store.Id, cryptoCode = Model.CryptoCode }));
                const storeId = @Safe.Json(Model.Store.Id);
                const response = await fetch(url);
                if (response.ok) {
                    document.getElementById(`StoreLightningBalance-${storeId}`).outerHTML = await response.text();
                }
            })();
        </script>
    }
</div>
<script>
    (function () {
        const storeId = @Safe.Json(Model.Store.Id);
        const cryptoCode = @Safe.Json(Model.CryptoCode);
        const defaultCurrency = @Safe.Json(Model.DefaultCurrency);
        const divisibility = @Safe.Json(Model.CurrencyData.Divisibility);
        const id = `StoreLightningBalance-${storeId}`;
        
        const render = rate => {
            const currency = rate ? defaultCurrency : cryptoCode;
            document.querySelectorAll(`#${id} .currency`).forEach(c => c.innerText = currency) 
            document.querySelectorAll(`#${id} [data-balance]`).forEach(c => {
                const value = Number.parseFloat(c.dataset.balance);
                c.innerText = rate
                    ? DashboardUtils.displayDefaultCurrency(value, rate, currency, divisibility)
                    : value
            });
        };
        
        document.addEventListener('DOMContentLoaded', () => {
            delegate('change', `#${id} .currency-toggle input`, async e => {
                const { target } = e;
                if (target.value === defaultCurrency) {
                    const rate = await DashboardUtils.fetchRate(`${cryptoCode}_${defaultCurrency}`);
                    if (rate) render(rate);
                } else {
                    render(null);
                }
            });
        });
    })();
</script>