From 11ee5b4fa35e3ba77ae501916010d06418b318f3 Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Sun, 8 Oct 2023 15:44:31 +0200
Subject: [PATCH] refactor: Consistent use of `walletName` vs `walletFileName`
 (#671)

* refactor: consistent use of displayName vs walletFileName

* refactor: Settings component from jsx to tsx

* refactor: Wallets component from jsx to tsx

* refactor: Onboarding component from jsx to tsx

* refactor: ScheduleProgress component from jsx to tsx

* chore(i18n): consistent use of global.errors.reason_unknown

* refactor: CreateWallet component from jsx to tsx

* refactor: BitcoinQR from jsx to tsx

* refactor: Receive component from jsx to tsx

* refactor: Earn component from jsx to tsx

* dev(regtest): switch to python:3.11-slim-bookworm as base image

see https://github.com/JoinMarket-Org/joinmarket-clientserver/pull/1484#issuecomment-1751814593

* chore(dev): do not log error when fetch was aborted
---
 .../joinmarket/directory_node/Dockerfile      |   6 +-
 .../joinmarket/latest/Dockerfile              |   6 +-
 package-lock.json                             |  19 +
 package.json                                  |   1 +
 src/components/App.tsx                        |   6 +-
 src/components/BitcoinQR.jsx                  |  33 -
 src/components/BitcoinQR.tsx                  |  41 +
 src/components/CopyButton.tsx                 |  15 +-
 ...eWallet.test.jsx => CreateWallet.test.tsx} |  32 +-
 .../{CreateWallet.jsx => CreateWallet.tsx}    |  88 ++-
 src/components/{Earn.jsx => Earn.tsx}         | 710 ++++++++++--------
 src/components/EarnReport.tsx                 |   2 +-
 src/components/ImportWallet.tsx               |  57 +-
 src/components/Jam.tsx                        |   4 +-
 src/components/MainWalletView.tsx             |   5 +-
 src/components/Navbar.tsx                     |   3 +-
 .../{Onboarding.jsx => Onboarding.tsx}        |   0
 src/components/Orderbook.tsx                  |   2 +-
 src/components/{Receive.jsx => Receive.tsx}   |  36 +-
 src/components/RescanChain.tsx                |   3 +-
 ...eduleProgress.jsx => ScheduleProgress.tsx} |  12 +-
 src/components/Send/index.tsx                 |  25 +-
 .../{Settings.test.jsx => Settings.test.tsx}  |  10 +-
 src/components/{Settings.jsx => Settings.tsx} |  50 +-
 src/components/Wallet.test.tsx                |  30 +-
 src/components/Wallet.tsx                     |  43 +-
 src/components/WalletCreationConfirmation.tsx |  13 +-
 .../{Wallets.test.jsx => Wallets.test.tsx}    | 101 +--
 src/components/{Wallets.jsx => Wallets.tsx}   | 105 +--
 src/components/fb/CreateFidelityBond.tsx      |  19 +-
 src/components/fb/SpendFidelityBondModal.tsx  |   3 +-
 .../jar_details/JarDetailsOverlay.tsx         |   4 +-
 src/components/settings/FeeConfigModal.tsx    |   4 +-
 src/components/settings/SeedModal.tsx         |   6 +-
 src/context/ServiceConfigContext.tsx          |  16 +-
 src/context/ServiceInfoContext.tsx            |  24 +-
 src/context/WalletContext.tsx                 |  63 +-
 src/globals.d.ts                              |   1 +
 src/libs/JmWalletApi.ts                       | 110 +--
 src/session.ts                                |  10 +-
 src/utils.ts                                  |   8 +-
 41 files changed, 976 insertions(+), 750 deletions(-)
 delete mode 100644 src/components/BitcoinQR.jsx
 create mode 100644 src/components/BitcoinQR.tsx
 rename src/components/{CreateWallet.test.jsx => CreateWallet.test.tsx} (91%)
 rename src/components/{CreateWallet.jsx => CreateWallet.tsx} (75%)
 rename src/components/{Earn.jsx => Earn.tsx} (50%)
 rename src/components/{Onboarding.jsx => Onboarding.tsx} (100%)
 rename src/components/{Receive.jsx => Receive.tsx} (92%)
 rename src/components/{ScheduleProgress.jsx => ScheduleProgress.tsx} (95%)
 rename src/components/{Settings.test.jsx => Settings.test.tsx} (82%)
 rename src/components/{Settings.jsx => Settings.tsx} (89%)
 rename src/components/{Wallets.test.jsx => Wallets.test.tsx} (80%)
 rename src/components/{Wallets.jsx => Wallets.tsx} (74%)

diff --git a/docker/regtest/dockerfile-deps/joinmarket/directory_node/Dockerfile b/docker/regtest/dockerfile-deps/joinmarket/directory_node/Dockerfile
index 2ca9a4a39..22b13bfb2 100644
--- a/docker/regtest/dockerfile-deps/joinmarket/directory_node/Dockerfile
+++ b/docker/regtest/dockerfile-deps/joinmarket/directory_node/Dockerfile
@@ -1,9 +1,9 @@
-FROM debian:bullseye-20220801-slim
+FROM python:3.11-slim-bookworm
 
 RUN apt-get update \
     && apt-get install -qq --no-install-recommends gnupg tini procps vim git iproute2 supervisor \
        # joinmarket dependencies
