fixup! Fix Tx List Margins* *Picking the unfavorable route of modifyi…

…ng each component's horizontal paddings because of the SceneHeader in the middle of the Animated.FlatList is not yet UI4 compatible
EdgeApp · Jan 27, 2024 · d7ad861 · d7ad861
1 parent 887fd83
commit d7ad861
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 71 deletions.
diff --git a/src/components/cards/VisaCardCard.tsx b/src/components/cards/VisaCardCard.tsx
@@ -52,9 +52,7 @@ export const VisaCardCard = (props: Props) => {
   return (
     <>
       {ioniaPluginIds.includes(pluginId) && tokenId == null && (
-        // HACK: 0 margins on the bottom of this card because SceneHeader is
-        // not compatible with UI4 in that it owns 100% of its top margins.
-        <CardUi4 paddingRem={0} marginRem={[1, 0.5, 0]}>
+        <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
@@ -3,7 +3,7 @@ import { asArray } from 'cleaners'
 import { EdgeCurrencyWallet, EdgeTokenId, EdgeTokenMap, EdgeTransaction } from 'edge-core-js'
 import { asAssetStatus, AssetStatus } from 'edge-info-server/types'
 import * as React from 'react'
-import { ListRenderItemInfo, RefreshControl } from 'react-native'
+import { ListRenderItemInfo, RefreshControl, View } from 'react-native'
 import { getVersion } from 'react-native-device-info'
 import Animated from 'react-native-reanimated'
 
@@ -286,25 +286,27 @@ function TransactionListComponent(props: Props) {
       backgroundGradientEnd={theme.assetBackgroundGradientEnd}
       backgroundGradientStart={theme.assetBackgroundGradientStart}
     >
-      {({ insetStyle }) => (
-        <Animated.FlatList
-          // @ts-expect-error
-          ref={flashListRef}
-          contentContainerStyle={insetStyle}
-          data={listItems}
-          keyboardShouldPersistTaps="handled"
-          keyExtractor={keyExtractor}
-          ListEmptyComponent={emptyComponent}
-          ListHeaderComponent={topArea}
-          onEndReachedThreshold={0.5}
-          refreshControl={refreshControl}
-          renderItem={renderItem}
-          // TODO: Comment out sticky header indices until we figure out how to
-          // give the headers a background only when they're sticking.
-          // stickyHeaderIndices={stickyHeaderIndices}
-          onEndReached={handleScrollEnd}
-          onScroll={handleScroll}
-        />
+      {({ insetStyle, undoInsetStyle }) => (
+        <View style={[undoInsetStyle, { padding: theme.rem(0.5), overflow: 'visible' }]}>
+          <Animated.FlatList
+            // @ts-expect-error
+            ref={flashListRef}
+            contentContainerStyle={insetStyle}
+            data={listItems}
+            keyboardShouldPersistTaps="handled"
+            keyExtractor={keyExtractor}
+            ListEmptyComponent={emptyComponent}
+            ListHeaderComponent={topArea}
+            onEndReachedThreshold={0.5}
+            refreshControl={refreshControl}
+            renderItem={renderItem}
+            // TODO: Comment out sticky header indices until we figure out how to
+            // give the headers a background only when they're sticking.
+            // stickyHeaderIndices={stickyHeaderIndices}
+            onEndReached={handleScrollEnd}
+            onScroll={handleScroll}
+          />
+        </View>
       )}
     </SceneWrapper>
   )

diff --git a/src/components/themed/TransactionListRow.tsx b/src/components/themed/TransactionListRow.tsx
@@ -188,14 +188,13 @@ export function TransactionListRow(props: Props) {
     Share.open(shareOptions).catch(e => showError(e))
   })
 
-  // HACK: Handle 100% of the margins because of SceneHeader usage on this scene
   return (
-    <CardUi4 icon={icon} onPress={handlePress} onLongPress={handleLongPress} marginRem={[0.5, 1]}>
+    <CardUi4 icon={icon} onPress={handlePress} onLongPress={handleLongPress}>
       <SectionView dividerMarginRem={[0.2, 0.5]} marginRem={[0.25, 0]}>
         <>
           <View style={styles.row}>
             <EdgeText style={styles.titleText}>{name}</EdgeText>
-            <EdgeText style={styles.cryptoText}>{cryptoAmountString}</EdgeText>
+            <EdgeText style={styles.titleText}>{cryptoAmountString}</EdgeText>
           </View>
           <View style={styles.row}>
             <EdgeText style={unconfirmedOrTimeStyle}>{unconfirmedOrTimeText}</EdgeText>
@@ -277,12 +276,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
     alignSelf: 'center',
     fontFamily: theme.fontFaceMedium,
     flexShrink: 1,
-    marginRight: theme.rem(1)
-  },
-  cryptoText: {
-    alignSelf: 'center',
-    textAlign: 'right',
-    flexShrink: 0
+    maxWidth: '60%'
   },
   fiatAmount: {
     fontSize: theme.rem(0.75),

diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx
@@ -374,53 +374,48 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
 
     return (
       <>
-        <View style={styles.container}>
-          {searching ? null : (
-            // HACK: 0 margins on the bottom of this card because SceneHeader is
-            // not compatible with UI4 in that it owns 100% of its top margins.
-            <CardUi4 paddingRem={1} marginRem={[0.5, 0.5, 0]}>
-              {this.renderBalanceBox()}
-              {isStakingAvailable && this.renderStakedBalance()}
-              <View style={styles.buttonsContainer}>
-                <TouchableOpacity accessible={false} onPress={this.handleRequest} style={styles.buttons}>
-                  <EdgeText accessible style={styles.buttonsText}>
-                    {lstrings.fragment_request_subtitle}
-                  </EdgeText>
-                </TouchableOpacity>
-                <TouchableOpacity accessible={false} onPress={this.handleSend} style={styles.buttons}>
-                  <EdgeText accessible style={styles.buttonsText}>
-                    {lstrings.fragment_send_subtitle}
-                  </EdgeText>
-                </TouchableOpacity>
-                {!isStakePoliciesLoaded ? (
-                  <ActivityIndicator color={theme.textLink} style={styles.stakingButton} />
-                ) : (
-                  isStakingAvailable && (
-                    <TouchableOpacity onPress={this.handleStakePress} style={styles.buttons}>
-                      <EdgeText style={styles.buttonsText}>{lstrings.stake_earn_button_label}</EdgeText>
-                      {bestApy != null ? <EdgeText style={styles.apyText}>{bestApy}</EdgeText> : null}
-                    </TouchableOpacity>
-                  )
-                )}
-              </View>
-            </CardUi4>
-          )}
-          {isEmpty || searching ? null : <VisaCardCard wallet={wallet} tokenId={tokenId} navigation={this.props.navigation} />}
-        </View>
+        {searching ? null : (
+          <CardUi4 paddingRem={1}>
+            {this.renderBalanceBox()}
+            {isStakingAvailable && this.renderStakedBalance()}
+            <View style={styles.buttonsContainer}>
+              <TouchableOpacity accessible={false} onPress={this.handleRequest} style={styles.buttons}>
+                <EdgeText accessible style={styles.buttonsText}>
+                  {lstrings.fragment_request_subtitle}
+                </EdgeText>
+              </TouchableOpacity>
+              <TouchableOpacity accessible={false} onPress={this.handleSend} style={styles.buttons}>
+                <EdgeText accessible style={styles.buttonsText}>
+                  {lstrings.fragment_send_subtitle}
+                </EdgeText>
+              </TouchableOpacity>
+              {!isStakePoliciesLoaded ? (
+                <ActivityIndicator color={theme.textLink} style={styles.stakingButton} />
+              ) : (
+                isStakingAvailable && (
+                  <TouchableOpacity onPress={this.handleStakePress} style={styles.buttons}>
+                    <EdgeText style={styles.buttonsText}>{lstrings.stake_earn_button_label}</EdgeText>
+                    {bestApy != null ? <EdgeText style={styles.apyText}>{bestApy}</EdgeText> : null}
+                  </TouchableOpacity>
+                )
+              )}
+            </View>
+          </CardUi4>
+        )}
+        {isEmpty || searching ? null : <VisaCardCard wallet={wallet} tokenId={tokenId} navigation={this.props.navigation} />}
         {isEmpty || searching ? null : (
-          <SceneHeader underline withTopMargin>
-            <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>
         )}
       </>
     )
   }
 }
 
 const getStyles = cacheStyles((theme: Theme) => ({
-  container: {
-    padding: theme.rem(0.5)
-  },
   // Balance Box
   balanceBoxContainer: {
     marginTop: theme.rem(1.5)
@@ -506,6 +501,12 @@ const getStyles = cacheStyles((theme: Theme) => ({
     justifyContent: 'center',
     alignItems: 'center',
     paddingRight: theme.rem(1)
+  },
+
+  // TODO: Fix SceneHeader to be UI4 compatible
+  tempSceneHeader: {
+    marginRight: -theme.rem(0.5),
+    overflow: 'visible'
   }
 }))