LIVE-1982-currency-initially-ordered

package.json

@@ -74,7 +74,7 @@
     "@ledgerhq/errors": "6.10.0",
     "@ledgerhq/hw-transport": "6.24.1",
     "@ledgerhq/hw-transport-http": "6.27.0",
-    "@ledgerhq/live-common": "22.0.2",
+    "@ledgerhq/live-common": "https://github.com/LedgerHQ/ledger-live-common.git#7108d9c61fe7cea9e660f9e9aa29a97df9b65c94",
     "@ledgerhq/logs": "6.10.0",
     "@ledgerhq/native-ui": "^0.7.16",
     "@ledgerhq/react-native-hid": "6.24.1",

src/screens/AddAccounts/01-SelectCrypto.tsx

@@ -0,0 +1,127 @@
+// @flow
+import React, { useMemo } from "react";
+import { Trans } from "react-i18next";
+import { StyleSheet, View, FlatList, SafeAreaView } from "react-native";
+import { CryptoCurrency, TokenCurrency } from "@ledgerhq/live-common/lib/types";
+import {
+  isCurrencySupported,
+  listTokens,
+  listSupportedCurrencies,
+  useCurrenciesByMarketcapWithStatus,
+} from "@ledgerhq/live-common/lib/currencies";
+
+import { useTheme } from "@react-navigation/native";
+import { ScreenName } from "../../const";
+import { TrackScreen } from "../../analytics";
+import FilteredSearchBar from "../../components/FilteredSearchBar";
+import CurrencyRow from "../../components/CurrencyRow";
+import LText from "../../components/LText";
+
+const SEARCH_KEYS = ["name", "ticker"];
+
+type Props = {
+  devMode: boolean;
+  navigation: any;
+  route: { params: { filterCurrencyIds?: string[] } };
+};
+
+const keyExtractor = currency => currency.id;
+
+const renderEmptyList = () => (
+  <View>
+    <LText>
+      <Trans i18nKey="common.noCryptoFound" />
+    </LText>
+  </View>
+);
+
+const listSupportedTokens = () =>
+  listTokens().filter(t => isCurrencySupported(t.parentCurrency));
+
+export default function AddAccountsSelectCrypto({ navigation, route }: Props) {
+  const { colors } = useTheme();
+  const { filterCurrencyIds = [] } = route.params || {};
+  const cryptoCurrencies = useMemo(
+    () =>
+      listSupportedCurrencies()
+        .concat(listSupportedTokens())
+        .filter(
+          ({ id }) =>
+            filterCurrencyIds.length <= 0 || filterCurrencyIds.includes(id),
+        ),
+    [filterCurrencyIds],
+  );
+
+  const { currencies } = useCurrenciesByMarketcapWithStatus(cryptoCurrencies);
+
+  const onPressCurrency = (currency: CryptoCurrency) => {
+    navigation.navigate(ScreenName.AddAccountsSelectDevice, {
+      ...(route?.params ?? {}),
+      currency,
+    });
+  };
+
+  const onPressToken = (token: TokenCurrency) => {
+    navigation.navigate(ScreenName.AddAccountsTokenCurrencyDisclaimer, {
+      token,
+    });
+  };
+
+  const onPressItem = (currencyOrToken: CryptoCurrency | TokenCurrency) => {
+    if (currencyOrToken.type === "TokenCurrency") {
+      onPressToken(currencyOrToken);
+    } else {
+      onPressCurrency(currencyOrToken);
+    }
+  };
+
+  const renderList = items => (
+    <FlatList
+      contentContainerStyle={styles.list}
+      data={items}
+      renderItem={({ item }) => (
+        <CurrencyRow currency={item} onPress={onPressItem} />
+      )}
+      keyExtractor={keyExtractor}
+      showsVerticalScrollIndicator={false}
+      keyboardDismissMode="on-drag"
+    />
+  );
+
+  return (
+    <SafeAreaView style={[styles.root, { backgroundColor: colors.background }]}>
+      <TrackScreen category="AddAccounts" name="SelectCrypto" />
+      <View style={styles.searchContainer}>
+        <FilteredSearchBar
+          keys={SEARCH_KEYS}
+          inputWrapperStyle={styles.filteredSearchInputWrapperStyle}
+          list={currencies || []}
+          renderList={renderList}
+          renderEmptySearch={renderEmptyList}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  searchContainer: {
+    paddingTop: 16,
+    flex: 1,
+  },
+  list: {
+    paddingBottom: 32,
+  },
+  filteredSearchInputWrapperStyle: {
+    marginHorizontal: 16,
+  },
+  emptySearch: {
+    paddingHorizontal: 16,
+  },
+  emptySearchText: {
+    textAlign: "center",
+  },
+});

src/screens/Exchange/SelectCurrency.js

