Merge branch 'master' into chore/do-not-preselect-jar

src/components/PaymentConfirmModal.tsx

@@ -11,6 +11,13 @@ import { AmountSats } from '../libs/JmWalletApi'
 import { jarInitial } from './jars/Jar'
 import { isValidNumber } from '../utils'
 
+const feeRange: (feeValues: FeeValues) => [number, number] = (feeValues) => {
+  const feeTargetInSatsPerVByte = feeValues.tx_fees! / 1_000
+  const minFeeSatsPerVByte = Math.max(1, feeTargetInSatsPerVByte)
+  const maxFeeSatsPerVByte = feeTargetInSatsPerVByte * (1 + feeValues.tx_fees_factor!)
+  return [minFeeSatsPerVByte, maxFeeSatsPerVByte]
+}
+
 const useMiningFeeText = ({ feeConfigValues }: { feeConfigValues?: FeeValues }) => {
   const { t } = useTranslation()
 
@@ -24,24 +31,23 @@ const useMiningFeeText = ({ feeConfigValues }: { feeConfigValues?: FeeValues })
     } else if (unit === 'blocks') {
       return t('send.confirm_send_modal.text_miner_fee_in_targeted_blocks', { count: feeConfigValues.tx_fees })
     } else {
-      const feeTargetInSatsPerVByte = feeConfigValues.tx_fees! / 1_000
-      if (feeConfigValues.tx_fees_factor === 0) {
+      const [minFeeSatsPerVByte, maxFeeSatsPerVByte] = feeRange(feeConfigValues)
+      const fractionDigits = 2
+
+      if (minFeeSatsPerVByte.toFixed(fractionDigits) === maxFeeSatsPerVByte.toFixed(fractionDigits)) {
         return t('send.confirm_send_modal.text_miner_fee_in_satspervbyte_exact', {
-          value: feeTargetInSatsPerVByte.toLocaleString(undefined, {
+          value: minFeeSatsPerVByte.toLocaleString(undefined, {
             maximumFractionDigits: Math.log10(1_000),
           }),
         })
       }
 
-      const minFeeSatsPerVByte = Math.max(1, feeTargetInSatsPerVByte * (1 - feeConfigValues.tx_fees_factor!))
-      const maxFeeSatsPerVByte = feeTargetInSatsPerVByte * (1 + feeConfigValues.tx_fees_factor!)
-
       return t('send.confirm_send_modal.text_miner_fee_in_satspervbyte_randomized', {
         min: minFeeSatsPerVByte.toLocaleString(undefined, {
-          maximumFractionDigits: 1,
+          maximumFractionDigits: fractionDigits,
         }),
         max: maxFeeSatsPerVByte.toLocaleString(undefined, {
-          maximumFractionDigits: 1,
+          maximumFractionDigits: fractionDigits,
         }),
       })
     }

src/components/settings/FeeConfigModal.tsx

@@ -278,7 +278,7 @@ const FeeConfigForm = forwardRef(
                           : '',
                       })}
                     </rb.Form.Label>
-                    <rb.Form.Text>{t('settings.fees.description_tx_fees_factor')}</rb.Form.Text>
+                    <rb.Form.Text>{t('settings.fees.description_tx_fees_factor_^0.9.10')}</rb.Form.Text>
                     <rb.InputGroup hasValidation>
                       <rb.InputGroup.Text id="txFeesFactor-addon1" className={styles.inputGroupText}>
                         %

src/context/ServiceInfoContext.tsx

@@ -14,7 +14,7 @@ import { useCurrentWallet, useClearCurrentWallet } from './WalletContext'
 import { useWebsocket } from './WebsocketContext'
 import { clearSession } from '../session'
 import { CJ_STATE_TAKER_RUNNING, CJ_STATE_MAKER_RUNNING } from '../constants/config'
-import { toSemVer, UNKNOWN_VERSION } from '../utils'
+import { noop, setIntervalDebounced, toSemVer, UNKNOWN_VERSION } from '../utils'
 
 import * as Api from '../libs/JmWalletApi'
 
@@ -224,16 +224,21 @@ const ServiceInfoProvider = ({ children }: PropsWithChildren<{}>) => {
   useEffect(() => {
     const abortCtrl = new AbortController()
 
-    const refreshSession = () => {
-      reloadServiceInfo({ signal: abortCtrl.signal }).catch((err) => {
-        if (abortCtrl.signal.aborted) return
-        console.error(err)
-      })
+    const refreshSession = (): Promise<void> => {
+      return reloadServiceInfo({ signal: abortCtrl.signal })
+        .then(noop)
+        .catch((err) => {
+          if (!abortCtrl.signal.aborted) {
+            console.error(err)
+          }
+        })
     }
 
     refreshSession()
 
-    const interval = setInterval(refreshSession, SESSION_REQUEST_INTERVAL)
+    let interval: NodeJS.Timer
+    setIntervalDebounced(refreshSession, SESSION_REQUEST_INTERVAL, (timerId) => (interval = timerId))
+
     return () => {
       clearInterval(interval)
       abortCtrl.abort()

src/context/WalletContext.tsx

@@ -5,7 +5,7 @@ import * as Api from '../libs/JmWalletApi'
 import { WalletBalanceSummary, toBalanceSummary } from './BalanceSummary'
 import { JM_API_AUTH_TOKEN_EXPIRY } from '../constants/config'
 import { isDevMode } from '../constants/debugFeatures'
-import { walletDisplayName } from '../utils'
+import { setIntervalDebounced, walletDisplayName } from '../utils'
 
 const API_AUTH_TOKEN_RENEW_INTERVAL: Milliseconds = isDevMode()
   ? 60 * 1_000
@@ -318,14 +318,14 @@ const WalletProvider = ({ children }: PropsWithChildren<any>) => {
 
     const abortCtrl = new AbortController()
 
-    const renewToken = () => {
+    const renewToken = async () => {
       const session = getSession()
       if (!session?.auth?.refresh_token) {
         console.warn('Cannot renew auth token - no refresh_token available.')
         return
       }
 
-      Api.postToken(
+      return Api.postToken(
         { token: session.auth.token, signal: abortCtrl.signal },
         {
           grant_type: 'refresh_token',
@@ -341,12 +341,15 @@ const WalletProvider = ({ children }: PropsWithChildren<any>) => {
           console.debug('Successfully renewed auth token.')
         })
         .catch((err) => {
-          if (abortCtrl.signal.aborted) return
-          console.error(err)
+          if (!abortCtrl.signal.aborted) {
+            console.error(err)
+          }
         })
     }
 
-    const interval = setInterval(renewToken, API_AUTH_TOKEN_RENEW_INTERVAL)
+    let interval: NodeJS.Timer
+    setIntervalDebounced(renewToken, API_AUTH_TOKEN_RENEW_INTERVAL, (timerId) => (interval = timerId))
+
     return () => {
       clearInterval(interval)
       abortCtrl.abort()

src/context/WebsocketContext.jsx

@@ -1,6 +1,8 @@
-import React, { createContext, useEffect, useState, useContext } from 'react'
+import { createContext, useEffect, useState, useContext } from 'react'
 
 import { useCurrentWallet } from './WalletContext'
+import { noop } from '../utils'
+import { isDevMode } from '../constants/debugFeatures'
 
 const WEBSOCKET_RECONNECT_DELAY_STEP = 1_000
 const WEBSOCKET_RECONNECT_MAX_DELAY = 10_000
@@ -23,8 +25,7 @@ const connectionRetryDelayLinear = (attempt = 0) => {
 // path that will be proxied to the backend server
 const WEBSOCKET_ENDPOINT_PATH = `${window.JM.PUBLIC_PATH}/jmws`
 
-const NOOP = () => {}
-const logToDebugConsoleInDevMode = process.env.NODE_ENV === 'development' ? console.debug : NOOP
+const logToDebugConsoleInDevMode = isDevMode() ? console.debug : noop
 
 const createWebSocket = () => {
   const { protocol, host } = window.location

src/i18n/locales/en/translation.json

@@ -239,7 +239,7 @@
       "feedback_invalid_tx_fees_blocks": "Please provide a valid block target between {{ min }} and {{ max }}.",
       "feedback_invalid_tx_fees_satspervbyte": "Please provide a valid transaction fee in sats/vByte between {{ min }} and {{ max }}.",
       "label_tx_fees_factor": "Fee randomization",
-      "description_tx_fees_factor": "Random fees improve privacy. The percentage is to be understood as a +/- around the base fee. Example: If you set the base fee to 10 sats/vByte and the randomization to 30%, a value between 7 and 13 sats/vByte will be used. Default: 20%.",
+      "description_tx_fees_factor_^0.9.10": "Random fees improve privacy. The percentage is an upward randomization factor of the base fee. Example: If you set the base fee to 10 sats/vByte and the randomization to 30%, a value between 10 and 13 sats/vByte will be used. Default: 20%.",
       "feedback_invalid_tx_fees_factor": "Please provide a valid fee randomization value between {{ min }} and {{ max }}.",
       "title_max_cj_fee_settings": "Collaborator fees",
       "description_max_cj_fee_settings": "Collaborator fees relate to liquidity price and depend on market conditions. Total fees paid for each transaction depend on the amount of collaborators. Additional collaborators increase privacy, but also fees.",

src/utils.ts

@@ -103,3 +103,22 @@ export const toSemVer = (raw?: string): SemVer => {
 export const scrollToTop = (options?: ScrollOptions) => {
   setTimeout(() => window.scrollTo({ behavior: 'smooth', ...options, top: 0, left: 0 }), 21)
 }
+
+export const scrollToTop = () => window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+
+export const noop = () => {}
+
+export const setIntervalDebounced = (
+  callback: () => Promise<void>,
+  delay: Milliseconds,
+  onTimerIdChanged: (timerId: NodeJS.Timer) => void,
+) => {
+  ;(function loop() {
+    onTimerIdChanged(
+      setTimeout(async () => {
+        await callback()
+        loop()
+      }, delay),
+    )
+  })()
+}