LL-2041 - Feature: Persist all market page settings in store (#71)

LL-2041 - Persist all market page settings in store

apps/ledger-live-mobile/src/actions/settings.js

@@ -6,6 +6,7 @@ import type { Currency } from "@ledgerhq/live-common/lib/types";
 import type { DeviceModelInfo } from "@ledgerhq/live-common/lib/types/manager";
 import type { Device } from "@ledgerhq/live-common/lib/hw/actions/types";
 import type { PortfolioRange } from "@ledgerhq/live-common/lib/portfolio/v2/types";
+import { MarketListRequestParams } from "@ledgerhq/live-common/lib/market/types";
 import { selectedTimeRangeSelector } from "../reducers/settings";
 
 export type CurrencySettings = {
@@ -219,6 +220,23 @@ export const setLastConnectedDevice = (device: Device) => ({
   payload: device,
 });
 
+export const setMarketRequestParams = (
+  marketRequestParams: MarketListRequestParams,
+) => ({
+  type: "SET_MARKET_REQUEST_PARAMS",
+  payload: marketRequestParams,
+});
+
+export const setMarketCounterCurrency = (currency: string) => ({
+  type: "SET_MARKET_COUNTER_CURRENCY",
+  payload: currency,
+});
+
+export const setMarketFilterByStarredAccounts = (payload: boolean) => ({
+  type: "SET_MARKET_FILTER_BY_STARRED_ACCOUNTS",
+  payload,
+});
+
 type PortfolioRangeOption = {
   key: PortfolioRange,
   value: string,

apps/ledger-live-mobile/src/reducers/settings.js

@@ -20,6 +20,7 @@ import { getAccountCurrency } from "@ledgerhq/live-common/lib/account/helpers";
 import Config from "react-native-config";
 import type { PortfolioRange } from "@ledgerhq/live-common/lib/portfolio/v2/types";
 import type { DeviceModelInfo } from "@ledgerhq/live-common/lib/types/manager";
+import { MarketListRequestParams } from "@ledgerhq/live-common/lib/market/types";
 import { currencySettingsDefaults } from "../helpers/CurrencySettingsDefaults";
 import type { State } from ".";
 import { SLIDES } from "../components/Carousel/shared";
@@ -99,6 +100,9 @@ export type SettingsState = {
   lastSeenDevice: ?DeviceModelInfo,
   starredMarketCoins: string[],
   lastConnectedDevice: ?Device,
+  marketRequestParams: MarketListRequestParams,
+  marketCounterCurrency: ?string,
+  marketFilterByStarredAccounts: boolean,
 };
 
 export const INITIAL_STATE: SettingsState = {
@@ -141,6 +145,16 @@ export const INITIAL_STATE: SettingsState = {
   lastSeenDevice: null,
   starredMarketCoins: [],
   lastConnectedDevice: null,
+  marketRequestParams: {
+    range: "24h",
+    orderBy: "market_cap",
+    order: "desc",
+    liveCompatible: false,
+    sparkline: false,
+    top100: false,
+  },
+  marketCounterCurrency: null,
+  marketFilterByStarredAccounts: false,
 };
 
 const pairHash = (from, to) => `${from.ticker}_${to.ticker}`;
@@ -397,6 +411,24 @@ const handlers: Object = {
     ...state,
     lastConnectedDevice,
   }),
+  SET_MARKET_REQUEST_PARAMS: (state: SettingsState, { payload }) => ({
+    ...state,
+    marketRequestParams: {
+      ...state.marketRequestParams,
+      ...payload,
+    },
+  }),
+  SET_MARKET_COUNTER_CURRENCY: (state: SettingsState, { payload }) => ({
+    ...state,
+    marketCounterCurrency: payload,
+  }),
+  SET_MARKET_FILTER_BY_STARRED_ACCOUNTS: (
+    state: SettingsState,
+    { payload },
+  ) => ({
+    ...state,
+    marketFilterByStarredAccounts: payload,
+  }),
 };
 
 const storeSelector = (state: *): SettingsState => state.settings;
@@ -587,3 +619,12 @@ export const starredMarketCoinsSelector = (state: State) =>
 
 export const lastConnectedDeviceSelector = (state: State) =>
   state.settings.lastConnectedDevice;
+
+export const marketRequestParamsSelector = (state: State) =>
+  state.settings.marketRequestParams;
+
+export const marketCounterCurrencySelector = (state: State) =>
+  state.settings.marketCounterCurrency;
+
+export const marketFilterByStarredAccountsSelector = (state: State) =>
+  state.settings.marketFilterByStarredAccounts;

apps/ledger-live-mobile/src/screens/Market/MarketCurrencySelect.tsx

@@ -5,8 +5,13 @@ import React, { useCallback, memo, useState, useRef, useEffect } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { FlatList, TouchableOpacity, Image } from "react-native";
 import styled, { useTheme } from "styled-components/native";
+import { useDispatch } from "react-redux";
 import Search from "../../components/Search";
 import { supportedCountervalues } from "../../reducers/settings";
+import {
+  setMarketCounterCurrency,
+  setMarketRequestParams,
+} from "../../actions/settings";
 
 const RenderEmptyList = ({
   theme,
@@ -53,6 +58,7 @@ const CheckIconContainer = styled(Flex).attrs({
 
 function MarketCurrencySelect({ navigation }: { navigation: any }) {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
   const { colors } = useTheme();
   const {
     counterCurrency,
@@ -78,6 +84,7 @@ function MarketCurrencySelect({ navigation }: { navigation: any }) {
 
   const onSelectCurrency = useCallback(
     (value: string) => {
+      dispatch(setMarketCounterCurrency(value));
       setCounterCurrency(value);
       navigation.goBack();
     },

apps/ledger-live-mobile/src/screens/Market/MarketDataProviderWrapper.tsx

@@ -5,7 +5,13 @@ import apiMock from "@ledgerhq/live-common/lib/market/api/api.mock";
 import Config from "react-native-config";
 import { MarketDataProvider } from "@ledgerhq/live-common/lib/market/MarketDataProvider";
 import { useNetInfo } from "@react-native-community/netinfo";
-import { counterValueCurrencySelector } from "../../reducers/settings";
+import {
+  counterValueCurrencySelector,
+  marketCounterCurrencySelector,
+  marketFilterByStarredAccountsSelector,
+  marketRequestParamsSelector,
+  starredMarketCoinsSelector,
+} from "../../reducers/settings";
 
 type Props = {
   children: React.ReactNode;
@@ -15,30 +21,40 @@ export default function MarketDataProviderWrapper({
   children,
 }: Props): ReactElement {
   const counterValueCurrency: any = useSelector(counterValueCurrencySelector);
+  const marketRequestParams: any = useSelector(marketRequestParamsSelector);
+  const marketCounterCurrency: any = useSelector(marketCounterCurrencySelector);
+  const starredMarketCoins: string[] = useSelector(starredMarketCoinsSelector);
+  const filterByStarredAccount: boolean = useSelector(
+    marketFilterByStarredAccountsSelector,
+  );
   const { isConnected } = useNetInfo();
 
+  const counterCurrency = !isConnected
+    ? undefined // without coutervalues service is not initialized with cg data, this forces it to fetch it at least once the network is on
+    : marketCounterCurrency // If there is a stored market counter currency we use it, otherwise we use the setting countervalue currency
+    ? { ticker: marketCounterCurrency }
+    : counterValueCurrency
+    ? // @TODO move this toLowercase check on live-common
+      { ticker: counterValueCurrency.ticker?.toLowerCase() }
+    : counterValueCurrency;
+
   return (
     <MarketDataProvider
       {...(Config.MOCK ? { fetchApi: apiMock } : {})}
-      countervalue={
-        !isConnected
-          ? undefined // without coutervalues service is not initialized with cg data, this forces it to fetch it at least once the network is on
-          : counterValueCurrency
-          // @TODO move this toLowercase check on live-common
-          ? { ticker: counterValueCurrency.ticker.toLowerCase() }
-          : counterValueCurrency
-      }
+      countervalue={counterCurrency}
       initState={{
         requestParams: {
           range: "24h",
           limit: 20,
           ids: [],
-          starred: [],
           orderBy: "market_cap",
           order: "desc",
           search: "",
           liveCompatible: false,
           sparkline: false,
+          top100: false,
+          ...marketRequestParams,
+          starred: filterByStarredAccount ? starredMarketCoins : [],
         },
       }}
     >