-       curl build-essential automake pkg-config libtool python3-dev python3-venv python3-pip python3-setuptools libltdl-dev \
+       curl build-essential automake pkg-config libtool libltdl-dev \
        tor \
        && rm -rf /var/lib/apt/lists/*
 
@@ -14,7 +14,7 @@ ENV REPO_REF master
 WORKDIR /src
 RUN git clone "$REPO" . --depth=10 --branch "$REPO_BRANCH" && git checkout "$REPO_REF"
 
-RUN ./install.sh --docker-install --disable-secp-check --without-qt
+RUN ./install.sh --docker-install --disable-os-deps-check --disable-secp-check --without-qt
 
 ENV DATADIR /root/.joinmarket
 ENV CONFIG ${DATADIR}/joinmarket.cfg
diff --git a/docker/regtest/dockerfile-deps/joinmarket/latest/Dockerfile b/docker/regtest/dockerfile-deps/joinmarket/latest/Dockerfile
index f875f186a..871c28759 100644
--- a/docker/regtest/dockerfile-deps/joinmarket/latest/Dockerfile
+++ b/docker/regtest/dockerfile-deps/joinmarket/latest/Dockerfile
@@ -1,9 +1,9 @@
-FROM debian:bullseye-20220801-slim
+FROM python:3.11-slim-bookworm
 
 RUN apt-get update \
     && apt-get install -qq --no-install-recommends gnupg tini procps vim git iproute2 supervisor \
        # joinmarket dependencies
-       curl build-essential automake pkg-config libtool python3-dev python3-venv python3-pip python3-setuptools libltdl-dev \
+       curl build-essential automake pkg-config libtool libltdl-dev \
        tor \
        && rm -rf /var/lib/apt/lists/*
 
@@ -14,7 +14,7 @@ ENV REPO_REF master
 WORKDIR /src
 RUN git clone "$REPO" . --depth=10 --branch "$REPO_BRANCH" && git checkout "$REPO_REF"
 
-RUN ./install.sh --docker-install --disable-secp-check --without-qt
+RUN ./install.sh --docker-install --disable-os-deps-check --disable-secp-check --without-qt
 
 ENV DATADIR /root/.joinmarket
 ENV CONFIG ${DATADIR}/joinmarket.cfg
diff --git a/package-lock.json b/package-lock.json
index 0b7be2acf..4c8c1031e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^29.0.3",
         "@types/node": "^17.0.35",
+        "@types/qrcode": "^1.5.2",
         "@types/react": "^17.0.43",
         "@types/react-dom": "^17.0.14",
         "conventional-changelog": "^3.1.25",
@@ -4710,6 +4711,15 @@
       "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==",
       "dev": true
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.2.tgz",
+      "integrity": "sha512-W4KDz75m7rJjFbyCctzCtRzZUj+PrUHV+YjqDp50sSRezTbrtEAIq2iTzC6lISARl3qw+8IlcCyljdcVJE0Wug==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -25662,6 +25672,15 @@
       "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==",
       "dev": true
     },
+    "@types/qrcode": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.2.tgz",
+      "integrity": "sha512-W4KDz75m7rJjFbyCctzCtRzZUj+PrUHV+YjqDp50sSRezTbrtEAIq2iTzC6lISARl3qw+8IlcCyljdcVJE0Wug==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
diff --git a/package.json b/package.json
index 570a6678e..44d813d27 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^29.0.3",
     "@types/node": "^17.0.35",
+    "@types/qrcode": "^1.5.2",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "conventional-changelog": "^3.1.25",
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 310ad0328..f3d39934c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -53,9 +53,9 @@ export default function App() {
   const isReloadingWalletInfo = useMemo(() => reloadingWalletInfoCounter > 0, [reloadingWalletInfoCounter])
 
   const startWallet = useCallback(
-    (name: Api.WalletName, auth: Api.ApiAuthContext) => {
-      setSession({ name, auth })
-      setCurrentWallet({ name, token: auth.token })
+    (walletFileName: Api.WalletFileName, auth: Api.ApiAuthContext) => {
+      setSession({ walletFileName, auth })
+      setCurrentWallet({ walletFileName, token: auth.token })
     },
     [setCurrentWallet],
   )
diff --git a/src/components/BitcoinQR.jsx b/src/components/BitcoinQR.jsx
deleted file mode 100644
index 4d082d257..000000000
--- a/src/components/BitcoinQR.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useEffect, useState } from 'react'
-import QRCode from 'qrcode'
-
-import { satsToBtc } from '../utils'
-
-export const BitcoinQR = ({ address, sats, errorCorrectionLevel = 'H', width = 260 }) => {
-  const [data, setData] = useState(null)
-  const [image, setImage] = useState(null)
-
-  useEffect(() => {
-    const btc = satsToBtc(parseInt(sats, 10)) || 0
-    const uri = `bitcoin:${address}${btc > 0 ? `?amount=${btc.toFixed(8)}` : ''}`
-
-    QRCode.toDataURL(uri, {
-      errorCorrectionLevel,
-      width,
-    })
-      .then((val) => {
-        setImage(val)
-        setData(uri)
-      })
-      .catch(() => {
-        setImage(null)
-        setData(uri)
-      })
-  }, [address, sats, errorCorrectionLevel, width])
-
-  return (
-    <div>
-      <img src={image} alt={data} title={data} />
-    </div>
-  )
-}
diff --git a/src/components/BitcoinQR.tsx b/src/components/BitcoinQR.tsx
new file mode 100644
index 000000000..a033b4636
--- /dev/null
+++ b/src/components/BitcoinQR.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import QRCode from 'qrcode'
+
+import { satsToBtc } from '../utils'
+import { AmountSats, BitcoinAddress } from '../libs/JmWalletApi'
+
+interface BitcoinQRProps {
+  address: BitcoinAddress
+  amount?: AmountSats
+  errorCorrectionLevel?: QRCode.QRCodeErrorCorrectionLevel
+  width?: number
+}
+
+export const BitcoinQR = ({ address, amount, errorCorrectionLevel = 'H', width = 260 }: BitcoinQRProps) => {
+  const [data, setData] = useState<string>()
+  const [image, setImage] = useState<string>()
+
+  useEffect(() => {
+    const btc = amount ? satsToBtc(String(amount)) || 0 : 0
+    const uri = `bitcoin:${address}${btc > 0 ? `?amount=${btc.toFixed(8)}` : ''}`
+
+    QRCode.toDataURL(uri, {
+      errorCorrectionLevel,
+      width,
+    })
+      .then((val) => {
+        setImage(val)
+        setData(uri)
+      })
+      .catch(() => {
+        setImage(undefined)
+        setData(uri)
+      })
+  }, [address, amount, errorCorrectionLevel, width])
+
+  return (
+    <div>
+      <img src={image} alt={data} title={data} />
+    </div>
+  )
+}
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
index 713afc26d..c3a479338 100644
--- a/src/components/CopyButton.tsx
+++ b/src/components/CopyButton.tsx
@@ -38,15 +38,25 @@ interface CopyableProps {
   onSuccess?: () => void
   onError?: (e: Error) => void
   className?: string
+  disabled?: boolean
 }
 
-function Copyable({ value, onSuccess, onError, className, children, ...props }: PropsWithChildren<CopyableProps>) {
+function Copyable({
+  value,
+  onSuccess,
+  onError,
+  className,
+  children,
+  disabled,
+  ...props
+}: PropsWithChildren<CopyableProps>) {
   const valueFallbackInputRef = useRef(null)
 
   return (
     <>
       <button
         {...props}
+        disabled={disabled}
         className={className}
         onClick={() => copyToClipboard(value, valueFallbackInputRef.current!).then(onSuccess, onError)}
       >
@@ -71,6 +81,7 @@ interface CopyButtonProps extends CopyableProps {
   text: ReactNode
   successText?: ReactNode
   successTextTimeout?: number
+  disabled?: boolean
 }
 
 export function CopyButton({
@@ -81,6 +92,7 @@ export function CopyButton({
   successText = text,
   successTextTimeout = 1_500,
   className,
+  disabled,
   ...props
 }: CopyButtonProps) {
   const [showValueCopiedConfirmation, setShowValueCopiedConfirmation] = useState(false)
@@ -100,6 +112,7 @@ export function CopyButton({
   return (
     <Copyable
       {...props}
+      disabled={disabled}
       className={`btn ${className || ''}`}
       value={value}
       onError={onError}
diff --git a/src/components/CreateWallet.test.jsx b/src/components/CreateWallet.test.tsx
similarity index 91%
rename from src/components/CreateWallet.test.jsx
rename to src/components/CreateWallet.test.tsx
index 5238b03d9..6330deea0 100644
--- a/src/components/CreateWallet.test.jsx
+++ b/src/components/CreateWallet.test.tsx
@@ -22,23 +22,26 @@ describe('<CreateWallet />', () => {
   const testWalletName = 'wallet'
   const testWalletPassword = 'correct horse battery staple'
 
-  const setup = (props) => {
-    const startWallet = props?.startWallet || NOOP
+  const setup = ({
+    startWallet = NOOP,
+  }: {
+    startWallet?: (name: apiMock.WalletFileName, auth: apiMock.ApiAuthContext) => void
+  }) => {
     render(
       <BrowserRouter>
-        <CreateWallet startWallet={startWallet} />
+        <CreateWallet startWallet={startWallet} parentRoute="home" />
       </BrowserRouter>,
     )
   }
 
   beforeEach(() => {
     const neverResolvingPromise = new Promise(() => {})
-    apiMock.getGetinfo.mockResolvedValue(neverResolvingPromise)
-    apiMock.getSession.mockResolvedValue(neverResolvingPromise)
+    ;(apiMock.getGetinfo as jest.Mock).mockResolvedValue(neverResolvingPromise)
+    ;(apiMock.getSession as jest.Mock).mockResolvedValue(neverResolvingPromise)
   })
 
   it('should render without errors', () => {
-    act(setup)
+    act(() => setup({}))
 
     expect(screen.getByText('create_wallet.title')).toBeVisible()
     expect(screen.getByLabelText('create_wallet.label_wallet_name')).toBeVisible()
@@ -51,7 +54,7 @@ describe('<CreateWallet />', () => {
   })
 
   it('should show validation messages to user if form is invalid', async () => {
-    act(setup)
+    act(() => setup({}))
 
     expect(await screen.findByText('create_wallet.button_create')).toBeVisible()
 
@@ -67,7 +70,7 @@ describe('<CreateWallet />', () => {
   })
 
   it('should not submit form if passwords do not match', async () => {
-    act(setup)
+    act(() => setup({}))
 
     expect(await screen.findByPlaceholderText('create_wallet.placeholder_password')).toBeVisible()
     expect(await screen.findByPlaceholderText('create_wallet.placeholder_password_confirm')).toBeVisible()
@@ -89,7 +92,7 @@ describe('<CreateWallet />', () => {
   })
 
   it('should advance to WalletCreationConfirmation after wallet is created', async () => {
-    apiMock.postWalletCreate.mockResolvedValueOnce({
+    ;(apiMock.postWalletCreate as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () =>
         Promise.resolve({
@@ -99,7 +102,7 @@ describe('<CreateWallet />', () => {
         }),
     })
 
-    act(setup)
+    act(() => setup({}))
 
     expect(await screen.findByText('create_wallet.button_create')).toBeVisible()
     expect(await screen.queryByText('create_wallet.title_wallet_created')).not.toBeInTheDocument()
@@ -122,7 +125,7 @@ describe('<CreateWallet />', () => {
   })
 
   it('should verify that "skip" button is NOT visible by default (feature is disabled)', async () => {
-    apiMock.postWalletCreate.mockResolvedValueOnce({
+    ;(apiMock.postWalletCreate as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () =>
         Promise.resolve({
@@ -132,7 +135,7 @@ describe('<CreateWallet />', () => {
         }),
     })
 
-    act(setup)
+    act(() => setup({}))
 
     act(() => {
       user.type(screen.getByPlaceholderText('create_wallet.placeholder_wallet_name'), testWalletName)
@@ -163,8 +166,7 @@ describe('<CreateWallet />', () => {
 
   it('should verify that "skip" button IS visible when feature is enabled', async () => {
     __testSetDebugFeatureEnabled('skipWalletBackupConfirmation', true)
-
-    apiMock.postWalletCreate.mockResolvedValueOnce({
+    ;(apiMock.postWalletCreate as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () =>
         Promise.resolve({
@@ -174,7 +176,7 @@ describe('<CreateWallet />', () => {
         }),
     })
 
-    act(setup)
+    act(() => setup({}))
 
     act(() => {
       user.type(screen.getByPlaceholderText('create_wallet.placeholder_wallet_name'), testWalletName)
diff --git a/src/components/CreateWallet.jsx b/src/components/CreateWallet.tsx
similarity index 75%
rename from src/components/CreateWallet.jsx
rename to src/components/CreateWallet.tsx
index 784d3e490..5ae21a7e5 100644
--- a/src/components/CreateWallet.jsx
+++ b/src/components/CreateWallet.tsx
@@ -4,17 +4,27 @@ import { Link, useNavigate } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import PageTitle from './PageTitle'
 import Sprite from './Sprite'
-import WalletCreationConfirmation from './WalletCreationConfirmation'
+import WalletCreationConfirmation, { CreatedWalletInfo } from './WalletCreationConfirmation'
 import PreventLeavingPageByMistake from './PreventLeavingPageByMistake'
 import WalletCreationForm from './WalletCreationForm'
 import MnemonicPhraseInput from './MnemonicPhraseInput'
-import { walletDisplayName } from '../utils'
+import { walletDisplayName, walletDisplayNameToFileName } from '../utils'
 import { useServiceInfo } from '../context/ServiceInfoContext'
 import * as Api from '../libs/JmWalletApi'
-import { routes } from '../constants/routes'
+import { Route, routes } from '../constants/routes'
 import { isDebugFeatureEnabled } from '../constants/debugFeatures'
 
-const BackupConfirmation = ({ wallet, onSuccess, onCancel }) => {
+type CreatedWalletWithAuth = CreatedWalletInfo & {
+  auth: Api.ApiAuthContext
+}
+
+interface BackupConfirmationProps {
+  wallet: CreatedWalletInfo
+  onSuccess: () => void
+  onCancel: () => void
+}
+
+const BackupConfirmation = ({ wallet, onSuccess, onCancel }: BackupConfirmationProps) => {
   const { t } = useTranslation()
 
   const seedphrase = useMemo(() => wallet.seedphrase.split(' '), [wallet])
@@ -83,28 +93,34 @@ const BackupConfirmation = ({ wallet, onSuccess, onCancel }) => {
   )
 }
 
-export default function CreateWallet({ parentRoute, startWallet }) {
+interface CreateWalletProps {
+  parentRoute: Route
+  startWallet: (name: Api.WalletFileName, auth: Api.ApiAuthContext) => void
+}
+
+export default function CreateWallet({ parentRoute, startWallet }: CreateWalletProps) {
   const { t } = useTranslation()
   const serviceInfo = useServiceInfo()
   const navigate = useNavigate()
 
-  const [alert, setAlert] = useState(null)
-  const [createdWallet, setCreatedWallet] = useState(null)
+  const [alert, setAlert] = useState<SimpleAlert>()
+  const [createdWallet, setCreatedWallet] = useState<CreatedWalletWithAuth>()
 
   const createWallet = useCallback(
     async ({ walletName, password }) => {
-      setAlert(null)
+      setAlert(undefined)
 
       try {
-        const res = await Api.postWalletCreate({}, { walletname: walletName, password })
+        const res = await Api.postWalletCreate({}, { walletname: walletDisplayNameToFileName(walletName), password })
         const body = await (res.ok ? res.json() : Api.Helper.throwError(res))
 
         const { seedphrase, walletname: createdWalletFileName } = body
         const auth = Api.Helper.parseAuthProps(body)
+
         setCreatedWallet({ walletFileName: createdWalletFileName, seedphrase, password, auth })
-      } catch (e) {
+      } catch (e: any) {
         const message = t('create_wallet.error_creating_failed', {
-          reason: e.message || 'Unknown reason',
+          reason: e.message || t('global.errors.reason_unknown'),
         })
         setAlert({ variant: 'danger', message })
       }
@@ -113,8 +129,8 @@ export default function CreateWallet({ parentRoute, startWallet }) {
   )
 
   const walletConfirmed = useCallback(() => {
-    if (createdWallet?.walletFileName && createdWallet?.auth) {
-      setAlert(null)
+    if (createdWallet) {
+      setAlert(undefined)
       startWallet(createdWallet.walletFileName, createdWallet.auth)
       navigate(routes.wallet)
     } else {
@@ -122,16 +138,11 @@ export default function CreateWallet({ parentRoute, startWallet }) {
     }
   }, [createdWallet, startWallet, navigate, setAlert, t])
 
-  const isCreated = useMemo(
-    () => createdWallet?.walletFileName && createdWallet?.seedphrase && createdWallet?.password,
-    [createdWallet],
-  )
-  const canCreate = useMemo(() => !isCreated && !serviceInfo?.walletName, [isCreated, serviceInfo])
   const [showBackupConfirmation, setShowBackupConfirmation] = useState(false)
 
   return (
     <div className="create-wallet">
-      {isCreated ? (
+      {createdWallet ? (
         <PageTitle
           title={t('create_wallet.title_wallet_created')}
           subtitle={t('create_wallet.subtitle_wallet_created')}
@@ -141,11 +152,11 @@ export default function CreateWallet({ parentRoute, startWallet }) {
         <PageTitle title={t('create_wallet.title')} />
       )}
       {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
-      {!canCreate && !isCreated ? (
+      {serviceInfo?.walletFileName && !createdWallet ? (
         <rb.Alert variant="warning">
           <Trans i18nKey="create_wallet.alert_other_wallet_unlocked">
-            Currently <strong>{{ walletName: walletDisplayName(serviceInfo?.walletName) }}</strong> is active. You need
-            to lock it first.
+            Currently <strong>{{ walletName: walletDisplayName(serviceInfo.walletFileName) }}</strong> is active. You
+            need to lock it first.
             <Link to={routes.walletList} className="alert-link">
               Go back
             </Link>
@@ -155,7 +166,7 @@ export default function CreateWallet({ parentRoute, startWallet }) {
       ) : (
         <>
           <PreventLeavingPageByMistake />
-          {canCreate && (
+          {!serviceInfo?.walletFileName && !createdWallet && (
             <WalletCreationForm
               onCancel={() => navigate(routes[parentRoute])}
               onSubmit={createWallet}
@@ -164,23 +175,20 @@ export default function CreateWallet({ parentRoute, startWallet }) {
               }
             />
           )}
-          {isCreated && (
-            <>
-              {!showBackupConfirmation ? (
-                <WalletCreationConfirmation
-                  wallet={createdWallet}
-                  submitButtonText={(_) => t('create_wallet.next_button')}
-                  onSubmit={() => setShowBackupConfirmation(true)}
-                />
-              ) : (
-                <BackupConfirmation
-                  wallet={createdWallet}
-                  onSuccess={walletConfirmed}
-                  onCancel={() => setShowBackupConfirmation(false)}
-                />
-              )}
-            </>
-          )}
+          {createdWallet &&
+            (!showBackupConfirmation ? (
+              <WalletCreationConfirmation
+                wallet={createdWallet}
+                submitButtonText={(_) => t('create_wallet.next_button')}
+                onSubmit={async () => setShowBackupConfirmation(true)}
+              />
+            ) : (
+              <BackupConfirmation
+                wallet={createdWallet}
+                onSuccess={walletConfirmed}
+                onCancel={() => setShowBackupConfirmation(false)}
+              />
+            ))}
         </>
       )}
     </div>
diff --git a/src/components/Earn.jsx b/src/components/Earn.tsx
similarity index 50%
rename from src/components/Earn.jsx
rename to src/components/Earn.tsx
index 251b1510b..857980a98 100644
--- a/src/components/Earn.jsx
+++ b/src/components/Earn.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useMemo, useState } from 'react'
-import { Formik } from 'formik'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Formik, FormikErrors } from 'formik'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { useSettings } from '../context/SettingsContext'
-import { useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
-import { useServiceInfo, useReloadServiceInfo } from '../context/ServiceInfoContext'
-import { factorToPercentage, percentageToFactor } from '../utils'
+import { CurrentWallet, useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
+import { useServiceInfo, useReloadServiceInfo, Offer } from '../context/ServiceInfoContext'
+import { factorToPercentage, isValidNumber, percentageToFactor } from '../utils'
 import * as Api from '../libs/JmWalletApi'
 import * as fb from './fb/utils'
 import Sprite from './Sprite'
@@ -19,6 +19,7 @@ import { OrderbookOverlay } from './Orderbook'
 import Balance from './Balance'
 import styles from './Earn.module.css'
 import Accordion from './Accordion'
+import { TFunction } from 'i18next'
 
 // 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.
@@ -34,10 +35,10 @@ const OFFERTYPE_REL = 'sw0reloffer'
 const OFFERTYPE_ABS = 'sw0absoffer'
 
 // can be any of ['sw0reloffer', 'swreloffer', 'reloffer']
-const isRelativeOffer = (offertype) => offertype.includes('reloffer')
+const isRelativeOffer = (offertype: string) => offertype.includes('reloffer')
 
 // can be any of ['sw0absoffer', 'swabsoffer', 'absoffer']
-const isAbsoluteOffer = (offertype) => offertype.includes('absoffer')
+const isAbsoluteOffer = (offertype: string) => offertype.includes('absoffer')
 
 const FORM_INPUT_LOCAL_STORAGE_KEYS = {
   offertype: 'jm-offertype',
@@ -46,48 +47,70 @@ const FORM_INPUT_LOCAL_STORAGE_KEYS = {
   minsize: 'jm-minsize',
 }
 
-const FORM_INPUT_DEFAULT_VALUES = {
+export interface EarnFormValues {
+  offertype: Api.OfferType
+  feeRel: number
+  feeAbs: number
+  minsize: number
+}
+
+const FORM_INPUT_DEFAULT_VALUES: EarnFormValues = {
   offertype: OFFERTYPE_REL,
   feeRel: 0.000_3,
   feeAbs: 250,
   minsize: 100_000,
 }
 
-const persistFormValues = (values) => {
+const persistFormValues = (values: EarnFormValues) => {
   window.localStorage.setItem(FORM_INPUT_LOCAL_STORAGE_KEYS.offertype, values.offertype)
-  window.localStorage.setItem(FORM_INPUT_LOCAL_STORAGE_KEYS.minsize, values.minsize)
+  window.localStorage.setItem(FORM_INPUT_LOCAL_STORAGE_KEYS.minsize, String(values.minsize))
 
   if (isRelativeOffer(values.offertype)) {
-    window.localStorage.setItem(FORM_INPUT_LOCAL_STORAGE_KEYS.feeRel, values.feeRel)
+    window.localStorage.setItem(FORM_INPUT_LOCAL_STORAGE_KEYS.feeRel, String(values.feeRel))
   }
   if (isAbsoluteOffer(values.offertype)) {
-    window.localStorage.setItem(FORM_INPUT_LOCAL_STORAGE_KEYS.feeAbs, values.feeAbs)
+    window.localStorage.setItem(FORM_INPUT_LOCAL_STORAGE_KEYS.feeAbs, String(values.feeAbs))
   }
 }
 
-const initialFormValues = () => ({
-  offertype:
-    window.localStorage.getItem(FORM_INPUT_LOCAL_STORAGE_KEYS.offertype) || FORM_INPUT_DEFAULT_VALUES.offertype,
-  feeRel:
-    parseFloat(window.localStorage.getItem(FORM_INPUT_LOCAL_STORAGE_KEYS.feeRel)) || FORM_INPUT_DEFAULT_VALUES.feeRel,
-  feeAbs:
-    parseInt(window.localStorage.getItem(FORM_INPUT_LOCAL_STORAGE_KEYS.feeAbs), 10) || FORM_INPUT_DEFAULT_VALUES.feeAbs,
-  minsize:
-    parseInt(window.localStorage.getItem(FORM_INPUT_LOCAL_STORAGE_KEYS.minsize), 10) ||
-    FORM_INPUT_DEFAULT_VALUES.minsize,
-})
-
-const renderOrderType = (val, t) => {
-  if (isAbsoluteOffer(val)) {
+const initialFormValues = (): EarnFormValues => {
+  const feeRel = parseFloat(
+    window.localStorage.getItem(FORM_INPUT_LOCAL_STORAGE_KEYS.feeRel) ?? String(FORM_INPUT_DEFAULT_VALUES.feeRel),
+  )
+  const feeAbs = parseInt(
+    window.localStorage.getItem(FORM_INPUT_LOCAL_STORAGE_KEYS.feeAbs) ?? String(FORM_INPUT_DEFAULT_VALUES.feeAbs),
+    10,
+  )
+  const minsize = parseInt(
+    window.localStorage.getItem(FORM_INPUT_LOCAL_STORAGE_KEYS.minsize) ?? String(FORM_INPUT_DEFAULT_VALUES.minsize),
+    10,
+  )
+  const offertype =
+    window.localStorage.getItem(FORM_INPUT_LOCAL_STORAGE_KEYS.offertype) ?? FORM_INPUT_DEFAULT_VALUES.offertype
+  return {
+    offertype,
+    feeRel: isValidNumber(feeRel) ? feeRel : FORM_INPUT_DEFAULT_VALUES.feeRel,
+    feeAbs: isValidNumber(feeAbs) ? feeAbs : FORM_INPUT_DEFAULT_VALUES.feeAbs,
+    minsize: isValidNumber(minsize) ? minsize : FORM_INPUT_DEFAULT_VALUES.minsize,
+  }
+}
+
+const renderOfferType = (offer: Offer, t: TFunction) => {
+  if (isAbsoluteOffer(offer.ordertype)) {
     return <rb.Badge bg="info">{t('earn.current.text_offer_type_absolute')}</rb.Badge>
   }
-  if (isRelativeOffer(val)) {
+  if (isRelativeOffer(offer.ordertype)) {
     return <rb.Badge bg="primary">{t('earn.current.text_offer_type_relative')}</rb.Badge>
   }
-  return <rb.Badge bg="secondary">{val}</rb.Badge>
+  return <rb.Badge bg="secondary">{offer.ordertype}</rb.Badge>
+}
+
+interface CurrentOfferProps {
+  offer: Offer
+  nickname: string
 }
 
-function CurrentOffer({ offer, nickname }) {
+function CurrentOffer({ offer, nickname }: CurrentOfferProps) {
   const { t } = useTranslation()
   const settings = useSettings()
 
@@ -100,7 +123,7 @@ function CurrentOffer({ offer, nickname }) {
             {nickname}:{offer.oid}
           </div>
         </div>
-        <div className="d-flex align-items-center gap-1">{renderOrderType(offer.ordertype, t)}</div>
+        <div className="d-flex align-items-center gap-1">{renderOfferType(offer, t)}</div>
       </div>
       <rb.Container className="mt-2">
         <rb.Row className="mb-1">
@@ -109,7 +132,7 @@ function CurrentOffer({ offer, nickname }) {
               <div className={styles.offerLabel}>{t('earn.current.text_cjfee')}</div>
               <div>
                 {isRelativeOffer(offer.ordertype) ? (
-                  <>{factorToPercentage(offer.cjfee)}%</>
+                  <>{factorToPercentage(parseFloat(offer.cjfee) || 0)}%</>
                 ) : (
                   <>
                     <Balance
@@ -169,7 +192,228 @@ function CurrentOffer({ offer, nickname }) {
   )
 }
 
-export default function Earn({ wallet }) {
+const feeRelMin = 0.0
+const feeRelMax = 0.1 // 10%
+const feeRelPercentageStep = 0.0001
+
+interface EarnFormProps {
+  initialValues?: EarnFormValues
+  submitButtonText: (isSubmitting: boolean) => React.ReactNode | string
+  onSubmit: (values: EarnFormValues) => Promise<void>
+  isLoading: boolean
+  disabled?: boolean
+}
+
+const EarnForm = ({
+  initialValues = FORM_INPUT_DEFAULT_VALUES,
+  submitButtonText,
+  onSubmit,
+  isLoading,
+  disabled = false,
+}: EarnFormProps) => {
+  const { t } = useTranslation()
+
+  const validate = (values: EarnFormValues) => {
+    const errors = {} as FormikErrors<EarnFormValues>
+    const isRelOffer = isRelativeOffer(values.offertype)
+    const isAbsOffer = isAbsoluteOffer(values.offertype)
+
+    if (!isRelOffer && !isAbsOffer) {
+      // currently no need for translation, this should never occur -> input is controlled by toggle
+      errors.offertype = 'Offertype is not supported'
+    }
+
+    if (isRelOffer) {
+      if (typeof values.feeRel !== 'number' || values.feeRel < feeRelMin || values.feeRel > feeRelMax) {
+        errors.feeRel = t('earn.feedback_invalid_rel_fee', {
+          feeRelPercentageMin: `${factorToPercentage(feeRelMin)}%`,
+          feeRelPercentageMax: `${factorToPercentage(feeRelMax)}%`,
+        })
+      }
+    }
+
+    if (isAbsOffer) {
+      if (typeof values.feeAbs !== 'number' || values.feeAbs < 0) {
+        errors.feeAbs = t('earn.feedback_invalid_abs_fee')
+      }
+    }
+
+    if (typeof values.minsize !== 'number' || values.minsize < 0) {
+      errors.minsize = t('earn.feedback_invalid_min_amount')
+    }
+
+    return errors
+  }
+
+  return (
+    <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
+      {({ handleSubmit, setFieldValue, handleChange, handleBlur, values, touched, errors, isSubmitting }) => (
+        <>
+          <rb.Form onSubmit={handleSubmit} noValidate>
+            <Accordion title={t('earn.button_settings')}>
+              <>
+                <rb.Form.Group className="mb-4 d-flex justify-content-center" controlId="offertype">
+                  <SegmentedTabs
+                    name="offertype"
+                    tabs={[
+                      {
+                        label: t('earn.radio_abs_offer_label'),
+                        value: OFFERTYPE_ABS,
+                      },
+                      {
+                        label: t('earn.radio_rel_offer_label'),
+                        value: OFFERTYPE_REL,
+                      },
+                    ]}
+                    onChange={(tab, checked) => {
+                      checked && setFieldValue('offertype', tab.value, true)
+                    }}
+                    initialValue={values.offertype}
+                    disabled={isLoading || isSubmitting}
+                  />
+                </rb.Form.Group>
+                {values.offertype === OFFERTYPE_REL ? (
+                  <rb.Form.Group className="mb-3" controlId="feeRel">
+                    <rb.Form.Label className="mb-0">
+                      {t('earn.label_rel_fee', {
+                        fee: typeof values.feeRel === 'number' ? `(${factorToPercentage(values.feeRel)}%)` : '',
+                      })}
+                    </rb.Form.Label>
+                    <rb.Form.Text className="d-block text-secondary mb-2">{t('earn.description_rel_fee')}</rb.Form.Text>
+                    {isLoading ? (
+                      <rb.Placeholder as="div" animation="wave">
+                        <rb.Placeholder xs={12} className={styles['input-loader']} />
+                      </rb.Placeholder>
+                    ) : (
+                      <rb.InputGroup hasValidation>
+                        <rb.InputGroup.Text id="feeRel-addon1" className={styles.inputGroupText}>
+                          %
+                        </rb.InputGroup.Text>
+                        <rb.Form.Control
+                          aria-label={t('earn.label_rel_fee', { fee: '' })}
+                          className="slashed-zeroes"
+                          type="number"
+                          name="feeRel"
+                          disabled={isSubmitting}
+                          onChange={(e) => {
+                            const value = e.target.value || ''
+                            setFieldValue('feeRel', value !== '' ? percentageToFactor(parseFloat(value)) : '', true)
+                          }}
+                          onBlur={handleBlur}
+                          value={typeof values.feeRel === 'number' ? factorToPercentage(values.feeRel) : ''}
+                          isValid={touched.feeRel && !errors.feeRel}
+                          isInvalid={touched.feeRel && !!errors.feeRel}
+                          min={0}
+                          step={feeRelPercentageStep}
+                        />
+                        <rb.Form.Control.Feedback type="invalid">{errors.feeRel}</rb.Form.Control.Feedback>
+                      </rb.InputGroup>
+                    )}
+                  </rb.Form.Group>
+                ) : (
+                  <rb.Form.Group className="mb-3" controlId="feeAbs">
+                    <rb.Form.Label className="mb-0">
+                      {t('earn.label_abs_fee', {
+                        fee:
+                          typeof values.feeAbs === 'number'
+                            ? `(${values.feeAbs} ${values.feeAbs === 1 ? 'sat' : 'sats'})`
+                            : '',
+                      })}
+                    </rb.Form.Label>
+                    <rb.Form.Text className="d-block text-secondary mb-2">{t('earn.description_abs_fee')}</rb.Form.Text>
+                    {isLoading ? (
+                      <rb.Placeholder as="div" animation="wave">
+                        <rb.Placeholder xs={12} className={styles['input-loader']} />
+                      </rb.Placeholder>
+                    ) : (
+                      <rb.InputGroup hasValidation>
+                        <rb.InputGroup.Text id="feeAbs-addon1" className={styles.inputGroupText}>
+                          <Sprite symbol="sats" width="24" height="24" />
+                        </rb.InputGroup.Text>
+                        <rb.Form.Control
+                          aria-label={t('earn.label_abs_fee', { fee: '' })}
+                          className="slashed-zeroes"
+                          type="number"
+                          name="feeAbs"
+                          value={values.feeAbs}
+                          disabled={isSubmitting}
+                          onChange={handleChange}
+                          onBlur={handleBlur}
+                          isValid={touched.feeAbs && !errors.feeAbs}
+                          isInvalid={touched.feeAbs && !!errors.feeAbs}
+                          min={0}
+                          step={1}
+                        />
+                        <rb.Form.Control.Feedback type="invalid">{errors.feeAbs}</rb.Form.Control.Feedback>
+                      </rb.InputGroup>
+                    )}
+                  </rb.Form.Group>
+                )}
+
+                <rb.Form.Group className="mb-4" controlId="minsize">
+                  <rb.Form.Label>{t('earn.label_min_amount')}</rb.Form.Label>
+                  {isLoading ? (
+                    <rb.Placeholder as="div" animation="wave">
+                      <rb.Placeholder xs={12} className={styles['input-loader']} />
+                    </rb.Placeholder>
+                  ) : (
+                    <rb.InputGroup hasValidation>
+                      <rb.InputGroup.Text id="minsize-addon1" className={styles.inputGroupText}>
+                        <Sprite symbol="sats" width="24" height="24" />
+                      </rb.InputGroup.Text>
+                      <rb.Form.Control
+                        className="slashed-zeroes"
+                        type="number"
+                        name="minsize"
+                        value={values.minsize}
+                        disabled={isSubmitting}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                        isValid={touched.minsize && !errors.minsize}
+                        isInvalid={touched.minsize && !!errors.minsize}
+                        min={0}
+                        step={1_000}
+                      />
+                      <rb.Form.Control.Feedback type="invalid">{errors.minsize}</rb.Form.Control.Feedback>
+                    </rb.InputGroup>
+                  )}
+                </rb.Form.Group>
+              </>
+            </Accordion>
+            <rb.Button
+              className="w-100 mb-4"
+              variant="dark"
+              size="lg"
+              type="submit"
+              disabled={isLoading || isSubmitting || disabled}
+            >
+              <div className="d-flex justify-content-center align-items-center">{submitButtonText(isSubmitting)}</div>
+            </rb.Button>
+          </rb.Form>
+        </>
+      )}
+    </Formik>
+  )
+}
+
+const toStartMakerRequest = (values: EarnFormValues): Api.StartMakerRequest => {
+  // both fee properties need to be provided.
+  // prevent providing an invalid value by setting the ignored prop to zero
+  const cjfee_a = isAbsoluteOffer(values.offertype) ? values.feeAbs : 0
+  const cjfee_r = isRelativeOffer(values.offertype) ? values.feeRel : 0
+  return {
+    ordertype: values.offertype,
+    minsize: values.minsize,
+    cjfee_a,
+    cjfee_r,
+  }
+}
+
+interface EarnProps {
+  wallet: CurrentWallet
+}
+
+export default function Earn({ wallet }: EarnProps) {
   const { t } = useTranslation()
   const settings = useSettings()
   const currentWalletInfo = useCurrentWalletInfo()
@@ -177,56 +421,52 @@ export default function Earn({ wallet }) {
   const serviceInfo = useServiceInfo()
   const reloadServiceInfo = useReloadServiceInfo()
 
-  const [alert, setAlert] = useState(null)
-  const [serviceInfoAlert, setServiceInfoAlert] = useState(null)
+  const [alert, setAlert] = useState<SimpleAlert>()
+  const [serviceInfoAlert, setServiceInfoAlert] = useState<SimpleAlert>()
   const [isLoading, setIsLoading] = useState(true)
   const [isSending, setIsSending] = useState(false)
   const [isWaitingMakerStart, setIsWaitingMakerStart] = useState(false)
   const [isWaitingMakerStop, setIsWaitingMakerStop] = useState(false)
   const [isShowReport, setIsShowReport] = useState(false)
   const [isShowOrderbook, setIsShowOrderbook] = useState(false)
+
+  const [initialValues, setInitialValues] = useState(initialFormValues())
+
   const fidelityBonds = useMemo(() => {
     return currentWalletInfo?.fidelityBondSummary.fbOutputs || []
   }, [currentWalletInfo])
 
-  const [moveToJarFidelityBondId, setMoveToJarFidelityBondId] = useState()
-
-  const startMakerService = (ordertype, minsize, cjfee_a, cjfee_r) => {
-    setIsSending(true)
-    setIsWaitingMakerStart(true)
-
-    const { name: walletName, token } = wallet
-    const data = {
-      ordertype,
-      minsize,
-      cjfee_a,
-      cjfee_r,
-    }
-
-    // There is no response data to check if maker got started:
-    // Wait for the websocket or session response!
-    return (
-      Api.postMakerStart({ walletName, token }, data)
-        .then((res) => (res.ok ? true : Api.Helper.throwError(res)))
-        // show the loader a little longer to avoid flickering
-        .then((result) => new Promise((r) => setTimeout(() => r(result), 200)))
-        .catch((e) => {
-          setIsWaitingMakerStart(false)
-          throw e
-        })
-        .finally(() => setIsSending(false))
-    )
-  }
+  const [moveToJarFidelityBondId, setMoveToJarFidelityBondId] = useState<Api.UtxoId>()
+
+  const startMakerService = useCallback(
+    (values: EarnFormValues) => {
+      setIsSending(true)
+      setIsWaitingMakerStart(true)
+
+      // There is no response data to check if maker got started:
+      // Wait for the websocket or session response!
+      return (
+        Api.postMakerStart({ ...wallet }, toStartMakerRequest(values))
+          .then((res) => (res.ok ? true : Api.Helper.throwError(res)))
+          // show the loader a little longer to avoid flickering
+          .then((result) => new Promise((r) => setTimeout(() => r(result), 200)))
+          .catch((e) => {
+            setIsWaitingMakerStart(false)
+            throw e
+          })
+          .finally(() => setIsSending(false))
+      )
+    },
+    [wallet],
+  )
 
-  const stopMakerService = () => {
+  const stopMakerService = useCallback(() => {
     setIsSending(true)
     setIsWaitingMakerStop(true)
 
-    const { name: walletName, token } = wallet
-
     // There is no response data to check if maker got stopped:
     // Wait for the websocket or session response!
-    return Api.getMakerStop({ walletName, token })
+    return Api.getMakerStop({ ...wallet })
       .then((res) => (res.ok ? true : Api.Helper.throwError(res)))
       .then((result) => new Promise((r) => setTimeout(() => r(result), MAKER_STOP_RESPONSE_DELAY_MS)))
       .catch((e) => {
@@ -234,7 +474,7 @@ export default function Earn({ wallet }) {
         throw e
       })
       .finally(() => setIsSending(false))
-  }
+  }, [wallet])
 
   useEffect(() => {
     if (isSending) return
@@ -258,7 +498,7 @@ export default function Earn({ wallet }) {
   useEffect(() => {
     if (isSending) return
 
-    const makerRunning = serviceInfo?.makerRunning
+    const makerRunning = serviceInfo?.makerRunning === true
 
     const waitingForMakerToStart = isWaitingMakerStart && !makerRunning
     setIsWaitingMakerStart(waitingForMakerToStart)
@@ -272,97 +512,73 @@ export default function Earn({ wallet }) {
       if (!waiting && makerRunning) {
         return { variant: 'success', message: t('earn.alert_running') }
       } else if (!waiting) {
-        return null
+        return undefined
       }
       return current
     })
   }, [isSending, serviceInfo, isWaitingMakerStart, isWaitingMakerStop, t])
 
-  const reloadFidelityBonds = ({ delay }) => {
-    const abortCtrl = new AbortController()
+  const reloadFidelityBonds = useCallback(
+    ({ delay }: { delay: number }) => {
+      const abortCtrl = new AbortController()
 
-    setIsLoading(true)
+      setIsLoading(true)
 
-    new Promise((resolve) => {
-      setTimeout(async () => {
-        resolve(await reloadCurrentWalletInfo.reloadUtxos({ signal: abortCtrl.signal }))
-      }, delay)
-    })
-      .catch((err) => {
-        if (abortCtrl.signal.aborted) return
-        setAlert({ variant: 'danger', message: err.message })
-      })
-      .finally(() => {
-        if (abortCtrl.signal.aborted) return
-        setIsLoading(false)
+      new Promise((resolve) => {
+        setTimeout(async () => {
+          resolve(await reloadCurrentWalletInfo.reloadUtxos({ signal: abortCtrl.signal }))
+        }, delay)
       })
-  }
-
-  const feeRelMin = 0.0
-  const feeRelMax = 0.1 // 10%
-  const feeRelPercentageStep = 0.0001
+        .catch((err) => {
+          if (abortCtrl.signal.aborted) return
+          setAlert({ variant: 'danger', message: err.message || t('global.errors.reason_unknown') })
+        })
+        .finally(() => {
+          if (abortCtrl.signal.aborted) return
+          setIsLoading(false)
+        })
+    },
+    [reloadCurrentWalletInfo, t],
+  )
 
-  const initialValues = initialFormValues()
+  const onSubmitStart = useCallback(
+    async (values: EarnFormValues) => {
+      if (isLoading || isSending || isWaitingMakerStart || isWaitingMakerStop) {
+        return
+      }
 
-  const validate = (values) => {
-    const errors = {}
-    const isRelOffer = isRelativeOffer(values.offertype)
-    const isAbsOffer = isAbsoluteOffer(values.offertype)
+      setAlert(undefined)
 
-    if (!isRelOffer && !isAbsOffer) {
-      // currently no need for translation, this should never occur -> input is controlled by toggle
-      errors.offertype = 'Offertype is not supported'
-    }
+      try {
+        persistFormValues(values)
+        setInitialValues(initialFormValues())
 
-    if (isRelOffer) {
-      if (typeof values.feeRel !== 'number' || values.feeRel < feeRelMin || values.feeRel > feeRelMax) {
-        errors.feeRel = t('earn.feedback_invalid_rel_fee', {
-          feeRelPercentageMin: `${factorToPercentage(feeRelMin)}%`,
-          feeRelPercentageMax: `${factorToPercentage(feeRelMax)}%`,
-        })
-      }
-    }
+        setServiceInfoAlert({ variant: 'success', message: t('earn.alert_starting') })
 
-    if (isAbsOffer) {
-      if (typeof values.feeAbs !== 'number' || values.feeAbs < 0) {
-        errors.feeAbs = t('earn.feedback_invalid_abs_fee')
+        await startMakerService(values)
+      } catch (e: any) {
+        setServiceInfoAlert(undefined)
+        setAlert({ variant: 'danger', message: e.message || t('global.errors.reason_unknown') })
       }
-    }
-
-    if (typeof values.minsize !== 'number' || values.minsize < 0) {
-      errors.minsize = t('earn.feedback_invalid_min_amount')
-    }
-
-    return errors
-  }
+    },
+    [startMakerService, isLoading, isSending, isWaitingMakerStart, isWaitingMakerStop, t],
+  )
 
-  const onSubmit = async (values) => {
+  const onSubmitStop = useCallback(async () => {
     if (isLoading || isSending || isWaitingMakerStart || isWaitingMakerStop) {
       return
     }
 
-    setAlert(null)
+    setAlert(undefined)
 
     try {
-      if (serviceInfo?.makerRunning === true) {
-        setServiceInfoAlert({ variant: 'success', message: t('earn.alert_stopping') })
-        await stopMakerService()
-      } else {
-        persistFormValues(values)
-
-        setServiceInfoAlert({ variant: 'success', message: t('earn.alert_starting') })
-
-        // both fee properties need to be provided.
-        // prevent providing an invalid value by setting the ignored prop to zero
-        const feeAbs = isAbsoluteOffer(values.offertype) ? values.feeAbs : 0
-        const feeRel = isRelativeOffer(values.offertype) ? values.feeRel : 0
-        await startMakerService(values.offertype, values.minsize, feeAbs, feeRel)
-      }
-    } catch (e) {
-      setServiceInfoAlert(null)
-      setAlert({ variant: 'danger', message: e.message })
+      setServiceInfoAlert({ variant: 'success', message: t('earn.alert_stopping') })
+      await stopMakerService()
+    } catch (e: any) {
+      setServiceInfoAlert(undefined)
+      setAlert({ variant: 'danger', message: e.message || t('global.errors.reason_unknown') })
     }
-  }
+  }, [stopMakerService, isLoading, isSending, isWaitingMakerStart, isWaitingMakerStop, t])
 
   return (
     <div className={styles['earn']}>
@@ -385,7 +601,7 @@ export default function Earn({ wallet }) {
             (serviceInfo?.offers && serviceInfo?.nickname ? (
               <>
                 {serviceInfo.offers.map((offer, index) => (
-                  <CurrentOffer key={index} offer={offer} nickname={serviceInfo.nickname} />
+                  <CurrentOffer key={index} offer={offer} nickname={serviceInfo.nickname || '-'} />
                 ))}
               </>
             ) : (
@@ -468,162 +684,18 @@ export default function Earn({ wallet }) {
               </div>
             </>
           )}
-          {!serviceInfo?.coinjoinInProgress && (
-            <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
-              {({ handleSubmit, setFieldValue, handleChange, handleBlur, values, touched, errors, isSubmitting }) => (
-                <>
-                  <rb.Form onSubmit={handleSubmit} noValidate>
-                    {!serviceInfo?.makerRunning && !isWaitingMakerStart && !isWaitingMakerStop && (
-                      <Accordion title={t('earn.button_settings')}>
-                        <>
-                          <rb.Form.Group className="mb-4 d-flex justify-content-center" controlId="offertype">
-                            <SegmentedTabs
-                              name="offertype"
-                              tabs={[
-                                {
-                                  label: t('earn.radio_abs_offer_label'),
-                                  value: OFFERTYPE_ABS,
-                                },
-                                {
-                                  label: t('earn.radio_rel_offer_label'),
-                                  value: OFFERTYPE_REL,
-                                },
-                              ]}
-                              onChange={(tab, checked) => {
-                                checked && setFieldValue('offertype', tab.value, true)
-                              }}
-                              initialValue={values.offertype}
-                              disabled={isLoading || isSubmitting}
-                            />
-                          </rb.Form.Group>
-                          {values.offertype === OFFERTYPE_REL ? (
-                            <rb.Form.Group className="mb-3" controlId="feeRel">
-                              <rb.Form.Label className="mb-0">
-                                {t('earn.label_rel_fee', {
-                                  fee:
-                                    typeof values.feeRel === 'number' ? `(${factorToPercentage(values.feeRel)}%)` : '',
-                                })}
-                              </rb.Form.Label>
-                              <rb.Form.Text className="d-block text-secondary mb-2">
-                                {t('earn.description_rel_fee')}
-                              </rb.Form.Text>
-                              {isLoading ? (
-                                <rb.Placeholder as="div" animation="wave">
-                                  <rb.Placeholder xs={12} className={styles['input-loader']} />
-                                </rb.Placeholder>
-                              ) : (
-                                <rb.InputGroup hasValidation>
-                                  <rb.InputGroup.Text id="feeRel-addon1" className={styles.inputGroupText}>
-                                    %
-                                  </rb.InputGroup.Text>
-                                  <rb.Form.Control
-                                    aria-label={t('earn.label_rel_fee', { fee: '' })}
-                                    className="slashed-zeroes"
-                                    type="number"
-                                    name="feeRel"
-                                    disabled={isSubmitting}
-                                    onChange={(e) => {
-                                      const value = e.target.value || ''
-                                      setFieldValue('feeRel', value !== '' ? percentageToFactor(value) : '', true)
-                                    }}
-                                    onBlur={handleBlur}
-                                    value={typeof values.feeRel === 'number' ? factorToPercentage(values.feeRel) : ''}
-                                    isValid={touched.feeRel && !errors.feeRel}
-                                    isInvalid={touched.feeRel && !!errors.feeRel}
-                                    min={0}
-                                    step={feeRelPercentageStep}
-                                  />
-                                  <rb.Form.Control.Feedback type="invalid">{errors.feeRel}</rb.Form.Control.Feedback>
-                                </rb.InputGroup>
-                              )}
-                            </rb.Form.Group>
-                          ) : (
-                            <rb.Form.Group className="mb-3" controlId="feeAbs">
-                              <rb.Form.Label className="mb-0">
-                                {t('earn.label_abs_fee', {
-                                  fee:
-                                    typeof values.feeAbs === 'number'
-                                      ? `(${values.feeAbs} ${values.feeAbs === 1 ? 'sat' : 'sats'})`
-                                      : '',
-                                })}
-                              </rb.Form.Label>
-                              <rb.Form.Text className="d-block text-secondary mb-2">
-                                {t('earn.description_abs_fee')}
-                              </rb.Form.Text>
-                              {isLoading ? (
-                                <rb.Placeholder as="div" animation="wave">
-                                  <rb.Placeholder xs={12} className={styles['input-loader']} />
-                                </rb.Placeholder>
-                              ) : (
-                                <rb.InputGroup hasValidation>
-                                  <rb.InputGroup.Text id="feeAbs-addon1" className={styles.inputGroupText}>
-                                    <Sprite symbol="sats" width="24" height="24" />
-                                  </rb.InputGroup.Text>
-                                  <rb.Form.Control
-                                    aria-label={t('earn.label_abs_fee', { fee: '' })}
-                                    className="slashed-zeroes"
-                                    type="number"
-                                    name="feeAbs"
-                                    value={values.feeAbs}
-                                    disabled={isSubmitting}
-                                    onChange={handleChange}
-                                    onBlur={handleBlur}
-                                    isValid={touched.feeAbs && !errors.feeAbs}
-                                    isInvalid={touched.feeAbs && !!errors.feeAbs}
-                                    min={0}
-                                    step={1}
-                                  />
-                                  <rb.Form.Control.Feedback type="invalid">{errors.feeAbs}</rb.Form.Control.Feedback>
-                                </rb.InputGroup>
-                              )}
-                            </rb.Form.Group>
-                          )}
 
-                          <rb.Form.Group className="mb-4" controlId="minsize">
-                            <rb.Form.Label>{t('earn.label_min_amount')}</rb.Form.Label>
-                            {isLoading ? (
-                              <rb.Placeholder as="div" animation="wave">
-                                <rb.Placeholder xs={12} className={styles['input-loader']} />
-                              </rb.Placeholder>
-                            ) : (
-                              <rb.InputGroup hasValidation>
-                                <rb.InputGroup.Text id="minsize-addon1" className={styles.inputGroupText}>
-                                  <Sprite symbol="sats" width="24" height="24" />
-                                </rb.InputGroup.Text>
-                                <rb.Form.Control
-                                  className="slashed-zeroes"
-                                  type="number"
-                                  name="minsize"
-                                  value={values.minsize}
-                                  disabled={isSubmitting}
-                                  onChange={handleChange}
-                                  onBlur={handleBlur}
-                                  isValid={touched.minsize && !errors.minsize}
-                                  isInvalid={touched.minsize && errors.minsize}
-                                  min={0}
-                                  step={1_000}
-                                />
-                                <rb.Form.Control.Feedback type="invalid">{errors.minsize}</rb.Form.Control.Feedback>
-                              </rb.InputGroup>
-                            )}
-                          </rb.Form.Group>
-                        </>
-                      </Accordion>
-                    )}
-                    <rb.Button
-                      className="w-100 mb-4"
-                      variant="dark"
-                      size="lg"
-                      type="submit"
-                      disabled={
-                        isLoading ||
-                        isSubmitting ||
-                        serviceInfo?.rescanning === true ||
-                        isWaitingMakerStart ||
-                        isWaitingMakerStop
-                      }
-                    >
-                      <div className="d-flex justify-content-center align-items-center">
+          {!serviceInfo?.coinjoinInProgress && (
+            <>
+              {!serviceInfo?.makerRunning && !isWaitingMakerStart && !isWaitingMakerStop ? (
+                <EarnForm
+                  initialValues={initialValues}
+                  onSubmit={onSubmitStart}
+                  isLoading={isLoading}
+                  disabled={serviceInfo?.rescanning === true || isWaitingMakerStart || isWaitingMakerStop}
+                  submitButtonText={(_) => {
+                    return (
+                      <>
                         {isWaitingMakerStart || isWaitingMakerStop ? (
                           <>
                             <rb.Spinner
@@ -640,12 +712,52 @@ export default function Earn({ wallet }) {
                         ) : (
                           <>{serviceInfo?.makerRunning === true ? t('earn.button_stop') : t('earn.button_start')}</>
                         )}
-                      </div>
-                    </rb.Button>
-                  </rb.Form>
-                </>
+                      </>
+                    )
+                  }}
+                />
+              ) : (
+                <Formik initialValues={{}} onSubmit={onSubmitStop}>
+                  {({ handleSubmit, isSubmitting }) => (
+                    <rb.Form onSubmit={handleSubmit} noValidate>
+                      <rb.Button
+                        className="w-100 mb-4"
+                        variant="dark"
+                        size="lg"
+                        type="submit"
+                        disabled={
+                          isLoading ||
+                          serviceInfo?.makerRunning !== true ||
+                          serviceInfo?.rescanning === true ||
+                          isSubmitting ||
+                          isWaitingMakerStart ||
+                          isWaitingMakerStop
+                        }
+                      >
+                        <div className="d-flex justify-content-center align-items-center">
+                          {isWaitingMakerStart || isWaitingMakerStop ? (
+                            <>
+                              <rb.Spinner
+                                as="span"
+                                animation="border"
+                                size="sm"
+                                role="status"
+                                aria-hidden="true"
+                                className="me-2"
+                              />
+                              {isWaitingMakerStart && t('earn.text_starting')}
+                              {isWaitingMakerStop && t('earn.text_stopping')}
+                            </>
+                          ) : (
+                            <>{t('earn.button_stop')}</>
+                          )}
+                        </div>
+                      </rb.Button>
+                    </rb.Form>
+                  )}
+                </Formik>
               )}
-            </Formik>
+            </>
           )}
         </rb.Col>
       </rb.Row>
@@ -654,7 +766,7 @@ export default function Earn({ wallet }) {
           <OrderbookOverlay
             show={isShowOrderbook}
             onHide={() => setIsShowOrderbook(false)}
-            nickname={serviceInfo?.nickname}
+            nickname={serviceInfo?.nickname ?? undefined}
           />
           <rb.Button
             variant="outline-dark"
diff --git a/src/components/EarnReport.tsx b/src/components/EarnReport.tsx
index 9bf6ad9c9..7685eae11 100644
--- a/src/components/EarnReport.tsx
+++ b/src/components/EarnReport.tsx
@@ -356,7 +356,7 @@ export function EarnReportOverlay({ show, onHide }: rb.OffcanvasProps) {
         .catch((e) => {
           if (signal.aborted) return
           const message = t('earn.error_loading_report_failed', {
-            reason: e.message || 'Unknown reason',
+            reason: e.message || t('global.errors.reason_unknown'),
           })
           setAlert({ variant: 'danger', message })
         })
diff --git a/src/components/ImportWallet.tsx b/src/components/ImportWallet.tsx
index d6cfc1b90..5ae94bbe3 100644
--- a/src/components/ImportWallet.tsx
+++ b/src/components/ImportWallet.tsx
@@ -13,15 +13,15 @@ import Accordion from './Accordion'
 import WalletCreationForm, { CreateWalletFormValues } from './WalletCreationForm'
 import MnemonicPhraseInput from './MnemonicPhraseInput'
 import PreventLeavingPageByMistake from './PreventLeavingPageByMistake'
-import { WalletInfo, WalletInfoSummary } from './WalletCreationConfirmation'
+import { CreatedWalletInfo, WalletCreationInfoSummary } from './WalletCreationConfirmation'
 import { isDevMode, isDebugFeatureEnabled } from '../constants/debugFeatures'
 import { routes, Route } from '../constants/routes'
 import {
   SEGWIT_ACTIVATION_BLOCK,
   DUMMY_MNEMONIC_PHRASE,
-  JM_WALLET_FILE_EXTENSION,
   walletDisplayName,
   isValidNumber,
+  walletDisplayNameToFileName,
 } from '../utils'
 import { JM_GAPLIMIT_DEFAULT, JM_GAPLIMIT_CONFIGKEY } from '../constants/config'
 
@@ -83,6 +83,10 @@ interface ImportWalletDetailsFormProps {
   onSubmit: (values: ImportWalletDetailsFormValues) => Promise<void>
 }
 
+type RecoveredWalletWithAuth = Pick<CreatedWalletInfo, 'walletFileName'> & {
+  auth: Api.ApiAuthContext
+}
+
 const ImportWalletDetailsForm = ({
   initialValues = initialImportWalletDetailsFormValues,
   submitButtonText,
@@ -294,9 +298,9 @@ const ImportWalletConfirmation = ({
 }: ImportWalletConfirmationProps) => {
   const { t, i18n } = useTranslation()
 
-  const walletInfo = useMemo<WalletInfo>(
+  const walletInfo = useMemo<CreatedWalletInfo>(
     () => ({
-      walletFileName: walletDetails.walletName + JM_WALLET_FILE_EXTENSION,
+      walletFileName: walletDisplayNameToFileName(walletDetails.walletName),
       password: walletDetails.password,
       seedphrase: importDetails.mnemonicPhrase.join(' '),
     }),
@@ -315,7 +319,7 @@ const ImportWalletConfirmation = ({
     >
       {({ handleSubmit, values, isSubmitting, submitCount }) => (
         <rb.Form onSubmit={handleSubmit} noValidate lang={i18n.resolvedLanguage || i18n.language}>
-          <WalletInfoSummary walletInfo={walletInfo} revealSensitiveInfo={!isSubmitting && submitCount === 0} />
+          <WalletCreationInfoSummary walletInfo={walletInfo} revealSensitiveInfo={!isSubmitting && submitCount === 0} />
 
           <Accordion
             title={t('import_wallet.import_details.import_options')}
@@ -374,7 +378,7 @@ enum ImportWalletSteps {
 
 interface ImportWalletProps {
   parentRoute: Route
-  startWallet: (name: Api.WalletName, auth: Api.ApiAuthContext) => void
+  startWallet: (name: Api.WalletFileName, auth: Api.ApiAuthContext) => void
 }
 
 export default function ImportWallet({ parentRoute, startWallet }: ImportWalletProps) {
@@ -388,11 +392,11 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
   const [alert, setAlert] = useState<SimpleAlert>()
   const [createWalletFormValues, setCreateWalletFormValues] = useState<CreateWalletFormValues>()
   const [importDetailsFormValues, setImportDetailsFormValues] = useState<ImportWalletDetailsFormValues>()
-  const [recoveredWallet, setRecoveredWallet] = useState<{ walletFileName: Api.WalletName; auth: Api.ApiAuthContext }>()
+  const [recoveredWallet, setRecoveredWallet] = useState<RecoveredWalletWithAuth>()
 
   const isRecovered = useMemo(() => !!recoveredWallet?.walletFileName && recoveredWallet?.auth, [recoveredWallet])
   const canRecover = useMemo(
-    () => !isRecovered && !serviceInfo?.walletName && !serviceInfo?.rescanning,
+    () => !isRecovered && !serviceInfo?.walletFileName && !serviceInfo?.rescanning,
     [isRecovered, serviceInfo],
   )
 
@@ -431,7 +435,13 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
         seedphrase,
         gaplimit,
         blockheight,
-      }: { walletname: Api.WalletName; password: string; seedphrase: string; gaplimit: number; blockheight: number },
+      }: {
+        walletname: Api.WalletFileName
+        password: string
+        seedphrase: string
+        gaplimit: number
+        blockheight: number
+      },
     ) => {
       setAlert(undefined)
 
@@ -440,15 +450,15 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
         const recoverResponse = await Api.postWalletRecover({ signal }, { walletname, password, seedphrase })
         const recoverBody = await (recoverResponse.ok ? recoverResponse.json() : Api.Helper.throwError(recoverResponse))
 
-        const { walletname: importedWalletFileName } = recoverBody
+        const { walletname: walletFileName } = recoverBody
         let auth: Api.ApiAuthContext = Api.Helper.parseAuthProps(recoverBody)
-        setRecoveredWallet({ walletFileName: importedWalletFileName, auth })
+        setRecoveredWallet({ walletFileName, auth })
 
         // Step #2: update the gaplimit config value if necessary
         const originalGaplimit = await refreshConfigValues({
           signal,
           keys: [JM_GAPLIMIT_CONFIGKEY],
-          wallet: { name: importedWalletFileName, token: auth.token },
+          wallet: { walletFileName, token: auth.token },
         })
           .then((it) => it[JM_GAPLIMIT_CONFIGKEY.section] || {})
           .then((it) => parseInt(it[JM_GAPLIMIT_CONFIGKEY.field] || String(JM_GAPLIMIT_DEFAULT), 10))
@@ -466,16 +476,17 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
                 value: String(gaplimit),
               },
             ],
-            wallet: { name: importedWalletFileName, token: auth.token },
+            wallet: { walletFileName, token: auth.token },
           })
         }
 
         // Step #3: lock and unlock the wallet (for new addresses to be imported)
-        const lockResponse = await Api.getWalletLock({ walletName: importedWalletFileName, token: auth.token })
+        const lockResponse = await Api.getWalletLock({ walletFileName, token: auth.token })
         if (!lockResponse.ok) await Api.Helper.throwError(lockResponse)
 
-        const unlockResponse = await Api.postWalletUnlock({ walletName: importedWalletFileName }, { password })
+        const unlockResponse = await Api.postWalletUnlock({ walletFileName }, { password })
         const unlockBody = await (unlockResponse.ok ? unlockResponse.json() : Api.Helper.throwError(unlockResponse))
+
         auth = Api.Helper.parseAuthProps(unlockBody)
 
         // Step #4: reset `gaplimit´ to previous value if necessary
@@ -489,7 +500,7 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
                 value: String(originalGaplimit),
               },
             ],
-            wallet: { name: importedWalletFileName, token: auth.token },
+            wallet: { walletFileName, token: auth.token },
           })
         }
 
@@ -498,7 +509,7 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
 
         const rescanResponse = await Api.getRescanBlockchain({
           signal,
-          walletName: importedWalletFileName,
+          walletFileName,
           token: unlockBody.token,
           blockheight,
         })
@@ -510,12 +521,12 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
           })
         }
 
-        startWallet(importedWalletFileName, auth)
+        startWallet(walletFileName, auth)
         navigate(routes.wallet)
       } catch (e: any) {
         if (signal.aborted) return
         const message = t('import_wallet.error_importing_failed', {
-          reason: e.message || 'Unknown reason',
+          reason: e.message || t('global.errors.reason_unknown'),
         })
         setAlert({ variant: 'danger', message })
       }
@@ -547,11 +558,11 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
       {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
       {!canRecover && !isRecovered ? (
         <>
-          {serviceInfo?.walletName && (
+          {serviceInfo?.walletFileName && (
             <rb.Alert variant="warning">
               <Trans i18nKey="import_wallet.alert_other_wallet_unlocked">
-                Currently <strong>{{ walletName: walletDisplayName(serviceInfo.walletName) }}</strong> is active. You
-                need to lock it first.
+                Currently <strong>{{ walletName: walletDisplayName(serviceInfo.walletFileName) }}</strong> is active.
+                You need to lock it first.
                 <Link to={routes.walletList} className="alert-link">
                   Go back
                 </Link>
@@ -625,7 +636,7 @@ export default function ImportWallet({ parentRoute, startWallet }: ImportWalletP
                 const abortCtrl = new AbortController()
 
                 return recoverWallet(abortCtrl.signal, {
-                  walletname: (values.walletDetails.walletName + JM_WALLET_FILE_EXTENSION) as Api.WalletName,
+                  walletname: walletDisplayNameToFileName(values.walletDetails.walletName),
                   password: values.walletDetails.password,
                   seedphrase: values.importDetails.mnemonicPhrase.join(' '),
                   gaplimit: values.importDetails.gaplimit,
diff --git a/src/components/Jam.tsx b/src/components/Jam.tsx
index b61e2538d..2314fa221 100644
--- a/src/components/Jam.tsx
+++ b/src/components/Jam.tsx
@@ -294,7 +294,7 @@ export default function Jam({ wallet }: JamProps) {
     }
 
     const abortCtrl = new AbortController()
-    return Api.postSchedulerStart({ signal: abortCtrl.signal, walletName: wallet.name, token: wallet.token }, body)
+    return Api.postSchedulerStart({ ...wallet, signal: abortCtrl.signal }, body)
       .then((res) => (res.ok ? true : Api.Helper.throwError(res, t('scheduler.error_starting_schedule_failed'))))
       .then((_) => reloadServiceInfo({ signal: abortCtrl.signal }))
       .catch((err) => {
@@ -313,7 +313,7 @@ export default function Jam({ wallet }: JamProps) {
     setIsWaitingSchedulerStop(true)
 
     const abortCtrl = new AbortController()
-    return Api.getTakerStop({ signal: abortCtrl.signal, walletName: wallet.name, token: wallet.token })
+    return Api.getTakerStop({ ...wallet, signal: abortCtrl.signal })
       .then((res) => (res.ok ? true : Api.Helper.throwError(res, t('scheduler.error_stopping_schedule_failed'))))
       .then((_) => reloadServiceInfo({ signal: abortCtrl.signal }))
       .catch((err) => {
diff --git a/src/components/MainWalletView.tsx b/src/components/MainWalletView.tsx
index db64ae93e..7af7f68ca 100644
--- a/src/components/MainWalletView.tsx
+++ b/src/components/MainWalletView.tsx
@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom'
 import { useServiceInfo } from '../context/ServiceInfoContext'
 import { useSettings, useSettingsDispatch } from '../context/SettingsContext'
 import { CurrentWallet, useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
-import { walletDisplayName } from '../utils'
 import * as Api from '../libs/JmWalletApi'
 import { routes } from '../constants/routes'
 import Balance from './Balance'
@@ -147,7 +146,7 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
       )}
       {serviceInfo?.rescanning === true ? (
         <rb.Row>
-          <WalletHeaderRescanning walletName={walletDisplayName(wallet.name)} isLoading={isLoading} />
+          <WalletHeaderRescanning walletName={wallet.displayName} isLoading={isLoading} />
         </rb.Row>
       ) : (
         <rb.Row onClick={() => settingsDispatch({ showBalance: !settings.showBalance })} style={{ cursor: 'pointer' }}>
@@ -155,7 +154,7 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
             <WalletHeaderPlaceholder />
           ) : (
             <WalletHeader
-              walletName={walletDisplayName(wallet.name)}
+              walletName={wallet.displayName}
               balance={currentWalletInfo.balanceSummary.calculatedTotalBalanceInSats}
               unit={settings.unit}
               showBalance={settings.showBalance}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 32389838e..5df931248 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -9,7 +9,6 @@ import { TabActivityIndicator, JoiningIndicator } from './ActivityIndicators'
 import { useSettings, useSettingsDispatch } from '../context/SettingsContext'
 import { CurrentWallet, useCurrentWallet, useCurrentWalletInfo } from '../context/WalletContext'
 import { useServiceInfo, useSessionConnectionError } from '../context/ServiceInfoContext'
-import { walletDisplayName } from '../utils'
 import { routes } from '../constants/routes'
 import { AmountSats } from '../libs/JmWalletApi'
 
@@ -49,7 +48,7 @@ const WalletPreview = ({ wallet, rescanInProgress, totalBalance, unit, showBalan
         />
       </div>
       <div className="d-flex flex-column ms-2 fs-6">
-        {wallet && <div className="fw-normal">{walletDisplayName(wallet.name)}</div>}
+        {wallet && <div className="fw-normal">{wallet.displayName}</div>}
         <div className="text-body">
           {rescanInProgress ? (
             <div className="cursor-wait">{t('navbar.text_rescan_in_progress')}</div>
diff --git a/src/components/Onboarding.jsx b/src/components/Onboarding.tsx
similarity index 100%
rename from src/components/Onboarding.jsx
rename to src/components/Onboarding.tsx
diff --git a/src/components/Orderbook.tsx b/src/components/Orderbook.tsx
index 0dbcd2180..5e192d127 100644
--- a/src/components/Orderbook.tsx
+++ b/src/components/Orderbook.tsx
@@ -407,7 +407,7 @@ export function OrderbookOverlay({ nickname, show, onHide }: OrderbookOverlayPro
         .catch((e) => {
           if (signal.aborted) return
           const message = t('orderbook.error_loading_orderbook_failed', {
-            reason: e.message || 'Unknown reason',
+            reason: e.message || t('global.errors.reason_unknown'),
           })
           setAlert({ variant: 'danger', message })
         })
diff --git a/src/components/Receive.jsx b/src/components/Receive.tsx
similarity index 92%
rename from src/components/Receive.jsx
rename to src/components/Receive.tsx
index 5fe8ca0a2..d7b059b8c 100644
--- a/src/components/Receive.jsx
+++ b/src/components/Receive.tsx
@@ -1,10 +1,10 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, FormEvent } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 import { useSettings } from '../context/SettingsContext'
 import { useServiceInfo } from '../context/ServiceInfoContext'
-import { useCurrentWalletInfo } from '../context/WalletContext'
+import { CurrentWallet, useCurrentWalletInfo } from '../context/WalletContext'
 import * as Api from '../libs/JmWalletApi'
 import { BitcoinQR } from './BitcoinQR'
 import PageTitle from './PageTitle'
@@ -15,20 +15,27 @@ import { SelectableJar, jarFillLevel } from './jars/Jar'
 import styles from './Receive.module.css'
 import Accordion from './Accordion'
 
-export default function Receive({ wallet }) {
+interface ReceiveProps {
+  wallet: CurrentWallet
+}
+
+export default function Receive({ wallet }: ReceiveProps) {
   const { t } = useTranslation()
   const location = useLocation()
   const settings = useSettings()
   const serviceInfo = useServiceInfo()
   const walletInfo = useCurrentWalletInfo()
-  const [validated, setValidated] = useState(false)
-  const [alert, setAlert] = useState()
+
+  const [alert, setAlert] = useState<SimpleAlert>()
   const [isLoading, setIsLoading] = useState(true)
+
   const [address, setAddress] = useState('')
   const [amount, setAmount] = useState('')
   const [selectedJarIndex, setSelectedJarIndex] = useState(parseInt(location.state?.account, 10) || 0)
+
   const [addressCount, setAddressCount] = useState(0)
-  const isFormEnabled = useMemo(() => serviceInfo && serviceInfo.rescanning !== true, [serviceInfo])
+  const isFormEnabled = useMemo(() => serviceInfo?.rescanning !== true, [serviceInfo])
+  const [validated, setValidated] = useState(false)
 
   const sortedAccountBalances = useMemo(() => {
     if (!walletInfo) return []
@@ -44,12 +51,11 @@ export default function Receive({ wallet }) {
     }
 
     const abortCtrl = new AbortController()
-    const { name: walletName, token } = wallet
 
     setAlert(undefined)
     setIsLoading(true)
 
-    Api.getAddressNew({ walletName, mixdepth: selectedJarIndex, token, signal: abortCtrl.signal })
+    Api.getAddressNew({ ...wallet, mixdepth: selectedJarIndex, signal: abortCtrl.signal })
       .then((res) => (res.ok ? res.json() : Api.Helper.throwError(res, t('receive.error_loading_address_failed'))))
       .then((data) => setAddress(data.address))
       .catch((err) => {
@@ -62,7 +68,7 @@ export default function Receive({ wallet }) {
     return () => abortCtrl.abort()
   }, [isFormEnabled, wallet, selectedJarIndex, addressCount, t])
 
-  const onSubmit = (e) => {
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
     const form = e.currentTarget
@@ -82,7 +88,7 @@ export default function Receive({ wallet }) {
       <div className={`mb-4 ${styles.cardContainer}`}>
         <rb.Card className={`${settings.theme === 'light' ? 'pt-2' : 'pt-4'} pb-4`}>
           <div className={styles['qr-container']}>
-            {!isLoading && address && <BitcoinQR address={address} sats={amount} />}
+            {!isLoading && address && <BitcoinQR address={address} amount={parseInt(amount, 10) || 0} />}
             {(isLoading || !address) && (
               <rb.Placeholder as="div" animation="wave" className={styles['receive-placeholder-qr-container']}>
                 <rb.Placeholder className={styles['receive-placeholder-qr']} />
@@ -92,17 +98,18 @@ export default function Receive({ wallet }) {
           <rb.Card.Body
             className={`${settings.theme === 'light' ? 'pt-0' : 'pt-3'} pb-0 d-flex flex-column align-items-center`}
           >
-            {address && (
-              <rb.Card.Text className={`${styles['address']} text-center slashed-zeroes`}>{address}</rb.Card.Text>
-            )}
-            {!address && (
+            {!address ? (
               <rb.Placeholder as="p" animation="wave" className={styles['receive-placeholder-container']}>
                 <rb.Placeholder xs={12} sm={10} md={8} className={styles['receive-placeholder']} />
               </rb.Placeholder>
+            ) : (
+              <rb.Card.Text className={`${styles['address']} text-center slashed-zeroes`}>{address}</rb.Card.Text>
             )}
+
             <div className="d-flex justify-content-center gap-3 w-75">
               <CopyButton
                 className="btn btn-outline-dark flex-1"
+                disabled={!address || isLoading}
                 value={address}
                 text={
                   <>
@@ -116,7 +123,6 @@ export default function Receive({ wallet }) {
                     {t('receive.text_copy_address_confirmed')}
                   </>
                 }
-                disabled={!address || isLoading}
               />
               {checkIsWebShareAPISupported() && <ShareButton value={address} className="flex-1" />}
             </div>
diff --git a/src/components/RescanChain.tsx b/src/components/RescanChain.tsx
index cbac892e5..6cdb10ef0 100644
--- a/src/components/RescanChain.tsx
+++ b/src/components/RescanChain.tsx
@@ -122,8 +122,7 @@ export default function RescanChain({ wallet }: RescanChainProps) {
       setAlert(undefined)
 
       try {
-        const requestContext = { walletName: wallet.name, token: wallet.token }
-        const res = await Api.getRescanBlockchain({ signal, ...requestContext, blockheight })
+        const res = await Api.getRescanBlockchain({ ...wallet, signal, blockheight })
         if (!res.ok) await Api.Helper.throwError(res)
 
         dispatchServiceInfo({
diff --git a/src/components/ScheduleProgress.jsx b/src/components/ScheduleProgress.tsx
similarity index 95%
rename from src/components/ScheduleProgress.jsx
rename to src/components/ScheduleProgress.tsx
index 296a64b90..a9ae98027 100644
--- a/src/components/ScheduleProgress.jsx
+++ b/src/components/ScheduleProgress.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
 import * as rb from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import styles from './ScheduleProgress.module.css'
+import { Schedule } from '../context/ServiceInfoContext'
 
-const scheduleToSteps = (schedule) => {
+const scheduleToSteps = (schedule: Schedule) => {
   // Example Schedule:
   //
   // schedule = [
@@ -34,7 +34,7 @@ const scheduleToSteps = (schedule) => {
   // Calculate total wait time. Ignores the last element since there's no reason in waiting after the last element completed.
   // This is a lower bound estimate for the time the whole scheduler run will take since it doesn't take into account the time
   // it takes to find and talk to makers and wait for tx confirmations on the timechain.
-  const totalWaitTime = Math.max(
+  const totalWaitTime: Minutes = Math.max(
     1,
     schedule.slice(0, schedule.length - 1).reduce((acc, tx) => acc + tx[4] * 60, 0),
   )
@@ -58,7 +58,11 @@ const scheduleToSteps = (schedule) => {
   }
 }
 
-const ScheduleProgress = ({ schedule }) => {
+interface ScheduleProgressProps {
+  schedule: Schedule
+}
+
+const ScheduleProgress = ({ schedule }: ScheduleProgressProps) => {
   const { t } = useTranslation()
 
   const steps = scheduleToSteps(schedule)
diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
index ec6295f8d..a10099319 100644
--- a/src/components/Send/index.tsx
+++ b/src/components/Send/index.tsx
@@ -324,11 +324,9 @@ export default function Send({ wallet }: SendProps) {
     setPaymentSuccessfulInfoAlert(undefined)
     setIsSending(true)
 
-    const requestContext = { walletName: wallet.name, token: wallet.token }
-
     let success = false
     try {
-      const res = await Api.postDirectSend(requestContext, { mixdepth: sourceJarIndex, destination, amount_sats })
+      const res = await Api.postDirectSend({ ...wallet }, { mixdepth: sourceJarIndex, destination, amount_sats })
 
       if (res.ok) {
         // TODO: add type for json response
@@ -374,15 +372,17 @@ export default function Send({ wallet }: SendProps) {
     setAlert(undefined)
     setIsSending(true)
 
-    const requestContext = { walletName: wallet.name, token: wallet.token }
     let success = false
     try {
-      const res = await Api.postCoinjoin(requestContext, {
-        mixdepth: sourceJarIndex,
-        destination,
-        amount_sats,
-        counterparties,
-      })
+      const res = await Api.postCoinjoin(
+        { ...wallet },
+        {
+          mixdepth: sourceJarIndex,
+          destination,
+          amount_sats,
+          counterparties,
+        },
+      )
 
       if (res.ok) {
         const data = await res.json()
@@ -432,7 +432,7 @@ export default function Send({ wallet }: SendProps) {
     setAlert(undefined)
 
     const abortCtrl = new AbortController()
-    return Api.getTakerStop({ signal: abortCtrl.signal, walletName: wallet.name, token: wallet.token }).catch((err) => {
+    return Api.getTakerStop({ ...wallet, signal: abortCtrl.signal }).catch((err) => {
       setAlert({ variant: 'danger', message: err.message })
     })
   }
@@ -649,9 +649,8 @@ export default function Send({ wallet }: SendProps) {
             onConfirm={(selectedJar) => {
               const abortCtrl = new AbortController()
               return Api.getAddressNew({
+                ...wallet,
                 signal: abortCtrl.signal,
-                walletName: wallet.name,
-                token: wallet.token,
                 mixdepth: selectedJar,
               })
                 .then((res) =>
diff --git a/src/components/Settings.test.jsx b/src/components/Settings.test.tsx
similarity index 82%
rename from src/components/Settings.test.jsx
rename to src/components/Settings.test.tsx
index 363269b39..9aa4e6ef0 100644
--- a/src/components/Settings.test.jsx
+++ b/src/components/Settings.test.tsx
@@ -3,15 +3,16 @@ import { render, screen } from '../testUtils'
 import { act } from 'react-dom/test-utils'
 
 import Settings from './Settings'
+import { CurrentWallet } from '../context/WalletContext'
 
-const dummyWalletName = 'dummy.jmdat'
+const dummyWalletFileName = 'dummy.jmdat'
 const dummyToken = 'dummyToken'
 
 describe('<Settings />', () => {
-  const setup = ({ wallet }) => {
+  const setup = ({ wallet }: { wallet: CurrentWallet }) => {
     render(
       <BrowserRouter>
-        <Settings wallet={wallet} />
+        <Settings wallet={wallet} stopWallet={() => ({})} />
       </BrowserRouter>,
     )
   }
@@ -20,7 +21,8 @@ describe('<Settings />', () => {
     await act(async () =>
       setup({
         wallet: {
-          name: dummyWalletName,
+          walletFileName: dummyWalletFileName,
+          displayName: dummyWalletFileName,
           token: dummyToken,
         },
       }),
diff --git a/src/components/Settings.jsx b/src/components/Settings.tsx
similarity index 89%
rename from src/components/Settings.jsx
rename to src/components/Settings.tsx
index 7cc43305e..f586c0bec 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, To, useNavigate } from 'react-router-dom'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import Sprite from './Sprite'
@@ -18,8 +18,14 @@ import SeedModal from './settings/SeedModal'
 import FeeConfigModal from './settings/FeeConfigModal'
 import { isDebugFeatureEnabled } from '../constants/debugFeatures'
 import { isFeatureEnabled } from '../constants/features'
+import { CurrentWallet } from '../context/WalletContext'
 
-export default function Settings({ wallet, stopWallet }) {
+interface SettingsProps {
+  wallet: CurrentWallet
+  stopWallet: () => void
+}
+
+export default function Settings({ wallet, stopWallet }: SettingsProps) {
   const { t, i18n } = useTranslation()
   const navigate = useNavigate()
   const settings = useSettings()
@@ -29,12 +35,12 @@ export default function Settings({ wallet, stopWallet }) {
   const [showingSeed, setShowingSeed] = useState(false)
   const [showingFeeConfig, setShowingFeeConfig] = useState(false)
   const [lockingWallet, setLockingWallet] = useState(false)
-  const [showConfirmLockModal, setShowConfirmLockModal] = useState(null)
+  const [showConfirmLockModal, setShowConfirmLockModal] = useState<{ navigateTo: To }>()
   const [showLogsEnabled, setShowLogsEnabled] = useState(false)
   const [showingLogs, setShowingLogs] = useState(false)
-  const [alert, setAlert] = useState(null)
+  const [alert, setAlert] = useState<SimpleAlert>()
 
-  const setTheme = (theme) => {
+  const setTheme = (theme: string) => {
     if (window.JM.THEMES.includes(theme)) {
       document.documentElement.setAttribute(window.JM.THEME_ROOT_ATTR, theme)
       settingsDispatch({ theme })
@@ -45,36 +51,37 @@ export default function Settings({ wallet, stopWallet }) {
   const isLightTheme = settings.theme === window.JM.THEMES[0]
 
   const lockWallet = useCallback(
-    async ({ force, destination }) => {
-      if (!force && (serviceInfo.coinjoinInProgress || serviceInfo.makerRunning)) {
-        setShowConfirmLockModal({ destination })
+    async ({ force, navigateTo }: { force: boolean; navigateTo: To }) => {
+      if (!force && (serviceInfo?.coinjoinInProgress || serviceInfo?.makerRunning)) {
+        setShowConfirmLockModal({ navigateTo })
         return
       }
 
       setLockingWallet(true)
 
       try {
-        const { name: walletName, token } = wallet
-        const res = await Api.getWalletLock({ walletName, token })
+        const res = await Api.getWalletLock(wallet)
 
         setLockingWallet(false)
         if (res.ok || res.status === 401) {
           stopWallet()
-          navigate(destination)
+          navigate(navigateTo)
         } else {
           await Api.Helper.throwError(res)
         }
-      } catch (e) {
+      } catch (e: any) {
         setLockingWallet(false)
-        setAlert({ variant: 'danger', dismissible: false, message: e.message })
+
+        const message = e.message || t('global.errors.reason_unknown')
+        setAlert({ variant: 'danger', dismissible: false, message })
       }
     },
-    [wallet, stopWallet, navigate, serviceInfo],
+    [wallet, stopWallet, navigate, serviceInfo, t],
   )
 
   useEffect(() => {
     const abortCtrl = new AbortController()
-    fetchFeatures({ token: wallet.token, signal: abortCtrl.signal })
+    fetchFeatures({ ...wallet, signal: abortCtrl.signal })
       .then((res) => (res.ok ? res.json() : Api.Helper.throwError(res)))
       .then((data) => data && data.features)
       .then((features) => {
@@ -97,12 +104,13 @@ export default function Settings({ wallet, stopWallet }) {
         <div className={styles['section-title']}>{t('settings.section_title_display')}</div>
         {alert && <Alert {...alert} />}
         <ConfirmModal
-          isShown={showConfirmLockModal}
+          isShown={!!showConfirmLockModal}
           title={t('wallets.wallet_preview.modal_lock_wallet_title')}
-          onCancel={() => setShowConfirmLockModal(null)}
+          onCancel={() => setShowConfirmLockModal(undefined)}
           onConfirm={() => {
-            setShowConfirmLockModal(null)
-            lockWallet({ force: true, destination: showConfirmLockModal?.destination })
+            const navigateTo = showConfirmLockModal?.navigateTo || routes.home
+            setShowConfirmLockModal(undefined)
+            lockWallet({ force: true, navigateTo })
           }}
         >
           {(serviceInfo?.makerRunning
@@ -191,7 +199,7 @@ export default function Settings({ wallet, stopWallet }) {
           <rb.Button
             variant="outline-dark"
             className={styles['settings-btn']}
-            onClick={() => lockWallet({ force: false, destination: routes.walletList })}
+            onClick={() => lockWallet({ force: false, navigateTo: routes.walletList })}
           >
             {lockingWallet ? (
               <>
@@ -212,7 +220,7 @@ export default function Settings({ wallet, stopWallet }) {
           <rb.Button
             variant="outline-dark"
             className={styles['settings-btn']}
-            onClick={() => lockWallet({ force: false, destination: routes.createWallet })}
+            onClick={() => lockWallet({ force: false, navigateTo: routes.createWallet })}
           >
             {lockingWallet ? (
               <>
diff --git a/src/components/Wallet.test.tsx b/src/components/Wallet.test.tsx
index b5591b097..026d78747 100644
--- a/src/components/Wallet.test.tsx
+++ b/src/components/Wallet.test.tsx
@@ -14,14 +14,14 @@ jest.mock('../libs/JmWalletApi', () => ({
 }))
 
 describe('<Wallet />', () => {
-  const dummyWalletName = 'dummy.jmdat'
+  const dummyWalletFileName = 'dummy.jmdat'
   const dummyPassword = 'correct horse battery staple'
 
   const mockUnlockWallet = jest.fn()
   const mockLockWallet = jest.fn()
 
   const setup = ({
-    name,
+    walletFileName,
     lockWallet = undefined,
     unlockWallet = undefined,
     isActive = false,
@@ -31,7 +31,7 @@ describe('<Wallet />', () => {
     render(
       <BrowserRouter>
         <Wallet
-          name={name}
+          walletFileName={walletFileName}
           lockWallet={lockWallet}
           unlockWallet={unlockWallet}
           isActive={isActive}
@@ -49,9 +49,9 @@ describe('<Wallet />', () => {
   })
 
   it('should render inactive wallet without errors', () => {
-    act(() => setup({ name: dummyWalletName }))
+    act(() => setup({ walletFileName: dummyWalletFileName }))
 
-    expect(screen.getByText(walletDisplayName(dummyWalletName))).toBeInTheDocument()
+    expect(screen.getByText(walletDisplayName(dummyWalletFileName))).toBeInTheDocument()
     expect(screen.getByText('wallets.wallet_preview.wallet_inactive')).toBeInTheDocument()
     expect(screen.queryByPlaceholderText('wallets.wallet_preview.placeholder_password')).not.toBeInTheDocument()
     expect(screen.queryByText('wallets.wallet_preview.button_unlock')).not.toBeInTheDocument()
@@ -60,7 +60,7 @@ describe('<Wallet />', () => {
   })
 
   it('should unlock inactive wallet successfully', async () => {
-    await act(async () => setup({ name: dummyWalletName, unlockWallet: mockUnlockWallet }))
+    await act(async () => setup({ walletFileName: dummyWalletFileName, unlockWallet: mockUnlockWallet }))
 
     expect(screen.getByText('wallets.wallet_preview.wallet_inactive')).toBeInTheDocument()
     expect(screen.getByText('wallets.wallet_preview.button_unlock')).toBeInTheDocument()
@@ -80,19 +80,19 @@ describe('<Wallet />', () => {
       await waitFor(() => screen.findByText('wallets.wallet_preview.button_unlock'))
     })
 
-    expect(mockUnlockWallet).toHaveBeenCalledWith(dummyWalletName, dummyPassword)
+    expect(mockUnlockWallet).toHaveBeenCalledWith(dummyWalletFileName, dummyPassword)
   })
 
   it('should provide ability to unlock active wallet (i.e. when auth token is missing)', () => {
     act(() =>
       setup({
-        name: dummyWalletName,
+        walletFileName: dummyWalletFileName,
         isActive: true,
         unlockWallet: mockUnlockWallet,
       }),
     )
 
-    expect(screen.getByText(walletDisplayName(dummyWalletName))).toBeInTheDocument()
+    expect(screen.getByText(walletDisplayName(dummyWalletFileName))).toBeInTheDocument()
     expect(screen.getByText('wallets.wallet_preview.wallet_active')).toBeInTheDocument()
     expect(screen.queryByPlaceholderText('wallets.wallet_preview.placeholder_password')).toBeInTheDocument()
     expect(screen.queryByText('wallets.wallet_preview.button_unlock')).toBeInTheDocument()
@@ -103,13 +103,13 @@ describe('<Wallet />', () => {
   it('should render active wallet without errors', () => {
     act(() =>
       setup({
-        name: dummyWalletName,
+        walletFileName: dummyWalletFileName,
         isActive: true,
         lockWallet: mockLockWallet,
       }),
     )
 
-    expect(screen.getByText(walletDisplayName(dummyWalletName))).toBeInTheDocument()
+    expect(screen.getByText(walletDisplayName(dummyWalletFileName))).toBeInTheDocument()
     expect(screen.getByText('wallets.wallet_preview.wallet_active')).toBeInTheDocument()
     expect(screen.getByText('wallets.wallet_preview.button_open')).toBeInTheDocument()
     expect(screen.getByText('wallets.wallet_preview.button_lock')).toBeInTheDocument()
@@ -120,7 +120,7 @@ describe('<Wallet />', () => {
   it('should lock active wallet successfully', async () => {
     act(() =>
       setup({
-        name: dummyWalletName,
+        walletFileName: dummyWalletFileName,
         isActive: true,
         lockWallet: mockLockWallet,
       }),
@@ -137,18 +137,18 @@ describe('<Wallet />', () => {
       await waitFor(() => screen.findByText('wallets.wallet_preview.button_lock'))
     })
 
-    expect(mockLockWallet).toHaveBeenCalledWith(dummyWalletName, { confirmed: false })
+    expect(mockLockWallet).toHaveBeenCalledWith(dummyWalletFileName, { confirmed: false })
   })
 
   it('should display earn indicator when maker is running', () => {
-    act(() => setup({ name: dummyWalletName, isActive: true, makerRunning: true }))
+    act(() => setup({ walletFileName: dummyWalletFileName, isActive: true, makerRunning: true }))
 
     expect(document.querySelector('.earn-indicator')).toBeInTheDocument()
     expect(document.querySelector('.joining-indicator')).toBeNull()
   })
 
   it('should display joining indicator when taker is running', () => {
-    act(() => setup({ name: dummyWalletName, isActive: true, coinjoinInProgress: true }))
+    act(() => setup({ walletFileName: dummyWalletFileName, isActive: true, coinjoinInProgress: true }))
 
     expect(document.querySelector('.joining-indicator')).toBeInTheDocument()
     expect(document.querySelector('.earn-indicator')).toBeNull()
diff --git a/src/components/Wallet.tsx b/src/components/Wallet.tsx
index 83719bc0d..6cf9e0b16 100644
--- a/src/components/Wallet.tsx
+++ b/src/components/Wallet.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { Formik, FormikErrors } from 'formik'
 import * as rb from 'react-bootstrap'
@@ -8,18 +8,19 @@ import { TabActivityIndicator, JoiningIndicator } from './ActivityIndicators'
 import Sprite from './Sprite'
 import { routes } from '../constants/routes'
 import styles from './Wallet.module.css'
+import { WalletFileName } from '../libs/JmWalletApi'
 
 interface WalletLockFormProps {
-  walletName: string
-  lockWallet: (walletName: string, options: { confirmed: boolean }) => Promise<void>
+  walletFileName: WalletFileName
+  lockWallet: (walletFileName: WalletFileName, options: { confirmed: boolean }) => Promise<void>
 }
 
-const WalletLockForm = ({ walletName, lockWallet }: WalletLockFormProps) => {
+const WalletLockForm = ({ walletFileName, lockWallet }: WalletLockFormProps) => {
   const { t } = useTranslation()
 
   const onSubmit = useCallback(async () => {
-    await lockWallet(walletName, { confirmed: false })
-  }, [walletName, lockWallet])
+    await lockWallet(walletFileName, { confirmed: false })
+  }, [walletFileName, lockWallet])
 
   return (
     <Formik initialValues={{}} validate={() => ({})} onSubmit={onSubmit}>
@@ -57,8 +58,8 @@ const WalletLockForm = ({ walletName, lockWallet }: WalletLockFormProps) => {
 }
 
 interface WalletUnlockFormProps {
-  walletName: string
-  unlockWallet: (walletName: string, password: string) => Promise<void>
+  walletFileName: WalletFileName
+  unlockWallet: (walletFileName: WalletFileName, password: string) => Promise<void>
 }
 
 type WalletUnlockFormValues = {
@@ -69,7 +70,7 @@ const walletUnlockFormInitialValues: WalletUnlockFormValues = {
   password: '',
 }
 
-const WalletUnlockForm = ({ walletName, unlockWallet }: WalletUnlockFormProps) => {
+const WalletUnlockForm = ({ walletFileName, unlockWallet }: WalletUnlockFormProps) => {
   const { t } = useTranslation()
 
   const validate = (values: WalletUnlockFormValues) => {
@@ -83,9 +84,9 @@ const WalletUnlockForm = ({ walletName, unlockWallet }: WalletUnlockFormProps) =
   const onSubmit = useCallback(
     async (values) => {
       const { password } = values
-      await unlockWallet(walletName, password)
+      await unlockWallet(walletFileName, password)
     },
-    [walletName, unlockWallet],
+    [walletFileName, unlockWallet],
   )
 
   return (
@@ -142,9 +143,9 @@ const WalletUnlockForm = ({ walletName, unlockWallet }: WalletUnlockFormProps) =
 }
 
 export interface WalletProps {
-  name: string
-  lockWallet?: (walletName: string, options: { confirmed: boolean }) => Promise<void>
-  unlockWallet?: (walletName: string, password: string) => Promise<void>
+  walletFileName: WalletFileName
+  lockWallet?: (walletFileName: WalletFileName, options: { confirmed: boolean }) => Promise<void>
+  unlockWallet?: (walletFileName: WalletFileName, password: string) => Promise<void>
   isActive?: boolean
   makerRunning?: boolean
   coinjoinInProgress?: boolean
@@ -152,7 +153,7 @@ export interface WalletProps {
 }
 
 export default function Wallet({
-  name,
+  walletFileName,
   lockWallet,
   unlockWallet,
   isActive,
@@ -162,6 +163,8 @@ export default function Wallet({
 }: WalletProps) {
   const { t } = useTranslation()
 
+  const displayName = useMemo(() => walletDisplayName(walletFileName), [walletFileName])
+
   return (
     <>
       <rb.Card {...props}>
@@ -173,16 +176,16 @@ export default function Wallet({
                   <span style={{ position: 'relative' }}>
                     {lockWallet ? (
                       <Link className="wallet-name" to={routes.wallet}>
-                        {walletDisplayName(name)}
+                        {displayName}
                       </Link>
                     ) : (
-                      <>{walletDisplayName(name)}</>
+                      <>{displayName}</>
                     )}
                     {makerRunning && <TabActivityIndicator isOn={true} />}
                     {coinjoinInProgress && <JoiningIndicator isOn={true} className="text-success" />}
                   </span>
                 ) : (
-                  <>{walletDisplayName(name)}</>
+                  <>{displayName}</>
                 )}
               </rb.Card.Title>
 
@@ -194,10 +197,10 @@ export default function Wallet({
             </div>
 
             {lockWallet ? (
-              <WalletLockForm walletName={name} lockWallet={lockWallet} />
+              <WalletLockForm walletFileName={walletFileName} lockWallet={lockWallet} />
             ) : (
               <div className={`w-100 mt-3 mt-md-0 ${styles.walletPasswordInput}`}>
-                {unlockWallet && <WalletUnlockForm walletName={name} unlockWallet={unlockWallet} />}
+                {unlockWallet && <WalletUnlockForm walletFileName={walletFileName} unlockWallet={unlockWallet} />}
               </div>
             )}
           </div>
diff --git a/src/components/WalletCreationConfirmation.tsx b/src/components/WalletCreationConfirmation.tsx
index 41b84d18f..d12224dc5 100644
--- a/src/components/WalletCreationConfirmation.tsx
+++ b/src/components/WalletCreationConfirmation.tsx
@@ -5,19 +5,20 @@ import { Formik } from 'formik'
 import Seedphrase from './Seedphrase'
 import ToggleSwitch from './ToggleSwitch'
 import { walletDisplayName } from '../utils'
+import { WalletFileName } from '../libs/JmWalletApi'
 
-export type WalletInfo = {
-  walletFileName: string
+export type CreatedWalletInfo = {
+  walletFileName: WalletFileName
   password: string
   seedphrase: string
 }
 
 interface WalletCreationInfoSummaryProps {
-  walletInfo: WalletInfo
+  walletInfo: CreatedWalletInfo
   revealSensitiveInfo: boolean
 }
 
-export const WalletInfoSummary = ({ walletInfo, revealSensitiveInfo }: WalletCreationInfoSummaryProps) => {
+export const WalletCreationInfoSummary = ({ walletInfo, revealSensitiveInfo }: WalletCreationInfoSummaryProps) => {
   const { t } = useTranslation()
   return (
     <>
@@ -39,7 +40,7 @@ export const WalletInfoSummary = ({ walletInfo, revealSensitiveInfo }: WalletCre
 }
 
 interface WalletCreationConfirmationProps {
-  wallet: WalletInfo
+  wallet: CreatedWalletInfo
   submitButtonText: (isSubmitting: boolean) => React.ReactNode | string
   onSubmit: () => Promise<void>
 }
@@ -61,7 +62,7 @@ const WalletCreationConfirmation = ({ wallet, submitButtonText, onSubmit }: Wall
     >
       {({ handleSubmit, isSubmitting }) => (
         <rb.Form onSubmit={handleSubmit} noValidate>
-          <WalletInfoSummary walletInfo={wallet} revealSensitiveInfo={revealSensitiveInfo} />
+          <WalletCreationInfoSummary walletInfo={wallet} revealSensitiveInfo={revealSensitiveInfo} />
           <div className="mb-2">
             <ToggleSwitch
               label={t('create_wallet.confirmation_toggle_reveal_info')}
diff --git a/src/components/Wallets.test.jsx b/src/components/Wallets.test.tsx
similarity index 80%
rename from src/components/Wallets.test.jsx
rename to src/components/Wallets.test.tsx
index 6c1f8f5f6..a12c6ae94 100644
--- a/src/components/Wallets.test.jsx
+++ b/src/components/Wallets.test.tsx
@@ -6,6 +6,8 @@ import user from '@testing-library/user-event'
 import * as apiMock from '../libs/JmWalletApi'
 
 import Wallets from './Wallets'
+import { walletDisplayName } from '../utils'
+import { CurrentWallet } from '../context/WalletContext'
 
 jest.mock('../libs/JmWalletApi', () => ({
   ...jest.requireActual('../libs/JmWalletApi'),
@@ -28,7 +30,7 @@ describe('<Wallets />', () => {
   const mockStartWallet = jest.fn()
   const mockStopWallet = jest.fn()
 
-  const setup = ({ currentWallet = null }) => {
+  const setup = ({ currentWallet = null }: { currentWallet?: CurrentWallet | null }) => {
     render(
       <BrowserRouter>
         <Wallets currentWallet={currentWallet} startWallet={mockStartWallet} stopWallet={mockStopWallet} />
@@ -38,14 +40,14 @@ describe('<Wallets />', () => {
 
   beforeEach(() => {
     const neverResolvingPromise = new Promise(() => {})
-    apiMock.getSession.mockResolvedValue(neverResolvingPromise)
-    apiMock.getGetinfo.mockResolvedValue(neverResolvingPromise)
+    ;(apiMock.getSession as jest.Mock).mockResolvedValue(neverResolvingPromise)
+    ;(apiMock.getGetinfo as jest.Mock).mockResolvedValue(neverResolvingPromise)
   })
 
   it('should render without errors', () => {
     const neverResolvingPromise = new Promise(() => {})
-    apiMock.getSession.mockResolvedValueOnce(neverResolvingPromise)
-    apiMock.getWalletAll.mockResolvedValueOnce(neverResolvingPromise)
+    ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce(neverResolvingPromise)
+    ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce(neverResolvingPromise)
 
     act(() => setup({}))
 
@@ -55,10 +57,10 @@ describe('<Wallets />', () => {
   })
 
   it('should display error message when loading wallets fails', async () => {
-    apiMock.getSession.mockResolvedValueOnce({
+    ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
       ok: false,
     })
-    apiMock.getWalletAll.mockResolvedValueOnce({
+    ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce({
       ok: false,
     })
 
@@ -74,7 +76,7 @@ describe('<Wallets />', () => {
   })
 
   it('should display big call-to-action buttons if no wallet has been created yet', async () => {
-    apiMock.getSession.mockResolvedValueOnce({
+    ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () =>
         Promise.resolve({
@@ -84,11 +86,11 @@ describe('<Wallets />', () => {
           wallet_name: 'None',
         }),
     })
-    apiMock.getWalletAll.mockResolvedValueOnce({
+    ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve({ wallets: [] }),
     })
-    apiMock.getGetinfo.mockResolvedValueOnce({
+    ;(apiMock.getGetinfo as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve({ version: '0.9.10dev' }),
     })
@@ -113,7 +115,7 @@ describe('<Wallets />', () => {
   })
 
   it('should display login for available wallets', async () => {
-    apiMock.getSession.mockResolvedValueOnce({
+    ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () =>
         Promise.resolve({
@@ -123,11 +125,11 @@ describe('<Wallets />', () => {
           wallet_name: 'None',
         }),
     })
-    apiMock.getWalletAll.mockResolvedValueOnce({
+    ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve({ wallets: ['wallet0.jmdat', 'wallet1.jmdat'] }),
     })
-    apiMock.getGetinfo.mockResolvedValueOnce({
+    ;(apiMock.getGetinfo as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve({ version: '0.9.10dev' }),
     })
@@ -152,7 +154,7 @@ describe('<Wallets />', () => {
   })
 
   it('should hide "Import Wallet"-button on unsupported backend version', async () => {
-    apiMock.getSession.mockResolvedValueOnce({
+    ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () =>
         Promise.resolve({
@@ -162,11 +164,11 @@ describe('<Wallets />', () => {
           wallet_name: 'None',
         }),
     })
-    apiMock.getWalletAll.mockResolvedValueOnce({
+    ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve({ wallets: [] }),
     })
-    apiMock.getGetinfo.mockResolvedValueOnce({
+    ;(apiMock.getGetinfo as jest.Mock).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve({ version: '0.9.9' }),
     })
@@ -181,12 +183,12 @@ describe('<Wallets />', () => {
   })
 
   describe('<Wallets /> lock/unlock flow', () => {
-    const dummyWalletName = 'dummy.jmdat'
+    const dummyWalletFileName = 'dummy.jmdat'
     const dummyToken = 'dummyToken'
     const dummyPassword = 'correct horse battery staple'
 
     it('should unlock inactive wallet successfully', async () => {
-      apiMock.getSession.mockResolvedValueOnce({
+      ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
         ok: true,
         json: () =>
           Promise.resolve({
@@ -196,15 +198,15 @@ describe('<Wallets />', () => {
             wallet_name: 'None',
           }),
       })
-      apiMock.getWalletAll.mockResolvedValueOnce({
+      ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce({
         ok: true,
-        json: () => Promise.resolve({ wallets: [dummyWalletName] }),
+        json: () => Promise.resolve({ wallets: [dummyWalletFileName] }),
       })
-      apiMock.postWalletUnlock.mockResolvedValueOnce({
+      ;(apiMock.postWalletUnlock as jest.Mock).mockResolvedValueOnce({
         ok: true,
         json: () =>
           Promise.resolve({
-            walletname: dummyWalletName,
+            walletname: dummyWalletFileName,
             token: dummyToken,
             refresh_token: dummyToken,
           }),
@@ -228,7 +230,7 @@ describe('<Wallets />', () => {
         await waitFor(() => screen.findByText('wallets.wallet_preview.button_unlock'))
       })
 
-      expect(mockStartWallet).toHaveBeenCalledWith(dummyWalletName, {
+      expect(mockStartWallet).toHaveBeenCalledWith(dummyWalletFileName, {
         token: dummyToken,
         refresh_token: dummyToken,
       })
@@ -238,7 +240,7 @@ describe('<Wallets />', () => {
     it('should add alert if unlocking of inactive wallet fails', async () => {
       const apiErrorMessage = 'ANY_ERROR_MESSAGE with template <Wallet>'
 
-      apiMock.getSession.mockResolvedValueOnce({
+      ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
         ok: true,
         json: () =>
           Promise.resolve({
@@ -248,11 +250,11 @@ describe('<Wallets />', () => {
             wallet_name: 'None',
           }),
       })
-      apiMock.getWalletAll.mockResolvedValueOnce({
+      ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce({
         ok: true,
-        json: () => Promise.resolve({ wallets: [dummyWalletName] }),
+        json: () => Promise.resolve({ wallets: [dummyWalletFileName] }),
       })
-      apiMock.postWalletUnlock.mockResolvedValueOnce({
+      ;(apiMock.postWalletUnlock as jest.Mock).mockResolvedValueOnce({
         ok: false,
         json: () => Promise.resolve({ message: apiErrorMessage }),
       })
@@ -278,33 +280,34 @@ describe('<Wallets />', () => {
       expect(mockStartWallet).not.toHaveBeenCalled()
       expect(mockedNavigate).not.toHaveBeenCalled()
 
-      expect(screen.getByText(apiErrorMessage.replace('Wallet', dummyWalletName))).toBeInTheDocument()
+      expect(screen.getByText(apiErrorMessage.replace('Wallet', dummyWalletFileName))).toBeInTheDocument()
     })
 
     it('should lock active wallet successfully', async () => {
-      apiMock.getSession.mockResolvedValueOnce({
+      ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
         ok: true,
         json: () =>
           Promise.resolve({
             session: true,
             maker_running: false,
             coinjoin_in_process: false,
-            wallet_name: dummyWalletName,
+            wallet_name: dummyWalletFileName,
           }),
       })
-      apiMock.getWalletAll.mockResolvedValueOnce({
+      ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce({
         ok: true,
-        json: () => Promise.resolve({ wallets: [dummyWalletName] }),
+        json: () => Promise.resolve({ wallets: [dummyWalletFileName] }),
       })
-      apiMock.getWalletLock.mockResolvedValueOnce({
+      ;(apiMock.getWalletLock as jest.Mock).mockResolvedValueOnce({
         ok: true,
-        json: () => Promise.resolve({ walletname: dummyWalletName, already_locked: false }),
+        json: () => Promise.resolve({ walletname: dummyWalletFileName, already_locked: false }),
       })
 
       await act(async () =>
         setup({
           currentWallet: {
-            name: dummyWalletName,
+            walletFileName: dummyWalletFileName,
+            displayName: dummyWalletFileName,
             token: dummyToken,
           },
         }),
@@ -328,21 +331,21 @@ describe('<Wallets />', () => {
     it('should add alert but clear wallet if locking active wallet fails with UNAUTHORIZED', async () => {
       const apiErrorMessage = 'Invalid credentials.'
 
-      apiMock.getSession.mockResolvedValueOnce({
+      ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
         ok: true,
         json: () =>
           Promise.resolve({
             session: true,
             maker_running: false,
             coinjoin_in_process: false,
-            wallet_name: dummyWalletName,
+            wallet_name: dummyWalletFileName,
           }),
       })
-      apiMock.getWalletAll.mockResolvedValueOnce({
+      ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce({
         ok: true,
-        json: () => Promise.resolve({ wallets: [dummyWalletName] }),
+        json: () => Promise.resolve({ wallets: [dummyWalletFileName] }),
       })
-      apiMock.getWalletLock.mockResolvedValueOnce({
+      ;(apiMock.getWalletLock as jest.Mock).mockResolvedValueOnce({
         ok: false,
         status: 401,
         json: () => Promise.resolve({ message: apiErrorMessage }),
@@ -351,7 +354,8 @@ describe('<Wallets />', () => {
       await act(async () =>
         setup({
           currentWallet: {
-            name: dummyWalletName,
+            walletFileName: dummyWalletFileName,
+            displayName: dummyWalletFileName,
             token: dummyToken,
           },
         }),
@@ -380,29 +384,30 @@ describe('<Wallets />', () => {
     `(
       'should confirm locking wallet if maker ($makerRunning) or taker ($coinjoinInProgress) is running',
       async ({ makerRunning, coinjoinInProgress, expectedModalBody }) => {
-        apiMock.getSession.mockResolvedValueOnce({
+        ;(apiMock.getSession as jest.Mock).mockResolvedValueOnce({
           ok: true,
           json: () =>
             Promise.resolve({
               session: true,
               maker_running: makerRunning,
               coinjoin_in_process: coinjoinInProgress,
-              wallet_name: dummyWalletName,
+              wallet_name: dummyWalletFileName,
             }),
         })
-        apiMock.getWalletAll.mockResolvedValueOnce({
+        ;(apiMock.getWalletAll as jest.Mock).mockResolvedValueOnce({
           ok: true,
-          json: () => Promise.resolve({ wallets: [dummyWalletName] }),
+          json: () => Promise.resolve({ wallets: [dummyWalletFileName] }),
         })
-        apiMock.getWalletLock.mockResolvedValueOnce({
+        ;(apiMock.getWalletLock as jest.Mock).mockResolvedValueOnce({
           ok: true,
-          json: () => Promise.resolve({ walletname: dummyWalletName, already_locked: false }),
+          json: () => Promise.resolve({ walletname: dummyWalletFileName, already_locked: false }),
         })
 
         await act(async () =>
           setup({
             currentWallet: {
-              name: dummyWalletName,
+              walletFileName: dummyWalletFileName,
+              displayName: dummyWalletFileName,
               token: dummyToken,
             },
           }),
diff --git a/src/components/Wallets.jsx b/src/components/Wallets.tsx
similarity index 74%
rename from src/components/Wallets.jsx
rename to src/components/Wallets.tsx
index c9c9ea954..9b4d686c9 100644
--- a/src/components/Wallets.jsx
+++ b/src/components/Wallets.tsx
@@ -13,85 +13,94 @@ import * as Api from '../libs/JmWalletApi'
 import { routes } from '../constants/routes'
 import { ConfirmModal } from './Modal'
 import { isFeatureEnabled } from '../constants/features'
+import { CurrentWallet } from '../context/WalletContext'
 
-function arrayEquals(a, b) {
+function arrayEquals(a: any, b: any) {
   return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index])
 }
 
-function sortWallets(wallets, activeWalletName = null) {
-  if (activeWalletName && wallets.indexOf(activeWalletName) >= 0) {
-    return [activeWalletName, ...sortWallets(wallets.filter((a) => a !== activeWalletName))]
+function sortWallets(
+  wallets: Api.WalletFileName[],
+  activeWalletFileName: Api.WalletFileName | null = null,
+): Api.WalletFileName[] {
+  if (activeWalletFileName && wallets.indexOf(activeWalletFileName) >= 0) {
+    return [activeWalletFileName, ...sortWallets(wallets.filter((a) => a !== activeWalletFileName))]
   } else {
     return [...wallets].sort((a, b) => a.localeCompare(b))
   }
 }
 
-export default function Wallets({ currentWallet, startWallet, stopWallet }) {
+interface WalletsProps {
+  currentWallet: CurrentWallet | null
+  startWallet: (walletFileName: Api.WalletFileName, auth: Api.ApiAuthContext) => void
+  stopWallet: () => void
+}
+
+export default function Wallets({ currentWallet, startWallet, stopWallet }: WalletsProps) {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const serviceInfo = useServiceInfo()
   const reloadServiceInfo = useReloadServiceInfo()
-  const [walletList, setWalletList] = useState(null)
+  const [walletList, setWalletList] = useState<Api.WalletFileName[] | null>(null)
   const [isLoading, setIsLoading] = useState(true)
-  const [unlockingWalletName, setUnlockWalletName] = useState(undefined)
-  const isUnlocking = useMemo(() => unlockingWalletName !== undefined, [unlockingWalletName])
-  const [alert, setAlert] = useState(null)
+  const [unlockingWalletFileName, setUnlockWalletFileName] = useState(undefined)
+  const isUnlocking = useMemo(() => unlockingWalletFileName !== undefined, [unlockingWalletFileName])
+  const [alert, setAlert] = useState<SimpleAlert>()
   const [showLockConfirmModal, setShowLockConfirmModal] = useState(false)
 
-  const coinjoinInProgress = useMemo(() => serviceInfo && serviceInfo.coinjoinInProgress, [serviceInfo])
-  const makerRunning = useMemo(() => serviceInfo && serviceInfo.makerRunning, [serviceInfo])
+  const coinjoinInProgress = useMemo(() => serviceInfo !== null && serviceInfo.coinjoinInProgress, [serviceInfo])
+  const makerRunning = useMemo(() => serviceInfo !== null && serviceInfo.makerRunning, [serviceInfo])
 
   const unlockWallet = useCallback(
-    async (walletName, password) => {
+    async (walletFileName, password) => {
       if (currentWallet) {
         setAlert({
           variant: 'warning',
           dismissible: false,
           message:
-            currentWallet.name === walletName
+            currentWallet.walletFileName === walletFileName
               ? // unlocking same wallet
-                t('wallets.wallet_preview.alert_wallet_already_unlocked', { walletName: walletDisplayName(walletName) })
+                t('wallets.wallet_preview.alert_wallet_already_unlocked', { walletName: currentWallet.displayName })
               : // unlocking another wallet while one is already unlocked
-                t('wallets.wallet_preview.alert_other_wallet_unlocked', { walletName: walletDisplayName(walletName) }),
+                t('wallets.wallet_preview.alert_other_wallet_unlocked', { walletName: currentWallet.displayName }),
         })
         return
       }
 
-      setAlert(null)
-      setUnlockWalletName(walletName)
+      setAlert(undefined)
+      setUnlockWalletFileName(walletFileName)
       try {
-        const res = await Api.postWalletUnlock({ walletName }, { password })
+        const res = await Api.postWalletUnlock({ walletFileName }, { password })
         const body = await (res.ok ? res.json() : Api.Helper.throwError(res))
 
-        setUnlockWalletName(undefined)
+        setUnlockWalletFileName(undefined)
 
         const auth = Api.Helper.parseAuthProps(body)
-
         startWallet(body.walletname, auth)
         navigate(routes.wallet)
-      } catch (e) {
-        const message = e.message.replace('Wallet', walletName)
+      } catch (e: any) {
+        const message = e.message?.replace('Wallet', walletFileName)
         setAlert({ variant: 'danger', dismissible: false, message })
-        setUnlockWalletName(undefined)
+        setUnlockWalletFileName(undefined)
       }
     },
     [currentWallet, setAlert, startWallet, t, navigate],
   )
 
   const lockWallet = useCallback(
-    async (lockableWalletName, { confirmed = false }) => {
-      if (!currentWallet || currentWallet.name !== lockableWalletName) {
+    async (lockableWalletFileName, { confirmed = false }) => {
+      if (!currentWallet || currentWallet.walletFileName !== lockableWalletFileName) {
         setAlert({
           variant: 'warning',
           dismissible: false,
           message: currentWallet
             ? // locking another wallet while active one is still unlocked
               t('wallets.wallet_preview.alert_other_wallet_unlocked', {
-                walletName: walletDisplayName(currentWallet.name),
+                walletName: currentWallet.displayName,
               })
             : // locking without active wallet
               t('wallets.wallet_preview.alert_wallet_already_locked', {
-                walletName: walletDisplayName(lockableWalletName),
+                walletName: walletDisplayName(lockableWalletFileName),
               }),
         })
         return
@@ -103,12 +112,10 @@ export default function Wallets({ currentWallet, startWallet, stopWallet }) {
         return
       }
 
-      setAlert(null)
+      setAlert(undefined)
 
       try {
-        const { name: walletName, token } = currentWallet
-
-        const res = await Api.getWalletLock({ walletName, token })
+        const res = await Api.getWalletLock({ ...currentWallet })
 
         // On status OK or UNAUTHORIZED, stop the wallet and clear all local
         // information. The token might have become invalid or another one might have been
@@ -119,21 +126,22 @@ export default function Wallets({ currentWallet, startWallet, stopWallet }) {
         }
 
         const body = await (res.ok ? res.json() : Api.Helper.throwError(res))
-        const { walletname: lockedWalletName, already_locked } = body
+        const { walletname: lockedWalletFileName, already_locked } = body
 
         setAlert({
           variant: already_locked ? 'warning' : 'success',
           dismissible: false,
           message: already_locked
             ? t('wallets.wallet_preview.alert_wallet_already_locked', {
-                walletName: walletDisplayName(lockedWalletName),
+                walletName: walletDisplayName(lockedWalletFileName),
               })
             : t('wallets.wallet_preview.alert_wallet_locked_successfully', {
-                walletName: walletDisplayName(lockedWalletName),
+                walletName: walletDisplayName(lockedWalletFileName),
               }),
         })
-      } catch (e) {
-        setAlert({ variant: 'danger', dismissible: false, message: e.message })
+      } catch (e: any) {
+        const message = e.message || t('global.errors.reason_unknown')
+        setAlert({ variant: 'danger', dismissible: false, message })
       }
     },
     [currentWallet, coinjoinInProgress, makerRunning, setAlert, stopWallet, t],
@@ -149,12 +157,12 @@ export default function Wallets({ currentWallet, startWallet, stopWallet }) {
     if (!currentWallet) return
 
     setShowLockConfirmModal(false)
-    await lockWallet(currentWallet.name, { confirmed: true })
+    await lockWallet(currentWallet.walletFileName, { confirmed: true })
   }, [currentWallet, lockWallet])
 
   useEffect(() => {
     if (walletList && serviceInfo) {
-      const sortedWalletList = sortWallets(walletList, serviceInfo.walletName)
+      const sortedWalletList = sortWallets(walletList, serviceInfo.walletFileName)
       if (!arrayEquals(walletList, sortedWalletList)) {
         setWalletList(sortedWalletList)
       }
@@ -169,7 +177,7 @@ export default function Wallets({ currentWallet, startWallet, stopWallet }) {
 
     const loadingWallets = Api.getWalletAll({ signal: abortCtrl.signal })
       .then((res) => (res.ok ? res.json() : Api.Helper.throwError(res, t('wallets.error_loading_failed'))))
-      .then((data) => sortWallets(data.wallets || [], currentWallet?.name))
+      .then((data) => sortWallets(data.wallets || [], currentWallet?.walletFileName))
       .then((sortedWalletList) => {
         if (abortCtrl.signal.aborted) return
 
@@ -178,7 +186,7 @@ export default function Wallets({ currentWallet, startWallet, stopWallet }) {
         if (currentWallet && sortedWalletList.length > 1) {
           setAlert({
             variant: 'info',
-            message: t('wallets.alert_wallet_open', { currentWalletName: walletDisplayName(currentWallet.name) }),
+            message: t('wallets.alert_wallet_open', { currentWalletName: currentWallet.displayName }),
             dismissible: false,
           })
         }
@@ -199,7 +207,7 @@ export default function Wallets({ currentWallet, startWallet, stopWallet }) {
       <div className="wallets">
         <PageTitle
           title={t('wallets.title')}
-          subtitle={walletList?.length === 0 ? t('wallets.subtitle_no_wallets') : null}
+          subtitle={walletList?.length === 0 ? t('wallets.subtitle_no_wallets') : undefined}
           center={true}
         />
         {alert && <Alert {...alert} />}
@@ -209,19 +217,20 @@ export default function Wallets({ currentWallet, startWallet, stopWallet }) {
             <span>{t('wallets.text_loading')}</span>
           </div>
         ) : (
-          walletList?.map((wallet, index) => {
-            const noneActive = !serviceInfo?.walletName
-            const isActive = serviceInfo?.walletName === wallet
-            const hasToken = currentWallet && currentWallet.token && currentWallet.name === serviceInfo?.walletName
+          walletList?.map((walletFileName, index) => {
+            const noneActive = !serviceInfo?.walletFileName
+            const isActive = serviceInfo?.walletFileName === walletFileName
+            const hasToken =
+              currentWallet && currentWallet.token && currentWallet.walletFileName === serviceInfo?.walletFileName
 
             const showLockOptions = isActive && hasToken
             const showUnlockOptions =
-              (!isUnlocking || unlockingWalletName === wallet) &&
+              (!isUnlocking || unlockingWalletFileName === walletFileName) &&
               (noneActive || (isActive && !hasToken) || (!hasToken && !makerRunning && !coinjoinInProgress))
             return (
               <Wallet
-                key={wallet}
-                name={wallet}
+                key={walletFileName}
+                walletFileName={walletFileName}
                 lockWallet={showLockOptions ? lockWallet : undefined}
                 unlockWallet={showUnlockOptions ? unlockWallet : undefined}
                 isActive={isActive}
diff --git a/src/components/fb/CreateFidelityBond.tsx b/src/components/fb/CreateFidelityBond.tsx
index 66a2c7f28..bd21685c7 100644
--- a/src/components/fb/CreateFidelityBond.tsx
+++ b/src/components/fb/CreateFidelityBond.tsx
@@ -121,9 +121,8 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
 
     let utxosThatWereFrozen: Utxos = []
 
-    const { name: walletName, token } = wallet
     const freezeCalls = utxos.map((utxo) =>
-      Api.postFreeze({ walletName, token }, { utxo: utxo.utxo, freeze: freeze }).then((res) => {
+      Api.postFreeze({ ...wallet }, { utxo: utxo.utxo, freeze: freeze }).then((res) => {
         if (res.ok) {
           if (!utxo.frozen && freeze) {
             utxosThatWereFrozen.push(utxo)
@@ -155,8 +154,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
     const abortCtrl = new AbortController()
 
     Api.getAddressTimelockNew({
-      walletName: wallet.name,
-      token: wallet.token,
+      ...wallet,
       signal: abortCtrl.signal,
       lockdate: lockDate,
     })
@@ -174,14 +172,11 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
   const directSweepToFidelityBond = (jarIndex: JarIndex, address: Api.BitcoinAddress) => {
     setIsLoading(true)
 
-    Api.postDirectSend(
-      { walletName: wallet.name, token: wallet.token },
-      {
-        mixdepth: jarIndex,
-        destination: address,
-        amount_sats: 0, // sweep
-      },
-    )
+    Api.postDirectSend(wallet, {
+      mixdepth: jarIndex,
+      destination: address,
+      amount_sats: 0, // sweep
+    })
       .then((res) =>
         res.ok ? res.json() : Api.Helper.throwError(res, t('earn.fidelity_bond.error_creating_fidelity_bond')),
       )
diff --git a/src/components/fb/SpendFidelityBondModal.tsx b/src/components/fb/SpendFidelityBondModal.tsx
index 05ecde5ae..d4228e233 100644
--- a/src/components/fb/SpendFidelityBondModal.tsx
+++ b/src/components/fb/SpendFidelityBondModal.tsx
@@ -264,8 +264,7 @@ const SpendFidelityBondModal = ({
     }
 
     const abortCtrl = new AbortController()
-    const { name: walletName, token } = wallet
-    const requestContext = { walletName, token, signal: abortCtrl.signal }
+    const requestContext = { ...wallet, signal: abortCtrl.signal }
 
     const destination = await Api.getAddressNew({ ...requestContext, mixdepth: targetJarIndex })
       .then((res) => {
diff --git a/src/components/jar_details/JarDetailsOverlay.tsx b/src/components/jar_details/JarDetailsOverlay.tsx
index b91637bfe..b4d74ea07 100644
--- a/src/components/jar_details/JarDetailsOverlay.tsx
+++ b/src/components/jar_details/JarDetailsOverlay.tsx
@@ -220,10 +220,8 @@ const JarDetailsOverlay = (props: JarDetailsOverlayProps) => {
 
       const abortCtrl = new AbortController()
 
-      const { name: walletName, token } = props.wallet
-
       const freezeCalls = utxos.filter(canBeFrozenOrUnfrozen).map((utxo) =>
-        Api.postFreeze({ walletName, token, signal: abortCtrl.signal }, { utxo: utxo.utxo, freeze: freeze }).then(
+        Api.postFreeze({ ...props.wallet, signal: abortCtrl.signal }, { utxo: utxo.utxo, freeze: freeze }).then(
           (res) => {
             if (!res.ok) {
               return Api.Helper.throwError(
diff --git a/src/components/settings/FeeConfigModal.tsx b/src/components/settings/FeeConfigModal.tsx
index 6a74fff39..a1f6f37ad 100644
--- a/src/components/settings/FeeConfigModal.tsx
+++ b/src/components/settings/FeeConfigModal.tsx
@@ -404,11 +404,11 @@ export default function FeeConfigModal({
       setIsSubmitting(false)
       onSuccess && onSuccess()
       onHide()
-    } catch (err) {
+    } catch (err: any) {
       setIsSubmitting(false)
       setSaveErrorMessage((_) =>
         t('settings.fees.error_saving_fee_config_failed', {
-          reason: err instanceof Error ? err.message : 'Unknown',
+          reason: err.message || t('global.errors.reason_unknown'),
         }),
       )
     }
diff --git a/src/components/settings/SeedModal.tsx b/src/components/settings/SeedModal.tsx
index a40867d37..a43ac4e98 100644
--- a/src/components/settings/SeedModal.tsx
+++ b/src/components/settings/SeedModal.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import Seedphrase from '../Seedphrase'
 import ToggleSwitch from '../ToggleSwitch'
 import { CurrentWallet } from '../../context/WalletContext'
-import { walletDisplayName } from '../../utils'
 import * as Api from '../../libs/JmWalletApi'
 
 interface SeedModalProps {
@@ -25,8 +24,7 @@ export default function SeedModal({ wallet, show, onHide }: SeedModalProps) {
     const loadSeed = async () => {
       setIsLoading(true)
       try {
-        const { name: walletName, token } = wallet
-        const res = await Api.getWalletSeed({ walletName, token })
+        const res = await Api.getWalletSeed(wallet)
         const { seedphrase } = await (res.ok ? res.json() : Api.Helper.throwError(res))
 
         setIsLoading(false)
@@ -45,7 +43,7 @@ export default function SeedModal({ wallet, show, onHide }: SeedModalProps) {
   return (
     <rb.Modal size="lg" show={show} onHide={onHide} keyboard={false} centered={true} animation={true}>
       <rb.Modal.Header closeButton>
-        <rb.Modal.Title>{walletDisplayName(wallet.name)}</rb.Modal.Title>
+        <rb.Modal.Title>{wallet.displayName}</rb.Modal.Title>
       </rb.Modal.Header>
       <rb.Modal.Body>
         <>
diff --git a/src/context/ServiceConfigContext.tsx b/src/context/ServiceConfigContext.tsx
index f7a547404..f06775cd5 100644
--- a/src/context/ServiceConfigContext.tsx
+++ b/src/context/ServiceConfigContext.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren, createContext, useCallback, useContext, useEffect, useRef } from 'react'
-import { CurrentWallet, useCurrentWallet } from './WalletContext'
+import { MinimalWalletContext, useCurrentWallet } from './WalletContext'
 
 import * as Api from '../libs/JmWalletApi'
 
@@ -31,13 +31,13 @@ type LoadConfigValueProps = {
 type RefreshConfigValuesProps = {
   signal?: AbortSignal
   keys: ConfigKey[]
-  wallet?: CurrentWallet
+  wallet?: MinimalWalletContext
 }
 
 type UpdateConfigValuesProps = {
   signal?: AbortSignal
   updates: ServiceConfigUpdate[]
-  wallet?: CurrentWallet
+  wallet?: MinimalWalletContext
 }
 
 const configReducer = (state: ServiceConfig, obj: ServiceConfigUpdate): ServiceConfig => {
@@ -52,12 +52,11 @@ const fetchConfigValues = async ({
   configKeys,
 }: {
   signal?: AbortSignal
-  wallet: CurrentWallet
+  wallet: MinimalWalletContext
   configKeys: ConfigKey[]
 }) => {
-  const { name: walletName, token } = wallet
   const fetches: Promise<ServiceConfigUpdate>[] = configKeys.map((configKey) => {
-    return Api.postConfigGet({ walletName, token, signal }, { section: configKey.section, field: configKey.field })
+    return Api.postConfigGet({ ...wallet, signal }, { section: configKey.section, field: configKey.field })
       .then((res) => (res.ok ? res.json() : Api.Helper.throwError(res)))
       .then((data: JmConfigData) => {
         return {
@@ -76,13 +75,12 @@ const pushConfigValues = async ({
   updates,
 }: {
   signal?: AbortSignal
-  wallet: CurrentWallet
+  wallet: MinimalWalletContext
   updates: ServiceConfigUpdate[]
 }) => {
-  const { name: walletName, token } = wallet
   const fetches: Promise<ServiceConfigUpdate>[] = updates.map((update) => {
     return Api.postConfigSet(
-      { walletName, token, signal },
+      { ...wallet, signal },
       {
         section: update.key.section,
         field: update.key.field,
diff --git a/src/context/ServiceInfoContext.tsx b/src/context/ServiceInfoContext.tsx
index d84c0de08..36167719a 100644
--- a/src/context/ServiceInfoContext.tsx
+++ b/src/context/ServiceInfoContext.tsx
@@ -24,7 +24,7 @@ const SESSION_REQUEST_INTERVAL: Milliseconds = 10_000
 type AmountFraction = number
 type AmountCounterparties = number
 type SchedulerDestinationAddress = 'INTERNAL' | Api.BitcoinAddress
-type WaitTimeInMinutes = number
+type WaitTimeInMinutes = Minutes
 type Rounding = number
 type StateFlag = 0 | 1 | Api.TxId
 
@@ -43,9 +43,9 @@ type ScheduleEntry = [
 ]
 type Schedule = ScheduleEntry[]
 
-interface Offer {
+export interface Offer {
   oid: number
-  ordertype: string
+  ordertype: Api.OfferType
   minsize: Api.AmountSats
   maxsize: Api.AmountSats
   txfee: Api.AmountSats
@@ -56,7 +56,7 @@ interface JmSessionData {
   session: boolean
   maker_running: boolean
   coinjoin_in_process: boolean
-  wallet_name: Api.WalletName | 'None'
+  wallet_name: Api.WalletFileName | 'None'
   schedule: Schedule | null
   offer_list: Offer[] | null
   nickname: string | null
@@ -73,7 +73,7 @@ type CoinjoinInProgressFlag = { coinjoinInProgress: boolean }
 type RescanBlockchainInProgressFlag = { rescanning: boolean }
 
 type SessionInfo = {
-  walletName: Api.WalletName | null
+  walletFileName: Api.WalletFileName | null
   schedule: Schedule | null
   offers: Offer[] | null
   nickname: string | null
@@ -168,15 +168,15 @@ const ServiceInfoProvider = ({ children }: PropsWithChildren<{}>) => {
             session: sessionActive,
             maker_running: makerRunning,
             coinjoin_in_process: coinjoinInProgress,
-            wallet_name: walletNameOrNoneString,
+            wallet_name: walletFileNameOrNoneString,
             offer_list: offers,
             rescanning,
             schedule,
             nickname,
           } = data
-          const activeWalletName = walletNameOrNoneString !== 'None' ? walletNameOrNoneString : null
+          const activeWalletFileName = walletFileNameOrNoneString !== 'None' ? walletFileNameOrNoneString : null
           return {
-            walletName: activeWalletName,
+            walletFileName: activeWalletFileName,
             sessionActive,
             makerRunning,
             coinjoinInProgress,
@@ -198,7 +198,8 @@ const ServiceInfoProvider = ({ children }: PropsWithChildren<{}>) => {
             dispatchServiceInfo(info)
             setConnectionError(undefined)
 
-            const activeWalletChanged = currentWallet && (!info.walletName || currentWallet.name !== info.walletName)
+            const activeWalletChanged =
+              currentWallet && (!info.walletFileName || currentWallet.walletFileName !== info.walletFileName)
             if (activeWalletChanged) {
               resetWalletAndClearSession()
             }
@@ -224,7 +225,10 @@ const ServiceInfoProvider = ({ children }: PropsWithChildren<{}>) => {
     const abortCtrl = new AbortController()
 
     const refreshSession = () => {
-      reloadServiceInfo({ signal: abortCtrl.signal }).catch((err) => console.error(err))
+      reloadServiceInfo({ signal: abortCtrl.signal }).catch((err) => {
+        if (abortCtrl.signal.aborted) return
+        console.error(err)
+      })
     }
 
     refreshSession()
diff --git a/src/context/WalletContext.tsx b/src/context/WalletContext.tsx
index f0f43f60a..19ce9aa67 100644
--- a/src/context/WalletContext.tsx
+++ b/src/context/WalletContext.tsx
@@ -1,37 +1,39 @@
 import { createContext, useEffect, useCallback, useState, useContext, PropsWithChildren, useMemo } from 'react'
-
 import { getSession, setSession } from '../session'
 import * as fb from '../components/fb/utils'
 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'
 
 const API_AUTH_TOKEN_RENEW_INTERVAL: Milliseconds = isDevMode()
   ? 60 * 1_000
   : Math.round(JM_API_AUTH_TOKEN_EXPIRY * 0.75)
 
-export interface CurrentWallet {
-  name: Api.WalletName
-  token: Api.ApiToken
+export type MinimalWalletContext = Api.WithWalletFileName & Api.WithApiToken
+
+export type CurrentWallet = MinimalWalletContext & {
+  displayName: string
 }
 
 class CurrentWalletImpl implements CurrentWallet {
-  readonly name: Api.WalletName
-  #token: Api.ApiToken
-
-  constructor(name: Api.WalletName, token: Api.ApiToken) {
-    this.name = name
-    this.#token = token
+  readonly walletFileName: Api.WalletFileName
+  readonly #displayName: string
+  token: Api.ApiToken // TODO: should be private
+
+  constructor(ctx: MinimalWalletContext) {
+    this.walletFileName = ctx.walletFileName
+    this.#displayName = walletDisplayName(ctx.walletFileName)
+    this.token = ctx.token
   }
 
-  get token() {
-    return this.#token
+  get displayName() {
+    return this.#displayName
   }
 
   updateToken(token: Api.ApiToken) {
-    this.#token = token
+    this.token = token
   }
 }
 
@@ -120,7 +122,7 @@ type AddressSummary = {
   [key: Api.BitcoinAddress]: AddressInfo
 }
 
-type FidenlityBondSummary = {
+type FidelityBondSummary = {
   fbOutputs: Utxos
 }
 
@@ -129,14 +131,14 @@ export type UtxosByJar = { [key: JarIndex]: Utxos }
 export interface WalletInfo {
   balanceSummary: WalletBalanceSummary
   addressSummary: AddressSummary
-  fidelityBondSummary: FidenlityBondSummary
+  fidelityBondSummary: FidelityBondSummary
   utxosByJar: UtxosByJar
   data: CombinedRawWalletData
 }
 
 interface WalletContextEntry<T extends CurrentWallet> {
   currentWallet: T | null
-  setCurrentWallet: (currentWallet: CurrentWallet) => void
+  setCurrentWallet: (props: MinimalWalletContext) => void
   clearCurrentWallet: () => void
   currentWalletInfo: WalletInfo | undefined
   reloadCurrentWalletInfo: {
@@ -156,7 +158,7 @@ const toAddressSummary = (res: WalletDisplayResponse): AddressSummary => {
     }, {} as AddressSummary)
 }
 
-const toFidelityBondSummary = (res: UtxosResponse): FidenlityBondSummary => {
+const toFidelityBondSummary = (res: UtxosResponse): FidelityBondSummary => {
   const fbOutputs = res.utxos
     .filter((utxo) => fb.utxo.isFidelityBond(utxo))
     .sort((a, b) => {
@@ -178,7 +180,12 @@ const WalletContext = createContext<WalletContextEntry<CurrentWalletImpl> | unde
 
 const restoreWalletFromSession = (): CurrentWalletImpl | null => {
   const session = getSession()
-  return session?.name && session?.auth?.token ? new CurrentWalletImpl(session.name, session.auth.token) : null
+  return session?.walletFileName && session?.auth?.token
+    ? new CurrentWalletImpl({
+        walletFileName: session.walletFileName,
+        token: session.auth.token,
+      })
+    : null
 }
 
 export const groupByJar = (utxos: Utxos): UtxosByJar => {
@@ -211,8 +218,8 @@ const WalletProvider = ({ children }: PropsWithChildren<any>) => {
   const [currentWallet, setCurrentWalletOrNull] = useState(restoreWalletFromSession)
 
   const setCurrentWallet = useCallback(
-    (wallet: CurrentWallet) => {
-      setCurrentWalletOrNull(new CurrentWalletImpl(wallet.name, wallet.token))
+    (ctx: MinimalWalletContext) => {
+      setCurrentWalletOrNull(new CurrentWalletImpl(ctx))
     },
     [setCurrentWalletOrNull],
   )
@@ -230,8 +237,7 @@ const WalletProvider = ({ children }: PropsWithChildren<any>) => {
         throw new Error('Cannot load wallet info: Wallet not present')
       }
 
-      const { name: walletName, token } = currentWallet
-      return await Api.getWalletUtxos({ walletName, token, signal }).then(
+      return await Api.getWalletUtxos({ ...currentWallet, signal }).then(
         (res): Promise<UtxosResponse> => (res.ok ? res.json() : Api.Helper.throwError(res)),
       )
     },
@@ -244,8 +250,8 @@ const WalletProvider = ({ children }: PropsWithChildren<any>) => {
         throw new Error('Cannot load wallet info: Wallet not present')
       }
 
-      const { name: walletName, token } = currentWallet
-      return await Api.getWalletDisplay({ walletName, token, signal }).then(
+      const { walletFileName, token } = currentWallet
+      return await Api.getWalletDisplay({ walletFileName, token, signal }).then(
         (res): Promise<WalletDisplayResponse> => (res.ok ? res.json() : Api.Helper.throwError(res)),
       )
     },
@@ -330,11 +336,14 @@ const WalletProvider = ({ children }: PropsWithChildren<any>) => {
         .then((body) => {
           const auth = Api.Helper.parseAuthProps(body)
 
-          setSession({ name: currentWallet.name, auth })
+          setSession({ walletFileName: currentWallet.walletFileName, auth })
           currentWallet.updateToken(auth.token)
           console.debug('Successfully renewed auth token.')
         })
-        .catch((err) => console.error(err))
+        .catch((err) => {
+          if (abortCtrl.signal.aborted) return
+          console.error(err)
+        })
     }
 
     const interval = setInterval(renewToken, API_AUTH_TOKEN_RENEW_INTERVAL)
diff --git a/src/globals.d.ts b/src/globals.d.ts
index 30c01b0c8..a01f6db2e 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -4,6 +4,7 @@ declare type Unit = 'BTC' | 'sats'
 
 type Milliseconds = number
 type Seconds = number
+type Minutes = number
 
 declare type MnemonicPhrase = string[]
 
diff --git a/src/libs/JmWalletApi.ts b/src/libs/JmWalletApi.ts
index f87e4052c..ca85ae7a3 100644
--- a/src/libs/JmWalletApi.ts
+++ b/src/libs/JmWalletApi.ts
@@ -13,7 +13,7 @@
 const basePath = () => `${window.JM.PUBLIC_PATH}/api`
 
 type ApiToken = string
-type WalletName = `${string}.jmdat`
+type WalletFileName = `${string}.jmdat`
 
 type Mixdepth = number
 type AmountSats = number // TODO: should be BigInt! Remove once every caller migrated to TypeScript.
@@ -40,8 +40,11 @@ type RefreshTokenAuthContext = {
 
 type ApiAuthContext = SingleTokenAuthContext | RefreshTokenAuthContext
 
-type WithWalletName = {
-  walletName: WalletName
+type WithWalletFileName = {
+  walletFileName: WalletFileName
+}
+type WithApiToken = {
+  token: ApiToken
 }
 type WithMixdepth = {
   mixdepth: Mixdepth
@@ -62,11 +65,8 @@ interface ApiRequestContext {
   signal?: AbortSignal
 }
 
-interface AuthApiRequestContext extends ApiRequestContext {
-  token: ApiToken
-}
-
-type WalletRequestContext = AuthApiRequestContext & WithWalletName
+type AuthApiRequestContext = ApiRequestContext & WithApiToken
+type WalletRequestContext = AuthApiRequestContext & WithWalletFileName
 
 interface ApiError {
   message: string
@@ -80,13 +80,13 @@ interface TokenRequest {
 }
 
 interface CreateWalletRequest {
-  walletname: WalletName | string
+  walletname: WalletFileName | string
   password: string
   wallettype?: WalletType
 }
 
 interface RecoverWalletRequest {
-  walletname: WalletName | string
+  walletname: WalletFileName | string
   password: string
   seedphrase: string
   wallettype?: WalletType
@@ -99,12 +99,12 @@ interface WalletUnlockRequest {
 // only support starting the maker with native segwit offers
 type RelOfferType = 'sw0reloffer'
 type AbsOfferType = 'sw0absoffer'
-type OrderType = RelOfferType | AbsOfferType
+type OfferType = RelOfferType | AbsOfferType | string
 
 interface StartMakerRequest {
   cjfee_a: AmountSats
   cjfee_r: number
-  ordertype: OrderType
+  ordertype: OfferType
   minsize: AmountSats
 }
 
@@ -268,15 +268,20 @@ const postToken = async ({ signal, token }: AuthApiRequestContext, req: TokenReq
   })
 }
 
-const getAddressNew = async ({ token, signal, walletName, mixdepth }: WalletRequestContext & WithMixdepth) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/address/new/${mixdepth}`, {
+const getAddressNew = async ({ token, signal, walletFileName, mixdepth }: WalletRequestContext & WithMixdepth) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/address/new/${mixdepth}`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
 }
 
-const getAddressTimelockNew = async ({ token, signal, walletName, lockdate }: WalletRequestContext & WithLockdate) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/address/timelock/new/${lockdate}`, {
+const getAddressTimelockNew = async ({
+  token,
+  signal,
+  walletFileName,
+  lockdate,
+}: WalletRequestContext & WithLockdate) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/address/timelock/new/${lockdate}`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
@@ -308,15 +313,15 @@ const postWalletRecover = async ({ signal }: ApiRequestContext, req: RecoverWall
   })
 }
 
-const getWalletDisplay = async ({ token, signal, walletName }: WalletRequestContext) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/display`, {
+const getWalletDisplay = async ({ token, signal, walletFileName }: WalletRequestContext) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/display`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
 }
 
-const getWalletSeed = async ({ token, signal, walletName }: WalletRequestContext) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/getseed`, {
+const getWalletSeed = async ({ token, signal, walletFileName }: WalletRequestContext) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/getseed`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
@@ -328,33 +333,33 @@ const getWalletSeed = async ({ token, signal, walletName }: WalletRequestContext
  *
  * Note: Performs a non-idempotent GET request.
  */
