Merge pull request #6401 from BlueWallet/uifixes

FIX: Multiple UI fixes for PSBT screen

components/CopyTextToClipboard.tsx

@@ -2,6 +2,7 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import React, { useState, useEffect, forwardRef } from 'react';
 import { View, TouchableOpacity, Animated, StyleSheet } from 'react-native';
 import loc from '../loc';
+import triggerHapticFeedback, { HapticFeedbackTypes } from '../blue_modules/hapticFeedback';
 
 type CopyTextToClipboardProps = {
   text: string;
@@ -30,6 +31,7 @@ const CopyTextToClipboard = forwardRef<TouchableOpacity, CopyTextToClipboardProp
   const copyToClipboard = () => {
     setHasTappedText(true);
     Clipboard.setString(text);
+    triggerHapticFeedback(HapticFeedbackTypes.Selection);
     setAddress(loc.wallets.xpub_copiedToClipboard); // Adjust according to your localization logic
     setTimeout(() => {
       setHasTappedText(false);

components/CopyToClipboardButton.tsx

@@ -2,6 +2,7 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import React from 'react';
 import { TouchableOpacity, Text, StyleSheet } from 'react-native';
 import loc from '../loc';
+import triggerHapticFeedback, { HapticFeedbackTypes } from '../blue_modules/hapticFeedback';
 
 type CopyToClipboardButtonProps = {
   stringToCopy: string;
@@ -11,6 +12,7 @@ type CopyToClipboardButtonProps = {
 export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({ stringToCopy, displayText }) => {
   const onPress = () => {
     Clipboard.setString(stringToCopy);
+    triggerHapticFeedback(HapticFeedbackTypes.Selection);
   };
 
   return (
@@ -21,7 +23,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({ st
 };
 
 const styles = StyleSheet.create({
-  text: { fontSize: 13, fontWeight: '400', color: '#68bbe1' },
+  text: { fontSize: 16, fontWeight: '400', color: '#68bbe1' },
 });
 
 export default CopyToClipboardButton;

screen/send/psbtWithHardwareWallet.js

@@ -14,7 +14,6 @@ import Biometric from '../../class/biometrics';
 import presentAlert from '../../components/Alert';
 import CopyToClipboardButton from '../../components/CopyToClipboardButton';
 import { DynamicQRCode } from '../../components/DynamicQRCode';
-import SafeArea from '../../components/SafeArea';
 import { SecondButton } from '../../components/SecondButton';
 import navigationStyle from '../../components/navigationStyle';
 import { useTheme } from '../../components/themes';
@@ -38,7 +37,7 @@ const PsbtWithHardwareWallet = () => {
   const isFocused = useIsFocused();
 
   const stylesHook = StyleSheet.create({
-    root: {
+    scrollViewContent: {
       backgroundColor: colors.elevated,
     },
     rootPadding: {
@@ -227,77 +226,86 @@ const PsbtWithHardwareWallet = () => {
 
   if (txHex) return _renderBroadcastHex();
 
-  return isLoading ? (
-    <View style={[styles.rootPadding, stylesHook.rootPadding]}>
-      <ActivityIndicator />
-    </View>
+  const renderView = isLoading ? (
+    <ActivityIndicator />
   ) : (
-    <SafeArea style={stylesHook.root}>
-      <ScrollView centerContent contentContainerStyle={styles.scrollViewContent} testID="PsbtWithHardwareScrollView">
-        <View style={styles.container}>
-          <BlueCard>
-            <BlueText testID="TextHelperForPSBT">{loc.send.psbt_this_is_psbt}</BlueText>
-            <BlueSpacing20 />
-            <Text testID="PSBTHex" style={styles.hidden}>
-              {psbt.toHex()}
-            </Text>
-            <DynamicQRCode value={psbt.toHex()} ref={dynamicQRCode} />
-            <BlueSpacing20 />
-            <SecondButton
-              testID="PsbtTxScanButton"
-              icon={{
-                name: 'qrcode',
-                type: 'font-awesome',
-                color: colors.buttonTextColor,
-              }}
-              onPress={openScanner}
-              ref={openScannerButton}
-              title={loc.send.psbt_tx_scan}
-            />
-            <BlueSpacing20 />
-            <SecondButton
-              icon={{
-                name: 'login',
-                type: 'entypo',
-                color: colors.buttonTextColor,
-              }}
-              onPress={openSignedTransaction}
-              title={loc.send.psbt_tx_open}
-            />
-            <BlueSpacing20 />
-            <SaveFileButton
-              fileName={`${Date.now()}.psbt`}
-              fileContent={typeof psbt === 'string' ? psbt : psbt.toBase64()}
-              style={styles.exportButton}
-              beforeOnPress={saveFileButtonBeforeOnPress}
-              afterOnPress={saveFileButtonAfterOnPress}
-            >
-              <SecondButton
-                icon={{
-                  name: 'share-alternative',
-                  type: 'entypo',
-                  color: colors.buttonTextColor,
-                }}
-                title={loc.send.psbt_tx_export}
-              />
-            </SaveFileButton>
-            <BlueSpacing20 />
-            <View style={styles.copyToClipboard}>
-              <CopyToClipboardButton
-                stringToCopy={typeof psbt === 'string' ? psbt : psbt.toBase64()}
-                displayText={loc.send.psbt_clipboard}
-              />
-            </View>
-          </BlueCard>
+    <View style={styles.container}>
+      <BlueCard>
+        <BlueText testID="TextHelperForPSBT">{loc.send.psbt_this_is_psbt}</BlueText>
+        <BlueSpacing20 />
+        <Text testID="PSBTHex" style={styles.hidden}>
+          {psbt.toHex()}
+        </Text>
+        <DynamicQRCode value={psbt.toHex()} ref={dynamicQRCode} />
+        <BlueSpacing20 />
+        <SecondButton
+          testID="PsbtTxScanButton"
+          icon={{
+            name: 'qrcode',
+            type: 'font-awesome',
+            color: colors.secondButtonTextColor,
+          }}
+          onPress={openScanner}
+          ref={openScannerButton}
+          title={loc.send.psbt_tx_scan}
+        />
+        <BlueSpacing20 />
+        <SecondButton
+          icon={{
+            name: 'login',
+            type: 'entypo',
+            color: colors.secondButtonTextColor,
+          }}
+          onPress={openSignedTransaction}
+          title={loc.send.psbt_tx_open}
+        />
+        <BlueSpacing20 />
+        <SaveFileButton
+          fileName={`${Date.now()}.psbt`}
+          fileContent={typeof psbt === 'string' ? psbt : psbt.toBase64()}
+          style={styles.exportButton}
+          beforeOnPress={saveFileButtonBeforeOnPress}
+          afterOnPress={saveFileButtonAfterOnPress}
+        >
+          <SecondButton
+            icon={{
+              name: 'share-alternative',
+              type: 'entypo',
+              color: colors.secondButtonTextColor,
+            }}
+            title={loc.send.psbt_tx_export}
+          />
+        </SaveFileButton>
+        <BlueSpacing20 />
+        <View style={styles.copyToClipboard}>
+          <CopyToClipboardButton stringToCopy={typeof psbt === 'string' ? psbt : psbt.toBase64()} displayText={loc.send.psbt_clipboard} />
         </View>
-      </ScrollView>
-    </SafeArea>
+      </BlueCard>
+    </View>
+  );
+
+  return (
+    <ScrollView
+      centerContent
+      style={stylesHook.scrollViewContent}
+      automaticallyAdjustContentInsets
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={[styles.scrollViewContent, stylesHook.scrollViewContent]}
+      testID="PsbtWithHardwareScrollView"
+    >
+      {renderView}
+    </ScrollView>
   );
 };
 
 export default PsbtWithHardwareWallet;
 
-PsbtWithHardwareWallet.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.send.header }));
+PsbtWithHardwareWallet.navigationOptions = navigationStyle({}, opts => ({
+  ...opts,
+  title: loc.send.header,
+  gestureEnabled: false,
+  fullScreenGestureEnabled: false,
+}));
 
 const styles = StyleSheet.create({
   scrollViewContent: {
@@ -339,6 +347,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   copyToClipboard: {
+    marginVertical: 16,
     justifyContent: 'center',
     alignItems: 'center',
   },