feat: basic fee settings (#522)

* feat: add refreshConfigValues to ServiceConfigContext

* chore: add api method to post config values

* feat: add updateConfigValues to ServiceConfigContext

* feat(fees): ability to update fee specific config vars

* chore(fees): display error message on update failure

* chore(fees): add block sprite and adapt description

* ui(fee): wrap form sections in accordion

* feat(fees): add ability to set fee randomization factor

* ui(fees): use placeholder instead of loading spinner

* fix(fees): proper error messages depending on fee value unit

* fix(fees): dont decline zero as input value

* chore(fees): wording

* fix(fees): sats/vbyte mininum is exclusive

* refactor: move percentage/factor functions to utils

* fix(i18n): number strings

* feat(fees): improve wording

* fix(i18n): title case for title

* feat(fees): remove superfluous label

* feat(fees): improve wording

* feat(fees): more realistic example

* fix(fees): consistency; vbyte -> vByte

* fix(fees): consistency; satoshi -> sats

* feat(i18n): better verb

* feat(fees): maker -> collaborator

* Revert "feat(fees): remove superfluous label"

This reverts commit 20937ae.

* feat(fees): improve wording around base fee and block target

* fix(fees): parse max_cj_fee_abs as integer

* fix(fees): min/max value for absolute fee

* fix(fees): parse block target as integer

* fix(fees): allow 0% maximum relative fee

* fix(fees): use 'absurd_fee_per_kb' as upper level for fee

* chore(fees): lower max relative fee val from 50% to 20%

* fix(fees): let users specify 1sat/vbyte as fee

This is special case in that it will be translated to
1.001 sats/vbyte afterwards. This might be surprising to users
but it was decided that this is better than telling them that
the min is 1.001 from a UX point of view.

* fix(fees): add language attribute on form element

* feat(fees): improve wording & remove fee from label

* feat(fees): better fee randomization wording

* feat(fees): better fee label wording

* feat(fees): use smaller numbers in example

* feat(fees): improve wording

* feat(fees): improve wording

* feat(fees): improve base fee wording

* chore(fees): remove dead code

* ui(fees): colorize accordion header on form errors

* ui(fees): add info icon to cj fee description text

* fix(fees): wording

* docs(fees): fix typo

* chore: fix comment

* review(fees): lower max valid form value for absolute fee

* review(fees): lower max valid form value for relative fee

Co-authored-by: Gigi <109058+dergigi@users.noreply.github.com>
Co-authored-by: Gigi <dergigi@pm.me>

src/components/Earn.jsx

@@ -15,6 +15,7 @@ import * as Api from '../libs/JmWalletApi'
 import styles from './Earn.module.css'
 import { OrderbookOverlay } from './Orderbook'
 import Balance from './Balance'
+import { factorToPercentage, percentageToFactor } from '../utils'
 
 // In order to prevent state mismatch, the 'maker stop' response is delayed shortly.
 // Even though the API response suggests that the maker has started or stopped immediately, it seems that this is not always the case.
@@ -73,20 +74,6 @@ const initialFormValues = (settings) => ({
     FORM_INPUT_DEFAULT_VALUES.minsize,
 })
 
-const percentageToFactor = (val, precision = 6) => {
-  // Value cannot just be divided
-  // e.g. ✗ 0.0027 / 100 == 0.000027000000000000002
-  // but: ✓ Number((0.0027 / 100).toFixed(6)) = 0.000027
-  return Number((val / 100).toFixed(precision))
-}
-
-const factorToPercentage = (val, precision = 6) => {
-  // Value cannot just be divided
-  // e.g. ✗ 0.000027 * 100 == 0.0026999999999999997
-  // but: ✓ Number((0.000027 * 100).toFixed(6)) = 0.0027
-  return Number((val * 100).toFixed(precision))
-}
-
 const renderOrderType = (val, t) => {
   if (isAbsoluteOffer(val)) {
     return <rb.Badge bg="info">{t('earn.current.text_offer_type_absolute')}</rb.Badge>

src/components/Settings.jsx

@@ -17,6 +17,7 @@ import { fetchFeatures } from '../libs/JamApi'
 import { routes } from '../constants/routes'
 import languages from '../i18n/languages'
 import styles from './Settings.module.css'
+import FeeConfigModal from './settings/FeeConfigModal'
 
 function SeedModal({ show = false, onHide }) {
   const { t } = useTranslation()
@@ -91,6 +92,7 @@ function SeedModal({ show = false, onHide }) {
 
 export default function Settings({ stopWallet }) {
   const [showingSeed, setShowingSeed] = useState(false)
+  const [showingFeeConfig, setShowingFeeConfig] = useState(false)
   const [lockingWallet, setLockingWallet] = useState(false)
   const [showConfirmLockModal, setShowConfirmLockModal] = useState(null)
   const [showLogsEnabled, setShowLogsEnabled] = useState(false)
@@ -235,6 +237,20 @@ export default function Settings({ stopWallet }) {
             </rb.Dropdown.Menu>
           </rb.Dropdown>
 
+          {currentWallet && (
+            <>
+              <rb.Button
+                variant="outline-dark"
+                className={styles['settings-btn']}
+                onClick={(e) => setShowingFeeConfig(true)}
+              >
+                <Sprite symbol="coins" width="24" height="24" />
+                {t('settings.show_fee_config')}
+              </rb.Button>
+              {showingFeeConfig && <FeeConfigModal show={showingFeeConfig} onHide={() => setShowingFeeConfig(false)} />}
+            </>
+          )}
+
           {currentWallet && showLogsEnabled && (
             <>
               <rb.Button variant="outline-dark" className={styles['settings-btn']} onClick={() => setShowingLogs(true)}>

src/components/settings/FeeConfigModal.module.css

@@ -0,0 +1,45 @@
+.feeConfigModal .accordionLoader {
+  height: 3.25rem;
+  margin: 1px 0;
+}
+
+.feeConfigModal form input:not([type='checkbox']) {
+  height: 3.5rem;
+}
+
+.feeConfigModal form :global .form-label {
+  margin-bottom: 0 !important;
+}
+.feeConfigModal form :global .form-label ~ .form-text {
+  display: block;
+  margin-top: 0 !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.infoIcon {
+  border: 1px solid;
+  border-radius: 50%;
+}
+
+.inputGroupText {
+  width: 5ch;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2rem;
+}
+
+.modalFooter .buttonContainer {
+  width: 100%;
+  display: flex !important;
+  justify-content: center !important;
+  gap: 1rem;
+  background-color: transparent !important;
+}
+
+.modalFooter .buttonContainer :global .btn {
+  flex-grow: 1;
+  min-height: 2.8rem;
+  font-weight: 500;
+  border-color: none !important;
+}