diff --git a/components/TransactionsNavigationHeader.tsx b/components/TransactionsNavigationHeader.tsx index 3517a5c44..cc1feaa30 100644 --- a/components/TransactionsNavigationHeader.tsx +++ b/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 ]; }, [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 return ( - - {wallet.getLabel()} @@ -277,18 +263,11 @@ const TransactionsNavigationHeader: React.FC const styles = StyleSheet.create({ lineaderGradient: { minHeight: 140, - justifyContent: 'center', + justifyContent: 'flex-start', }, contentContainer: { padding: 15, }, - chainIcon: { - width: 99, - height: 94, - position: 'absolute', - bottom: 0, - right: 0, - }, walletLabel: { backgroundColor: 'transparent', fontSize: 19, diff --git a/screen/wallets/WalletTransactions.tsx b/screen/wallets/WalletTransactions.tsx index 9c72a865e..1d7cd454c 100644 --- a/screen/wallets/WalletTransactions.tsx +++ b/screen/wallets/WalletTransactions.tsx @@ -6,6 +6,7 @@ import { Dimensions, findNodeHandle, FlatList, + Platform, PixelRatio, ScrollView, StyleSheet, @@ -106,6 +107,27 @@ const WalletTransactions: React.FC = ({ 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 = ({ route }: { rout } }} /> + + + <> @@ -570,6 +595,7 @@ const WalletTransactions: React.FC = ({ route }: { rout isUnitSwitching, measureHeaderHeight, stylesHook.backgroundContainer, + stylesHook.headerBottomBar, stylesHook.listHeaderText, saveToDisk, isBiometricUseCapableAndEnabled, @@ -684,10 +710,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,