btcpayserver/BTCPayServer/Views/Shared/SyncModal.cshtml

@inject BTCPayServer.HostedServices.NBXplorerDashboard dashboard
<!-- Modal -->
<div id="modalDialog" class="modal-dialog animated bounceInRight"
     style="z-index:1000">
    @* Z-Index less then other bootstrap modals (1050) *@

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Your nodes are synching...</h4>
            <button type="button" class="close" onclick="dismissSyncModal()">&times;</button>
        </div>
        <div class="modal-body">
            <p>
                Your node is synching the entire blockchain and validating the consensus rules...
            </p>
            @foreach (var line in dashboard.GetAll())
            {
                <h4>@line.Network.CryptoCode</h4>
                @if (line.Status == null)
                {
                    <ul>
                        <li>The node is offline</li>
                        @if (line.Error != null)
                        {
                            <li>Last error: @line.Error</li>
                        }
                    </ul>
                }
                else
                {
                    <ul>
                        <li>NBXplorer headers height: @line.Status.ChainHeight</li>
                        @if (line.Status.BitcoinStatus == null)
                        {
                            if (line.State == BTCPayServer.HostedServices.NBXplorerState.Synching)
                            {
                                <li>The node is starting...</li>
                            }
                            else
                            {
                                <li>The node is offline</li>
                                @if (line.Error != null)
                                {
                                    <li>Last error: @line.Error</li>
                                }
                            }
                        }
                        else if (line.Status.BitcoinStatus.IsSynched)
                        {
                            <li>The node is synchronized (Height: @line.Status.BitcoinStatus.Headers)</li>
                            @if (line.Status.BitcoinStatus.IsSynched &&
                             line.Status.SyncHeight.HasValue &&
                             line.Status.SyncHeight.Value < line.Status.BitcoinStatus.Headers)
                            {
                                <li>NBXplorer is synchronizing... (Height: @line.Status.SyncHeight.Value)</li>
                            }
                        }
                        else
                        {
                            <li>Node headers height: @line.Status.BitcoinStatus.Headers</li>
                            <li>Validated blocks: @line.Status.BitcoinStatus.Blocks</li>
                        }
                    </ul>
                    @if (!line.Status.IsFullySynched && line.Status.BitcoinStatus != null)
                    {
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))"
                                 aria-valuemin="0" aria-valuemax="100" style="width:@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))%">
                                @((int)(line.Status.BitcoinStatus.VerificationProgress * 100))%
                            </div>
                        </div>
                    }
                }
            }
            <p>
                <a href="https://www.youtube.com/watch?v=OrYDehC-8TU" target="_blank">Watch this video</a> to understand the importance of blockchain synchronization.
            </p>

            <p>If you really don't want to synch and that you are familiar with command line, check <a href="https://github.com/btcpayserver/btcpayserver-docker/blob/master/contrib/FastSync/README.md" target="_blank">FastSync</a>.</p>
        </div>

    </div>

</div>

@*<link href="~/vendor/animatecss/animate.css" rel="stylesheet" />*@
<script type="text/javascript">
    function dismissSyncModal() {
        $("#modalDialog").addClass('animated bounceOutRight')
    }
</script>

<style type="text/css">
    #modalDialog {
        position: fixed;
        bottom: 20px;
        right: 20px;
        margin: 0px;
    }
</style>