Merge branch 'feature/tx-review-token-details' into feature/tx-review-collateral

Author: banklesss

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 = {

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,

apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/Overview/OverviewTab.tsx

@@ -93,13 +93,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" />
 
@@ -180,7 +185,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>
     </>
   )
@@ -276,6 +285,11 @@ const useStyles = () => {
     receiverSectionAddress: {
       maxWidth: 260,
     },
+    addressText: {
+      ...atoms.flex_1,
+      ...atoms.body_2_md_regular,
+      color: color.text_gray_medium,
+    },
   })
 
   const colors = {

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