feat: display JM and Jam version in info modal

src/components/Footer.tsx

@@ -2,15 +2,24 @@ import { useState, useEffect, useMemo } from 'react'
 import * as rb from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSettings, useSettingsDispatch } from '../context/SettingsContext'
+import { useServiceInfo } from '../context/ServiceInfoContext'
 import { useWebsocketState } from '../context/WebsocketContext'
 import { useCurrentWallet } from '../context/WalletContext'
 import Sprite from './Sprite'
 import Cheatsheet from './Cheatsheet'
 import packageInfo from '../../package.json'
+import { isDevMode } from '../constants/debugFeatures'
+import { toSemVer } from '../utils'
+
+const APP_DISPLAY_VERSION = (() => {
+  const version = toSemVer(packageInfo.version)
+  return !isDevMode() ? `v${version.raw}` : `v${version.major}.${version.minor}.${version.patch + 1}dev`
+})()
 
 export default function Footer() {
   const { t } = useTranslation()
   const settings = useSettings()
+  const serviceInfo = useServiceInfo()
   const settingsDispatch = useSettingsDispatch()
   const websocketState = useWebsocketState()
   const currentWallet = useCurrentWallet()
@@ -46,9 +55,14 @@ export default function Footer() {
           <rb.Card className="warning-card translate-middle shadow-lg">
             <rb.Card.Body>
               <rb.Card.Title className="text-center mb-3">{t('footer.warning_alert_title')}</rb.Card.Title>
-              <p className="text-secondary">{t('footer.warning_alert_text')}</p>
+              <p>{t('footer.warning_alert_text')}</p>
+              <p className="text-secondary">
+                JoinMarket: {serviceInfo?.server?.version?.raw || 'unknown'}
+                <br />
+                Jam: {APP_DISPLAY_VERSION}
+              </p>
               <div className="text-center mt-3">
-                <rb.Button variant="secondary" onClick={() => setShowBetaWarning(false)}>
+                <rb.Button variant="dark" onClick={() => setShowBetaWarning(false)}>
                   {t('footer.warning_alert_button_ok')}
                 </rb.Button>
               </div>
@@ -100,7 +114,7 @@ export default function Footer() {
                 rel="noopener noreferrer"
                 className="d-flex align-items-center text-secondary"
               >
-                v{packageInfo.version}
+                {APP_DISPLAY_VERSION}
               </a>
             </div>
             <div className="d-flex gap-2 pe-2">

src/context/ServiceInfoContext.tsx

@@ -5,6 +5,7 @@ import { useCurrentWallet, useSetCurrentWallet } 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 * as Api from '../libs/JmWalletApi'
 
@@ -57,8 +58,6 @@ interface JmGetInfoData {
   version: string
 }
 
-const UNKNOWN_VERSION: SemVer = { major: 0, minor: 0, patch: 0, raw: 'unknown' }
-
 type SessionFlag = { sessionActive: boolean }
 type MakerRunningFlag = { makerRunning: boolean }
 type CoinjoinInProgressFlag = { coinjoinInProgress: boolean }
@@ -89,21 +88,6 @@ type ServiceInfoUpdate =
   | RescanBlockchainInProgressFlag
   | ServerInfo
 
-const versionRegex = new RegExp(/^(\d+)\.(\d+)\.(\d+).*$/)
-const toSemVer = (data: JmGetInfoData): SemVer => {
-  const arr = versionRegex.exec(data.version)
-  if (!arr || arr.length < 4) {
-    return UNKNOWN_VERSION
-  }
-
-  return {
-    major: parseInt(arr[1], 10),
-    minor: parseInt(arr[2], 10),
-    patch: parseInt(arr[3], 10),
-    raw: data.version,
-  }
-}
-
 interface ServiceInfoContextEntry {
   serviceInfo: ServiceInfo | null
   reloadServiceInfo: ({ signal }: { signal: AbortSignal }) => Promise<ServiceInfo>
@@ -134,7 +118,7 @@ const ServiceInfoProvider = ({ children }: React.PropsWithChildren<{}>) => {
       .then((data: JmGetInfoData) => {
         dispatchServiceInfo({
           server: {
-            version: toSemVer(data),
+            version: toSemVer(data.version),
           },
         })
       })

src/utils.ts

@@ -71,3 +71,20 @@ export const factorToPercentage = (val: number, precision = 6) => {
 }
 
 export const isValidNumber = (val: number | undefined) => typeof val === 'number' && !isNaN(val)
+
+export const UNKNOWN_VERSION: SemVer = { major: 0, minor: 0, patch: 0, raw: 'unknown' }
+
+const versionRegex = new RegExp(/^(\d+)\.(\d+)\.(\d+).*$/)
+export const toSemVer = (raw: string): SemVer => {
+  const arr = versionRegex.exec(raw)
+  if (!arr || arr.length < 4) {
+    return UNKNOWN_VERSION
+  }
+
+  return {
+    major: parseInt(arr[1], 10),
+    minor: parseInt(arr[2], 10),
+    patch: parseInt(arr[3], 10),
+    raw,
+  }
+}