feat: Cleaner transaction list

components/TransactionsNavigationHeader.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import LinearGradient from 'react-native-linear-gradient';
 import { LightningArkWallet } from '../class/wallets/lightning-ark-wallet';
@@ -189,18 +189,6 @@ const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps>
         ];
   }, [hideBalance]);
 
-  const imageSource = useMemo(() => {
-    switch (wallet.type) {
-      case LightningCustodianWallet.type:
-      case LightningArkWallet.type:
-        return direction === 'rtl' ? require('../img/lnd-shape-rtl.png') : require('../img/lnd-shape.png');
-      case MultisigHDWallet.type:
-        return direction === 'rtl' ? require('../img/vault-shape-rtl.png') : require('../img/vault-shape.png');
-      default:
-        return direction === 'rtl' ? require('../img/btc-shape-rtl.png') : require('../img/btc-shape.png');
-    }
-  }, [direction, wallet.type]);
-
   useEffect(() => {
     console.debug('[UnitSwitch/UI] render state', {
       walletID: wallet.getID?.(),
@@ -213,8 +201,6 @@ const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps>
 
   return (
     <LinearGradient colors={WalletGradient.gradientsFor(wallet.type)} style={styles.lineaderGradient}>
-      <ImageBackground source={imageSource} style={styles.chainIcon} />
-
       <View style={styles.contentContainer}>
         <Text testID="WalletLabel" numberOfLines={1} style={[styles.walletLabel, { writingDirection: direction }]}>
           {wallet.getLabel()}
@@ -277,18 +263,11 @@ const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps>
 const styles = StyleSheet.create({
   lineaderGradient: {
     minHeight: 140,
-    justifyContent: 'center',
+    justifyContent: 'start',
   },
   contentContainer: {
     padding: 15,
   },
-  chainIcon: {
-    width: 99,
-    height: 94,
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-  },
   walletLabel: {
     backgroundColor: 'transparent',
     fontSize: 19,

screen/wallets/WalletTransactions.tsx

@@ -6,6 +6,7 @@ import {
   Dimensions,
   findNodeHandle,
   FlatList,
+  Platform,
   PixelRatio,
   ScrollView,
   StyleSheet,
@@ -106,6 +107,27 @@ const WalletTransactions: React.FC<WalletTransactionsProps> = ({ route }: { rout
     },
     sendIcon: { transform: [{ rotate: direction === 'rtl' ? '-225deg' : '225deg' }] },
     receiveIcon: { transform: [{ rotate: direction === 'rtl' ? '-45deg' : '45deg' }] },
+    headerBottomBar: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 12,
+      height: 12,
+      backgroundColor: colors.background,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      ...Platform.select({
+        ios: {
+          shadowColor: colors.shadowColor,
+          shadowOffset: { width: 0, height: -8 },
+          shadowOpacity: 0.1,
+          shadowRadius: 6,
+        },
+        android: {
+          elevation: 0.5,
+        },
+      }),
+    },
   });
 
   useFocusEffect(
@@ -543,6 +565,9 @@ const WalletTransactions: React.FC<WalletTransactionsProps> = ({ route }: { rout
             }
           }}
         />
+        <View style={styles.headerBottomBarSpacer}>
+          <View style={stylesHook.headerBottomBar} />
+        </View>
         <>
           <View style={[styles.flex, stylesHook.backgroundContainer]}>
             <View style={styles.listHeaderTextRow}>
@@ -684,10 +709,11 @@ export default WalletTransactions;
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
+  headerBottomBarSpacer: { position: 'relative', height: 12 },
   scrollViewContent: { flex: 1, justifyContent: 'center', paddingHorizontal: 16, paddingBottom: 500 },
   activityIndicator: { marginVertical: 20 },
-  listHeaderTextRow: { flex: 1, margin: 16, flexDirection: 'row', justifyContent: 'space-between' },
-  listHeaderText: { marginTop: 8, marginBottom: 8, fontWeight: 'bold', fontSize: 24 },
+  listHeaderTextRow: { flex: 1, marginHorizontal: 16, flexDirection: 'row', justifyContent: 'space-between' },
+  listHeaderText: { marginTop: 0, marginBottom: 16, fontWeight: 'bold', fontSize: 24 },
   refreshIndicatorBackground: {
     position: 'absolute',
     top: 0,