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/app/e2e/pageObjects/alertSheetActions.ts

@@ -12,6 +12,13 @@ class AlertSheetActions {
         await waitFor(secondaryButtonElement).toBeVisible().withTimeout(10000);
         await secondaryButtonElement.tap();
     }
+
+    async skipViewOnlyMode() {
+        await waitFor(element(by.id('@home/alert/view-only')))
+            .toBeVisible()
+            .withTimeout(20000);
+        await this.tapSecondaryButton();
+    }
 }
 
 export const onAlertSheet = new AlertSheetActions();

suite-native/app/e2e/tests/deeplinkPopup.test.ts

@@ -5,6 +5,7 @@ import { TrezorUserEnvLink } from '@trezor/trezor-user-env-link';
 import TrezorConnect from '@trezor/connect-mobile';
 import { conditionalDescribe } from '@suite-common/test-utils';
 
+import { onAlertSheet } from '../pageObjects/alertSheetActions';
 import { onConnectingDevice } from '../pageObjects/connectingDevice';
 import {
     appIsFullyLoaded,
@@ -16,7 +17,6 @@ import {
 import { onOnboarding } from '../pageObjects/onboardingActions';
 import { onCoinEnablingInit } from '../pageObjects/coinEnablingActions';
 import { onHome } from '../pageObjects/homeActions';
-import { onBottomSheet } from '../pageObjects/bottomSheetActions';
 
 const SERVER_PORT = 8080;
 const SERVER_URL = `http://localhost:${SERVER_PORT}`;
@@ -66,7 +66,7 @@ conditionalDescribe(device.getPlatform() !== 'android', 'Deeplink connect popup.
         await onCoinEnablingInit.enableNetwork('regtest');
         await onCoinEnablingInit.clickOnConfirmButton();
 
-        await onBottomSheet.skipViewOnlyMode();
+        await onAlertSheet.skipViewOnlyMode();
 
         // This `TrezorConnect` instance here is pretending to be the integrator or @trezor/connect-mobile
         await TrezorConnect.init({

suite-native/app/e2e/tests/deviceSettings.test.ts

@@ -2,7 +2,6 @@ import { conditionalDescribe } from '@suite-common/test-utils';
 import { TrezorUserEnvLink } from '@trezor/trezor-user-env-link';
 
 import { onAlertSheet } from '../pageObjects/alertSheetActions';
-import { onBottomSheet } from '../pageObjects/bottomSheetActions';
 import { onCoinEnablingInit } from '../pageObjects/coinEnablingActions';
 import { onConnectingDevice } from '../pageObjects/connectingDevice';
 import { onDeviceAuthenticitySummary } from '../pageObjects/deviceAuthenticitySummary';
@@ -28,7 +27,7 @@ conditionalDescribe(device.getPlatform() !== 'android', 'Device settings', () =>
         await onCoinEnablingInit.enableNetwork('btc');
         await onCoinEnablingInit.clickOnConfirmButton();
 
-        await onBottomSheet.skipViewOnlyMode();
+        await onAlertSheet.skipViewOnlyMode();
     });
 
     beforeEach(async () => {

suite-native/app/e2e/tests/onboardAndConnect.test.ts

@@ -1,7 +1,7 @@
 // `expect` keyword is already used by jest.
 import { expect as detoxExpect } from 'detox';
 
-import { onBottomSheet } from '../pageObjects/bottomSheetActions';
+import { onAlertSheet } from '../pageObjects/alertSheetActions';
 import { disconnectTrezorUserEnv, openApp, prepareTrezorEmulator } from '../utils';
 import { onOnboarding } from '../pageObjects/onboardingActions';
 import { onCoinEnablingInit } from '../pageObjects/coinEnablingActions';
@@ -35,7 +35,7 @@ describe('Go through onboarding and connect Trezor.', () => {
 
             await onCoinEnablingInit.clickOnConfirmButton();
 
-            await onBottomSheet.skipViewOnlyMode();
+            await onAlertSheet.skipViewOnlyMode();
 
             await detoxExpect(element(by.id('@home/portfolio/header')));
         } else {

suite-native/app/e2e/tests/send.test.ts

@@ -3,7 +3,6 @@ import { TrezorUserEnvLink } from '@trezor/trezor-user-env-link';
 
 import { onAccountDetail } from '../pageObjects/accountDetailActions';
 import { onAlertSheet } from '../pageObjects/alertSheetActions';
-import { onBottomSheet } from '../pageObjects/bottomSheetActions';
 import { onCoinEnablingInit } from '../pageObjects/coinEnablingActions';
 import { onConnectingDevice } from '../pageObjects/connectingDevice';
 import { onHome } from '../pageObjects/homeActions';
@@ -82,7 +81,7 @@ conditionalDescribe(device.getPlatform() !== 'android', 'Send transaction flow.'
         await onCoinEnablingInit.enableNetwork('regtest');
         await onCoinEnablingInit.clickOnConfirmButton();
 
-        await onBottomSheet.skipViewOnlyMode();
+        await onAlertSheet.skipViewOnlyMode();
     });
 
     beforeEach(async () => {

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"
     }
 }