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 JoinMarket-Org/joinmarket-clientserver#1484 (comment)

* chore(dev): do not log error when fetch was aborted

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

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

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",

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],
   )

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>
+  )
+}

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}

src/components/CreateWallet.test.jsx → 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)