✨ feat(lld): fetch assets data on search

Author: cgrellard-ledger

.changeset/long-roses-hug.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+LLD - Fetch assets data on search

apps/ledger-live-desktop/src/newArch/features/ModularDrawer/ModularDrawerFlowManagerRemoteData.tsx

@@ -51,31 +51,25 @@ const ModularDrawerFlowManagerRemoteData = ({
   });
 
   const renderStepContent = (step: ModularDrawerStep) => {
-    // TODO: We should find a better way to handle that. THe issue is that we always display AssetSelection screen
-    // but in some cases we don't want to trigger analytics events as it may have been dismissed automatically depending on the flow.
-    // For now we just return null if we are in ASSET_SELECTION step and there is only one currency.
-    // This is a temporary solution until we find a better way to handle this but it works as we just don't render a skipped step.
     switch (step) {
       case MODULAR_DRAWER_STEP.ASSET_SELECTION:
-        if (!hasOneCurrency) {
-          return (
-            <AssetSelection
-              assetsToDisplay={assetsToDisplay}
-              providersLoadingStatus={loadingStatus}
-              originalAssetsToDisplay={originalAssetsToDisplay}
-              sortedCryptoCurrencies={filteredSortedCryptoCurrencies}
-              defaultSearchValue={searchedValue}
-              assetsConfiguration={assetsConfiguration}
-              currenciesByProvider={currenciesByProvider}
-              setAssetsToDisplay={() => {}} // Not needed anymore with the search filtering done by the backend
-              setSearchedValue={setSearchedValue}
-              onAssetSelected={handleAssetSelected}
-              flow={flow}
-              source={source}
-            />
-          );
-        }
-        return null;
+        return (
+          <AssetSelection
+            assetsToDisplay={assetsToDisplay}
+            providersLoadingStatus={loadingStatus}
+            originalAssetsToDisplay={originalAssetsToDisplay}
+            sortedCryptoCurrencies={filteredSortedCryptoCurrencies}
+            defaultSearchValue={searchedValue}
+            assetsConfiguration={assetsConfiguration}
+            currenciesByProvider={currenciesByProvider}
+            setAssetsToDisplay={() => {}} // Not needed anymore with the search filtering done by the backend
+            setSearchedValue={setSearchedValue}
+            onAssetSelected={handleAssetSelected}
+            flow={flow}
+            source={source}
+            hasOneCurrency={hasOneCurrency}
+          />
+        );
       case MODULAR_DRAWER_STEP.NETWORK_SELECTION:
         return (
           <NetworkSelection

apps/ledger-live-desktop/src/newArch/features/ModularDrawer/hooks/useModularDrawerFlowState.ts

@@ -26,6 +26,7 @@ type Props = {
   onAccountSelected?: (account: AccountLike, parentAccount?: Account) => void;
   hasOneCurrency: boolean;
   flow: string;
+  searchedValue?: string;
 };
 
 export function useModularDrawerFlowState({
@@ -39,6 +40,7 @@ export function useModularDrawerFlowState({
   onAccountSelected,
   hasOneCurrency,
   flow,
+  searchedValue,
 }: Props) {
   const { trackModularDrawerEvent } = useModularDrawerAnalytics();
 
@@ -179,7 +181,7 @@ export function useModularDrawerFlowState({
   };
 
   useEffect(() => {
-    if (hasOneCurrency && !selectedAsset) {
+    if (hasOneCurrency && !selectedAsset && !searchedValue) {
       const currencyIdToFind = currenciesIdsArray[0];
       const currency = getTokenOrCryptoCurrencyById(currencyIdToFind);
 
@@ -195,6 +197,7 @@ export function useModularDrawerFlowState({
     hasOneCurrency,
     selectedAsset,
     currenciesIdsArray,
+    searchedValue,
   ]);
 
   return {

apps/ledger-live-desktop/src/newArch/features/ModularDrawer/hooks/useModularDrawerRemoteData.ts

@@ -71,6 +71,7 @@ export function useModularDrawerRemoteData({
     onAccountSelected,
     flow,
     hasOneCurrency,
+    searchedValue,
   });
 
   const { handleBack } = useModularDrawerBackButton({

apps/ledger-live-desktop/src/newArch/features/ModularDrawer/screens/AssetSelection/index.tsx

@@ -20,6 +20,7 @@ export type AssetSelectionStepProps = {
   setAssetsToDisplay: (assets: CryptoOrTokenCurrency[]) => void;
   onAssetSelected: (asset: CryptoOrTokenCurrency) => void;
   setSearchedValue: (value: string | undefined) => void;
+  hasOneCurrency?: boolean;
 };
 
 const AssetSelection = ({
@@ -35,6 +36,7 @@ const AssetSelection = ({
   setAssetsToDisplay,
   onAssetSelected,
   setSearchedValue,
+  hasOneCurrency,
 }: Readonly<AssetSelectionStepProps>) => {
   const [shouldScrollToTop, setShouldScrollToTop] = useState(false);
 
@@ -52,13 +54,15 @@ const AssetSelection = ({
 
   return (
     <>
-      <TrackDrawerScreen
-        page={MODULAR_DRAWER_PAGE_NAME.MODULAR_ASSET_SELECTION}
-        source={source}
-        flow={flow}
-        assetsConfig={assetsConfiguration}
-        formatAssetConfig
-      />
+      {!hasOneCurrency && (
+        <TrackDrawerScreen
+          page={MODULAR_DRAWER_PAGE_NAME.MODULAR_ASSET_SELECTION}
+          source={source}
+          flow={flow}
+          assetsConfig={assetsConfiguration}
+          formatAssetConfig
+        />
+      )}
       <SearchInputContainer
         setItemsToDisplay={setAssetsToDisplay}
         setSearchedValue={setSearchedValue}