update some components

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/ScanDeviceAccounts/components/AnimatedGradient.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { useTheme } from "styled-components/native";
+import GradientContainer from "~/components/GradientContainer";
+import Animation from "~/components/Animation";
+import lottie from "../assets/lottie.json";
+function AnimatedGradient() {
+  const { colors } = useTheme();
+
+  return (
+    <GradientContainer
+      color={colors.background.main}
+      startOpacity={1}
+      endOpacity={0}
+      containerStyle={{ borderRadius: 0, position: "absolute", bottom: 0, left: 0 }}
+      gradientStyle={{ zIndex: 1 }}
+    >
+      <Animation style={{ width: "100%" }} source={lottie} />
+    </GradientContainer>
+  );
+}
+
+export default AnimatedGradient;

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/ScanDeviceAccounts/index.tsx

@@ -24,12 +24,9 @@ import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { NetworkBasedAddAccountNavigator } from "../AddAccount/types";
 import useScanDeviceAccountsViewModel from "./useScanDeviceAccountsViewModel";
 import ScannedAccountsSection from "./components/ScannedAccountsSection";
-import ScanLoading from "./components/ScanLoading";
+import AnimatedGradient from "./components/AnimatedGradient";
 import ScanDeviceAccountsFooter from "./components/ScanDeviceAccountsFooter";
 import AddressTypeTooltip from "./components/AddressTypeTooltip";
-import GradientContainer from "~/components/GradientContainer";
-import Animation from "~/components/Animation";
-import lottie from "./assets/lottie.json";
 
 type NavigationProps = BaseComposite<
   StackNavigatorProps<NetworkBasedAddAccountNavigator, ScreenName.ScanDeviceAccounts>
@@ -40,9 +37,9 @@ type Props = {
   colors: Theme["colors"];
 } & NavigationProps;
 
-function ScanDeviceAccounts({ route }: Props) {
+function ScanDeviceAccounts() {
   const { colors } = useTheme();
-  const { currency, returnToSwap } = route.params || {};
+
   const existingAccounts = useSelector(accountsSelector);
   const blacklistedTokenIds = useSelector(blacklistedTokenIdsSelector);
 
@@ -72,11 +69,14 @@ function ScanDeviceAccounts({ route }: Props) {
     stopSubscription,
     unselectAll,
     viewAllCreatedAccounts,
+    currency,
+    returnToSwap,
   } = useScanDeviceAccountsViewModel({
     existingAccounts,
     blacklistedTokenIds,
   });
 
+  // Empty state same UI as ledger-live-mobile/src/screens/AddAccounts/03-Accounts.tsx
   const emptyTexts = {
     creatable: alreadyEmptyAccount ? (
       <LText style={styles.paddingHorizontal}>
@@ -132,19 +132,7 @@ function ScanDeviceAccounts({ route }: Props) {
         )}
       </Flex>
 
-      {scanning ? (
-        <>
-          <GradientContainer
-            color={colors.background.main}
-            startOpacity={1}
-            endOpacity={0}
-            containerStyle={{ borderRadius: 0, position: "absolute", bottom: 0, left: 0 }}
-            gradientStyle={{ zIndex: 1 }}
-          >
-            <Animation style={{ width: "100%" }} source={lottie} />
-          </GradientContainer>
-        </>
-      ) : null}
+      {scanning ? <AnimatedGradient /> : null}
       <NavigationScrollView style={styles.inner} contentContainerStyle={styles.innerContent}>
         {sections.map(({ id, selectable, defaultSelected, data }, i) => {
           const hasMultipleSchemes =

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/ScanDeviceAccounts/useScanDeviceAccountsViewModel.ts

@@ -41,6 +41,7 @@ export default function useScanDeviceAccountsViewModel({
     currency,
     device: { deviceId },
     inline,
+    returnToSwap,
   } = route.params || {};
 
   const newAccountSchemes = useMemo(() => {
@@ -279,5 +280,7 @@ export default function useScanDeviceAccountsViewModel({
     stopSubscription,
     unselectAll,
     viewAllCreatedAccounts,
+    returnToSwap,
+    currency,
   };
 }