feat(suite-native): replace illustrations and lotties with updated ones

.prettierignore

@@ -128,6 +128,10 @@ buck-out/
 !**/suite-native/app/.env.staging
 
 suite-native/atoms/src/Spinner/refresh-spinner-*.json
+suite-native/module-authorize-device/src/assets/passphrase/confirm-on-trezor-lottie.json
+suite-native/module-home/src/assets/view-only-lottie.json
+suite-native/module-send/assets/send-arrows-lottie.json
+suite-native/module-settings/src/assets/connect-trezor-lottie.json
 
 # ios
 **/ios/*.xcarchive

suite-native/alerts/src/components/AlertSheet.tsx

@@ -24,7 +24,6 @@ type AlertSheetProps = {
 const alertSheetContainerStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
     alignItems: 'center',
-    paddingTop: utils.spacings.sp32,
     paddingHorizontal: utils.spacings.sp24,
     paddingVertical: utils.spacings.sp32,
     marginBottom: utils.spacings.sp32,
@@ -35,7 +34,7 @@ const alertSheetContainerStyle = prepareNativeStyle(utils => ({
 
 const alertSheetContentStyle = prepareNativeStyle(utils => ({
     width: '100%',
-    gap: utils.spacings.sp24,
+    gap: utils.spacings.sp32,
 }));
 
 const shakeTriggerStyle = prepareNativeStyle(_ => ({
@@ -115,7 +114,7 @@ export const AlertSheet = ({ alert }: AlertSheetProps) => {
                                     />
                                 )}
                                 {appendix}
-                                <VStack spacing="sp16">
+                                <VStack spacing="sp12">
                                     <Button
                                         size="medium"
                                         colorScheme={primaryButtonVariant}

suite-native/atoms/src/LottieAnimation.tsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+
+import Lottie, { AnimationObject } from 'lottie-react-native';
+
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+import { CSSColor } from '@trezor/theme';
+
+import { useIllustrationColors } from './useIllustrationColors';
+
+type LottieAnimationSize = 'standard' | 'small';
+type LottieAnimationProps = {
+    source: AnimationObject;
+    size?: LottieAnimationSize;
+};
+
+type LottieColor = [number, number, number, 1];
+type LottieColors = {
+    lineColor: LottieColor;
+    fillColor: LottieColor;
+};
+
+const hexToLottieColor = (hex: CSSColor): LottieColor => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+
+    return [r / 255, g / 255, b / 255, 1];
+};
+
+const colorizeLayer = (layer: any, { lineColor, fillColor }: LottieColors) => ({
+    ...layer,
+    shapes: layer.shapes?.map((shape: any) => ({
+        ...shape,
+        it: shape.it?.map((it: any) =>
+            it.c?.k ? { ...it, c: { ...it.c, k: it.c.k[0] === 0 ? lineColor : fillColor } } : it,
+        ),
+    })),
+});
+
+const sizeToDimensionsMap = {
+    standard: 224,
+    small: 90,
+} as const satisfies Record<LottieAnimationSize, number>;
+
+const animationStyle = prepareNativeStyle<{ size: LottieAnimationSize }>((_, { size }) => ({
+    width: sizeToDimensionsMap[size],
+    height: sizeToDimensionsMap[size],
+}));
+
+export const LottieAnimation = ({ source, size = 'standard' }: LottieAnimationProps) => {
+    const { lineColor, fillColor } = useIllustrationColors();
+    const { applyStyle } = useNativeStyles();
+
+    const colorizedSource = useMemo(() => {
+        const colors = {
+            lineColor: hexToLottieColor(lineColor),
+            fillColor: hexToLottieColor(fillColor),
+        };
+
+        return {
+            ...source,
+            assets: source.assets.map((asset: { layers: any[] }) => ({
+                ...asset,
+                layers: asset.layers.map(l => colorizeLayer(l, colors)),
+            })),
+            layers: source.layers.map(l => colorizeLayer(l, colors)),
+        };
+    }, [source, lineColor, fillColor]);
+
+    return (
+        <Lottie
+            source={colorizedSource}
+            style={applyStyle(animationStyle, { size })}
+            autoPlay
+            loop
+        />
+    );
+};

suite-native/atoms/src/index.ts

@@ -39,6 +39,7 @@ export * from './ScreenHeaderWrapper';
 export * from './ErrorMessage';
 export * from './Table';
 export * from './Loader';
+export * from './LottieAnimation';
 export * from './Toggle';
 export * from './Pictogram';
 export * from './TitleHeader/PictogramTitleHeader';
@@ -52,6 +53,7 @@ export * from './IconListItem';
 export * from './BulletListItem';
 export * from './SelectableItem';
 export * from './constants';
+export * from './useIllustrationColors';
 export * from './utils';
 
 export { useDebugView } from './DebugView';

suite-native/atoms/src/useIllustrationColors.ts

@@ -0,0 +1,9 @@
+import { useNativeStyles } from '@trezor/styles';
+
+export const useIllustrationColors = () => {
+    const { utils } = useNativeStyles();
+    const lineColor = utils.colors.backgroundPrimaryDefault;
+    const fillColor = utils.colors.backgroundSurfaceElevation0;
+
+    return { lineColor, fillColor };
+};

suite-native/biometrics/package.json

@@ -20,6 +20,7 @@
         "expo-local-authentication": "14.0.1",
         "jotai": "1.9.1",
         "react": "18.2.0",
-        "react-native": "0.76.1"
+        "react-native": "0.76.1",
+        "react-native-svg": "15.9.0"
     }
 }