btcpayserver/BTCPayServer/Views/Shared/LayoutPartials/SyncModal.cshtml

@using BTCPayServer.Abstractions.Contracts
@inject IEnumerable<ISyncSummaryProvider> SyncSummaryProviders;
@if (SyncSummaryProviders.Any(provider => !provider.AllAvailable()))
{
    <!-- Modal -->
    <div id="syncModal" class="modal-dialog">
        <div class="modal-content">
            <a class="modal-header btn-link border-0 text-decoration-none cursor-pointer align-items-center" data-toggle="collapse" data-target="#syncModalContent">
                <h4 class="modal-title">Your nodes are synching...</h4>
                <span class="fa fa-chevron-down"></span>
            </a>
            <div id="syncModalContent" class="collapse show">
                <div class="modal-body pt-0">
                    <p>
                        Your node is synching the entire blockchain and validating the consensus rules...
                    </p>
                    @foreach (var provider in SyncSummaryProviders)
                    {
                        <partial name="@provider.Partial"/>
                    }
                    <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 class="mb-0">If you really don't want to synch and you are familiar with the 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>
    </div>
    <script>
        var syncModalContent = $('#syncModalContent');
        var syncModal = $('#syncModal');
        if (localStorage.getItem("sync-collapsed")){
            syncModalContent.removeClass("show");
        }
        syncModalContent.on('hidden.bs.collapse', function () {
            localStorage.setItem("sync-collapsed", "true");
        }).on('shown.bs.collapse', function () {
            localStorage.removeItem("sync-collapsed");
        });
        function handleFooterBottom() {
            if (document.getElementsByTagName("footer")[0].getBoundingClientRect().top < window.innerHeight){
                syncModal.stop().animate({"bottom":"40px"}, 200);
            } else {      
                syncModal.stop().animate({"bottom":"10px"}, 200);
            }
        }
        $(document).on("scroll", handleFooterBottom);
        handleFooterBottom();
    </script>
    <style type="text/css">
        
        #syncModal {
            position: fixed;
            bottom: 40px;
            right: 10px;
            margin: 0;
            z-index: 1000;
            width: 500px;
            max-width: 100%;
        }
        #syncModal .modal-body {
            max-height: 400px; 
            overflow-y: scroll;
        }
        #syncModal .fa-chevron-down {
            font-size: 1em;
            text-decoration: none;
            transition: transform .35s;
        }
        #syncModal .collapsed .fa-chevron-down {
            transform: rotate(-90deg);
        }
    </style>
}