-const getWalletLock = async ({ token, signal, walletName }: WalletRequestContext) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/lock`, {
+const getWalletLock = async ({ token, signal, walletFileName }: WalletRequestContext) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/lock`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
 }
 
 const postWalletUnlock = async (
-  { signal, walletName }: ApiRequestContext & WithWalletName,
+  { signal, walletFileName }: ApiRequestContext & WithWalletFileName,
   { password }: WalletUnlockRequest,
 ) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/unlock`, {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/unlock`, {
     method: 'POST',
     body: JSON.stringify({ password }),
     signal,
   })
 }
 
-const getWalletUtxos = async ({ token, signal, walletName }: WalletRequestContext) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/utxos`, {
+const getWalletUtxos = async ({ token, signal, walletFileName }: WalletRequestContext) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/utxos`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
 }
 
-const postMakerStart = async ({ token, signal, walletName }: WalletRequestContext, req: StartMakerRequest) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/maker/start`, {
+const postMakerStart = async ({ token, signal, walletFileName }: WalletRequestContext, req: StartMakerRequest) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/maker/start`, {
     method: 'POST',
     headers: { ...Helper.buildAuthHeader(token) },
     body: JSON.stringify({
@@ -374,15 +379,15 @@ const postMakerStart = async ({ token, signal, walletName }: WalletRequestContex
  *
  * Note: Performs a non-idempotent GET request.
  */
-const getMakerStop = async ({ token, signal, walletName }: WalletRequestContext) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/maker/stop`, {
+const getMakerStop = async ({ token, signal, walletFileName }: WalletRequestContext) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/maker/stop`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
 }
 
-const postDirectSend = async ({ token, signal, walletName }: WalletRequestContext, req: DirectSendRequest) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/taker/direct-send`, {
+const postDirectSend = async ({ token, signal, walletFileName }: WalletRequestContext, req: DirectSendRequest) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/taker/direct-send`, {
     method: 'POST',
     headers: { ...Helper.buildAuthHeader(token) },
     body: JSON.stringify(req),
@@ -390,8 +395,8 @@ const postDirectSend = async ({ token, signal, walletName }: WalletRequestContex
   })
 }
 
-const postCoinjoin = async ({ token, signal, walletName }: WalletRequestContext, req: DoCoinjoinRequest) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/taker/coinjoin`, {
+const postCoinjoin = async ({ token, signal, walletFileName }: WalletRequestContext, req: DoCoinjoinRequest) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/taker/coinjoin`, {
     method: 'POST',
     headers: { ...Helper.buildAuthHeader(token) },
     body: JSON.stringify(req),
@@ -428,10 +433,10 @@ const getYieldgenReport = async ({ signal }: ApiRequestContext) => {
 }
 
 const postFreeze = async (
-  { token, signal, walletName }: WalletRequestContext,
+  { token, signal, walletFileName }: WalletRequestContext,
   { utxo, freeze = true }: FreezeRequest,
 ) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/freeze`, {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/freeze`, {
     method: 'POST',
     headers: { ...Helper.buildAuthHeader(token) },
     body: JSON.stringify({
@@ -442,8 +447,11 @@ const postFreeze = async (
   })
 }
 
-const postSchedulerStart = async ({ token, signal, walletName }: WalletRequestContext, req: StartSchedulerRequest) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/taker/schedule`, {
+const postSchedulerStart = async (
+  { token, signal, walletFileName }: WalletRequestContext,
+  req: StartSchedulerRequest,
+) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/taker/schedule`, {
     method: 'POST',
     headers: { ...Helper.buildAuthHeader(token) },
     body: JSON.stringify({ ...req }),
@@ -451,15 +459,15 @@ const postSchedulerStart = async ({ token, signal, walletName }: WalletRequestCo
   })
 }
 
-const getTakerStop = async ({ token, signal, walletName }: WalletRequestContext) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/taker/stop`, {
+const getTakerStop = async ({ token, signal, walletFileName }: WalletRequestContext) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/taker/stop`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
 }
 
-const getSchedule = async ({ token, signal, walletName }: WalletRequestContext) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/taker/schedule`, {
+const getSchedule = async ({ token, signal, walletFileName }: WalletRequestContext) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/taker/schedule`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
@@ -468,8 +476,8 @@ const getSchedule = async ({ token, signal, walletName }: WalletRequestContext)
 /**
  * Change a config variable (for the duration of this backend daemon process instance).
  */
-const postConfigSet = async ({ token, signal, walletName }: WalletRequestContext, req: ConfigSetRequest) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/configset`, {
+const postConfigSet = async ({ token, signal, walletFileName }: WalletRequestContext, req: ConfigSetRequest) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/configset`, {
     method: 'POST',
     headers: { ...Helper.buildAuthHeader(token) },
     body: JSON.stringify(req),
@@ -482,8 +490,8 @@ const postConfigSet = async ({ token, signal, walletName }: WalletRequestContext
  *
  * @returns an object with property `configvalue` as string
  */
-const postConfigGet = async ({ token, signal, walletName }: WalletRequestContext, req: ConfigGetRequest) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/configget`, {
+const postConfigGet = async ({ token, signal, walletFileName }: WalletRequestContext, req: ConfigGetRequest) => {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/configget`, {
     method: 'POST',
     headers: { ...Helper.buildAuthHeader(token) },
     body: JSON.stringify(req),
@@ -497,10 +505,10 @@ const postConfigGet = async ({ token, signal, walletName }: WalletRequestContext
 const getRescanBlockchain = async ({
   token,
   signal,
-  walletName,
+  walletFileName,
   blockheight,
 }: WalletRequestContext & WithBlockheight) => {
-  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletName)}/rescanblockchain/${blockheight}`, {
+  return await fetch(`${basePath()}/v1/wallet/${encodeURIComponent(walletFileName)}/rescanblockchain/${blockheight}`, {
     headers: { ...Helper.buildAuthHeader(token) },
     signal,
   })
@@ -545,13 +553,17 @@ export {
   JmApiError,
   ApiAuthContext,
   StartSchedulerRequest,
+  StartMakerRequest,
   WalletRequestContext,
   ApiToken,
-  WalletName,
+  WalletFileName,
+  WithWalletFileName,
+  WithApiToken,
   Lockdate,
   TxId,
   UtxoId,
   Mixdepth,
   AmountSats,
+  OfferType,
   BitcoinAddress,
 }
diff --git a/src/session.ts b/src/session.ts
index dacaf43f7..b0bb585df 100644
--- a/src/session.ts
+++ b/src/session.ts
@@ -1,9 +1,9 @@
-import { WalletName, ApiAuthContext } from './libs/JmWalletApi'
+import { WalletFileName, ApiAuthContext } from './libs/JmWalletApi'
 
 const SESSION_KEY = 'joinmarket'
 
 export interface SessionItem {
-  name: WalletName
+  walletFileName: WalletFileName
   auth: ApiAuthContext
 }
 
@@ -11,9 +11,9 @@ export const setSession = (session: SessionItem) => sessionStorage.setItem(SESSI
 
 export const getSession = (): SessionItem | null => {
   const json = sessionStorage.getItem(SESSION_KEY)
-  const { name, auth }: any = (json && JSON.parse(json)) || {}
-  if (name && auth?.token) {
-    return { name, auth }
+  const { walletFileName, auth }: any = (json && JSON.parse(json)) || {}
+  if (walletFileName && auth?.token) {
+    return { walletFileName, auth }
   } else {
     clearSession()
     return null
diff --git a/src/utils.ts b/src/utils.ts
index c5979d0a6..de6d44cbe 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,5 @@
+import { WalletFileName } from './libs/JmWalletApi'
+
 const BTC_FORMATTER = new Intl.NumberFormat('en-US', {
   minimumIntegerDigits: 1,
   minimumFractionDigits: 8,
@@ -11,7 +13,7 @@ const SATS_FORMATTER = new Intl.NumberFormat('en-US', {
 export const BTC: Unit = 'BTC'
 export const SATS: Unit = 'sats'
 
-export const JM_WALLET_FILE_EXTENSION = '.jmdat'
+const JM_WALLET_FILE_EXTENSION = '.jmdat'
 
 export const DUMMY_MNEMONIC_PHRASE: MnemonicPhrase =
   'abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about'.split(' ')
@@ -20,7 +22,9 @@ export const SEGWIT_ACTIVATION_BLOCK = 481_824 // https://github.com/bitcoin/bit
 
 export const sanitizeWalletName = (name: string) => name.replace(JM_WALLET_FILE_EXTENSION, '')
 
-export const walletDisplayName = (name: string) => sanitizeWalletName(name)
+export const walletDisplayNameToFileName = (name: string) => (name + JM_WALLET_FILE_EXTENSION) as WalletFileName
+
+export const walletDisplayName = (fileName: WalletFileName) => sanitizeWalletName(fileName)
 
 export const displayDate = (string: string) => new Date(string).toLocaleString()