style: tuning.

RabbyHub · May 14, 2024 · a6fee18 · a6fee18
1 parent a0adce9
commit a6fee18
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 21 deletions.
diff --git a/apps/mobile/src/screens/Home/components/TokenWallet.tsx b/apps/mobile/src/screens/Home/components/TokenWallet.tsx
@@ -37,6 +37,7 @@ import { useSheetModals } from '@/hooks/useSheetModal';
 import { useToggleFocusingToken } from '../hooks/token';
 import { SMALL_TOKEN_ID } from '@/utils/token';
 import { BottomSheetModalTokenDetail } from '@/components/TokenDetailPopup/BottomSheetModalTokenDetail';
+import { makeDebugBorder } from '@/utils/styles';
 
 const ITEM_HEIGHT = 68;
 
@@ -107,7 +108,9 @@ const TokenRow = memo(
               style={StyleSheet.flatten([
                 styles.tokenSymbol,
                 data.id === SMALL_TOKEN_ID && styles.smallTokenSymbol,
-              ])}>
+              ])}
+              numberOfLines={1}
+              ellipsizeMode="tail">
               {data.symbol}
             </Text>
             {data._priceStr ? (
@@ -271,23 +274,26 @@ export const TokenWallet = ({
 
 const getStyle = (colors: AppColorsVariants) =>
   StyleSheet.create({
+    tokenRowWrap: {
+      height: 68,
+      width: '100%',
+      paddingHorizontal: 20,
+      flexGrow: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
     tokenRowTokenWrap: {
       flexShrink: 1,
       flexDirection: 'row',
-      flexBasis: '50%',
+      maxWidth: '70%',
     },
     tokenSymbol: {
       color: colors['neutral-title-1'],
       fontSize: 16,
       fontWeight: '600',
-    },
-    tokenRowWrap: {
-      height: 68,
       width: '100%',
-      paddingHorizontal: 20,
-      flexGrow: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
+      // ...makeDebugBorder(),
     },
     tokenRowLogo: {
       marginRight: 12,
@@ -307,8 +313,8 @@ const getStyle = (colors: AppColorsVariants) =>
       fontWeight: '500',
     },
     tokenRowUsdValueWrap: {
-      flexShrink: 1,
-      flexBasis: '50%',
+      flexShrink: 0,
+      justifyContent: 'flex-end',
       alignItems: 'flex-end',
     },
     tokenRowAmount: {

diff --git a/apps/mobile/src/screens/Transaction/components/HistoryItem.tsx b/apps/mobile/src/screens/Transaction/components/HistoryItem.tsx
@@ -39,13 +39,14 @@ export const HistoryItem = React.memo(
         </View>
         <View style={styles.cardBody}>
           <TxInterAddressExplain
+            style={styles.txInterAddressExplain}
             data={data}
             projectDict={projectDict}
             tokenDict={tokenDict}
             cateDict={cateDict}
             isScam={isScam}
           />
-          <TxChange data={data} tokenDict={tokenDict} />
+          <TxChange style={styles.txChange} data={data} tokenDict={tokenDict} />
         </View>
 
         {(data.tx && data.tx?.eth_gas_fee) || isFailed ? (
@@ -136,6 +137,8 @@ const getStyles = (colors: AppColorsVariants) =>
       color: colors['neutral-foot'],
       minWidth: 0,
     },
+    txInterAddressExplain: { flexShrink: 1, width: '60%' },
+    txChange: { flexShrink: 0, maxWidth: '70%' },
     divider: {
       height: 0.5,
       backgroundColor: colors['neutral-line'],

diff --git a/apps/mobile/src/screens/Transaction/components/TxInterAddressExplain.tsx b/apps/mobile/src/screens/Transaction/components/TxInterAddressExplain.tsx
@@ -55,7 +55,10 @@ const NameAndAddress = ({
           copyAddressRef.current?.doCopy();
         }}>
         {aliasName && (
-          <Text style={styles.aliasName} numberOfLines={1} ellipsizeMode="tail">
+          <Text
+            style={styles.aliasNameStyle}
+            numberOfLines={1}
+            ellipsizeMode="tail">
             {aliasName}
           </Text>
         )}
@@ -86,23 +89,22 @@ const getNameAndAddressStyle = createGetStyles(colors => {
       // ...makeDebugBorder('yellow'),
     },
     textWrapper: {
-      maxWidth: '100%',
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'flex-start',
       flexShrink: 1,
     },
-    aliasName: {
+    aliasNameStyle: {
       fontSize: 12,
-      marginRight: 4,
+      marginRight: 0,
       color: colors['neutral-foot'],
       flexShrink: 1,
+      // ...makeDebugBorder(),
     },
     text: {
       fontSize: 12,
       color: colors['neutral-foot'],
       flexShrink: 0,
-      // ...makeDebugBorder(),
     },
     copyIcon: { marginLeft: 3, width: 14, height: 14, flexShrink: 0 },
   };
@@ -124,10 +126,10 @@ export const TxInterAddressExplain = ({
   const colors = useThemeColors();
   const styles = getStyles(colors);
 
-  const projectName = (
+  const projectNameNode = (
     <>
       {project?.name ? (
-        <Text>{project.name}</Text>
+        <Text style={[styles.projectNameText]}>{project.name}</Text>
       ) : data.other_addr ? (
         <NameAndAddress address={data.other_addr} hideCopy={isScam} />
       ) : null}
@@ -156,7 +158,7 @@ export const TxInterAddressExplain = ({
         numberOfLines={1}>
         Approve {amount < 1e9 ? amount.toFixed(4) : 'infinite'}{' '}
         {`${getTokenSymbol(approveToken)} for `}
-        {projectName}
+        {projectNameNode}
       </Text>
     );
   } else {
@@ -168,10 +170,11 @@ export const TxInterAddressExplain = ({
           {cateDict[data.cate_id || '']?.name ??
             (data.tx?.name || t('page.transactions.explain.unknown'))}
         </Text>
-        <Text style={styles.actionDesc}>{projectName}</Text>
+        <View style={styles.actionDesc}>{projectNameNode}</View>
       </>
     );
   }
+
   return (
     <View style={[styles.container, style]}>
       <TxAvatar
@@ -193,14 +196,21 @@ const getStyles = (colors: AppColorsVariants) =>
     },
     explain: {
       flexShrink: 1,
+      maxWidth: '100%',
+      // ...makeDebugBorder('red'),
     },
     actionTitle: {
       fontSize: 15,
       lineHeight: 18,
       color: colors['neutral-title1'],
       marginBottom: 4,
+      maxWidth: '100%',
     },
     actionDesc: {
+      maxWidth: '100%',
+      // ...makeDebugBorder('blue'),
+    },
+    projectNameText: {
       fontSize: 12,
       lineHeight: 14,
       color: colors['neutral-foot'],