feat(suite-native): checksum message animation

trezor · Nov 12, 2024 · cefbc84 · cefbc84
1 parent bf6b74e
commit cefbc84
Showing 1 changed file with 23 additions and 19 deletions.
diff --git a/suite-native/module-send/src/components/AddressChecksumMessage.tsx b/suite-native/module-send/src/components/AddressChecksumMessage.tsx
@@ -1,3 +1,5 @@
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
 import { Link } from '@suite-native/link';
 import { HStack, Text } from '@suite-native/atoms';
 import { Icon } from '@suite-native/icons';
@@ -6,23 +8,25 @@ import { Translation } from '@suite-native/intl';
 const LINK_URL = 'https://trezor.io/learn/a/evm-address-checksum-in-trezor-suite';
 
 export const AddressChecksumMessage = () => (
-    <HStack>
-        <Icon name="info" size="medium" color="iconSubdued" />
-        <Text variant="label" color="textSubdued">
-            <Translation
-                id="moduleSend.outputs.recipients.checksum.label"
-                values={{
-                    link: linkChunk => (
-                        <Link
-                            href={LINK_URL}
-                            label={linkChunk}
-                            textVariant="label"
-                            isUnderlined
-                            textColor="textSubdued"
-                        />
-                    ),
-                }}
-            />
-        </Text>
-    </HStack>
+    <Animated.View entering={FadeIn} exiting={FadeOut}>
+        <HStack>
+            <Icon name="info" size="medium" color="iconSubdued" />
+            <Text variant="label" color="textSubdued">
+                <Translation
+                    id="moduleSend.outputs.recipients.checksum.label"
+                    values={{
+                        link: linkChunk => (
+                            <Link
+                                href={LINK_URL}
+                                label={linkChunk}
+                                textVariant="label"
+                                isUnderlined
+                                textColor="textSubdued"
+                            />
+                        ),
+                    }}
+                />
+            </Text>
+        </HStack>
+    </Animated.View>
 );