[wallet/symbol/mobile] Add Account Balance Change Transition Animation

[OlegMakarenko]

Problem

This component is temporarily not used due to performance issues with React Native v0.82 that causes slower screen rendering.

Solution

Once the rendering performance issue is resolved on react-native side, add this code to AccountCard component:

/**
 * AnimatedBalance component. Displays balance with fade animation only when value changes.
 *
 * @param {object} props - Component props
 * @param {string} props.value - Balance value to display.
 * @param {string} props.ticker - Currency ticker symbol.
 *
 * @returns {React.ReactNode} AnimatedBalance component
 */

const AnimatedBalance = ({ value, ticker }) => {
	const isFirstRender = useRef(true);
	const previousValue = useRef(value);
	const opacity = useSharedValue(1);

	useEffect(() => {
		if (isFirstRender.current) {
			isFirstRender.current = false;
			return;
		}

		if (previousValue.current !== value) {
			opacity.value = 0.5;
			opacity.value = withTiming(1, { duration: BALANCE_FADE_DURATION });
			previousValue.current = value;
		}
	}, [value]);

	const animatedStyle = useAnimatedStyle(() => ({
		opacity: opacity.value
	}));

	return (
		<Animated.View style={animatedStyle}>
			<Amount value={value} ticker={ticker} size="l" />
		</Animated.View>
	);
};