frontend: move qr scanner open state to sub-comp.

Move the `activeScanQR` state used to control the QR scanner dialog (open/closed) into the `ReceiverAddressInput` to simplify the component. We can remove the `activeScanQR` from the back button disabled property because a) navigation with ESC allows the user to go back anyways and b) the back button itself is not clickable when there is an active overlay.
BitBoxSwiss · Sep 2, 2024 · a20ddcc · a20ddcc
1 parent bdf270c
commit a20ddcc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 24 deletions.
diff --git a/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.tsx b/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, useCallback, useContext } from 'react';
+import { ChangeEvent, useCallback, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { debug } from '@/utils/env';
 import { getReceiveAddressList } from '@/api/account';
@@ -33,9 +33,7 @@ type TReceiverAddressInputProps = {
     addressError?: string;
     onInputChange: (value: string) => void;
     recipientAddress: string;
-    activeScanQR: boolean;
     parseQRResult: (uri: string) => void;
-    onChangeActiveScanQR: (activeScanQR: boolean) => void
 }
 
 export const ScanQRButton = ({ onClick }: TToggleScanQRButtonProps) => {
@@ -51,11 +49,10 @@ export const ReceiverAddressInput = ({
   addressError,
   onInputChange,
   recipientAddress,
-  activeScanQR,
   parseQRResult,
-  onChangeActiveScanQR
 }: TReceiverAddressInputProps) => {
   const { t } = useTranslation();
+  const [activeScanQR, setActiveScanQR] = useState(false);
 
   const handleSendToSelf = useCallback(async () => {
     if (!accountCode) {
@@ -71,20 +68,16 @@ export const ReceiverAddressInput = ({
     }
   }, [accountCode, onInputChange]);
 
-  const toggleScanQR = useCallback(() => {
-    if (activeScanQR) {
-      onChangeActiveScanQR(false);
-      return;
-    }
-    onChangeActiveScanQR(true);
-  }, [activeScanQR, onChangeActiveScanQR]);
+  const toggleScanQR = () => {
+    setActiveScanQR(activeScanQR => !activeScanQR);
+  };
 
   return (
     <>
       {activeScanQR && (
         <ScanQRDialog
           toggleScanQR={toggleScanQR}
-          onChangeActiveScanQR={onChangeActiveScanQR}
+          onChangeActiveScanQR={setActiveScanQR}
           parseQRResult={parseQRResult}
         />
       )}
@@ -106,4 +99,4 @@ export const ReceiverAddressInput = ({
       </Input>
     </>
   );
-};
+};
diff --git a/frontends/web/src/routes/account/send/send.tsx b/frontends/web/src/routes/account/send/send.tsx
@@ -85,7 +85,6 @@ export type State = {
     coinControl: boolean;
     btcUnit: BtcUnit;
     activeCoinControl: boolean;
-    activeScanQR: boolean;
     note: string;
 }
 
@@ -113,7 +112,6 @@ class Send extends Component<Props, State> {
     coinControl: false,
     btcUnit : 'default',
     activeCoinControl: false,
-    activeScanQR: false,
     note: '',
     customFee: '',
   };
@@ -378,10 +376,6 @@ class Send extends Component<Props, State> {
     });
   };
 
-  private setActiveScanQR = (activeScanQR: boolean) => {
-    this.setState({ activeScanQR });
-  };
-
   private parseQRResult = async (uri: string) => {
     let address;
     let amount = '';
@@ -481,7 +475,6 @@ class Send extends Component<Props, State> {
       signConfirm,
       coinControl,
       activeCoinControl,
-      activeScanQR,
       note,
     } = this.state;
 
@@ -548,8 +541,6 @@ class Send extends Component<Props, State> {
                       onInputChange={this.onReceiverAddressInputChange}
                       recipientAddress={recipientAddress}
                       parseQRResult={this.parseQRResult}
-                      activeScanQR={activeScanQR}
-                      onChangeActiveScanQR={this.setActiveScanQR}
                     />
                   </Column>
                 </Grid>
@@ -605,7 +596,7 @@ class Send extends Component<Props, State> {
                         {t('send.button')}
                       </Button>
                       <BackButton
-                        disabled={activeCoinControl || activeScanQR}
+                        disabled={activeCoinControl}
                         enableEsc>
                         {t('button.back')}
                       </BackButton>