frontend: extract FW upgrade required dialog and reuse it in send.tsx

And move the check to when selecting the account already, not when
clicking Review.

`deviceIDs` is re-fetched so we don't have to pass it everywhere.

Author: benma's agent

frontends/web/src/app.tsx

@@ -216,7 +216,6 @@ export const App = () => {
             <AppRouter
               accounts={accounts}
               activeAccounts={activeAccounts}
-              deviceIDs={deviceIDs}
               devices={devices}
               devicesKey={devicesKey}
             />

frontends/web/src/components/dialog/firmware-upgrade-required-dialog.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright 2025 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCallback, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Dialog, DialogButtons } from './dialog';
+import { getDeviceList } from '@/api/devices';
+import { syncDeviceList } from '@/api/devicessync';
+import { useSync } from '@/hooks/api';
+import { useDefault } from '@/hooks/default';
+import { Button } from '@/components/forms';
+import { AppContext } from '@/contexts/AppContext';
+
+type TFirmwareUpgradeRequiredDialogProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export const FirmwareUpgradeRequiredDialog = ({ open, onClose }: TFirmwareUpgradeRequiredDialogProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { setFirmwareUpdateDialogOpen } = useContext(AppContext);
+  const devices = useDefault(useSync(getDeviceList, syncDeviceList), {});
+  const deviceIDs = Object.keys(devices);
+
+  const handleUpgrade = useCallback(() => {
+    setFirmwareUpdateDialogOpen(true);
+    if (deviceIDs && deviceIDs.length > 0) {
+      navigate(`/settings/device-settings/${deviceIDs[0] as string}`);
+    }
+    onClose();
+  }, [setFirmwareUpdateDialogOpen, deviceIDs, navigate, onClose]);
+
+  return (
+    <Dialog
+      title={t('upgradeFirmware.title')}
+      open={open}
+      onClose={onClose}>
+      <p>{t('device.firmwareUpgradeRequired')}</p>
+      <DialogButtons>
+        <Button primary onClick={handleUpgrade}>
+          {t('upgradeFirmware.button')}
+        </Button>
+        <Button secondary onClick={onClose}>
+          {t('dialog.cancel')}
+        </Button>
+      </DialogButtons>
+    </Dialog>
+  );
+};

frontends/web/src/routes/account/send/components/inputs/receiver-address-wrapper.tsx

