From 22d9e30e6276e848b460dfa201a3c25725a40ce7 Mon Sep 17 00:00:00 2001
From: Javier Bueno <javierbueno@emurgo.io>
Date: Thu, 10 Oct 2024 15:12:39 +0200
Subject: [PATCH] CR: update

---
 .../features/ReviewTx/common/CopiableText.tsx | 49 +---------
 .../features/ReviewTx/common/TokenDetails.tsx |  9 +-
 .../ReviewTxScreen/Overview/OverviewTab.tsx   | 18 +++-
 .../ReviewTxScreen/UTxOs/UTxOsTab.tsx         | 27 +++++-
 .../messages/src/WalletNavigator.json         | 96 +++++++++----------
 5 files changed, 99 insertions(+), 100 deletions(-)

diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/CopiableText.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/CopiableText.tsx
index ea6c03057a..b09812b5a6 100644
--- a/apps/wallet-mobile/src/features/ReviewTx/common/CopiableText.tsx
+++ b/apps/wallet-mobile/src/features/ReviewTx/common/CopiableText.tsx
@@ -1,51 +1,19 @@
 import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
-import {StyleSheet, Text, TextProps, TextStyle, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 
 import {Icon} from '../../../components/Icon'
-import {Space} from '../../../components/Space/Space'
 import {useCopy} from '../../../hooks/useCopy'
 
-export const CopiableText = ({
-  text,
-  index,
-  textStyle,
-  multiline = false,
-  addressProps,
-}: {
-  text: string
-  index?: number
-  textStyle?: TextStyle
-  multiline?: boolean
-  addressProps?: TextProps
-}) => {
+export const CopiableText = ({children, textToCopy}: {children: React.ReactNode; textToCopy: string}) => {
   const {styles, colors} = useStyles()
   const [, copy] = useCopy()
 
   return (
     <View style={styles.text}>
-      <Text
-        style={[styles.addressText, textStyle]}
-        numberOfLines={!multiline ? 1 : undefined}
-        ellipsizeMode={!multiline ? 'middle' : undefined}
-        {...addressProps}
-      >
-        {text}
-      </Text>
+      {children}
 
-      {index !== undefined ? (
-        <>
-          <Space width="sm" />
-
-          <Text style={styles.index}>{`#${index}`}</Text>
-
-          <Space width="sm" />
-        </>
-      ) : (
-        <Space width="xs" />
-      )}
-
-      <TouchableOpacity onPress={() => copy(text)} activeOpacity={0.5}>
+      <TouchableOpacity onPress={() => copy(textToCopy)} activeOpacity={0.5}>
         <Icon.Copy size={24} color={colors.copy} />
       </TouchableOpacity>
     </View>
@@ -59,15 +27,6 @@ const useStyles = () => {
       ...atoms.flex_row,
       ...atoms.justify_between,
     },
-    addressText: {
-      ...atoms.flex_1,
-      ...atoms.body_2_md_regular,
-      color: color.text_gray_medium,
-    },
-    index: {
-      ...atoms.body_2_md_medium,
-      color: color.text_gray_medium,
-    },
   })
 
   const colors = {
diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/TokenDetails.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/TokenDetails.tsx
index e82ef6ca91..6f590decfa 100644
--- a/apps/wallet-mobile/src/features/ReviewTx/common/TokenDetails.tsx
+++ b/apps/wallet-mobile/src/features/ReviewTx/common/TokenDetails.tsx
@@ -174,7 +174,9 @@ const PolicyId = ({policyId}: {policyId: string}) => {
       <Space width="lg" />
 
       <View style={styles.copiableText}>
-        <CopiableText textStyle={styles.value} text={policyId} multiline />
+        <CopiableText textToCopy={policyId}>
+          <Text style={styles.value}>{policyId}</Text>
+        </CopiableText>
       </View>
     </Row>
   )
@@ -193,7 +195,9 @@ const Fingerprint = ({info}: {info: Portfolio.Token.Info}) => {
       <Space width="lg" />
 
       <View style={styles.copiableText}>
-        <CopiableText textStyle={styles.value} text={info.fingerprint} multiline />
+        <CopiableText textToCopy={info.fingerprint}>
+          <Text style={styles.value}>{info.fingerprint}</Text>
+        </CopiableText>
       </View>
     </Row>
   )
@@ -333,6 +337,7 @@ const useStyles = () => {
       color: color.text_gray_low,
     },
     value: {
+      ...atoms.flex_1,
       ...atoms.text_right,
       ...atoms.body_2_md_regular,
       color: color.text_gray_max,
diff --git a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/Overview/OverviewTab.tsx b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/Overview/OverviewTab.tsx
index b85a72f851..dd7e2e086e 100644
--- a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/Overview/OverviewTab.tsx
+++ b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/Overview/OverviewTab.tsx
@@ -90,13 +90,18 @@ const SenderSection = ({
   ownedOutputs: FormattedOutputs
 }) => {
   const strings = useStrings()
+  const {styles} = useStyles()
   const address = ownedOutputs[0]?.rewardAddress ?? ownedOutputs[0]?.address
 
   return (
     <Accordion label={strings.myWalletLabel}>
       <Space height="lg" />
 
-      <CopiableText text={address} />
+      <CopiableText textToCopy={address}>
+        <Text style={styles.addressText} numberOfLines={1} ellipsizeMode="middle">
+          {address}
+        </Text>
+      </CopiableText>
 
       <Space height="sm" />
 
@@ -177,7 +182,11 @@ const ReceiverSection = ({notOwnedOutputs}: {notOwnedOutputs: FormattedOutputs})
       <View style={styles.receiverAddress}>
         <Text>{isScriptAddress ? strings.receiveToScriptLabel : strings.receiveToLabel}:</Text>
 
-        <CopiableText text={address} textStyle={styles.receiverSectionAddress} />
+        <CopiableText textToCopy={address}>
+          <Text style={[styles.addressText, styles.receiverSectionAddress]} numberOfLines={1} ellipsizeMode="middle">
+            {address}
+          </Text>
+        </CopiableText>
       </View>
     </>
   )
@@ -247,6 +256,11 @@ const useStyles = () => {
     receiverSectionAddress: {
       maxWidth: 260,
     },
+    addressText: {
+      ...atoms.flex_1,
+      ...atoms.body_2_md_regular,
+      color: color.text_gray_medium,
+    },
   })
 
   const colors = {
diff --git a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/UTxOs/UTxOsTab.tsx b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/UTxOs/UTxOsTab.tsx
index 93cde233d9..83861af94f 100644
--- a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/UTxOs/UTxOsTab.tsx
+++ b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/UTxOs/UTxOsTab.tsx
@@ -48,11 +48,21 @@ const Input = ({input}: {input: FormattedInput}) => {
 
         <Space height="lg" />
 
-        <CopiableText text={input.address} multiline />
+        <CopiableText textToCopy={input.address}>
+          <Text style={styles.addressText}>{input.address}</Text>
+        </CopiableText>
 
         <Space height="sm" />
 
-        <CopiableText index={input.txIndex} text={input.txHash} multiline />
+        <CopiableText textToCopy={input.txHash}>
+          <Text style={styles.addressText}>{input.txHash}</Text>
+
+          <Space width="sm" />
+
+          <Text style={styles.index}>{`#${input.txIndex}`}</Text>
+
+          <Space width="sm" />
+        </CopiableText>
       </View>
 
       <Space height="sm" />
@@ -82,7 +92,9 @@ const Output = ({output}: {output: FormattedOutput}) => {
 
         <Space height="lg" />
 
-        <CopiableText text={output.address} multiline />
+        <CopiableText textToCopy={output.address}>
+          <Text style={styles.addressText}>{output.address}</Text>
+        </CopiableText>
       </View>
 
       <Space height="sm" />
@@ -184,6 +196,15 @@ const useStyles = () => {
       ...atoms.body_2_md_regular,
       color: color.text_gray_medium,
     },
+    addressText: {
+      ...atoms.flex_1,
+      ...atoms.body_2_md_regular,
+      color: color.text_gray_medium,
+    },
+    index: {
+      ...atoms.body_2_md_medium,
+      color: color.text_gray_medium,
+    },
   })
 
   return {styles} as const
diff --git a/apps/wallet-mobile/translations/messages/src/WalletNavigator.json b/apps/wallet-mobile/translations/messages/src/WalletNavigator.json
index f8e4bc086c..ce9df7a0e8 100644
--- a/apps/wallet-mobile/translations/messages/src/WalletNavigator.json
+++ b/apps/wallet-mobile/translations/messages/src/WalletNavigator.json
@@ -4,14 +4,14 @@
     "defaultMessage": "!!!Transactions",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 309,
+      "line": 306,
       "column": 22,
-      "index": 10838
+      "index": 10668
     },
     "end": {
-      "line": 312,
+      "line": 309,
       "column": 3,
-      "index": 10941
+      "index": 10771
     }
   },
   {
@@ -19,14 +19,14 @@
     "defaultMessage": "!!!Send",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 313,
+      "line": 310,
       "column": 14,
-      "index": 10957
+      "index": 10787
     },
     "end": {
-      "line": 316,
+      "line": 313,
       "column": 3,
-      "index": 11056
+      "index": 10886
     }
   },
   {
@@ -34,14 +34,14 @@
     "defaultMessage": "!!!Receive",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 317,
+      "line": 314,
       "column": 17,
-      "index": 11075
+      "index": 10905
     },
     "end": {
-      "line": 320,
+      "line": 317,
       "column": 3,
-      "index": 11180
+      "index": 11010
     }
   },
   {
@@ -49,14 +49,14 @@
     "defaultMessage": "!!!Dashboard",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 321,
+      "line": 318,
       "column": 19,
-      "index": 11201
+      "index": 11031
     },
     "end": {
-      "line": 324,
+      "line": 321,
       "column": 3,
-      "index": 11298
+      "index": 11128
     }
   },
   {
@@ -64,14 +64,14 @@
     "defaultMessage": "!!!Delegate",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 325,
+      "line": 322,
       "column": 18,
-      "index": 11318
+      "index": 11148
     },
     "end": {
-      "line": 328,
+      "line": 325,
       "column": 3,
-      "index": 11413
+      "index": 11243
     }
   },
   {
@@ -79,14 +79,14 @@
     "defaultMessage": "!!!Wallet",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 329,
+      "line": 326,
       "column": 16,
-      "index": 11431
+      "index": 11261
     },
     "end": {
-      "line": 332,
+      "line": 329,
       "column": 3,
-      "index": 11529
+      "index": 11359
     }
   },
   {
@@ -94,14 +94,14 @@
     "defaultMessage": "!!!Staking",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 333,
+      "line": 330,
       "column": 17,
-      "index": 11548
+      "index": 11378
     },
     "end": {
-      "line": 336,
+      "line": 333,
       "column": 3,
-      "index": 11613
+      "index": 11443
     }
   },
   {
@@ -109,14 +109,14 @@
     "defaultMessage": "!!!NFT Gallery",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 337,
+      "line": 334,
       "column": 14,
-      "index": 11629
+      "index": 11459
     },
     "end": {
-      "line": 340,
+      "line": 337,
       "column": 3,
-      "index": 11723
+      "index": 11553
     }
   },
   {
@@ -124,14 +124,14 @@
     "defaultMessage": "!!!Menu",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 341,
+      "line": 338,
       "column": 14,
-      "index": 11739
+      "index": 11569
     },
     "end": {
-      "line": 344,
+      "line": 341,
       "column": 3,
-      "index": 11791
+      "index": 11621
     }
   },
   {
@@ -139,14 +139,14 @@
     "defaultMessage": "!!!Discover",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 345,
+      "line": 342,
       "column": 18,
-      "index": 11811
+      "index": 11641
     },
     "end": {
-      "line": 348,
+      "line": 345,
       "column": 3,
-      "index": 11900
+      "index": 11730
     }
   },
   {
@@ -154,14 +154,14 @@
     "defaultMessage": "!!!My wallets",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 349,
+      "line": 346,
       "column": 31,
-      "index": 11933
+      "index": 11763
     },
     "end": {
-      "line": 352,
+      "line": 349,
       "column": 3,
-      "index": 12042
+      "index": 11872
     }
   },
   {
@@ -169,14 +169,14 @@
     "defaultMessage": "!!!Portfolio",
     "file": "src/WalletNavigator.tsx",
     "start": {
-      "line": 353,
+      "line": 350,
       "column": 19,
-      "index": 12063
+      "index": 11893
     },
     "end": {
-      "line": 356,
+      "line": 353,
       "column": 3,
-      "index": 12132
+      "index": 11962
     }
   }
 ]
\ No newline at end of file