group config settings by category

Co-authored-by: Mayank Chhabra <mayankchhabra9@gmail.com>
This commit is contained in:
Nathan Fretz 2023-10-19 13:47:15 -07:00 committed by nmfretz
parent 4c8accc629
commit 6e682b5b42

View File

@ -14,286 +14,388 @@
</b-alert> </b-alert>
<b-overlay :show="isSettingsDisabled" rounded="sm"> <b-overlay :show="isSettingsDisabled" rounded="sm">
<div
class="advanced-settings-container d-flex flex-column p-3 pb-sm-3 bg-light mb-2" <!-- PEER SETTINGS -->
> <b-card no-body class="setting-group-container mb-2">
<div> <b-card-header v-b-toggle.peer-settings header-tag="header" class="setting-group-header px-2 px-sm-3 d-flex justify-content-between align-items-center" role="tab">
<div class="d-flex justify-content-between align-items-center"> <div :class="{'fade-in-out': !hasLoadedSettings}">
<div class="w-75"> <p class="setting-group-title mb-1 font-weight-bold">Peer Settings</p>
<label class="mb-0" for="clearnet"> <small class="d-block text-muted">
<p class="font-weight-bold mb-0">Outgoing Connections to Clearnet Peers</p> Configure how your node connects and interacts with peers (other nodes) on the network.
</label> </small>
</div> </div>
<b-icon class="when-closed ml-2 text-muted" icon="plus" variant="secondary"></b-icon><b-icon class="when-open ml-2 text-muted" icon="dash" variant="secondary"></b-icon>
</b-card-header>
<b-collapse v-if="hasLoadedSettings" class="setting-group-body bg-light" id="peer-settings" accordion="peer-settings" role="tabpanel">
<!-- OUTGOING CLEARNET PEERS -->
<b-card-body class="subsetting-body px-2 px-sm-3">
<div> <div>
<toggle-switch <div class="d-flex justify-content-between align-items-center">
id="clearnet" <div class="flex-sm-grow-1">
class="align-self-center" <label class="mb-0" for="clearnet">
:on="settings.clearnet" <p class="subsetting-title font-weight-bold mb-0 mr-1">
@toggle="status => (settings.clearnet = status)" Outgoing Connections to Clearnet Peers
></toggle-switch> <span class="subsetting-config-name text-monospace font-weight-normal d-block">
onlynet
</span>
</p>
</label>
</div>
<div>
<toggle-switch
id="clearnet"
class="align-self-center"
:on="settings.clearnet"
@toggle="status => (settings.clearnet = status)"
></toggle-switch>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Connect to peers available on the clearnet (publicly accessible internet).
</small>
</div> </div>
</div> </b-card-body>
<small class="w-sm-75 d-block text-muted mt-1">
Connect to peers available on the clearnet (publicly accessible internet).
</small>
</div>
<hr class="advanced-settings-divider" /> <!-- OUTGOING TOR PEERS -->
<b-card-body class="subsetting-body px-2 px-sm-3">
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="tor">
<p class="font-weight-bold mb-0">Outgoing Connections to Tor Peers</p>
</label>
</div>
<div> <div>
<toggle-switch <div class="d-flex justify-content-between align-items-center">
id="tor" <div class="flex-sm-grow-1">
class="align-self-center" <label class="mb-0" for="tor">
:on="settings.tor" <p class="subsetting-title font-weight-bold mb-0 mr-1">
@toggle="status => (settings.tor = status)" Outgoing Connections to Tor Peers
></toggle-switch> <span class="subsetting-config-name text-monospace font-weight-normal d-block">
onlynet
</span>
</p>
</label>
</div>
<div>
<toggle-switch
id="tor"
class="align-self-center"
:on="settings.tor"
@toggle="status => (settings.tor = status)"
></toggle-switch>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Connect to peers available on the Tor network.
</small>
</div> </div>
</div> </b-card-body>
<small class="w-sm-75 d-block text-muted mt-1">
Connect to peers available on the Tor network.
</small>
</div>
<hr class="advanced-settings-divider" /> <!-- CONNECT TO ALL CLEARNET PEERS OVER TOR -->
<b-card-body class="subsetting-body px-2 px-sm-3">
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="proxy">
<p class="font-weight-bold mb-0">Connect to all Clearnet Peers over Tor</p>
</label>
</div>
<div> <div>
<toggle-switch <div class="d-flex justify-content-between align-items-center">
id="proxy" <div class="w-75">
class="align-self-center" <label class="mb-0" for="proxy">
:on="settings.torProxyForClearnet" <p class="subsetting-title font-weight-bold mb-0 mr-1">
:disabled="isTorProxyDisabled" Make All Outgoing Connections to Clearnet Peers Over Tor
:tooltip="torProxyTooltip" <span class="subsetting-config-name text-monospace font-weight-normal d-block">
@toggle="status => (settings.torProxyForClearnet = status)" proxy
></toggle-switch> </span>
</p>
</label>
</div>
<div>
<toggle-switch
id="proxy"
class="align-self-center"
:on="settings.torProxyForClearnet"
:disabled="isTorProxyDisabled"
:tooltip="torProxyTooltip"
@toggle="status => (settings.torProxyForClearnet = status)"
></toggle-switch>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Connect to peers available on the clearnet via Tor to preserve your anonymity at the cost of slightly less security.
</small>
</div> </div>
</div> </b-card-body>
<small class="w-sm-75 d-block text-muted mt-1">
Connect to peers available on the clearnet via Tor to preserve your anonymity at the cost of slightly less security.
</small>
</div>
<!-- CONNECT TO I2P PEERS -->
<hr class="advanced-settings-divider" /> <b-card-body class="subsetting-body px-2 px-sm-3">
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="I2P">
<p class="font-weight-bold mb-0">Outgoing Connections to I2P Peers</p>
</label>
</div>
<div> <div>
<toggle-switch <div class="d-flex justify-content-between align-items-center">
id="I2P" <div class="w-75">
class="align-self-center" <label class="mb-0" for="I2P">
:on="settings.i2p" <p class="subsetting-title font-weight-bold mb-0 mr-1">
@toggle="status => (settings.i2p = status)" Outgoing Connections to I2P Peers
></toggle-switch> <span class="subsetting-config-name text-monospace font-weight-normal d-block">
onlynet
</span>
</p>
</label>
</div>
<div>
<toggle-switch
id="I2P"
class="align-self-center"
:on="settings.i2p"
@toggle="status => (settings.i2p = status)"
></toggle-switch>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Connect to peers available on the I2P network.
</small>
</div> </div>
</div> </b-card-body>
<small class="w-sm-75 d-block text-muted mt-1">
Connect to peers available on the I2P network.
</small>
</div>
<hr class="advanced-settings-divider" /> <!-- INCOMING CONNECTIONS -->
<b-card-body class="subsetting-body px-2 px-sm-3">
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="allow-incoming-connections">
<p class="font-weight-bold mb-0">Incoming Connections</p>
</label>
</div>
<div class="">
<toggle-switch
id="allow-incoming-connections"
class="align-self-center"
:on="settings.incomingConnections"
@toggle="status => (settings.incomingConnections = status)"
></toggle-switch>
</div>
</div>
<small class="w-sm-75 d-block text-muted mt-1">
Broadcast your node to the Bitcoin network to help other nodes
access the blockchain. You may need to set up port forwarding on
your router to allow incoming connections from clearnet-only peers.
</small>
</div>
<hr class="advanced-settings-divider" />
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="cache-size">
<p class="font-weight-bold mb-0">Cache Size (MB)</p>
</label>
</div>
<div class="">
<b-form-input
class="advanced-settings-input"
id="cache-size"
type="number"
v-model="settings.cacheSizeMB"
></b-form-input>
</div>
</div>
<small class="w-sm-75 d-block text-muted mt-1">
Choose the size of the UTXO set to store in RAM. A larger cache can
speed up the initial synchronization of your Bitcoin node, but after
the initial sync is complete, a larger cache value does not significantly
improve performance and may use more RAM than needed.
</small>
</div>
<hr class="advanced-settings-divider" />
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="mempool">
<p class="font-weight-bold mb-0">Replace-By-Fee (RBF) for All Transactions</p>
</label>
</div>
<div> <div>
<toggle-switch <div class="d-flex justify-content-between align-items-center">
id="mempool" <div class="w-75">
class="align-self-center" <label class="mb-0" for="allow-incoming-connections">
:on="settings.mempoolFullRbf" <p class="subsetting-title font-weight-bold mb-0 mr-1">
@toggle="status => (settings.mempoolFullRbf = status)" Incoming Connections
></toggle-switch> <span class="subsetting-config-name text-monospace font-weight-normal d-block">
listen | listenonion | i2pacceptincoming
</span>
</p>
</label>
</div>
<div>
<toggle-switch
id="allow-incoming-connections"
class="align-self-center"
:on="settings.incomingConnections"
@toggle="status => (settings.incomingConnections = status)"
></toggle-switch>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Broadcast your node to the Bitcoin network to help other nodes
access the blockchain. You may need to set up port forwarding on
your router to allow incoming connections from clearnet-only peers.
</small>
</div> </div>
</b-card-body>
</b-collapse>
</b-card>
<!-- OPTIMIZATION SETTINGS -->
<b-card no-body class="setting-group-container mb-2">
<b-card-header v-b-toggle.optimization-settings header-tag="header" class="setting-group-header px-2 px-sm-3 d-flex justify-content-between align-items-center" role="tab">
<!-- IMPLEMENT HASLOADEDSETTINGS -->
<div :class="{'fade-in-out': !hasLoadedSettings}">
<p class="setting-group-title mb-1 font-weight-bold">Optimization</p>
<small class="d-block text-muted">
Fine tune the performance and resource usage of your node.
</small>
</div> </div>
<small class="w-sm-75 d-block text-muted mt-1"> <b-icon class="when-closed ml-2 text-muted" icon="plus" variant="secondary"></b-icon><b-icon class="when-open ml-2 text-muted" icon="dash" variant="secondary"></b-icon>
Allow any transaction in the mempool of your Bitcoin node to be replaced with </b-card-header>
a newer version of the same transaction that includes a higher fee. <b-collapse v-if="hasLoadedSettings" class="setting-group-body bg-light" id="optimization-settings" accordion="optimization-settings" role="tabpanel">
</small>
</div> <!-- DB CACHE -->
<b-card-body class="subsetting-body px-2 px-sm-3">
<hr class="advanced-settings-divider" />
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="rest">
<p class="font-weight-bold mb-0">Enable REST API</p>
</label>
</div>
<div> <div>
<toggle-switch <div class="d-flex justify-content-between align-items-center">
id="rest" <div class="flex-sm-grow-1">
class="align-self-center" <label class="mb-0" for="cache-size">
:on="settings.rest" <p class="subsetting-title font-weight-bold mb-0 mr-1">
@toggle="status => (settings.rest = status)" Cache Size
></toggle-switch> <span class="subsetting-config-name text-monospace font-weight-normal d-block">
dbcache
</span>
</p>
</label>
</div>
<div class="input-container ml-1">
<b-input-group append="MB">
<b-form-input
class="advanced-settings-input"
id="cache-size"
type="number"
v-model="settings.cacheSizeMB"
number
autocomplete="off"
></b-form-input>
</b-input-group>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Choose the size of the UTXO set to store in RAM. A larger cache can
speed up the initial synchronization of your Bitcoin node, but after
the initial sync is complete, a larger cache value does not significantly
improve performance and may use more RAM than needed.
</small>
</div> </div>
</div> </b-card-body>
<small class="w-sm-75 d-block text-muted mt-1">
Accept public REST requests to your node. Be sure to understand the risks and limitations of an unauthenticated REST interface before enabling this feature.
</small>
</div>
<hr class="advanced-settings-divider" /> <!-- RBF -->
<b-card-body class="subsetting-body px-2 px-sm-3">
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="prune-old-blocks">
<p class="font-weight-bold mb-0">Prune Old Blocks</p>
</label>
</div>
<div> <div>
<toggle-switch <div class="d-flex justify-content-between align-items-center">
<div class="flex-sm-grow-1">
<label class="mb-0" for="mempool">
<p class="subsetting-title font-weight-bold mb-0 mr-1">
Replace-By-Fee (RBF) for All Transactions
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
mempoolfullrbf
</span>
</p>
</label>
</div>
<div>
<toggle-switch
id="mempool"
class="align-self-center"
:on="settings.mempoolFullRbf"
@toggle="status => (settings.mempoolFullRbf = status)"
></toggle-switch>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Allow any transaction in the mempool of your Bitcoin node to be replaced with
a newer version of the same transaction that includes a higher fee.
</small>
</div>
</b-card-body>
<!-- PRUNE -->
<b-card-body class="subsetting-body px-2 px-sm-3">
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="flex-sm-grow-1">
<label class="mb-0" for="prune-old-blocks">
<p class="subsetting-title font-weight-bold mb-0 mr-1">
Prune Old Blocks
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
prune
</span>
</p>
</label>
</div>
<div>
<toggle-switch
id="prune-old-blocks"
class="align-self-center"
:on="settings.prune.enabled"
@toggle="status => (settings.prune.enabled = status)"
></toggle-switch>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Save storage space by pruning (deleting) old blocks and keeping only
a limited copy of the blockchain. Use the slider to choose the size
of the blockchain you want to store. It may take some time for your
node to be online after you turn on pruning. If you turn off pruning
after turning it on, you'll need to download the entire blockchain
</small>
<prune-slider
id="prune-old-blocks" id="prune-old-blocks"
class="align-self-center" class="mt-3 mb-3"
:on="settings.prune.enabled" :minValue="1"
@toggle="status => (settings.prune.enabled = status)" :maxValue="maxPruneSizeGB"
></toggle-switch> :startingValue="settings.prune.pruneSizeGB"
:disabled="!settings.prune.enabled"
@change="value => (settings.prune.pruneSizeGB = value)"
></prune-slider>
</div> </div>
</b-card-body>
</b-collapse>
</b-card>
<!-- RPC & REST SETTINGS -->
<b-card no-body class="setting-group-container mb-2">
<b-card-header v-b-toggle.rpc-rest-settings header-tag="header" class="setting-group-header px-2 px-sm-3 d-flex justify-content-between align-items-center" role="tab">
<!-- IMPLEMENT HASLOADEDSETTINGS -->
<div :class="{'fade-in-out': !hasLoadedSettings}">
<p class="setting-group-title mb-1 font-weight-bold">RPC and REST</p>
<small class="d-block text-muted">
Configure RPC and REST API access to your node.
</small>
</div> </div>
<small class="w-sm-75 d-block text-muted mt-1"> <b-icon class="when-closed ml-2 text-muted" icon="plus" variant="secondary"></b-icon><b-icon class="when-open ml-2 text-muted" icon="dash" variant="secondary"></b-icon>
Save storage space by pruning (deleting) old blocks and keeping only </b-card-header>
a limited copy of the blockchain. Use the slider to choose the size <b-collapse v-if="hasLoadedSettings" class="setting-group-body bg-light" id="rpc-rest-settings" accordion="rpc-rest-settings" role="tabpanel">
of the blockchain you want to store. It may take some time for your
node to be online after you turn on pruning. If you turn off pruning <!-- RBF -->
after turning it on, you'll need to download the entire blockchain <!-- TODO: move to a "Transactions" accordion if we add additional transaction options -->
again. <b-card-body class="subsetting-body px-2 px-sm-3">
</small>
<prune-slider
id="prune-old-blocks"
class="mt-3 mb-3"
:minValue="1"
:maxValue="maxPruneSizeGB"
:startingValue="settings.prune.pruneSizeGB"
:disabled="!settings.prune.enabled"
@change="value => (settings.prune.pruneSizeGB = value)"
></prune-slider>
</div>
<hr class="advanced-settings-divider" />
<!-- <div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="reindex-blockchain">
<p class="font-weight-bold mb-0">Reindex Blockchain</p>
</label>
</div>
<div> <div>
<toggle-switch <div class="d-flex justify-content-between align-items-center">
id="reindex-blockchain" <div class="flex-sm-grow-1">
class="align-self-center" <label class="mb-0" for="rest">
:on="settings.reindex" <p class="subsetting-title font-weight-bold mb-0 mr-1">
@toggle="status => (settings.reindex = status)" Public REST API
></toggle-switch> <span class="subsetting-config-name text-monospace font-weight-normal d-block">
rest
</span>
</p>
</label>
</div>
<div>
<toggle-switch
id="rest"
class="align-self-center"
:on="settings.rest"
@toggle="status => (settings.rest = status)"
></toggle-switch>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Public REST API can help you connect certain wallets and apps to your node. However, because the REST API access is unauthenticated, it can lead to unauthorized access, denial-of-service (DoS) attacks, and such.
</small>
</div> </div>
</b-card-body>
</b-collapse>
</b-card>
<!-- CHAIN SELECTION SETTINGS -->
<b-card no-body class="setting-group-container mb-2">
<b-card-header v-b-toggle.chain-selection-settings header-tag="header" class="setting-group-header px-2 px-sm-3 d-flex justify-content-between align-items-center" role="tab">
<!-- IMPLEMENT HASLOADEDSETTINGS -->
<div :class="{'fade-in-out': !hasLoadedSettings}">
<p class="setting-group-title mb-1 font-weight-bold">Network Selection</p>
<small class="d-block text-muted">
Switch between mainnet, testnet, regtest, and signet.
</small>
</div> </div>
<small class="w-sm-75 d-block text-muted mt-1"> <b-icon class="when-closed ml-2 text-muted" icon="plus" variant="secondary"></b-icon><b-icon class="when-open ml-2 text-muted" icon="dash" variant="secondary"></b-icon>
Rebuild the database index used by your Bitcoin node. This can </b-card-header>
be useful if the index becomes corrupted. <b-collapse v-if="hasLoadedSettings" class="setting-group-body bg-light" id="chain-selection-settings" accordion="chain-selection-settings" role="tabpanel">
</small>
</div> <!-- CHAIN SELECTION -->
<b-card-body class="subsetting-body px-2 px-sm-3">
<hr class="advanced-settings-divider" /> -->
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="w-75">
<label class="mb-0" for="network">
<p class="font-weight-bold mb-0">Network</p>
</label>
</div>
<div> <div>
<b-form-select <div class="d-flex justify-content-between align-items-center">
id="network" <div class="flex-sm-grow-1">
v-model="settings.network" <label class="mb-0" for="chain">
:options="networks" <p class="subsetting-title font-weight-bold mb-0 mr-1">
></b-form-select> Blockchain
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
chain
</span>
</p>
</label>
</div>
<div class="input-container ml-1">
<b-form-select
id="network"
v-model="settings.network"
:options="networks"
></b-form-select>
</div>
</div>
<small class="w-lg-75 d-block text-muted mt-1">
Choose which blockchain your node will connect to.
If you change the chain, restart your Umbrel to make sure any
apps connected to your node continue to work properly.
</small>
</div> </div>
</div> </b-card-body>
</div> </b-collapse>
<small class="w-sm-75 d-block text-muted mt-1"> </b-card>
Choose which network you want your Bitcoin node to connect to.
If you change the network, restart your Umbrel to make sure any
apps connected to your Bitcoin node continue to work properly.
</small>
</div>
<!-- template overlay with empty div to show an overlay with no spinner --> <!-- template overlay with empty div to show an overlay with no spinner -->
<template #overlay> <template #overlay>
@ -352,6 +454,9 @@ export default {
rpc: state => state.bitcoin.rpc, rpc: state => state.bitcoin.rpc,
p2p: state => state.bitcoin.p2p p2p: state => state.bitcoin.p2p
}), }),
hasLoadedSettings() {
return Object.keys(this.settings).length > 0;
},
isTorProxyDisabled() { isTorProxyDisabled() {
return !this.settings.clearnet || !this.settings.tor; return !this.settings.clearnet || !this.settings.tor;
}, },
@ -406,25 +511,79 @@ export default {
<!-- removed scoped in order to place scrollbar on bootstrap-vue .modal-body. Increased verbosity on other classes--> <!-- removed scoped in order to place scrollbar on bootstrap-vue .modal-body. Increased verbosity on other classes-->
<style lang="scss"> <style lang="scss">
.advanced-settings-container { .setting-group-container {
border-radius: 1rem; border: 1px solid #e9ecef !important;
.advanced-settings-divider { border-radius: 0.5rem;
// same styles as bootstrap <b-dropdown-divider/>
height: 0; .setting-group-header {
margin: 1.25rem 0; cursor: pointer;
overflow: hidden; background-color: transparent;
border-top: 1px solid #e9ecef;
} }
.advanced-settings-input {
max-width: 75px; .collapsed > .when-open,
.not-collapsed > .when-closed {
display: none;
} }
// to remove arrows on number input field
.advanced-settings-input::-webkit-outer-spin-button, .advanced-settings-input::-webkit-inner-spin-button { .setting-group-body {
-webkit-appearance: none; border-radius: 0 0 0.5rem 0.5rem;
margin: 0;
} .subsetting-body {
.advanced-settings-input[type="number"] { border-bottom: 1px solid #e9ecef;
-moz-appearance: textfield;
.subsetting-title {
font-size: 0.9rem;
}
.subsetting-config-name {
font-size: 0.65rem;
opacity: 0.6;
margin-top: 0.1rem;
}
.input-container {
width: 100%;
max-width: 130px;
.input-group-text {
font-size: 0.85rem !important;
}
}
.input-time {
.input-group-append {
.custom-select {
font-size: 0.85rem !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
cursor: pointer;
&:focus {
box-shadow: none;
}
}
}
}
.advanced-settings-input {
font-size: 0.85rem !important;
&:focus {
box-shadow: none;
}
}
// to remove arrows on number input field
.advanced-settings-input::-webkit-outer-spin-button, .advanced-settings-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.advanced-settings-input[type="number"] {
-moz-appearance: textfield;
}
}
} }
} }
@ -449,11 +608,4 @@ export default {
.modal-body::-webkit-scrollbar-thumb:hover { .modal-body::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
/* sm breakpoint */
@media (min-width: 576px) {
.w-sm-75 {
width: 75% !important;
}
}
</style> </style>