@@ -10,7 +10,7 @@ import type {
 import {
   isCurrencySupported,
   listTokens,
-  useCurrenciesByMarketcap,
+  useCurrenciesByMarketcapWithStatus,
   listSupportedCurrencies,
 } from "@ledgerhq/live-common/lib/currencies";
 
@@ -64,11 +64,15 @@ export default function ExchangeSelectCrypto({ navigation, route }: Props) {
     [],
   );
 
-  const sortedCryptoCurrencies = useCurrenciesByMarketcap(cryptoCurrencies);
+  const {
+    currencies: sortedCryptoCurrencies,
+  } = useCurrenciesByMarketcapWithStatus(cryptoCurrencies);
 
-  const supportedCryptoCurrencies = sortedCryptoCurrencies.filter(currency =>
-    getSupportedCurrencies(mode).includes(currency.id),
-  );
+  const supportedCryptoCurrencies = sortedCryptoCurrencies
+    ? sortedCryptoCurrencies.filter(currency =>
+        getSupportedCurrencies(mode).includes(currency.id),
+      )
+    : [];
 
   const onPressCurrency = (currency: CryptoCurrency) => {
     track("Buy Crypto Continue Button", { currencyName: currency.name });

src/screens/RequestAccount/01-SelectCrypto.js

@@ -7,7 +7,7 @@ import type {
   AccountLike,
 } from "@ledgerhq/live-common/lib/types";
 import {
-  useCurrenciesByMarketcap,
+  useCurrenciesByMarketcapWithStatus,
   findCryptoCurrencyById,
 } from "@ledgerhq/live-common/lib/currencies";
 
@@ -55,7 +55,9 @@ export default function RequestAccountsSelectCrypto({
     [currencies],
   );
 
-  const sortedCryptoCurrencies = useCurrenciesByMarketcap(cryptoCurrencies);
+  const {
+    currencies: sortedCryptoCurrencies,
+  } = useCurrenciesByMarketcapWithStatus(cryptoCurrencies);
 
   const onPressCurrency = (currency: CryptoCurrency) => {
     navigation.navigate(ScreenName.RequestAccountsSelectAccount, {
@@ -85,7 +87,7 @@ export default function RequestAccountsSelectCrypto({
           <FilteredSearchBar
             keys={SEARCH_KEYS}
             inputWrapperStyle={styles.filteredSearchInputWrapperStyle}
-            list={sortedCryptoCurrencies}
+            list={sortedCryptoCurrencies || []}
             renderList={renderList}
             renderEmptySearch={renderEmptyList}
           />

src/screens/Swap/FormSelection/SelectCurrencyScreen.js

@@ -4,7 +4,7 @@ import { Trans } from "react-i18next";
 import { StyleSheet, View, FlatList, SafeAreaView } from "react-native";
 import type { CryptoCurrency } from "@ledgerhq/live-common/lib/types";
 
-import { useCurrenciesByMarketcap } from "@ledgerhq/live-common/lib/currencies";
+import { useCurrenciesByMarketcapWithStatus } from "@ledgerhq/live-common/lib/currencies";
 import { getSupportedCurrencies } from "@ledgerhq/live-common/lib/exchange/swap/logic";
 
 import { useTheme } from "@react-navigation/native";
@@ -49,9 +49,9 @@ export default function SwapFormSelectCurrencyScreen({
         c => c !== getAccountCurrency(swap.from.account),
       )
     : selectableCurrencies;
-  const sortedCryptoCurrencies = useCurrenciesByMarketcap(
-    maybeFilteredCurrencies,
-  );
+  const {
+    currencies: sortedCryptoCurrencies,
+  } = useCurrenciesByMarketcapWithStatus(maybeFilteredCurrencies);
 
   const onPressCurrency = useCallback(
     (currency: CryptoCurrency) => {

src/screens/Swap/index.js

@@ -37,7 +37,7 @@ import {
   getAccountUnit,
 } from "@ledgerhq/live-common/lib/account";
 import { useDispatch, useSelector } from "react-redux";
-import { useCurrenciesByMarketcap } from "@ledgerhq/live-common/lib/currencies";
+import { useCurrenciesByMarketcapWithStatus } from "@ledgerhq/live-common/lib/currencies";
 import AccountAmountRow from "./FormSelection/AccountAmountRow";
 import Button from "../../components/Button";
 import LText from "../../components/LText";
@@ -107,10 +107,10 @@ function SwapForm({
     ? selectableCurrencies.filter(c => c !== getAccountCurrency(defaultAccount))
     : selectableCurrencies;
 
-  const sortedCryptoCurrencies = useCurrenciesByMarketcap(
+  const { currencies } = useCurrenciesByMarketcapWithStatus(
     maybeFilteredCurrencies,
   );
-
+  const sortedCryptoCurrencies = useMemo(() => currencies || [], [currencies]);
   const defaultCurrency = route?.params?.swap?.from.account
     ? sortedCryptoCurrencies.find(
         c => c !== getAccountCurrency(route?.params?.swap?.from.account),