🐛 [BUGFIX]: FIx glitch when resizing window on Market + big space on …

…clearable element in Search in Market
LedgerHQ · Jun 4, 2024 · f5810f0 · f5810f0
1 parent bc92d16
commit f5810f0
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 24 deletions.
diff --git a/.changeset/thick-vans-deny.md b/.changeset/thick-vans-deny.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+FIx glitch when resizing window on Market + big space on clearable element in Search in Market
diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/MarketList/components/MarketRowItem.tsx b/apps/ledger-live-desktop/src/renderer/screens/market/MarketList/components/MarketRowItem.tsx
@@ -41,6 +41,7 @@ type Props = {
   isStarred: boolean;
   toggleStar: () => void;
   range?: string;
+  currenciesAll?: string[];
 };
 
 export const MarketRow = memo<Props>(function MarketRowItem({
@@ -52,12 +53,13 @@ export const MarketRow = memo<Props>(function MarketRowItem({
   isStarred,
   toggleStar,
   range,
+  currenciesAll,
 }: Props) {
   const history = useHistory();
-
   const { t } = useTranslation();
+
   const { onBuy, onStake, onSwap, availableOnBuy, availableOnSwap, availableOnStake } =
-    useMarketActions({ currency, page: Page.Market });
+    useMarketActions({ currency, page: Page.Market, currenciesAll });
 
   const onCurrencyClick = useCallback(() => {
     if (currency) {
@@ -223,6 +225,7 @@ type CurrencyRowProps = {
   swapAvailableIds: string[];
   range?: string;
   style: React.CSSProperties;
+  currenciesAll: string[];
 };
 
 export const CurrencyRow = memo(function CurrencyRowItem({
@@ -235,6 +238,7 @@ export const CurrencyRow = memo(function CurrencyRowItem({
   locale,
   style,
   range,
+  currenciesAll,
 }: CurrencyRowProps) {
   const currency = data ? data[index] : null;
   const isStarred = currency && starredMarketCoins.includes(currency.id);
@@ -250,6 +254,7 @@ export const CurrencyRow = memo(function CurrencyRowItem({
       locale={locale}
       style={{ ...style }}
       range={range}
+      currenciesAll={currenciesAll}
     />
   );
 });
diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/MarketList/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/market/MarketList/index.tsx
@@ -29,6 +29,7 @@ type MarketListProps = {
   isItemLoaded: (index: number) => boolean;
   onLoadNextPage: (startIndex: number, stopIndex: number) => void;
   checkIfDataIsStaleAndRefetch: (scrollOffset: number) => void;
+  currenciesAll: string[];
 };
 
 function MarketList({
@@ -49,6 +50,7 @@ function MarketList({
   onLoadNextPage,
   checkIfDataIsStaleAndRefetch,
   t,
+  currenciesAll,
 }: MarketListProps) {
   const { order, search, starred, range, counterCurrency } = marketParams;
 
@@ -100,6 +102,7 @@ function MarketList({
                         locale={locale}
                         swapAvailableIds={fromCurrencies ?? []}
                         range={range}
+                        currenciesAll={currenciesAll}
                       />
                     )}
                   </List>
@@ -141,6 +144,7 @@ function MarketList({
                             locale={locale}
                             swapAvailableIds={fromCurrencies ?? []}
                             range={range}
+                            currenciesAll={currenciesAll}
                           />
                         )}
                       </List>

diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/components/SearchInputComponent.tsx b/apps/ledger-live-desktop/src/renderer/screens/market/components/SearchInputComponent.tsx
@@ -0,0 +1,34 @@
+import { Flex, SearchInput } from "@ledgerhq/react-ui";
+
+import React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { withV3StyleProvider } from "~/renderer/styles/StyleProviderV3";
+
+const SearchContainer = styled(Flex).attrs({ flexShrink: "1" })`
+  > div {
+    width: 100%;
+  }
+`;
+
+type Props = {
+  search: string;
+  updateSearch: (value: string) => void;
+};
+
+function SearchInputComponent({ search, updateSearch }: Props) {
+  const { t } = useTranslation();
+  return (
+    <SearchContainer>
+      <SearchInput
+        data-test-id="market-search-input"
+        value={search}
+        onChange={updateSearch}
+        placeholder={t("common.search")}
+        clearable
+      />
+    </SearchContainer>
+  );
+}
+
+export default withV3StyleProvider(SearchInputComponent);
diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarket.ts b/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarket.ts
@@ -15,6 +15,7 @@ import { marketCurrentPageSelector, marketParamsSelector } from "~/renderer/redu
 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";
 
 export function useMarket() {
   const lldRefreshMarketDataFeature = useFeature("lldRefreshMarketData");
@@ -25,6 +26,8 @@ export function useMarket() {
   const starredMarketCoins: string[] = useSelector(starredMarketCoinsSelector);
   const locale = useSelector(localeSelector);
 
+  const { data: currenciesAll } = useFetchCurrencyAll();
+
   const REFRESH_RATE =
     Number(lldRefreshMarketDataFeature?.params?.refreshTime) > 0
       ? REFETCH_TIME_ONE_MINUTE * Number(lldRefreshMarketDataFeature?.params?.refreshTime)
@@ -209,5 +212,6 @@ export function useMarket() {
     loading,
     currenciesLength,
     refreshRate: REFRESH_RATE,
+    currenciesAll,
   };
 }
diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarketActions.ts b/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarketActions.ts
@@ -13,7 +13,6 @@ import { flattenAccounts } from "@ledgerhq/live-common/account/index";
 import { getAvailableAccountsById } from "@ledgerhq/live-common/exchange/swap/utils/index";
 import { useRampCatalog } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/useRampCatalog";
 import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
-import { useFetchCurrencyAll } from "@ledgerhq/live-common/exchange/swap/hooks/index";
 
 export enum Page {
   Market = "Page Market",
@@ -23,9 +22,10 @@ export enum Page {
 type MarketActionsProps = {
   currency?: CurrencyData | null;
   page?: Page;
+  currenciesAll?: string[];
 };
 
-export const useMarketActions = ({ currency, page }: MarketActionsProps) => {
+export const useMarketActions = ({ currency, page, currenciesAll }: MarketActionsProps) => {
   const dispatch = useDispatch();
   const history = useHistory();
 
@@ -36,8 +36,6 @@ export const useMarketActions = ({ currency, page }: MarketActionsProps) => {
   const allAccounts = useSelector(accountsSelector);
   const flattenedAccounts = flattenAccounts(allAccounts);
 
-  const { data: currenciesAll } = useFetchCurrencyAll();
-
   const { isCurrencyAvailable } = useRampCatalog();
 
   const internalCurrency = currency?.internalCurrency;
@@ -146,7 +144,7 @@ export const useMarketActions = ({ currency, page }: MarketActionsProps) => {
     !!internalCurrency?.id &&
     isCurrencyAvailable(internalCurrency.id, "onRamp");
 
-  const availableOnSwap = !!internalCurrency && currenciesAll.includes(internalCurrency.id);
+  const availableOnSwap = !!internalCurrency && currenciesAll?.includes(internalCurrency.id);
   const stakeProgramsFeatureFlag = useFeature("stakePrograms");
   const listFlag = stakeProgramsFeatureFlag?.params?.list ?? [];
   const stakeProgramsEnabled = stakeProgramsFeatureFlag?.enabled ?? false;

diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarketCoin.ts b/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarketCoin.ts
@@ -13,13 +13,14 @@ 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";
 
 export const useMarketCoin = () => {
   const marketParams = useSelector(marketParamsSelector);
   const { colors } = useTheme();
   const dispatch = useDispatch();
   const { currencyId } = useParams<{ currencyId: string }>();
-
+  const { data: currenciesAll } = useFetchCurrencyAll();
   const starredMarketCoins: string[] = useSelector(starredMarketCoinsSelector);
   const { liveCoinsList, supportedCounterCurrencies } = useMarketDataProvider();
 
@@ -45,6 +46,7 @@ export const useMarketCoin = () => {
     useMarketActions({
       currency: currency,
       page: Page.MarketCoin,
+      currenciesAll,
     });
 
   const color = internalCurrency

diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/market/index.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect } from "react";
-import { Flex, Button as BaseButton, Text, SearchInput, Dropdown } from "@ledgerhq/react-ui";
+import { Flex, Button as BaseButton, Text, Dropdown } from "@ledgerhq/react-ui";
 import styled from "styled-components";
 import CounterValueSelect from "./components/CountervalueSelect";
 import SideDrawerFilter from "./components/SideDrawerFilter";
 import TrackPage from "~/renderer/analytics/TrackPage";
 import MarketList from "./MarketList";
 import { useMarket } from "./hooks/useMarket";
+import SearchInputComponent from "./components/SearchInputComponent";
 
 const Container = styled(Flex).attrs({
   flex: "1",
@@ -17,12 +18,6 @@ const Container = styled(Flex).attrs({
   mx: -1,
 })``;
 
-const SearchContainer = styled(Flex).attrs({ flexShrink: "1" })`
-  > div {
-    width: 100%;
-  }
-`;
-
 export const Button = styled(BaseButton)<{ big?: boolean }>`
   ${p =>
     p.Icon
@@ -102,15 +97,7 @@ export default function Market() {
       />
       <Title>{t("market.title")}</Title>
       <Flex flexDirection="row" pr="6px" my={2} alignItems="center" justifyContent="space-between">
-        <SearchContainer>
-          <SearchInput
-            data-test-id="market-search-input"
-            value={search}
-            onChange={updateSearch}
-            placeholder={t("common.search")}
-            clearable
-          />
-        </SearchContainer>
+        <SearchInputComponent search={search} updateSearch={updateSearch} />
         <SelectBarContainer flexDirection="row" alignItems="center" justifyContent="flex-end">
           <Flex data-test-id="market-countervalue-select" justifyContent="flex-end" mx={4}>
             <CounterValueSelect