From 763b1dee656254d7d3aa8c8eec5f38f8323d9ce3 Mon Sep 17 00:00:00 2001
From: banklesss <105349292+banklesss@users.noreply.github.com>
Date: Thu, 16 May 2024 17:02:20 +0200
Subject: [PATCH] fix(swap): tx confirmation screen item alignment (#3261)

---
 .../src/components/AmountItem/AmountItem.tsx  | 72 ++++++++++---------
 .../ConfirmTxScreen/TransactionSummary.tsx    |  6 +-
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx b/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx
index 7856cb4f8b..b54e312040 100644
--- a/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx
+++ b/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx
@@ -99,40 +99,24 @@ export const AmountItem = ({
 }
 
 const Left = ({style, ...props}: ViewProps) => <View style={style} {...props} />
-const Middle = ({style, ...props}: ViewProps) => (
-  <View style={[style, {flex: 1, justifyContent: 'center', paddingHorizontal: 8}]} {...props} />
-)
-const Right = ({style, ...props}: ViewProps) => <View style={style} {...props} />
+const Middle = ({style, ...props}: ViewProps) => {
+  const {styles} = useStyles()
+
+  return <View style={[style, styles.middle]} {...props} />
+}
+const Right = ({style, ...props}: ViewProps) => {
+  const {styles} = useStyles()
+
+  return <View style={[style, styles.right]} {...props} />
+}
 
 export const AmountItemPlaceholder = ({style}: ViewProps) => {
-  const {colors} = useStyles()
+  const {styles} = useStyles()
   return (
-    <View
-      style={[
-        style,
-        {
-          display: 'flex',
-          flexDirection: 'row',
-          gap: 12,
-          height: 56,
-        },
-      ]}
-    >
-      <View
-        style={{
-          backgroundColor: colors.background,
-          borderRadius: 8,
-          flexGrow: 3,
-        }}
-      />
-
-      <View
-        style={{
-          backgroundColor: colors.background,
-          borderRadius: 8,
-          flexGrow: 1,
-        }}
-      />
+    <View style={[style, styles.placeholder]}>
+      <View style={styles.placeholderElement1} />
+
+      <View style={styles.placeholderElement2} />
     </View>
   )
 }
@@ -146,6 +130,31 @@ const useStyles = () => {
       justifyContent: 'space-between',
       alignItems: 'center',
     },
+    placeholder: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 12,
+      height: 56,
+    },
+    placeholderElement1: {
+      backgroundColor: color.gray[200],
+      borderRadius: 8,
+      flexGrow: 3,
+    },
+    placeholderElement2: {
+      backgroundColor: color.gray[200],
+      borderRadius: 8,
+      flexGrow: 1,
+    },
+    middle: {
+      flex: 1,
+      justifyContent: 'center',
+      paddingHorizontal: 8,
+    },
+    right: {
+      flexDirection: 'column',
+      alignItems: 'flex-end',
+    },
     name: {
       color: color.gray[900],
       fontSize: 16,
@@ -174,7 +183,6 @@ const useStyles = () => {
 
   const colors = {
     text: color.gray[900],
-    background: color.gray[200],
     icon: color.secondary[600],
   }
 
diff --git a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx
index 5ebbc0f727..2cca8e61ef 100644
--- a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx
+++ b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx
@@ -138,7 +138,7 @@ export const TransactionSummary = () => {
       <View style={styles.card}>
         <Text style={styles.cardText}>{strings.total}</Text>
 
-        <View>
+        <View style={styles.total}>
           <Text style={[styles.cardText, styles.cardTextValue]}>{formattedSellText}</Text>
 
           {!isSellPrimary && (
@@ -336,6 +336,10 @@ const useStyles = () => {
     bold: {
       ...typography['body-2-m-medium'],
     },
+    total: {
+      flexDirection: 'column',
+      alignItems: 'flex-end',
+    },
   })
 
   return styles