fix: P1 fixes

Author: RobinVncnt

.changeset/curly-ants-begin.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+fix: QA fixes large mover

apps/ledger-live-mobile/src/newArch/components/Swiper/components/SwipeableCard.tsx

@@ -10,7 +10,7 @@ import Animated, {
 const { width } = Dimensions.get("window");
 const SPRING_CONFIG = {
   damping: 30,
-  stiffness: 200,
+  stiffness: 400,
 };
 
 type SwipeableCardProps = {

apps/ledger-live-mobile/src/newArch/features/LandingPages/screens/LargeMoverLandingPage/components/Card.tsx

@@ -92,7 +92,7 @@ export const Card: React.FC<CardProps> = ({
       <Svg style={styles.gradientTop}>
         <Defs>
           <LinearGradient id="midGlowTop" x1="0" y1="0" x2="0" y2="1">
-            <Stop offset="0" stopColor={middleColor} stopOpacity="0.9" />
+            <Stop offset="0" stopColor={middleColor} stopOpacity="0.5" />
             <Stop offset="0.5" stopColor={middleColor} stopOpacity="0" />
           </LinearGradient>
         </Defs>
@@ -182,9 +182,9 @@ const styles = StyleSheet.create({
   },
   gradientTop: {
     position: "absolute",
-    top: -15,
+    top: -5,
     width: width,
     height: 100,
-    zIndex: 1,
+    zIndex: 11,
   },
 });

apps/ledger-live-mobile/src/newArch/features/LandingPages/screens/LargeMoverLandingPage/components/Information/InfoCard.tsx

@@ -6,12 +6,14 @@ export const InfoCard = ({
   label,
   value,
   bg = "neutral.c30",
+  left = false,
 }: {
   label: string;
   value: React.ReactNode;
   bg?: string;
+  left?: boolean;
 }) => (
-  <Flex style={styles.container} bg={bg}>
+  <Flex style={[styles.container, left && { marginRight: 12 }]} bg={bg}>
     <Text style={styles.name} color="neutral.c70">
       {label}
     </Text>
@@ -22,9 +24,9 @@ export const InfoCard = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: "column",
-    padding: 16,
+    padding: 12,
     borderRadius: 16,
-    width: "48%",
+    flex: 1,
   },
   name: {
     fontSize: 14,

apps/ledger-live-mobile/src/newArch/features/LandingPages/screens/LargeMoverLandingPage/components/Information/index.tsx

@@ -37,6 +37,7 @@ export const Informations: React.FC<InformationsProps> = props => {
 
       <Flex style={styles.row}>
         <InfoCard
+          left
           label={t("largeMover.marketCap")}
           value={formatCounterValue(marketCap ?? 0, counterValueCurrency.ticker, locale, t)}
         />
@@ -48,6 +49,7 @@ export const Informations: React.FC<InformationsProps> = props => {
 
       <Flex style={styles.row}>
         <InfoCard
+          left
           label={t("largeMover.fdv")}
           value={formatCounterValue(fdv ?? 0, counterValueCurrency.ticker, locale, t)}
         />
@@ -64,6 +66,7 @@ export const Informations: React.FC<InformationsProps> = props => {
       </Flex>
       <Flex style={styles.row}>
         <InfoCard
+          left
           label={t("largeMover.circulatingSupply")}
           value={formatCounterValue(circulatingSupply ?? 0, "", locale, t, {
             ticker,
@@ -75,7 +78,7 @@ export const Informations: React.FC<InformationsProps> = props => {
         />
       </Flex>
 
-      <Flex paddingBottom={6}>
+      <Flex paddingBottom={4}>
         <AthAtlBlock
           label="largeMover.ath"
           value={allTimeHigh}
@@ -108,37 +111,12 @@ const styles = StyleSheet.create({
   title: {
     fontWeight: "bold",
     fontSize: 14,
-    paddingBottom: 16,
+    paddingBottom: 12,
   },
   row: {
     flexDirection: "row",
     justifyContent: "space-between",
-    paddingBottom: 16,
-  },
-  container: {
-    flexDirection: "column",
-    padding: 16,
-    borderRadius: 16,
-    width: "48%",
-  },
-  bigContainer: {
-    flexDirection: "column",
-    padding: 12,
-    borderRadius: 16,
-  },
-  rowInside: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    paddingBottom: 2,
-  },
-  name: {
-    fontSize: 15,
-    paddingBottom: 6,
-  },
-  value: {
-    fontSize: 15,
-    fontWeight: "bold",
-    textTransform: "uppercase",
+    paddingBottom: 12,
   },
   date: {
     fontSize: 12,

apps/ledger-live-mobile/src/newArch/features/LandingPages/screens/LargeMoverLandingPage/components/Ticker.tsx

@@ -1,16 +1,19 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, Platform } from "react-native";
 import { getCryptoCurrencyById, getCurrencyColor } from "@ledgerhq/live-common/currencies/index";
 import { Flex, Text } from "@ledgerhq/native-ui";
 import CircleCurrencyIcon from "~/components/CircleCurrencyIcon";
 import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
+import { BlurView } from "@react-native-community/blur";
+import { useTheme } from "styled-components/native";
 
 type TickerProps = {
   currencyId: string;
   width: number;
 };
 
 export const Ticker: React.FC<TickerProps> = ({ currencyId, width }) => {
+  const theme = useTheme();
   const currency = getCryptoCurrencyById(currencyId);
   const midColor = getCurrencyColor(currency);
   return (
@@ -28,10 +31,25 @@ export const Ticker: React.FC<TickerProps> = ({ currencyId, width }) => {
       <Flex
         flexDirection="row"
         alignItems="center"
-        backgroundColor="opacityDefault.c10"
+        backgroundColor={Platform.OS === "ios" ? "opacityDefault.c10" : "neutral.c30"}
         padding={4}
         borderRadius={40}
       >
+        {Platform.OS === "ios" && (
+          <BlurView
+            style={{
+              borderRadius: 25,
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: theme.colors.opacityDefault.c40,
+            }}
+            blurType={theme.theme}
+            blurAmount={7}
+          />
+        )}
         <Flex>
           <CircleCurrencyIcon currency={currency} size={24} sizeRatio={0.9} />
         </Flex>

apps/ledger-live-mobile/src/newArch/features/LandingPages/screens/LargeMoverLandingPage/index.tsx

@@ -7,7 +7,7 @@ import { LandingPagesNavigatorParamList } from "~/components/RootNavigator/types
 import { NavigatorName, ScreenName } from "~/const";
 import { StackNavigatorProps } from "~/components/RootNavigator/types/helpers";
 import { StickyHeader } from "./components/StickyHeader";
-import { Platform, SafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native";
 import { useTheme } from "styled-components/native";
 import { getCurrencyIdsFromTickers, rangeMap } from "./utils";
 import { SwiperComponent } from "~/newArch/components/Swiper/components/Swiper";
@@ -49,8 +49,7 @@ export const LargeMoverLandingPage = ({ route }: LargeMoverLandingPageProps) =>
   const navigation = useNavigation<NavigationProp<WalletTabNavigatorStackParamList>>();
 
   const { colors } = useTheme();
-  const constHeight = Platform.OS === "ios" ? 0.75 : 0.8;
-  const height = getWindowDimensions().height * constHeight;
+  const height = getWindowDimensions().height * 0.78;
   const [currentIndex, setCurrentIndex] = useState(0);
   const showOverlay = useSelector(tutorialSelector);
   const handleSwipe = (newIndex: number) => {
@@ -109,10 +108,10 @@ export const LargeMoverLandingPage = ({ route }: LargeMoverLandingPageProps) =>
   return (
     <>
       {showOverlay && !loading && <OverlayTutorial />}
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.neutral.c00, paddingTop: 10 }}>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.neutral.c00, paddingTop: 40 }}>
         <TrackScreen name={PAGE_NAME} initialRange={initialRange} currencyIds={currencyIds} />
         <StickyHeader />
-        <Flex paddingTop={40}>
+        <Flex paddingTop={25}>
           {loading && loadingChart ? (
             <LoadingIndicator height={height} />
           ) : (