From 7b95ff59d15ac7a9c41129c6a04a202d4715b688 Mon Sep 17 00:00:00 2001
From: Jon Tzeng <jon@edge.app>
Date: Fri, 26 Jan 2024 15:22:14 -0800
Subject: [PATCH] Fix transaction list margins

We use the `overflow: 'visible'` rule on this scene to achieve the right
margins without losing the ability for the SceneHeader to extend outside
of the margins as necessary.
---
 .../TransactionListTop.test.tsx.snap          | 270 ++++++++++--------
 src/components/cards/VisaCardCard.tsx         |   2 +-
 .../scenes/TransactionListScene.tsx           |  22 +-
 src/components/themed/TransactionListTop.tsx  |  18 +-
 4 files changed, 179 insertions(+), 133 deletions(-)

diff --git a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
index d106104fffb..6c7b59d79e9 100644
--- a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
           "borderRadius": 16,
         },
         {
-          "marginBottom": 22,
+          "marginBottom": 11,
           "marginLeft": 11,
           "marginRight": 11,
           "marginTop": 11,
@@ -576,10 +576,10 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
           "borderRadius": 16,
         },
         {
-          "marginBottom": -11,
+          "marginBottom": 11,
           "marginLeft": 11,
           "marginRight": 11,
-          "marginTop": 22,
+          "marginTop": 11,
         },
         {
           "paddingBottom": 0,
@@ -699,83 +699,92 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
   </View>,
   <View
     style={
-      [
-        {
-          "justifyContent": "center",
-          "marginHorizontal": 22,
-          "paddingBottom": 22,
-        },
-        null,
-        undefined,
-      ]
+      {
+        "marginRight": -11,
+        "overflow": "visible",
+      }
     }
   >
     <View
       style={
+        [
+          {
+            "justifyContent": "center",
+            "marginHorizontal": 22,
+            "paddingBottom": 22,
+          },
+          null,
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          }
+        }
+      />
+      <Text
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.65}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Quicksand-Regular",
+              "fontSize": 22,
+              "includeFontPadding": false,
+            },
+            {
+              "fontFamily": "Quicksand-Medium",
+            },
+            null,
+          ]
+        }
+      >
+        Transactions
+      </Text>
+    </View>
+    <BVLinearGradient
+      colors={
+        [
+          452984831,
+          452984831,
+        ]
+      }
+      endPoint={
         {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "x": 1,
+          "y": 0.5,
+        }
+      }
+      locations={null}
+      startPoint={
+        {
+          "x": 0,
+          "y": 0.5,
         }
       }
-    />
-    <Text
-      adjustsFontSizeToFit={true}
-      minimumFontScale={0.65}
-      numberOfLines={1}
       style={
         [
           {
-            "color": "#FFFFFF",
-            "fontFamily": "Quicksand-Regular",
-            "fontSize": 22,
-            "includeFontPadding": false,
+            "alignSelf": "stretch",
+            "height": 1,
           },
           {
-            "fontFamily": "Quicksand-Medium",
+            "marginBottom": 0,
+            "marginLeft": 22,
+            "marginRight": 0,
+            "marginTop": 0,
           },
-          null,
         ]
       }
-    >
-      Transactions
-    </Text>
+    />
   </View>,
