support(UI): LLM - iOS/Android - Market General Layout polish (#1335)

* first part polishing 💄 * polishing Part 2
LedgerHQ · Oct 13, 2022 · c356580 · c356580
1 parent 8438e77
commit c356580
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 24 deletions.
diff --git a/.changeset/lemon-clouds-tease.md b/.changeset/lemon-clouds-tease.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+iOS/Android - Market General Layout polish
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -5283,7 +5283,11 @@
       "retrySearchParams": "Please retry the search with another parameters.",
       "trackFavAssets": "Track your favourite",
       "clickOnStarIcon": "Clicking on the star icon next to an asset will automatically add them to your favorites.",
-      "browseAssets": "Browse assets"
+      "browseAssets": "Browse assets",
+      "starred": {
+        "title": "Track your favorite assets!",
+        "desc": "Clicking on the “Star” icon next to an asset will automatically add them to your favorites"
+      }
     }
   },
   "nft": {

diff --git a/apps/ledger-live-mobile/src/screens/Market/EmptyStarredCoins.tsx b/apps/ledger-live-mobile/src/screens/Market/EmptyStarredCoins.tsx
@@ -0,0 +1,20 @@
+import { Flex, Text, Icon } from "@ledgerhq/native-ui";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function EmptyStarredCoins() {
+  const { t } = useTranslation();
+  return (
+    <Flex flex={1} flexDirection="column" alignItems="stretch" p="4" mt={70}>
+      <Flex alignItems="center">
+        <Icon name="Star" color="neutral.c100" size={120} />
+      </Flex>
+      <Text textAlign="center" variant="h2" my={3}>
+        {t("market.warnings.starred.title")}
+      </Text>
+      <Text textAlign="center" variant="body" color="neutral.c70">
+        {t("market.warnings.starred.desc")}
+      </Text>
+    </Flex>
+  );
+}
diff --git a/apps/ledger-live-mobile/src/screens/Market/MarketRowItem.tsx b/apps/ledger-live-mobile/src/screens/Market/MarketRowItem.tsx
@@ -38,6 +38,7 @@ function MarketRowItem({ item, index, counterCurrency, locale, t }: Props) {
     marketcapRank,
     price,
     priceChangePercentage,
+    ticker,
   } = item;
 
   return (
@@ -75,23 +76,23 @@ function MarketRowItem({ item, index, counterCurrency, locale, t }: Props) {
         flex={1}
       >
         <Text variant="large" fontWeight="semiBold" numberOfLines={1}>
-          {name}
+          {`${name} (${ticker.toLocaleUpperCase()})`}
         </Text>
         <Flex flexDirection="row" alignItems="center">
           <Text
             variant="small"
             bg="neutral.c40"
-            height="20px"
-            lineHeight="20px"
-            px="3"
+            height="15px"
+            lineHeight="15px"
+            px="4px"
             mr="3"
             borderRadius={4}
             overflow="hidden"
             fontWeight="semiBold"
           >
             {marketcapRank || "-"}
           </Text>
-          <Text variant="body" color="neutral.c80" fontWeight="semiBold">
+          <Text variant="body" color="neutral.c70" fontWeight="semiBold">
             {marketcap && marketcap > 0
               ? counterValueFormatter({
                   value: marketcap,

diff --git a/apps/ledger-live-mobile/src/screens/Market/SortBadge.tsx b/apps/ledger-live-mobile/src/screens/Market/SortBadge.tsx
@@ -3,18 +3,19 @@ import { TouchableOpacity } from "react-native";
 import styled from "styled-components/native";
 import { Flex, Text, BottomDrawer, Icon as IconUI } from "@ledgerhq/native-ui";
 
-export const Badge = styled(Flex).attrs({
-  bg: "neutral.c30",
+export const Badge = styled(Flex).attrs(p => ({
+  bg: p.bg ?? "neutral.c30",
   flexDirection: "row",
   mx: "6px",
   px: 4,
   py: 1,
   justifyContent: " center",
   alignItems: "center",
   height: 32,
-})`
+}))`
   border-radius: 32px;
 `;
+
 Badge.mx = 6;
 
 const CheckIconContainer = styled(Flex).attrs({

diff --git a/apps/ledger-live-mobile/src/screens/Market/index.tsx b/apps/ledger-live-mobile/src/screens/Market/index.tsx
@@ -47,6 +47,7 @@ import {
 } from "../../actions/settings";
 // eslint-disable-next-line import/no-cycle
 import { AnalyticsContext } from "../../components/RootNavigator";
+import EmptyStarredCoins from "./EmptyStarredCoins";
 
 const noResultIllustration = {
   dark: require("../../images/illustration/Dark/_051.png"),
@@ -150,16 +151,16 @@ const BottomSection = ({ navigation }: { navigation: any }) => {
       showsHorizontalScrollIndicator={false}
     >
       <TrackScreen category="Page" name={"Market"} access={true} />
-      {starredMarketCoins.length <= 0 && !filterByStarredAccount ? null : (
-        <TouchableOpacity onPress={toggleFilterByStarredAccounts}>
-          <Badge>
-            <Icon
-              name={filterByStarredAccount ? "StarSolid" : "Star"}
-              color="neutral.c100"
-            />
-          </Badge>
-        </TouchableOpacity>
-      )}
+
+      <TouchableOpacity onPress={toggleFilterByStarredAccounts}>
+        <Badge bg={filterByStarredAccount ? "primary.c80" : "neutral.c30"}>
+          <Icon
+            name={filterByStarredAccount ? "StarSolid" : "Star"}
+            color={filterByStarredAccount ? "background.main" : "neutral.c100"}
+          />
+        </Badge>
+      </TouchableOpacity>
+
       <SortBadge
         label={t("market.filters.sort")}
         valueLabel={t(
@@ -274,6 +275,10 @@ export default function Market({ navigation }: { navigation: any }) {
   const { params }: { params: any } = useRoute();
   const initialTop100 = params?.top100;
   const { isConnected } = useNetInfo();
+  const starredMarketCoins: string[] = useSelector(starredMarketCoinsSelector);
+  const filterByStarredAccount: boolean = useSelector(
+    marketFilterByStarredAccountsSelector,
+  );
 
   useProviders();
 
@@ -286,9 +291,12 @@ export default function Market({ navigation }: { navigation: any }) {
     loading,
     page,
     selectCurrency,
-    error,
   } = useMarketData();
 
+  const marketDataFiltered = filterByStarredAccount
+    ? marketData?.filter(d => starredMarketCoins.includes(d.id)) ?? undefined
+    : marketData;
+
   const { limit, search, range, top100 } = requestParams;
   const [isLoading, setIsLoading] = useState(true);
 
@@ -402,10 +410,12 @@ export default function Market({ navigation }: { navigation: any }) {
             {t("errors.NetworkDown.description")}
           </Text>
         </Flex>
+      ) : filterByStarredAccount && starredMarketCoins.length <= 0 ? (
+        <EmptyStarredCoins />
       ) : (
         <InfiniteLoader size={30} />
       ), // shows up in case loading is ongoing
-    [error, isLoading, resetSearch, search, t],
+    [filterByStarredAccount, starredMarketCoins, resetSearch, search, t],
   );
 
   const onEndReached = useCallback(() => {
@@ -471,14 +481,16 @@ export default function Market({ navigation }: { navigation: any }) {
         backgroundColor: colors.background.main,
       }}
     >
-      <Flex p={6}>
+      <Flex px={6} pt={6}>
         <Flex
           height={48}
           flexDirection="row"
           justifyContent="flex-start"
           alignItems="center"
         >
-          <Text variant="h1">{t("market.title")}</Text>
+          <Text variant="h1" lineHeight="40px">
+            {t("market.title")}
+          </Text>
         </Flex>
         <SearchHeader search={search} refresh={refresh} />
         <BottomSection navigation={navigation} />
@@ -489,7 +501,7 @@ export default function Market({ navigation }: { navigation: any }) {
           paddingHorizontal: 16,
           paddingBottom: TAB_BAR_SAFE_HEIGHT,
         }}
-        data={marketData}
+        data={marketDataFiltered}
         renderItem={renderItems}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.5}