From c884f48ede4afde390c7976efa061b8c43f4d09f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcos=20Rodriguez=20V=C3=A9lez?= <marcospr@pm.me>
Date: Fri, 8 Oct 2021 14:51:27 -0400
Subject: [PATCH] Update details.js

---
 screen/transactions/details.js | 188 ++++++++++++++++-----------------
 1 file changed, 91 insertions(+), 97 deletions(-)

diff --git a/screen/transactions/details.js b/screen/transactions/details.js
index b507c98ea..10bd1b14f 100644
--- a/screen/transactions/details.js
+++ b/screen/transactions/details.js
@@ -1,7 +1,7 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { View, ScrollView, TouchableOpacity, Text, TextInput, Linking, StatusBar, StyleSheet, Keyboard } from 'react-native';
 import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
-import { BlueCard, BlueCopyToClipboardButton, BlueLoading, BlueSpacing20, BlueText, SafeBlueArea } from '../../BlueComponents';
+import { BlueCard, BlueCopyToClipboardButton, BlueLoading, BlueSpacing20, BlueText } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import HandoffComponent from '../../components/handoff';
 import loc from '../../loc';
@@ -35,7 +35,6 @@ const TransactionsDetails = () => {
   const [tx, setTX] = useState();
   const [memo, setMemo] = useState();
   const { colors } = useTheme();
-  const menuRef = useRef();
   const stylesHooks = StyleSheet.create({
     txLink: {
       color: colors.alternativeTextColor2,
@@ -111,8 +110,6 @@ const TransactionsDetails = () => {
   };
 
   const handleOnOpenTransactionOnBlockExporerTapped = () => {
-    menuRef.current?.dismissMenu();
-
     const url = `https://mempool.space/tx/${tx.hash}`;
     Linking.canOpenURL(url).then(supported => {
       if (supported) {
@@ -130,113 +127,110 @@ const TransactionsDetails = () => {
   }
 
   return (
-    <SafeBlueArea>
+    <ScrollView style={styles.scroll} automaticallyAdjustContentInsets contentInsetAdjustmentBehavior="automatic">
       <HandoffComponent
         title={loc.transactions.details_title}
         type={HandoffComponent.activityTypes.ViewInBlockExplorer}
         url={`https://mempool.space/tx/${tx.hash}`}
       />
       <StatusBar barStyle="default" />
-      <ScrollView style={styles.scroll}>
-        <BlueCard>
-          <View>
-            <TextInput
-              placeholder={loc.send.details_note_placeholder}
-              value={memo}
-              placeholderTextColor="#81868e"
-              style={[styles.memoTextInput, stylesHooks.memoTextInput]}
-              onChangeText={setMemo}
-            />
-            <BlueSpacing20 />
-          </View>
+      <BlueCard>
+        <View>
+          <TextInput
+            placeholder={loc.send.details_note_placeholder}
+            value={memo}
+            placeholderTextColor="#81868e"
+            style={[styles.memoTextInput, stylesHooks.memoTextInput]}
+            onChangeText={setMemo}
+          />
+          <BlueSpacing20 />
+        </View>
 
-          {from && (
-            <>
-              <View style={styles.rowHeader}>
-                <BlueText style={styles.rowCaption}>{loc.transactions.details_from}</BlueText>
-                <BlueCopyToClipboardButton stringToCopy={from.filter(onlyUnique).join(', ')} />
-              </View>
-              <BlueText style={styles.rowValue}>{from.filter(onlyUnique).join(', ')}</BlueText>
-            </>
-          )}
+        {from && (
+          <>
+            <View style={styles.rowHeader}>
+              <BlueText style={styles.rowCaption}>{loc.transactions.details_from}</BlueText>
+              <BlueCopyToClipboardButton stringToCopy={from.filter(onlyUnique).join(', ')} />
+            </View>
+            <BlueText style={styles.rowValue}>{from.filter(onlyUnique).join(', ')}</BlueText>
+          </>
+        )}
 
-          {to && (
-            <>
-              <View style={styles.rowHeader}>
-                <BlueText style={styles.rowCaption}>{loc.transactions.details_to}</BlueText>
-                <BlueCopyToClipboardButton stringToCopy={to.filter(onlyUnique).join(', ')} />
-              </View>
-              <BlueText style={styles.rowValue}>{arrDiff(from, to.filter(onlyUnique)).join(', ')}</BlueText>
-            </>
-          )}
+        {to && (
+          <>
+            <View style={styles.rowHeader}>
+              <BlueText style={styles.rowCaption}>{loc.transactions.details_to}</BlueText>
+              <BlueCopyToClipboardButton stringToCopy={to.filter(onlyUnique).join(', ')} />
+            </View>
+            <BlueText style={styles.rowValue}>{arrDiff(from, to.filter(onlyUnique)).join(', ')}</BlueText>
+          </>
+        )}
 
-          {tx.fee && (
-            <>
-              <BlueText style={styles.rowCaption}>{loc.send.create_fee}</BlueText>
-              <BlueText style={styles.rowValue}>{tx.fee + ' sats'}</BlueText>
-            </>
-          )}
+        {tx.fee && (
+          <>
+            <BlueText style={styles.rowCaption}>{loc.send.create_fee}</BlueText>
+            <BlueText style={styles.rowValue}>{tx.fee + ' sats'}</BlueText>
+          </>
+        )}
 
-          {tx.hash && (
-            <>
-              <View style={styles.rowHeader}>
-                <BlueText style={[styles.txId, stylesHooks.txId]}>{loc.transactions.txid}</BlueText>
-                <BlueCopyToClipboardButton stringToCopy={tx.hash} />
-              </View>
-              <BlueText style={styles.rowValue}>{tx.hash}</BlueText>
-            </>
-          )}
+        {tx.hash && (
+          <>
+            <View style={styles.rowHeader}>
+              <BlueText style={[styles.txId, stylesHooks.txId]}>{loc.transactions.txid}</BlueText>
+              <BlueCopyToClipboardButton stringToCopy={tx.hash} />
+            </View>
+            <BlueText style={styles.rowValue}>{tx.hash}</BlueText>
+          </>
+        )}
 
-          {tx.received && (
-            <>
-              <BlueText style={styles.rowCaption}>{loc.transactions.details_received}</BlueText>
-              <BlueText style={styles.rowValue}>{dayjs(tx.received).format('LLL')}</BlueText>
-            </>
-          )}
+        {tx.received && (
+          <>
+            <BlueText style={styles.rowCaption}>{loc.transactions.details_received}</BlueText>
+            <BlueText style={styles.rowValue}>{dayjs(tx.received).format('LLL')}</BlueText>
+          </>
+        )}
 
-          {tx.block_height > 0 && (
-            <>
-              <BlueText style={styles.rowCaption}>{loc.transactions.details_block}</BlueText>
-              <BlueText style={styles.rowValue}>{tx.block_height}</BlueText>
-            </>
-          )}
+        {tx.block_height > 0 && (
+          <>
+            <BlueText style={styles.rowCaption}>{loc.transactions.details_block}</BlueText>
+            <BlueText style={styles.rowValue}>{tx.block_height}</BlueText>
+          </>
+        )}
 
-          {tx.inputs && (
-            <>
-              <BlueText style={styles.rowCaption}>{loc.transactions.details_inputs}</BlueText>
-              <BlueText style={styles.rowValue}>{tx.inputs.length}</BlueText>
-            </>
-          )}
+        {tx.inputs && (
+          <>
+            <BlueText style={styles.rowCaption}>{loc.transactions.details_inputs}</BlueText>
+            <BlueText style={styles.rowValue}>{tx.inputs.length}</BlueText>
+          </>
+        )}
 
-          {tx.outputs?.length > 0 && (
-            <>
-              <BlueText style={styles.rowCaption}>{loc.transactions.details_outputs}</BlueText>
-              <BlueText style={styles.rowValue}>{tx.outputs.length}</BlueText>
-            </>
-          )}
-          <ToolTipMenu
-            isButton
-            ref={menuRef}
-            actions={[
-              {
-                id: TransactionsDetails.actionKeys.CopyToClipboard,
-                text: loc.transactions.copy_link,
-                icon: TransactionsDetails.actionIcons.Clipboard,
-              },
-            ]}
-            onPressMenuItem={handleCopyPress}
+        {tx.outputs?.length > 0 && (
+          <>
+            <BlueText style={styles.rowCaption}>{loc.transactions.details_outputs}</BlueText>
+            <BlueText style={styles.rowValue}>{tx.outputs.length}</BlueText>
+          </>
+        )}
+        <ToolTipMenu
+          isButton
+          actions={[
+            {
+              id: TransactionsDetails.actionKeys.CopyToClipboard,
+              text: loc.transactions.copy_link,
+              icon: TransactionsDetails.actionIcons.Clipboard,
+            },
+          ]}
+          onPressMenuItem={handleCopyPress}
+        >
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleOnOpenTransactionOnBlockExporerTapped}
+            style={[styles.greyButton, stylesHooks.greyButton]}
           >
-            <TouchableOpacity
-              accessibilityRole="button"
-              onPress={handleOnOpenTransactionOnBlockExporerTapped}
-              style={[styles.greyButton, stylesHooks.greyButton]}
-            >
-              <Text style={[styles.Link, stylesHooks.Link]}>{loc.transactions.details_show_in_block_explorer}</Text>
-            </TouchableOpacity>
-          </ToolTipMenu>
-        </BlueCard>
-      </ScrollView>
-    </SafeBlueArea>
+            <Text style={[styles.Link, stylesHooks.Link]}>{loc.transactions.details_show_in_block_explorer}</Text>
+          </TouchableOpacity>
+        </ToolTipMenu>
+      </BlueCard>
+    </ScrollView>
   );
 };