btcpayserver/BTCPayServer/Views/Shared/LayoutPartials/SyncModal.cshtml
2022-12-31 09:24:29 +01:00

70 lines
3.2 KiB
Text

@using BTCPayServer.Abstractions.Contracts
@inject IEnumerable<ISyncSummaryProvider> SyncSummaryProviders;
@if (SyncSummaryProviders.Any(provider => !provider.AllAvailable()))
{
<div id="syncModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<a class="modal-header btn-link border-0 text-decoration-none cursor-pointer align-items-center" data-bs-toggle="collapse" data-bs-target="#syncModalContent">
<h4 class="modal-title h5 fw-semibold">Your nodes are synching …</h4>
<vc:icon symbol="caret-down"/>
</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 class="mb-0">
<a href="https://www.youtube.com/watch?v=OrYDehC-8TU" target="_blank" rel="noreferrer noopener">Watch this video</a>
to understand the importance of blockchain synchronization.
If you really don't want to sync and you are familiar with the command line, check
<a href="https://docs.btcpayserver.org/Docker/fastsync/" target="_blank" rel="noreferrer noopener">FastSync</a>.
</p>
</div>
</div>
</div>
</div>
</div>
<style>
#syncModal {
--btcpay-modal-border-color: var(--btcpay-body-border-light);
--outer-margin-horizontal: var(--content-padding-horizontal);
--outer-margin-vertical: 50px;
display: unset;
z-index: 1040;
height: auto;
top: auto;
left: auto;
bottom: 0;
right: 0;
margin: var(--outer-margin-vertical) var(--outer-margin-horizontal);
width: 500px;
overflow: hidden;
max-width: calc(100% - var(--outer-margin-horizontal) * 2);
}
#syncModal .modal-dialog {
margin: 0;
}
#syncModal .modal-body {
/* 92px is so that the header is still displayed */
max-height: min(360px, calc(100vh - 92px - var(--outer-margin-vertical) * 2));
overflow-y: scroll;
}
#syncModal .modal-body ul {
padding-left: 2em;
}
</style>
<script>
const $syncModalContent = document.getElementById('syncModalContent');
const $syncModal = document.getElementById('syncModal');
if (localStorage.getItem('sync-collapsed')) {
$syncModalContent.classList.remove('show');
}
delegate('hidden.bs.collapse', '#syncModalContent', () => { localStorage.setItem('sync-collapsed', 'true'); });
delegate('shown.bs.collapse', '#syncModalContent', () => { localStorage.removeItem('sync-collapsed') });
</script>
}