fix: datail line component with copy to clipboard feature

app/translations/en.json

@@ -18,6 +18,7 @@
   "restarting": "Error connecting to the Server, the App will restart in a few seconds.",
   "change-privacy": "New privacy policy: ",
   "change-privacy-legend": ".\nTap to reveal the hidden values.",
+  "txtcopied": "Text copied to Clipboard",
   "insight": {
     "title": "Financial Insight",
     "no-data": "There is no data in your Wallet that fit the graph selected.",
@@ -264,8 +265,8 @@
     "text-readonly-server": "Before changing another server, carefully write down this seed phrase. It is the only way you can restore/access your current wallet.",
     "text-no-readonly": "Enter your seed phrase (24 words)",
     "tapcopy": "Tap to copy",
-    "tapcopy-seed-message": "Copied Seed to Clipboard",
-    "tapcopy-birthday-message": "Copied Birthday to Clipboard",
+    "tapcopy-seed-message": "Seed copied to Clipboard",
+    "tapcopy-birthday-message": "Birthday copied to Clipboard",
     "birthday-readonly": "Wallet Birthday",
     "birthday-no-readonly": "Block height of first transaction. (It's OK, if you don't know)\nValue range between ",
     "change-warning": "If you change to another wallet, you will no longer have access to this wallet without the seed phrase.",
@@ -380,12 +381,12 @@
     "confirmations": "Confirmations",
     "txid": "Transaction ID",
     "viewexplorer": "View on block explorer",
-    "txcopied": "Copied TxID to Clipboard",
+    "txcopied": "TxID copied to Clipboard",
     "address": "Address",
-    "addresscopied": "Copied Address to Clipboard",
+    "addresscopied": "Address copied to Clipboard",
     "amount": "Amount",
     "memo": "Memo",
-    "memocopied": "Copied Memo to Clipboard",
+    "memocopied": "Memo copied to Clipboard",
     "txfee": "Transaction Fee",
     "title-acc": "Wallet Screen",
     "list-acc": "Transactions' List",
@@ -475,7 +476,7 @@
     "privkey": "Spending/Private ",
     "viewkey": "Viewing Key ",
     "nokey": "No Key",
-    "tapcopy-message": "Copied Key to Clipboard",
+    "tapcopy-message": "Key copied to Clipboard",
     "title": "Key",
     "address": "Address",
     "text-readonly": "Before closing this screen, carefully write down this viewing key. It is the only way you can restore/access your current wallet.",

app/translations/es.json

@@ -18,6 +18,7 @@
   "restarting": "Error conectando con el servidor, la Aplicación se reiniciará en breves segundos.",
   "change-privacy": "Nueva Política de Privacidad: ",
   "change-privacy-legend": ".\nPulsar para revelar los valores ocultos.",
+  "txtcopied": "Texto copiado al Portapapeles",
   "insight": {
     "title": "Visión Financiera",
     "no-data": "No hay datos en tu Monedero que concuerden con el gráfico seleccionado.",

components/Components/DetailLine.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, { ReactNode } from 'react';
-import { View } from 'react-native';
+import React, { ReactNode, useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import Clipboard from '@react-native-community/clipboard';
 import { useTheme } from '@react-navigation/native';
 
 import FadeText from './FadeText';
 import RegText from './RegText';
 import { ThemeType } from '../../app/types';
+import { ContextAppLoaded } from '../../app/context';
 
 type DetailLineProps = {
   label: string;
@@ -16,14 +18,26 @@ type DetailLineProps = {
 
 const DetailLine: React.FunctionComponent<DetailLineProps> = ({ label, value, children, testID }) => {
   const { colors } = useTheme() as unknown as ThemeType;
+  const context = useContext(ContextAppLoaded);
+  const { addLastSnackbar, translate } = context;
   return (
     <View style={{ display: 'flex', marginTop: 20 }}>
       <FadeText>{label}</FadeText>
       <View style={{ width: 10 }} />
-      {value && (
-        <RegText testID={testID} color={colors.text}>
-          {value}
-        </RegText>
+      {!!value && (
+        <TouchableOpacity
+          onPress={() => {
+            Clipboard.setString(value);
+            addLastSnackbar({
+              message: translate('txtcopied') as string,
+              type: 'Primary',
+              duration: 'short',
+            });
+          }}>
+          <RegText testID={testID} color={colors.text}>
+            {value}
+          </RegText>
+        </TouchableOpacity>
       )}
       {children}
     </View>