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 <[email protected]> Co-authored-by: Gigi <[email protected]>
joinmarket-webui · Oct 4, 2022 · 54dd396 · 54dd396
1 parent e37fcf0
commit 54dd396
Show file tree

Hide file tree

Showing 11 changed files with 864 additions and 66 deletions.
diff --git a/public/sprite.svg b/public/sprite.svg
diff --git a/src/components/Earn.jsx b/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>

diff --git a/src/components/Settings.jsx b/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)}>

diff --git a/src/components/settings/FeeConfigModal.module.css b/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;
+}