@@ -16,15 +16,18 @@
 
 import { ChangeEvent, useCallback, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { alertUser } from '@/components/alert/Alert';
 import { TOption } from '@/components/dropdown/dropdown';
 import { InputWithDropdown } from '@/components/forms/input-with-dropdown';
 import * as accountApi from '@/api/account';
 import { getReceiveAddressList, IAccount } from '@/api/account';
 import { statusChanged, syncdone } from '@/api/accountsync';
+import { connectKeystore, getKeystoreFeatures } from '@/api/keystores';
 import { unsubscribe } from '@/utils/subscriptions';
 import { TUnsubscribe } from '@/utils/transport-common';
 import { useMountedRef } from '@/hooks/mount';
 import { useMediaQuery } from '@/hooks/mediaquery';
+import { FirmwareUpgradeRequiredDialog } from '@/components/dialog/firmware-upgrade-required-dialog';
 import { SpinnerRingAnimated } from '@/components/spinner/SpinnerAnimation';
 import { Logo } from '@/components/icon';
 import receiverStyles from './receiver-address-input.module.css';
@@ -73,6 +76,7 @@ export const ReceiverAddressWrapper = ({
   children,
 }: TReceiverAddressWrapperProps) => {
   const { t } = useTranslation();
+  const [showFirmwareUpgradeDialog, setShowFirmwareUpgradeDialog] = useState(false);
   const mounted = useMountedRef();
   const isMobile = useMediaQuery('(max-width: 768px)');
   const [selectedAccount, setSelectedAccount] = useState<TOption<IAccount | null> | null>(null);
@@ -88,11 +92,34 @@ export const ReceiverAddressWrapper = ({
     };
   }) : [];
 
+  const checkFirmwareSupport = useCallback(async (selectedAccount: accountApi.IAccount) => {
+    const rootFingerprint = selectedAccount.keystore.rootFingerprint;
+    const connectResult = await connectKeystore(rootFingerprint);
+    if (!connectResult.success) {
+      return false;
+    }
+    const featuresResult = await getKeystoreFeatures(rootFingerprint);
+    if (!featuresResult.success) {
+      alertUser(featuresResult.errorMessage || t('genericError'));
+      return false;
+    }
+    if (!featuresResult.features?.supportsSendToSelf) {
+      setShowFirmwareUpgradeDialog(true);
+      return false;
+    }
+    return true;
+  }, [t]);
+
   const handleSendToAccount = useCallback(async (selectedOption: TAccountOption) => {
     if (selectedOption.value === null || selectedOption.disabled) {
       return;
     }
     const selectedAccountValue = selectedOption.value;
+
+    const supported = await checkFirmwareSupport(selectedAccountValue);
+    if (!supported) {
+      return;
+    }
     setSelectedAccount(selectedOption);
     try {
       const receiveAddresses = await getReceiveAddressList(selectedAccountValue.code)();
@@ -104,7 +131,7 @@ export const ReceiverAddressWrapper = ({
     } catch (e) {
       console.error(e);
     }
-  }, [onInputChange, onAccountChange]);
+  }, [onInputChange, onAccountChange, checkFirmwareSupport]);
 
   const handleReset = useCallback(() => {
     setSelectedAccount(null);
@@ -141,34 +168,40 @@ export const ReceiverAddressWrapper = ({
   }, [accounts, checkAccountStatus]);
 
   return (
-    <InputWithDropdown
-      id="recipientAddress"
-      label={t('send.address.label')}
-      error={error}
-      align="left"
-      placeholder={t('send.address.placeholder')}
-      onInput={(e: ChangeEvent<HTMLInputElement>) => onInputChange(e.target.value)}
-      value={recipientAddress}
-      disabled={selectedAccount !== null}
-      autoFocus={!isMobile}
-      dropdownOptions={accountOptions}
-      dropdownValue={selectedAccount}
-      onDropdownChange={(selected) => {
-        if (selected && selected.value !== null && !(selected as TAccountOption).disabled) {
-          handleSendToAccount(selected as TAccountOption);
-        }
-      }}
-      dropdownPlaceholder={t('send.sendToAccount.placeholder')}
-      dropdownTitle={t('send.sendToAccount.title')}
-      renderOptions={(e, isSelectedValue) => <AccountOption option={e} isSelectedValue={isSelectedValue} />}
-      isOptionDisabled={(option) => (option as TAccountOption).disabled || false}
-      labelSection={selectedAccount ? (
-        <span role="button" id="sendToSelf" className={receiverStyles.action} onClick={handleReset}>
-          {t('generic.reset')}
-        </span>
-      ) : undefined}
-    >
-      {children}
-    </InputWithDropdown>
+    <>
+      <InputWithDropdown
+        id="recipientAddress"
+        label={t('send.address.label')}
+        error={error}
+        align="left"
+        placeholder={t('send.address.placeholder')}
+        onInput={(e: ChangeEvent<HTMLInputElement>) => onInputChange(e.target.value)}
+        value={recipientAddress}
+        disabled={selectedAccount !== null}
+        autoFocus={!isMobile}
+        dropdownOptions={accountOptions}
+        dropdownValue={selectedAccount}
+        onDropdownChange={(selected) => {
+          if (selected && selected.value !== null && !(selected as TAccountOption).disabled) {
+            handleSendToAccount(selected as TAccountOption);
+          }
+        }}
+        dropdownPlaceholder={t('send.sendToAccount.placeholder')}
+        dropdownTitle={t('send.sendToAccount.title')}
+        renderOptions={(e, isSelectedValue) => <AccountOption option={e} isSelectedValue={isSelectedValue} />}
+        isOptionDisabled={(option) => (option as TAccountOption).disabled || false}
+        labelSection={selectedAccount ? (
+          <span role="button" id="sendToSelf" className={receiverStyles.action} onClick={handleReset}>
+            {t('generic.reset')}
+          </span>
+        ) : undefined}
+      >
+        {children}
+      </InputWithDropdown>
+      <FirmwareUpgradeRequiredDialog
+        open={showFirmwareUpgradeDialog}
+        onClose={() => setShowFirmwareUpgradeDialog(false)}
+      />
+    </>
   );
 };

frontends/web/src/routes/account/send/send.tsx

@@ -42,7 +42,7 @@ import { NoteInput } from './components/inputs/note-input';
 import { FiatValue } from './components/fiat-value';
 import { TProposalError, txProposalErrorHandling } from './services';
 import { CoinControl } from './coin-control';
-import { connectKeystore, getKeystoreFeatures } from '@/api/keystores';
+import { connectKeystore } from '@/api/keystores';
 import style from './send.module.css';
 
 type TProps = {
@@ -78,7 +78,6 @@ export const Send = ({
   activeCurrency,
 }: TProps) => {
   const { t } = useTranslation();
-
   const selectedUTXOsRef = useRef<TSelectedUTXOs>({});
   const [utxoDialogActive, setUtxoDialogActive] = useState(false);
   // in case there are multiple parallel tx proposals we can ignore all other but the last one
@@ -135,17 +134,6 @@ export const Send = ({
     if (!connectResult.success) {
       return;
     }
-    if (selectedReceiverAccount) {
-      const featuresResult = await getKeystoreFeatures(rootFingerprint);
-      if (!featuresResult.success) {
-        alertUser(featuresResult.errorMessage || t('genericError'));
-        return;
-      }
-      if (!featuresResult.features?.supportsSendToSelf) {
-        alertUser(t('device.firmwareUpgradeRequired'));
-        return;
-      }
-    }
     setIsConfirming(true);
     try {
       const result = await accountApi.sendTx(account.code, note);
@@ -156,7 +144,7 @@ export const Send = ({
       // The following method allows pressing escape again.
       setIsConfirming(false);
     }
-  }, [account.code, account.keystore.rootFingerprint, note, selectedReceiverAccount, t]);
+  }, [account.code, account.keystore.rootFingerprint, note]);
 
   const getValidTxInputData = useCallback((): Required<accountApi.TTxInput> | false => {
     if (

frontends/web/src/routes/market/pocket.tsx

@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { createRef, useContext, useEffect, useState, useRef } from 'react';
+import { createRef, useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { RequestAddressV0Message, MessageVersion, parseMessage, serializeMessage, V0MessageType, PaymentRequestV0Message } from 'request-address';
-import { AppContext } from '@/contexts/AppContext';
 import { getConfig } from '@/utils/config';
-import { Dialog, DialogButtons } from '@/components/dialog/dialog';
+import { Dialog } from '@/components/dialog/dialog';
 import { confirmation } from '@/components/confirm/Confirm';
 import { verifyAddress, getPocketURL, TMarketAction } from '@/api/market';
 import { AccountCode, getInfo, getTransactionList, hasPaymentRequest, signAddress, proposeTx, sendTx, TTxInput } from '@/api/account';
@@ -33,26 +32,23 @@ import { alertUser } from '@/components/alert/Alert';
 import { MarketGuide } from './guide';
 import { convertScriptType } from '@/utils/request-addess';
 import { parseExternalBtcAmount } from '@/api/coins';
+import { FirmwareUpgradeRequiredDialog } from '@/components/dialog/firmware-upgrade-required-dialog';
 import style from './iframe.module.css';
-import { Button } from '@/components/forms';
 
 type TProps = {
   action: TMarketAction;
   code: AccountCode;
-  deviceIDs: string[];
 }
 
 export const Pocket = ({
   action,
   code,
-  deviceIDs,
 }: TProps) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
   // Pocket sell only works if the FW supports payment requests
   const hasPaymentRequestResponse = useLoad(() => hasPaymentRequest(code));
-  const { setFirmwareUpdateDialogOpen } = useContext(AppContext);
   const [fwRequiredDialog, setFwRequiredDialog] = useState(false);
 
   const [height, setHeight] = useState(0);
@@ -91,7 +87,7 @@ export const Pocket = ({
         alertUser(hasPaymentRequestResponse?.errorMessage);
       }
     }
-  }, [action, deviceIDs, hasPaymentRequestResponse, navigate, setFirmwareUpdateDialogOpen, t]);
+  }, [action, hasPaymentRequestResponse, t]);
 
   useEffect(() => {
     if (config) {
@@ -382,27 +378,13 @@ export const Pocket = ({
             medium centered>
             <div className="text-center">{t('buy.pocket.verifyBitBox02')}</div>
           </Dialog>
-          <Dialog title={t('upgradeFirmware.title')} open={fwRequiredDialog}>
-            {t('device.firmwareUpgradeRequired')}
-            <DialogButtons>
-              <Button
-                primary
-                onClick={() => {
-                  setFirmwareUpdateDialogOpen(true);
-                  navigate(`/settings/device-settings/${deviceIDs[0] as string}`);
-                }}>
-                {t('upgradeFirmware.button')}
-              </Button>
-              <Button
-                secondary
-                onClick={() => {
-                  setFwRequiredDialog(false);
-                  navigate(-1);
-                }}>
-                {t('dialog.cancel')}
-              </Button>
-            </DialogButtons>
-          </Dialog>
+          <FirmwareUpgradeRequiredDialog
+            open={fwRequiredDialog}
+            onClose={() => {
+              setFwRequiredDialog(false);
+              navigate(-1);
+            }}
+          />
         </div>
       </div>
       <MarketGuide vendor="pocket" translationContext="bitcoin" />

frontends/web/src/routes/router.tsx

@@ -55,7 +55,6 @@ import { More } from '@/routes/settings/more';
 
 type TAppRouterProps = {
     devices: TDevices;
-    deviceIDs: string[];
     accounts: IAccount[];
     activeAccounts: IAccount[];
     devicesKey: ((input: string) => string)
@@ -70,7 +69,7 @@ const InjectParams = ({ children }: TInjectParamsProps) => {
   return React.cloneElement(children as React.ReactElement, params);
 };
 
-export const AppRouter = ({ devices, deviceIDs, devicesKey, accounts, activeAccounts }: TAppRouterProps) => {
+export const AppRouter = ({ devices, devicesKey, accounts, activeAccounts }: TAppRouterProps) => {
   const hasAccounts = accounts.length > 0;
   const Homepage = (<DeviceSwitch
     key={devicesKey('device-switch-default')}
@@ -199,15 +198,13 @@ export const AppRouter = ({ devices, deviceIDs, devicesKey, accounts, activeAcco
     <Pocket
       action="buy"
       code={''}
-      deviceIDs={deviceIDs}
     />
   </InjectParams>);
 
   const PocketSellEl = (<InjectParams>
     <Pocket
       action="sell"
       code={''}
-      deviceIDs={deviceIDs}
     />
   </InjectParams>);