fix: ui fixes

e2e/lightning.e2e.js

@@ -145,7 +145,7 @@ d('Lightning', () => {
 			await element(by.id('Channels')).tap();
 			await element(by.id('Channel')).atIndex(0).tap();
 			await expect(
-				element(by.id('MoneyPrimary').withAncestor(by.id('TotalSize'))),
+				element(by.id('MoneyText').withAncestor(by.id('TotalSize'))),
 			).toHaveText('100 000');
 			await element(by.id('ChannelScrollView')).scrollTo('bottom');
 			await expect(element(by.id('IsReadyYes'))).toBeVisible();
@@ -164,7 +164,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 			await element(by.id('NewTxPrompt')).swipe('down');
 			await waitFor(
-				element(by.id('MoneyPrimary').withAncestor(by.id('TotalBalance'))),
+				element(by.id('MoneyText').withAncestor(by.id('TotalBalance'))),
 			)
 				.toHaveText('50 000')
 				.withTimeout(10000);
@@ -194,7 +194,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 			await element(by.id('NewTxPrompt')).swipe('down');
 			await waitFor(
-				element(by.id('MoneyPrimary').withAncestor(by.id('TotalBalance'))),
+				element(by.id('MoneyText').withAncestor(by.id('TotalBalance'))),
 			)
 				.toHaveText('50 111')
 				.withTimeout(10000);
@@ -220,7 +220,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 			await element(by.id('Close')).tap();
 			await waitFor(
-				element(by.id('MoneyPrimary').withAncestor(by.id('TotalBalance'))),
+				element(by.id('MoneyText').withAncestor(by.id('TotalBalance'))),
 			)
 				.toHaveText('50 000')
 				.withTimeout(10000);
@@ -247,7 +247,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 			await element(by.id('Close')).tap();
 			await waitFor(
-				element(by.id('MoneyPrimary').withAncestor(by.id('TotalBalance'))),
+				element(by.id('MoneyText').withAncestor(by.id('TotalBalance'))),
 			)
 				.toHaveText('49 000')
 				.withTimeout(10000);
@@ -381,7 +381,7 @@ d('Lightning', () => {
 
 			// check balance
 			await waitFor(
-				element(by.id('MoneyPrimary').withAncestor(by.id('TotalBalance'))),
+				element(by.id('MoneyText').withAncestor(by.id('TotalBalance'))),
 			)
 				.toHaveText('49 000')
 				.withTimeout(10000);

e2e/onchain.e2e.js

@@ -92,7 +92,7 @@ d('Onchain', () => {
 
 			// balance should be 2 bitcoins
 			await expect(
-				element(by.id('MoneyPrimary').withAncestor(by.id('TotalBalance'))),
+				element(by.id('MoneyText').withAncestor(by.id('TotalBalance'))),
 			).toHaveText('200 000 000');
 
 			const coreAddress = await rpc.getNewAddress();
@@ -145,7 +145,7 @@ d('Onchain', () => {
 
 			// balance should be 0
 			await expect(
-				element(by.id('MoneyPrimary').withAncestor(by.id('TotalBalance'))),
+				element(by.id('MoneyText').withAncestor(by.id('TotalBalance'))),
 			).toHaveText('0');
 
 			// check Activity
@@ -270,7 +270,7 @@ d('Onchain', () => {
 
 			// enter amount that would leave dust
 			let { label: amount } = await element(
-				by.id('MoneyPrimary').withAncestor(by.id('AvailableAmount')),
+				by.id('MoneyText').withAncestor(by.id('AvailableAmount')),
 			).getAttributes();
 			amount = amount.replace(/\s/g, '');
 			amount = amount - 300;
@@ -312,7 +312,7 @@ d('Onchain', () => {
 
 			// balance should be 0
 			await expect(
-				element(by.id('MoneyPrimary').withAncestor(by.id('TotalBalance'))),
+				element(by.id('MoneyText').withAncestor(by.id('TotalBalance'))),
 			).toHaveText('0');
 
 			// check number of outputs for send tx

e2e/settings.e2e.js

@@ -81,11 +81,8 @@ d('Settings', () => {
 			const fiatSymbol = await element(
 				by.id('MoneyFiatSymbol').withAncestor(by.id('TotalBalance')),
 			);
-			const balancePrim = await element(
-				by.id('MoneyPrimary').withAncestor(by.id('TotalBalance')),
-			);
-			const balanceSecd = await element(
-				by.id('MoneySecondary').withAncestor(by.id('TotalBalance')),
+			const balance = await element(
+				by.id('MoneyText').withAncestor(by.id('TotalBalance')),
 			);
 			const unitRow = await element(
 				by.id('Value').withAncestor(by.id('UnitSettings')),
@@ -103,8 +100,7 @@ d('Settings', () => {
 			await expect(unitRow).toHaveText('GBP');
 			await element(by.id('NavigationClose')).tap();
 			await expect(fiatSymbol).toHaveText('£');
-			await expect(balancePrim).toHaveText('0');
-			await expect(balanceSecd).toHaveText('.00');
+			await expect(balance).toHaveText('0.00');
 
 			// switch back to BTC
 			await element(by.id('Settings')).tap();
@@ -114,7 +110,7 @@ d('Settings', () => {
 			await element(by.id('NavigationBack')).tap();
 			await expect(unitRow).toHaveText('Bitcoin');
 			await element(by.id('NavigationClose')).tap();
-			await expect(balancePrim).toHaveText('0');
+			await expect(balance).toHaveText('0');
 
 			// switch to classic denomination
 			await element(by.id('Settings')).tap();
@@ -124,7 +120,7 @@ d('Settings', () => {
 			await element(by.id('NavigationBack')).tap();
 			await expect(unitRow).toHaveText('Bitcoin');
 			await element(by.id('NavigationClose')).tap();
-			await expect(balancePrim).toHaveText('0.00000000');
+			await expect(balance).toHaveText('0.00000000');
 
 			markComplete('settings-unit');
 		});

src/components/BalanceHeader.tsx

@@ -8,7 +8,7 @@ import { EyeIcon } from '../styles/icons';
 import Money from './Money';
 import { useBalance, useSwitchUnitAnnounced } from '../hooks/wallet';
 import { updateSettings } from '../store/slices/settings';
-import { unitSelector, hideBalanceSelector } from '../store/reselect/settings';
+import { hideBalanceSelector } from '../store/reselect/settings';
 
 /**
  * Displays the total available balance for the current wallet & network.
@@ -19,7 +19,6 @@ const BalanceHeader = (): ReactElement => {
 	const { totalBalance, pendingPaymentsBalance, balanceInTransfer } =
 		useBalance();
 	const dispatch = useAppDispatch();
-	const unit = useAppSelector(unitSelector);
 	const hideBalance = useAppSelector(hideBalanceSelector);
 
 	const toggleHideBalance = (): void => {
@@ -40,7 +39,6 @@ const BalanceHeader = (): ReactElement => {
 									color="gray1"
 									size="caption13Up"
 									sats={balanceInTransfer}
-									unit={unit}
 									enableHide={true}
 									symbol={false}
 								/>
@@ -58,7 +56,6 @@ const BalanceHeader = (): ReactElement => {
 									color="gray1"
 									size="caption13Up"
 									sats={pendingPaymentsBalance}
-									unit={unit}
 									enableHide={true}
 									symbol={false}
 								/>
@@ -74,13 +71,7 @@ const BalanceHeader = (): ReactElement => {
 				style={styles.row}
 				testID="TotalBalance"
 				onPress={onSwitchUnit}>
-				<Money
-					sats={totalBalance}
-					unit={unit}
-					enableHide={true}
-					highlight={true}
-					symbol={true}
-				/>
+				<Money sats={totalBalance} enableHide={true} symbol={true} />
 				{hideBalance && (
 					<TouchableOpacity
 						style={styles.toggle}

src/components/HourglassSpinner.tsx

@@ -10,9 +10,11 @@ import { __E2E__ } from '../constants/env';
 const imageSrc = require('../assets/illustrations/hourglass.png');
 
 const HourglassSpinner = ({
+	imageSize = 230,
 	glowColor,
 	style,
 }: {
+	imageSize?: number;
 	glowColor?: keyof IColors;
 	style?: StyleProp<ViewStyle>;
 }): ReactElement => {
@@ -41,7 +43,7 @@ const HourglassSpinner = ({
 			entering={__E2E__ ? undefined : entering}
 			color="transparent"
 			testID="HourglassSpinner">
-			<GlowImage image={imageSrc} imageSize={230} glowColor={glowColor} />
+			<GlowImage image={imageSrc} imageSize={imageSize} glowColor={glowColor} />
 		</AnimatedView>
 	);
 };

src/components/Money.tsx

@@ -1,6 +1,5 @@
 import React, { memo, ReactElement, useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import { useAppSelector } from '../hooks/redux';
 
 import {
 	Caption13M,
@@ -10,23 +9,23 @@ import {
 	Text02M,
 	Title,
 } from '../styles/text';
+import { IColors } from '../styles/colors';
 import { BitcoinIcon } from '../styles/icons';
+import { useAppSelector } from '../hooks/redux';
 import { useDisplayValues } from '../hooks/displayValues';
 import { abbreviateNumber } from '../utils/helpers';
 import { EDenomination, EUnit } from '../store/types/wallet';
-import { IColors } from '../styles/colors';
 import {
 	unitSelector,
 	hideBalanceSelector,
 	denominationSelector,
 	nextUnitSelector,
 } from '../store/reselect/settings';
 
-interface IMoney {
+type MoneyProps = {
 	sats: number;
 	unitType?: 'primary' | 'secondary'; // force primary or secondary unit. Can be overwritten by unit prop
 	unit?: EUnit; // force value formatting
-	highlight?: boolean; // gray out decimals in fiat
 	decimalLength?: 'long' | 'short'; // whether to show 5 or 8 decimals for BTC
 	symbol?: boolean; // show symbol icon
 	symbolColor?: keyof IColors;
@@ -42,16 +41,15 @@ interface IMoney {
 		| 'caption13M'
 		| 'caption13Up'
 		| 'title';
-}
+};
 
-const Money = (props: IMoney): ReactElement => {
+const Money = (props: MoneyProps): ReactElement => {
 	const primaryUnit = useAppSelector(unitSelector);
 	const nextUnit = useAppSelector(nextUnitSelector);
 	const denomination = useAppSelector(denominationSelector);
 	const hideBalance = useAppSelector(hideBalanceSelector);
 
 	const sats = Math.abs(props.sats);
-	const highlight = props.highlight ?? false;
 	const decimalLength = props.decimalLength ?? 'long';
 	const size = props.size ?? 'display';
 	const unit =
@@ -118,41 +116,36 @@ const Money = (props: IMoney): ReactElement => {
 		iconMargin,
 	]);
 
-	let [prim = '', secd = ''] = useMemo(() => {
+	let text = useMemo(() => {
 		switch (unit) {
 			case EUnit.fiat: {
 				if (dv.fiatWhole.length > 12) {
 					const { newValue, abbreviation } = abbreviateNumber(dv.fiatWhole);
-					return highlight
-						? [newValue, abbreviation]
-						: [newValue + abbreviation];
+					return `${newValue}${abbreviation}`;
 				}
-				return highlight
-					? [dv.fiatWhole, dv.fiatDecimalSymbol + dv.fiatDecimal]
-					: [dv.fiatFormatted];
+
+				return dv.fiatFormatted;
 			}
 			case EUnit.BTC: {
 				if (denomination === EDenomination.classic) {
 					if (decimalLength === 'long') {
-						return [Number(dv.bitcoinFormatted).toFixed(8)];
+						return Number(dv.bitcoinFormatted).toFixed(8);
 					}
 
-					return [Number(dv.bitcoinFormatted).toFixed(5)];
+					return Number(dv.bitcoinFormatted).toFixed(5);
 				}
 
-				return [dv.bitcoinFormatted];
+				return dv.bitcoinFormatted;
 			}
 		}
-	}, [highlight, dv, unit, denomination, decimalLength]);
+	}, [dv, unit, denomination, decimalLength]);
 
 	if (hide) {
 		if (size === 'display') {
-			prim = ' • • • • • • • • •';
+			text = ' • • • • • • • • •';
 		} else {
-			prim = ' • • • • •';
+			text = ' • • • • •';
 		}
-
-		secd = '';
 	}
 
 	return (
@@ -167,14 +160,9 @@ const Money = (props: IMoney): ReactElement => {
 				</Text>
 			)}
 			{showSymbol && symbol}
-			<Text lineHeight={lineHeight} color={color} testID="MoneyPrimary">
-				{prim}
+			<Text lineHeight={lineHeight} color={color} testID="MoneyText">
+				{text}
 			</Text>
-			{secd !== '' && (
-				<Text lineHeight={lineHeight} color="white50" testID="MoneySecondary">
-					{secd}
-				</Text>
-			)}
 		</View>
 	);
 };

src/screens/Activity/ActivityFiltered.tsx

@@ -1,6 +1,9 @@
 import React, { ReactElement, memo, useMemo, useState, useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Gesture, GestureType } from 'react-native-gesture-handler';
+import { EPaymentType } from 'beignet';
+import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia';
+import { SharedValue, useSharedValue } from 'react-native-reanimated';
 import {
 	StyleSheet,
 	TouchableOpacity,
@@ -28,7 +31,6 @@ import type { WalletScreenProps } from '../../navigation/types';
 import TimeRangePrompt from './TimeRangePrompt';
 import TagsPrompt from './TagsPrompt';
 import { TActivityFilter } from '../../utils/activity';
-import { EPaymentType } from 'beignet';
 
 type TTab = {
 	id: string;
@@ -71,12 +73,30 @@ const Tab = ({
 	);
 };
 
+const Glow = ({
+	size,
+}: {
+	size: SharedValue<{ width: number; height: number }>;
+}): ReactElement => {
+	return (
+		<Rect x={0} y={0} width={size.value.width} height={size.value.width}>
+			<LinearGradient
+				start={vec(0, 0)}
+				end={vec(size.value.width, 0)}
+				positions={[0, 1]}
+				colors={['#1e1e1e', '#161616']}
+			/>
+		</Rect>
+	);
+};
+
 const ActivityFiltered = ({
 	navigation,
 }: WalletScreenProps<'ActivityFiltered'>): ReactElement => {
 	const { t } = useTranslation('wallet');
 	const insets = useSafeAreaInsets();
 	const dispatch = useAppDispatch();
+	const size = useSharedValue({ width: 0, height: 0 });
 	const panGestureRef = useRef<GestureType>(Gesture.Pan());
 	const [radiusContainerHeight, setRadiusContainerHeight] = useState(0);
 	const [currentTab, setCurrentTab] = useState(0);
@@ -126,6 +146,9 @@ const ActivityFiltered = ({
 						setRadiusContainerHeight((h) => (h === 0 ? hh : h));
 					}}>
 					<BlurView>
+						<Canvas style={styles.glowCanvas} onSize={size}>
+							<Glow size={size} />
+						</Canvas>
 						<SafeAreaInset type="top" />
 						<NavigationHeader
 							title={t('activity_all')}
@@ -223,6 +246,11 @@ const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 	},
+	glowCanvas: {
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+	},
 	radiusContainer: {
 		overflow: 'hidden',
 		borderBottomRightRadius: 16,