🐛 [BUGFIX] : Reset of market Store when refreshing app + uniformize m…

…arket store actions (#7259)

.changeset/serious-emus-attack.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Fix Store

.changeset/two-eyes-report.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Currency in Market Tab reverted back to USD when refreshing App

apps/ledger-live-desktop/src/renderer/actions/market.ts

@@ -1,4 +1,5 @@
 import { MarketListRequestParams } from "@ledgerhq/live-common/market/utils/types";
+import { MarketState } from "../reducers/market";
 
 export const setMarketOptions = (payload: MarketListRequestParams) => ({
   type: "MARKET_SET_VALUES",
@@ -9,3 +10,8 @@ export const setMarketCurrentPage = (payload: number) => ({
   type: "MARKET_SET_CURRENT_PAGE",
   payload,
 });
+
+export const importMarketState = (payload: MarketState) => ({
+  type: "MARKET_IMPORT_STATE",
+  payload,
+});

apps/ledger-live-desktop/src/renderer/actions/settings.ts

@@ -316,10 +316,6 @@ export const setSwapHasAcceptedIPSharing = (hasAcceptedIPSharing: boolean) => ({
   type: "SET_SWAP_ACCEPTED_IP_SHARING",
   payload: hasAcceptedIPSharing,
 });
-export const toggleStarredMarketCoins = (payload: string) => ({
-  type: "TOGGLE_STARRED_MARKET_COINS",
-  payload,
-});
 export const setOverriddenFeatureFlag = (featureFlag: {
   key: FeatureId;
   value: Feature | undefined;
@@ -377,17 +373,17 @@ export const setAnonymousBrazeId = (payload: string) => ({
   payload,
 });
 
-export const addStarredMarketCoins = (payload: string) => ({
-  type: "ADD_STARRED_MARKET_COINS",
+export const setCurrencySettings = (payload: { key: string; value: CurrencySettings }) => ({
+  type: "SET_CURRENCY_SETTINGS",
   payload,
 });
 
-export const removeStarredMarketCoins = (payload: string) => ({
-  type: "REMOVE_STARRED_MARKET_COINS",
+export const addStarredMarketCoins = (payload: string) => ({
+  type: "MARKET_ADD_STARRED_COINS",
   payload,
 });
 
-export const setCurrencySettings = (payload: { key: string; value: CurrencySettings }) => ({
-  type: "SET_CURRENCY_SETTINGS",
+export const removeStarredMarketCoins = (payload: string) => ({
+  type: "MARKET_REMOVE_STARRED_COINS",
   payload,
 });

apps/ledger-live-desktop/src/renderer/init.tsx

@@ -47,6 +47,7 @@ import { addDevice, removeDevice, resetDevices } from "~/renderer/actions/device
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { listCachedCurrencyIds } from "./bridge/cache";
 import { LogEntry } from "winston";
+import { importMarketState } from "./actions/market";
 
 const rootNode = document.getElementById("react-root");
 const TAB_KEY = 9;
@@ -168,6 +169,7 @@ async function init() {
   }
   const initialCountervalues = await getKey("app", "countervalues");
   r(<ReactRoot store={store} language={language} initialCountervalues={initialCountervalues} />);
+
   const postOnboardingState = await getKey("app", "postOnboarding");
   if (postOnboardingState) {
     store.dispatch(
@@ -176,6 +178,12 @@ async function init() {
       }),
     );
   }
+
+  const marketState = await getKey("app", "market");
+  if (marketState) {
+    store.dispatch(importMarketState(marketState));
+  }
+
   webFrame.setVisualZoomLevelLimits(1, 1);
   const matcher = window.matchMedia("(prefers-color-scheme: dark)");
   const updateOSTheme = () => store.dispatch(setOSDarkMode(matcher.matches));

apps/ledger-live-desktop/src/renderer/middlewares/db.ts

@@ -8,6 +8,7 @@ import { settingsExportSelector, areSettingsLoaded } from "./../reducers/setting
 import { State } from "../reducers";
 import { Account, AccountUserData } from "@ledgerhq/types-live";
 import { accountUserDataExportSelector } from "@ledgerhq/live-wallet/store";
+import { marketStoreSelector } from "../reducers/market";
 let DB_MIDDLEWARE_ENABLED = true;
 
 // ability to temporary disable the db middleware from outside
@@ -41,6 +42,10 @@ const DBMiddleware: Middleware<{}, State> = store => next => action => {
     next(action);
     const state = store.getState();
     setKey("app", "postOnboarding", postOnboardingSelector(state));
+  } else if (DB_MIDDLEWARE_ENABLED && action.type.startsWith("MARKET")) {
+    next(action);
+    const state = store.getState();
+    setKey("app", "market", marketStoreSelector(state));
   } else {
     const oldState = store.getState();
     const res = next(action);

apps/ledger-live-desktop/src/renderer/reducers/market.ts

@@ -22,6 +22,8 @@ const initialState: MarketState = {
 };
 
 type HandlersPayloads = {
+  MARKET_IMPORT_STATE: MarketState;
+
   MARKET_SET_VALUES: MarketListRequestParams;
   MARKET_SET_CURRENT_PAGE: number;
 };
@@ -40,13 +42,26 @@ const handlers: MarketHandlers = {
     ...state,
     currentPage: payload,
   }),
+
+  MARKET_IMPORT_STATE: (state, { payload }: { payload: MarketState }) => ({
+    ...state,
+    marketParams: {
+      ...state.marketParams,
+      range: payload.marketParams.range,
+      counterCurrency: payload.marketParams.counterCurrency,
+      order: payload.marketParams.order,
+    },
+  }),
 };
 
 // Selectors
 
 export const marketParamsSelector = (state: { market: MarketState }) => state.market.marketParams;
 export const marketCurrentPageSelector = (state: { market: MarketState }) =>
   state.market.currentPage;
+
+export const marketStoreSelector = (state: { market: MarketState }) => state.market;
+
 // Exporting reducer
 
 export default handleActions<MarketState, HandlersPayloads[keyof HandlersPayloads]>(

apps/ledger-live-desktop/src/renderer/reducers/settings.ts

@@ -203,7 +203,7 @@ export const INITIAL_STATE: SettingsState = {
   dismissedContentCards: {} as Record<string, number>,
   anonymousBrazeId: null,
 
-  //MARKET
+  //Market
   starredMarketCoins: [],
 };
 
@@ -257,9 +257,10 @@ type HandlersPayloads = {
   };
   CLEAR_DISMISSED_CONTENT_CARDS: never;
   SET_ANONYMOUS_BRAZE_ID: string;
-  ADD_STARRED_MARKET_COINS: string;
-  REMOVE_STARRED_MARKET_COINS: string;
   SET_CURRENCY_SETTINGS: { key: string; value: CurrencySettings };
+
+  MARKET_ADD_STARRED_COINS: string;
+  MARKET_REMOVE_STARRED_COINS: string;
 };
 type SettingsHandlers<PreciseKey = true> = Handlers<SettingsState, HandlersPayloads, PreciseKey>;
 
@@ -447,11 +448,12 @@ const handlers: SettingsHandlers = {
     ...state,
     anonymousBrazeId: payload,
   }),
-  ADD_STARRED_MARKET_COINS: (state: SettingsState, { payload }) => ({
+
+  MARKET_ADD_STARRED_COINS: (state: SettingsState, { payload }) => ({
     ...state,
     starredMarketCoins: [...state.starredMarketCoins, payload],
   }),
-  REMOVE_STARRED_MARKET_COINS: (state: SettingsState, { payload }) => ({
+  MARKET_REMOVE_STARRED_COINS: (state: SettingsState, { payload }) => ({
     ...state,
     starredMarketCoins: state.starredMarketCoins.filter(id => id !== payload),
   }),
@@ -794,5 +796,4 @@ export const anonymousBrazeIdSelector = (state: State) => state.settings.anonymo
 
 export const currenciesSettingsSelector = (state: State) => state.settings.currenciesSettings;
 
-//MARKET
 export const starredMarketCoinsSelector = (state: State) => state.settings.starredMarketCoins;

apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarket.ts

@@ -14,8 +14,8 @@ import { useInitSupportedCounterValues } from "~/renderer/hooks/useInitSupported
 import { marketCurrentPageSelector, marketParamsSelector } from "~/renderer/reducers/market";
 import { localeSelector, starredMarketCoinsSelector } from "~/renderer/reducers/settings";
 import { BASIC_REFETCH, REFETCH_TIME_ONE_MINUTE, getCurrentPage, isDataStale } from "../utils";
-import { removeStarredMarketCoins, addStarredMarketCoins } from "~/renderer/actions/settings";
 import { useFetchCurrencyAll } from "@ledgerhq/live-common/exchange/swap/hooks/index";
+import { addStarredMarketCoins, removeStarredMarketCoins } from "~/renderer/actions/settings";
 
 export function useMarket() {
   const lldRefreshMarketDataFeature = useFeature("lldRefreshMarketData");

apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarketCoin.ts

@@ -10,10 +10,10 @@ import { Page, useMarketActions } from "./useMarketActions";
 import { useCallback } from "react";
 import { useParams } from "react-router";
 import { setMarketOptions } from "~/renderer/actions/market";
-import { removeStarredMarketCoins, addStarredMarketCoins } from "~/renderer/actions/settings";
 import { marketParamsSelector } from "~/renderer/reducers/market";
-import { starredMarketCoinsSelector, localeSelector } from "~/renderer/reducers/settings";
 import { useFetchCurrencyAll } from "@ledgerhq/live-common/exchange/swap/hooks/index";
+import { localeSelector, starredMarketCoinsSelector } from "~/renderer/reducers/settings";
+import { removeStarredMarketCoins, addStarredMarketCoins } from "~/renderer/actions/settings";
 
 export const useMarketCoin = () => {
   const marketParams = useSelector(marketParamsSelector);

apps/ledger-live-desktop/src/renderer/storage.ts

@@ -22,6 +22,7 @@ import { CounterValuesStatus, RateMapRaw } from "@ledgerhq/live-countervalues/ty
 import { hubStateSelector } from "@ledgerhq/live-common/postOnboarding/reducer";
 import { settingsExportSelector } from "./reducers/settings";
 import logger from "./logger";
+import { marketStoreSelector } from "./reducers/market";
 
 /*
   This file serve as an interface for the RPC binding to the main thread that now manage the config file.
@@ -39,6 +40,7 @@ export type Countervalues = Record<string, CounterValuesStatus | RateMapRaw> & {
 export type PostOnboarding = ReturnType<typeof hubStateSelector>;
 
 export type Settings = ReturnType<typeof settingsExportSelector>;
+export type Market = ReturnType<typeof marketStoreSelector>;
 
 // The types seen from the user side.
 type DatabaseValues = {
@@ -52,6 +54,7 @@ type DatabaseValues = {
   countervalues: Countervalues;
   postOnboarding: PostOnboarding;
   settings: Settings;
+  market: Market;
   PLAYWRIGHT_RUN: {
     localStorage?: Record<string, string>;
   };

apps/ledger-live-mobile/src/actions/market.ts

@@ -4,6 +4,7 @@ import {
   MarketStateActionTypes,
   MarketSetCurrentPagePayload,
   MarketSetMarketFilterByStarredCurrenciesPayload,
+  MarketImportPayload,
 } from "./types";
 
 export const setMarketRequestParams = createAction<MarketSetMarketRequestParamsPayload>(
@@ -18,3 +19,5 @@ export const setMarketFilterByStarredCurrencies =
 export const setMarketCurrentPage = createAction<MarketSetCurrentPagePayload>(
   MarketStateActionTypes.MARKET_SET_CURRENT_PAGE,
 );
+
+export const importMarket = createAction<MarketImportPayload>(MarketStateActionTypes.MARKET_IMPORT);

apps/ledger-live-mobile/src/actions/types.ts

@@ -487,21 +487,6 @@ export type ProtectDataPayload = ProtectState["data"];
 export type ProtectStatusPayload = ProtectState["protectStatus"];
 export type ProtectPayload = ProtectDataPayload | ProtectStatusPayload;
 
-// === PAYLOADS ===
-
-export type ActionsPayload =
-  | Action<AccountsPayload>
-  | Action<AppStatePayload>
-  | Action<BlePayload>
-  | Action<NotificationsPayload>
-  | Action<RatingsPayload>
-  | Action<SettingsPayload>
-  | Action<WalletConnectPayload>
-  | Action<PostOnboardingPayload>
-  | Action<SwapPayload>
-  | Action<ProtectPayload>
-  | Action<EarnPayload>;
-
 // === NFT ACTIONS ===
 export enum NftStateActionTypes {
   SET_GALLERY_CHAIN_FILTER = "SET_GALLERY_CHAIN_FILTER",
@@ -511,7 +496,7 @@ export enum NftStateActionTypes {
 export type NftStateGalleryChainFiltersPayload = [keyof NftState["galleryChainFilters"], boolean];
 export type NftStateGalleryFilterDrawerVisiblePayload = NftState["filterDrawerVisible"];
 
-export type NftStatePayload =
+export type NftPayload =
   | NftStateGalleryChainFiltersPayload
   | NftStateGalleryFilterDrawerVisiblePayload;
 
@@ -520,14 +505,35 @@ export enum MarketStateActionTypes {
   SET_MARKET_REQUEST_PARAMS = "SET_MARKET_REQUEST_PARAMS",
   SET_MARKET_FILTER_BY_STARRED_CURRENCIES = "SET_MARKET_FILTER_BY_STARRED_CURRENCIES",
   MARKET_SET_CURRENT_PAGE = "MARKET_SET_CURRENT_PAGE",
+  MARKET_IMPORT = "MARKET_IMPORT",
 }
 
 export type MarketSetMarketFilterByStarredCurrenciesPayload =
   MarketState["marketFilterByStarredCurrencies"];
 export type MarketSetCurrentPagePayload = MarketState["marketCurrentPage"];
 export type MarketSetMarketRequestParamsPayload = MarketState["marketParams"];
 
-export type MarketStatePayload =
+export type MarketImportPayload = Partial<MarketState>;
+
+export type MarketPayload =
   | MarketSetMarketFilterByStarredCurrenciesPayload
   | MarketSetMarketRequestParamsPayload
-  | MarketSetCurrentPagePayload;
+  | MarketSetCurrentPagePayload
+  | MarketImportPayload;
+
+// === PAYLOADS ===
+
+export type ActionsPayload =
+  | Action<AccountsPayload>
+  | Action<AppStatePayload>
+  | Action<BlePayload>
+  | Action<NotificationsPayload>
+  | Action<RatingsPayload>
+  | Action<SettingsPayload>
+  | Action<WalletConnectPayload>
+  | Action<PostOnboardingPayload>
+  | Action<SwapPayload>
+  | Action<ProtectPayload>
+  | Action<EarnPayload>
+  | Action<MarketPayload>
+  | Action<NftPayload>;

apps/ledger-live-mobile/src/context/LedgerStore.tsx

@@ -11,6 +11,7 @@ import {
   getBle,
   getPostOnboardingState,
   getProtect,
+  getMarketState,
 } from "../db";
 import { importSettings, setSupportedCounterValues } from "~/actions/settings";
 import { importStore as importAccountsRaw } from "~/actions/accounts";
@@ -19,6 +20,7 @@ import { updateProtectData, updateProtectStatus } from "~/actions/protect";
 import { INITIAL_STATE as settingsState } from "~/reducers/settings";
 import { listCachedCurrencyIds, hydrateCurrency } from "~/bridge/cache";
 import { getCryptoCurrencyById, listSupportedFiats } from "@ledgerhq/live-common/currencies/index";
+import { importMarket } from "~/actions/market";
 
 export default class LedgerStoreProvider extends Component<
   {
@@ -106,6 +108,11 @@ export default class LedgerStoreProvider extends Component<
       this.props.store.dispatch(importPostOnboardingState({ newState: postOnboardingState }));
     }
 
+    const marketState = await getMarketState();
+    if (marketState) {
+      this.props.store.dispatch(importMarket(marketState));
+    }
+
     const protect = await getProtect();
     if (protect) {
       this.props.store.dispatch(updateProtectData(protect.data));

apps/ledger-live-mobile/src/db.ts

@@ -11,7 +11,7 @@ import { useDBRaw } from "@ledgerhq/live-common/hooks/useDBRaw";
 import { Dispatch, SetStateAction } from "react";
 import store from "./logic/storeWrapper";
 import type { User } from "./types/store";
-import type { BleState, ProtectState, SettingsState } from "./reducers/types";
+import type { BleState, MarketState, ProtectState, SettingsState } from "./reducers/types";
 
 export type Notifications = {
   announcements: Announcement[];
@@ -266,6 +266,14 @@ export async function savePostOnboardingState(obj: PostOnboardingState): Promise
   await store.save("postOnboarding", obj);
 }
 
+export function getMarketState(): Promise<MarketState> {
+  return store.get("market") as Promise<MarketState>;
+}
+
+export async function saveMarketState(obj: MarketState): Promise<void> {
+  await store.save("market", obj);
+}
+
 export async function getProtect(): Promise<ProtectState> {
   const protect = (await store.get("protect")) as ProtectState;
   return protect;