Merge pull request #7630 from BlueWallet/macw

REF: Reuse existing component

components/AddressInputScanButton.tsx

@@ -10,16 +10,22 @@ import RNQRGenerator from 'rn-qr-generator';
 import { CommonToolTipActions } from '../typings/CommonToolTipActions';
 import { useSettings } from '../hooks/context/useSettings';
 import { useExtendedNavigation } from '../hooks/useExtendedNavigation';
+import { isDesktop } from '../blue_modules/environment';
 
 interface AddressInputScanButtonProps {
-  isLoading: boolean;
+  isLoading?: boolean;
   onChangeText: (text: string) => void;
+  type?: 'default' | 'link';
+  testID?: string;
+  beforePress?: () => Promise<void> | void;
 }
 
 export const AddressInputScanButton = ({
   isLoading,
-
   onChangeText,
+  type = 'default',
+  testID = 'BlueAddressInputScanQrButton',
+  beforePress,
 }: AddressInputScanButtonProps) => {
   const { colors } = useTheme();
   const { isClipboardGetContentEnabled } = useSettings();
@@ -35,15 +41,17 @@ export const AddressInputScanButton = ({
   });
 
   const toolTipOnPress = useCallback(async () => {
+    if (beforePress) {
+      await beforePress();
+    }
     Keyboard.dismiss();
     navigation.navigate('ScanQRCode', {
       showFileImportButton: true,
     });
-  }, [navigation]);
+  }, [navigation, beforePress]);
 
   const actions = useMemo(() => {
     const availableActions = [
-      CommonToolTipActions.ScanQR,
       CommonToolTipActions.ChoosePhoto,
       CommonToolTipActions.ImportFile,
       {
@@ -135,21 +143,30 @@ export const AddressInputScanButton = ({
       actions={actions}
       isButton
       onPressMenuItem={onMenuItemPressed}
-      testID="BlueAddressInputScanQrButton"
+      testID={testID}
       disabled={isLoading}
       onPress={toolTipOnPress}
-      buttonStyle={buttonStyle}
+      isMenuPrimaryAction={isDesktop}
+      buttonStyle={type === 'default' ? buttonStyle : undefined}
       accessibilityLabel={loc.send.details_scan}
       accessibilityHint={loc.send.details_scan_hint}
     >
-      <Image source={require('../img/scan-white.png')} accessible={false} />
-      <Text style={[styles.scanText, stylesHook.scanText]} accessible={false}>
-        {loc.send.details_scan}
-      </Text>
+      {type === 'default' ? (
+        <>
+          <Image source={require('../img/scan-white.png')} accessible={false} />
+          <Text style={[styles.scanText, stylesHook.scanText]} accessible={false}>
+            {loc.send.details_scan}
+          </Text>
+        </>
+      ) : (
+        <Text style={[styles.linkText, { color: colors.foregroundColor }]}>{loc.wallets.import_scan_qr}</Text>
+      )}
     </ToolTipMenu>
   );
 };
 
+AddressInputScanButton.displayName = 'AddressInputScanButton';
+
 const styles = StyleSheet.create({
   scan: {
     height: 36,
@@ -164,4 +181,8 @@ const styles = StyleSheet.create({
   scanText: {
     marginLeft: 4,
   },
+  linkText: {
+    textAlign: 'center',
+    fontSize: 16,
+  },
 });

components/TooltipMenu.tsx

@@ -1,11 +1,11 @@
-import React, { Ref, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Platform, Pressable, TouchableOpacity } from 'react-native';
 import { MenuView, MenuAction, NativeActionEvent } from '@react-native-menu/menu';
 import { ContextMenuView, RenderItem, OnPressMenuItemEventObject, IconConfig, MenuElementConfig } from 'react-native-ios-context-menu';
 import { ToolTipMenuProps, Action } from './types';
 import { useSettings } from '../hooks/context/useSettings';
 
-const ToolTipMenu = React.memo((props: ToolTipMenuProps, ref?: Ref<any>) => {
+const ToolTipMenu = (props: ToolTipMenuProps) => {
   const {
     title = '',
     isMenuPrimaryAction = false,
@@ -199,6 +199,6 @@ const ToolTipMenu = React.memo((props: ToolTipMenuProps, ref?: Ref<any>) => {
   };
 
   return props.actions.length > 0 ? (Platform.OS === 'ios' && renderPreview ? renderContextMenuView() : renderMenuView()) : null;
-});
+};
 
 export default ToolTipMenu;

screen/wallets/ImportWallet.tsx

@@ -3,7 +3,7 @@ import { RouteProp, useRoute } from '@react-navigation/native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { Keyboard, Platform, ScrollView, StyleSheet, TouchableWithoutFeedback, View, TouchableOpacity, Image } from 'react-native';
 import { disallowScreenshot } from 'react-native-screen-capture';
-import { BlueButtonLink, BlueFormLabel, BlueFormMultiInput, BlueSpacing20 } from '../../BlueComponents';
+import { BlueFormLabel, BlueFormMultiInput, BlueSpacing20 } from '../../BlueComponents';
 import Button from '../../components/Button';
 import {
   DoneAndDismissKeyboardInputAccessory,
@@ -19,6 +19,7 @@ import { CommonToolTipActions } from '../../typings/CommonToolTipActions';
 import { AddWalletStackParamList } from '../../navigation/AddWalletStack';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { isDesktop } from '../../blue_modules/environment';
+import { AddressInputScanButton } from '../../components/AddressInputScanButton';
 
 type RouteProps = RouteProp<AddWalletStackParamList, 'ImportWallet'>;
 type NavigationProps = NativeStackNavigationProp<AddWalletStackParamList, 'ImportWallet'>;
@@ -109,12 +110,6 @@ const ImportWallet = () => {
     [importMnemonic],
   );
 
-  const importScan = useCallback(async () => {
-    navigation.navigate('ScanQRCode', {
-      showFileImportButton: true,
-    });
-  }, [navigation]);
-
   useEffect(() => {
     const data = route.params?.onBarScanned;
     if (data) {
@@ -199,7 +194,7 @@ const ImportWallet = () => {
         <>
           <Button disabled={importText.trim().length === 0} title={loc.wallets.import_do_import} testID="DoImport" onPress={handleImport} />
           <BlueSpacing20 />
-          <BlueButtonLink title={loc.wallets.import_scan_qr} onPress={importScan} testID="ScanImport" />
+          <AddressInputScanButton type="link" onChangeText={setImportText} testID="ScanImport" />
         </>
       </View>
     </>

screen/wallets/ViewEditMultisigCosigners.tsx

@@ -18,15 +18,7 @@ import {
 import { Badge, Icon } from '@rneui/themed';
 import { isDesktop } from '../../blue_modules/environment';
 import { encodeUR } from '../../blue_modules/ur';
-import {
-  BlueButtonLink,
-  BlueCard,
-  BlueFormMultiInput,
-  BlueLoading,
-  BlueSpacing10,
-  BlueSpacing20,
-  BlueTextCentered,
-} from '../../BlueComponents';
+import { BlueCard, BlueFormMultiInput, BlueLoading, BlueSpacing10, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
 import { HDSegwitBech32Wallet, MultisigCosigner, MultisigHDWallet } from '../../class';
 import presentAlert from '../../components/Alert';
 import BottomModal, { BottomModalHandle } from '../../components/BottomModal';
@@ -52,6 +44,7 @@ import { ViewEditMultisigCosignersStackParamList } from '../../navigation/ViewEd
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import SafeArea from '../../components/SafeArea';
 import { TWallet } from '../../class/wallets/types';
+import { AddressInputScanButton } from '../../components/AddressInputScanButton';
 
 type RouteParams = RouteProp<ViewEditMultisigCosignersStackParamList, 'ViewEditMultisigCosigners'>;
 type NavigationProp = NativeStackNavigationProp<ViewEditMultisigCosignersStackParamList, 'ViewEditMultisigCosigners'>;
@@ -62,8 +55,7 @@ const ViewEditMultisigCosigners: React.FC = () => {
   const { wallets, setWalletsWithNewOrder } = useStorage();
   const { isBiometricUseCapableAndEnabled } = useBiometrics();
   const { isElectrumDisabled, isPrivacyBlurEnabled } = useSettings();
-  const { navigate, dispatch, setParams, setOptions } = useExtendedNavigation<NavigationProp>();
-  const openScannerButtonRef = useRef();
+  const { dispatch, setParams, setOptions } = useExtendedNavigation<NavigationProp>();
   const route = useRoute<RouteParams>();
   const { walletID } = route.params;
   const w = useRef(wallets.find(wallet => wallet.getID() === walletID));
@@ -516,11 +508,6 @@ const ViewEditMultisigCosigners: React.FC = () => {
     });
   };
 
-  const scanOrOpenFile = async () => {
-    await provideMnemonicsModalRef.current?.dismiss();
-    navigate('ScanQRCode', { showFileImportButton: true });
-  };
-
   useEffect(() => {
     const scannedData = route.params.onBarScanned;
     if (scannedData) {
@@ -573,11 +560,13 @@ const ViewEditMultisigCosigners: React.FC = () => {
 
             {!isLoading && (
               <>
-                <BlueButtonLink
-                  ref={openScannerButtonRef}
-                  disabled={isLoading}
-                  onPress={scanOrOpenFile}
-                  title={loc.wallets.import_scan_qr}
+                <AddressInputScanButton
+                  beforePress={async () => {
+                    await provideMnemonicsModalRef.current?.dismiss();
+                  }}
+                  isLoading={isLoading}
+                  type="link"
+                  onChangeText={setImportText}
                 />
                 <BlueSpacing20 />
               </>

screen/wallets/addMultisigStep2.js

@@ -17,7 +17,7 @@ import { Icon } from '@rneui/themed';
 import A from '../../blue_modules/analytics';
 import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
 import { encodeUR } from '../../blue_modules/ur';
-import { BlueButtonLink, BlueFormMultiInput, BlueSpacing10, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
+import { BlueFormMultiInput, BlueSpacing10, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
 import { HDSegwitBech32Wallet, MultisigCosigner, MultisigHDWallet } from '../../class';
 import presentAlert from '../../components/Alert';
 import BottomModal from '../../components/BottomModal';
@@ -44,6 +44,7 @@ import MultipleStepsListItem, {
   MultipleStepsListItemButtonType,
   MultipleStepsListItemDashType,
 } from '../../components/MultipleStepsListItem';
+import { AddressInputScanButton } from '../../components/AddressInputScanButton';
 
 const staticCache = {};
 
@@ -65,7 +66,6 @@ const WalletsAddMultisigStep2 = () => {
   const [vaultKeyData, setVaultKeyData] = useState({ keyIndex: 1, xpub: '', seed: '', isLoading: false }); // string rendered in modal
   const [importText, setImportText] = useState('');
   const [askPassphrase, setAskPassphrase] = useState(false);
-  const openScannerButton = useRef();
   const { isPrivacyBlurEnabled } = useSettings();
   const data = useRef(new Array(n));
   const { isVisible } = useKeyboard();
@@ -433,11 +433,6 @@ const WalletsAddMultisigStep2 = () => {
     [cosigners, format, getXpubCacheForMnemonics, tryUsingXpub],
   );
 
-  const scanOrOpenFile = async () => {
-    await provideMnemonicsModalRef.current.dismiss();
-    navigation.navigate('ScanQRCode', { showFileImportButton: true });
-  };
-
   const utilizeMnemonicPhrase = useCallback(async () => {
     try {
       await provideMnemonicsModalRef.current.dismiss();
@@ -659,12 +654,15 @@ const WalletsAddMultisigStep2 = () => {
                   onPress={utilizeMnemonicPhrase}
                 />
                 <View style={styles.height16} />
-                <BlueButtonLink
+
+                <AddressInputScanButton
+                  beforePress={async () => {
+                    await provideMnemonicsModalRef.current.dismiss();
+                  }}
+                  onBarScanned={onBarScanned}
                   testID="ScanOrOpenFile"
-                  ref={openScannerButton}
+                  type="link"
                   disabled={isLoading}
-                  onPress={scanOrOpenFile}
-                  title={loc.wallets.import_scan_qr}
                 />
               </>
             )}