-  <BVLinearGradient
-    colors={
-      [
-        452984831,
-        452984831,
-      ]
-    }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0.5,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0.5,
-      }
-    }
-    style={
-      [
-        {
-          "alignSelf": "stretch",
-          "height": 1,
-        },
-        {
-          "marginBottom": 0,
-          "marginLeft": 22,
-          "marginRight": 0,
-          "marginTop": 0,
-        },
-      ]
-    }
-  />,
 ]
 `;
 
@@ -789,7 +798,7 @@ exports[`TransactionListTop should render 1`] = `
           "borderRadius": 16,
         },
         {
-          "marginBottom": 22,
+          "marginBottom": 11,
           "marginLeft": 11,
           "marginRight": 11,
           "marginTop": 11,
@@ -1349,82 +1358,91 @@ exports[`TransactionListTop should render 1`] = `
   </View>,
   <View
     style={
-      [
-        {
-          "justifyContent": "center",
-          "marginHorizontal": 22,
-          "paddingBottom": 22,
-        },
-        null,
-        undefined,
-      ]
+      {
+        "marginRight": -11,
+        "overflow": "visible",
+      }
     }
   >
     <View
       style={
+        [
+          {
+            "justifyContent": "center",
+            "marginHorizontal": 22,
+            "paddingBottom": 22,
+          },
+          null,
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          }
+        }
+      />
+      <Text
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.65}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Quicksand-Regular",
+              "fontSize": 22,
+              "includeFontPadding": false,
+            },
+            {
+              "fontFamily": "Quicksand-Medium",
+            },
+            null,
+          ]
+        }
+      >
+        Transactions
+      </Text>
+    </View>
+    <BVLinearGradient
+      colors={
+        [
+          452984831,
+          452984831,
+        ]
+      }
+      endPoint={
         {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "x": 1,
+          "y": 0.5,
+        }
+      }
+      locations={null}
+      startPoint={
+        {
+          "x": 0,
+          "y": 0.5,
         }
       }
-    />
-    <Text
-      adjustsFontSizeToFit={true}
-      minimumFontScale={0.65}
-      numberOfLines={1}
       style={
         [
           {
-            "color": "#FFFFFF",
-            "fontFamily": "Quicksand-Regular",
-            "fontSize": 22,
-            "includeFontPadding": false,
+            "alignSelf": "stretch",
+            "height": 1,
           },
           {
-            "fontFamily": "Quicksand-Medium",
+            "marginBottom": 0,
+            "marginLeft": 22,
+            "marginRight": 0,
+            "marginTop": 0,
           },
-          null,
         ]
       }
-    >
-      Transactions
-    </Text>
+    />
   </View>,
-  <BVLinearGradient
-    colors={
-      [
-        452984831,
-        452984831,
-      ]
-    }
-    endPoint={
-      {
-        "x": 1,
-        "y": 0.5,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0,
-        "y": 0.5,
-      }
-    }
-    style={
-      [
-        {
-          "alignSelf": "stretch",
-          "height": 1,
-        },
-        {
-          "marginBottom": 0,
-          "marginLeft": 22,
-          "marginRight": 0,
-          "marginTop": 0,
-        },
-      ]
-    }
-  />,
 ]
 `;
diff --git a/src/components/cards/VisaCardCard.tsx b/src/components/cards/VisaCardCard.tsx
index ab8a850fe61..1fc103ccae7 100644
--- a/src/components/cards/VisaCardCard.tsx
+++ b/src/components/cards/VisaCardCard.tsx
@@ -52,7 +52,7 @@ export const VisaCardCard = (props: Props) => {
   return (
     <>
       {ioniaPluginIds.includes(pluginId) && tokenId == null && (
-        <CardUi4 paddingRem={0} marginRem={[1, 0.5, -0.5, 0.5]}>
+        <CardUi4 paddingRem={0}>
           <TouchableOpacity onPress={handlePress} style={styles.container}>
             <FastImage resizeMode="contain" source={{ uri: icon.symbolImage }} style={styles.icon} />
             <EdgeText numberOfLines={0} style={styles.text}>
diff --git a/src/components/scenes/TransactionListScene.tsx b/src/components/scenes/TransactionListScene.tsx
index 7b9e2460bd0..e2a0b32203f 100644
--- a/src/components/scenes/TransactionListScene.tsx
+++ b/src/components/scenes/TransactionListScene.tsx
@@ -6,6 +6,7 @@ import * as React from 'react'
 import { ListRenderItemInfo, RefreshControl, View } from 'react-native'
 import { getVersion } from 'react-native-device-info'
 import Animated from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { SPECIAL_CURRENCY_INFO } from '../../constants/WalletAndCurrencyConstants'
 import { useHandler } from '../../hooks/useHandler'
@@ -25,7 +26,7 @@ import { AssetStatusCard } from '../cards/AssetStatusCard'
 import { EdgeAnim, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim'
 import { SceneWrapper } from '../common/SceneWrapper'
 import { withWallet } from '../hoc/withWallet'
-import { useTheme } from '../services/ThemeContext'
+import { cacheStyles, useTheme } from '../services/ThemeContext'
 import { BuyCrypto } from '../themed/BuyCrypto'
 import { ExplorerCard } from '../themed/ExplorerCard'
 import { SearchFooter } from '../themed/SearchFooter'
@@ -47,6 +48,7 @@ interface Props extends EdgeSceneProps<'transactionList'> {
 function TransactionListComponent(props: Props) {
   const { navigation, route, wallet } = props
   const theme = useTheme()
+  const styles = getStyles(theme)
 
   const tokenId = checkToken(route.params.tokenId, wallet.currencyConfig.allTokens)
   const { pluginId } = wallet.currencyInfo
@@ -275,6 +277,9 @@ function TransactionListComponent(props: Props) {
     backgroundColors[0] = scaledColor
   }
 
+  // TODO: Include this fix in the SceneWrapper component
+  const safeAreaInsets = useSafeAreaInsets()
+
   return (
     <SceneWrapper
       accentColors={accentColors}
@@ -289,9 +294,15 @@ function TransactionListComponent(props: Props) {
       {({ insetStyle, undoInsetStyle }) => (
         <View style={undoInsetStyle}>
           <Animated.FlatList
+            style={styles.flatList}
             // @ts-expect-error
             ref={flashListRef}
-            contentContainerStyle={insetStyle}
+            contentContainerStyle={{
+              paddingTop: insetStyle.paddingTop + theme.rem(0.5),
+              paddingBottom: insetStyle.paddingBottom + theme.rem(0.5) + safeAreaInsets.bottom,
+              paddingLeft: insetStyle.paddingLeft + theme.rem(0.5),
+              paddingRight: insetStyle.paddingRight + theme.rem(0.5)
+            }}
             data={listItems}
             keyboardShouldPersistTaps="handled"
             keyExtractor={keyExtractor}
@@ -323,3 +334,10 @@ function checkToken(tokenId: EdgeTokenId, allTokens: EdgeTokenMap): EdgeTokenId
 }
 
 export const TransactionList = withWallet(TransactionListComponent)
+
+const getStyles = cacheStyles(() => ({
+  flatList: {
+    overflow: 'visible',
+    flexShrink: 0
+  }
+}))
diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx
index 4830c802cd6..d47bfef1bdf 100644
--- a/src/components/themed/TransactionListTop.tsx
+++ b/src/components/themed/TransactionListTop.tsx
@@ -375,7 +375,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
     return (
       <>
         {searching ? null : (
-          <CardUi4 paddingRem={1} marginRem={[0.5, 0.5, 1]}>
+          <CardUi4 paddingRem={1}>
             {this.renderBalanceBox()}
             {isStakingAvailable && this.renderStakedBalance()}
             <View style={styles.buttonsContainer}>
@@ -404,9 +404,11 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
         )}
         {isEmpty || searching ? null : <VisaCardCard wallet={wallet} tokenId={tokenId} navigation={this.props.navigation} />}
         {isEmpty || searching ? null : (
-          <SceneHeader underline>
-            <EdgeText style={styles.transactionsDividerText}>{lstrings.fragment_transaction_list_transaction}</EdgeText>
-          </SceneHeader>
+          <View style={styles.tempSceneHeader}>
+            <SceneHeader underline>
+              <EdgeText style={styles.transactionsDividerText}>{lstrings.fragment_transaction_list_transaction}</EdgeText>
+            </SceneHeader>
+          </View>
         )}
       </>
     )
@@ -499,6 +501,14 @@ const getStyles = cacheStyles((theme: Theme) => ({
     justifyContent: 'center',
     alignItems: 'center',
     paddingRight: theme.rem(1)
+  },
+
+  // TODO: Fix SceneHeader to be UI4 compatible
+  // This negative margin will cause the SceneHeader's divider-line to touch
+  // the right edge of the screen. This is design roll-off from UI3.
+  tempSceneHeader: {
+    marginRight: -theme.rem(0.5),
+    overflow: 'visible'
   }
 }))