From e78f8346aa2173a6c0645a51ee35b750dabcd50f Mon Sep 17 00:00:00 2001
From: Kevin Le Seigle <31533861+KVNLS@users.noreply.github.com>
Date: Fri, 11 Oct 2024 13:14:19 +0200
Subject: [PATCH] Merge pull request #8067 from
 LedgerHQ/hotfix/staking-modal-hide-empty-filters

EARN: hide category filter when providers' list is empty
---
 .changeset/beige-planes-shake.md              |  7 ++++++
 .../families/evm/StakeFlowModal/index.tsx     | 16 +++++++++-----
 .../src/families/evm/StakingDrawer/index.tsx  | 22 ++++++++++++-------
 .../native/src/components/Tabs/Chip/index.tsx |  2 +-
 .../components/Tabs/TemplateTabs/index.tsx    |  3 ++-
 5 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/beige-planes-shake.md

diff --git a/.changeset/beige-planes-shake.md b/.changeset/beige-planes-shake.md
new file mode 100644
index 000000000000..7650c766cc71
--- /dev/null
+++ b/.changeset/beige-planes-shake.md
@@ -0,0 +1,7 @@
+---
+"live-mobile": patch
+"@ledgerhq/native-ui": patch
+---
+
+On Earn's Staking Modal, it makes it so that a category filter will only show up if there's at least one provider of that category.
+Small visual fix to the gap in the options' spacing
diff --git a/apps/ledger-live-desktop/src/renderer/families/evm/StakeFlowModal/index.tsx b/apps/ledger-live-desktop/src/renderer/families/evm/StakeFlowModal/index.tsx
index 652bd05dc35b..a337cefbd5e2 100644
--- a/apps/ledger-live-desktop/src/renderer/families/evm/StakeFlowModal/index.tsx
+++ b/apps/ledger-live-desktop/src/renderer/families/evm/StakeFlowModal/index.tsx
@@ -48,12 +48,18 @@ export const StakeModal = ({ account, source }: Props) => {
 
   const [selected, setSelected] = useState<Option>("all");
 
+  const filteredProviders = useMemo(() => (providers ?? []).filter(x => !x.disabled), [providers]);
+  const optionValues = useMemo(
+    () => OPTION_VALUES.filter(x => x === "all" || filteredProviders.some(y => y.category === x)),
+    [filteredProviders],
+  );
+
   const formattedProviders = useMemo(
     () =>
-      (providers ?? [])
-        .filter(x => !x.disabled && (selected === "all" || selected === x.category))
+      filteredProviders
+        .filter(x => selected === "all" || selected === x.category)
         .sort(hasMinValidatorEth ? descending : ascending),
-    [providers, hasMinValidatorEth, selected],
+    [filteredProviders, hasMinValidatorEth, selected],
   );
 
   const scrollableContainerRef = useRef<HTMLDivElement>(null);
@@ -96,8 +102,8 @@ export const StakeModal = ({ account, source }: Props) => {
                 {t("ethereum.stake.title")}
               </Text>
               <Flex flexDirection="row" alignItems="center" height="24px" columnGap={2} mb={3}>
-                {OPTION_VALUES.map((x, i) => {
-                  const checked = i === OPTION_VALUES.indexOf(selected);
+                {optionValues.map((x, i) => {
+                  const checked = i === optionValues.indexOf(selected);
                   return (
                     <Button
                       borderRadius={2}
diff --git a/apps/ledger-live-mobile/src/families/evm/StakingDrawer/index.tsx b/apps/ledger-live-mobile/src/families/evm/StakingDrawer/index.tsx
index 262071bf0f05..a9f929a78af8 100644
--- a/apps/ledger-live-mobile/src/families/evm/StakingDrawer/index.tsx
+++ b/apps/ledger-live-mobile/src/families/evm/StakingDrawer/index.tsx
@@ -58,20 +58,26 @@ function Content({ accountId, has32Eth, providers }: Props) {
   const { t } = useTranslation();
   const { theme: themeName, colors } = useTheme();
 
+  const filteredProviders = useMemo(() => (providers ?? []).filter(x => !x.disabled), [providers]);
+  const optionValues = useMemo(
+    () => OPTION_VALUES.filter(x => x === "all" || filteredProviders.some(y => y.category === x)),
+    [filteredProviders],
+  );
+
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const selected = OPTION_VALUES[selectedIndex];
+  const selected = optionValues[selectedIndex];
 
   const OPTION_LABELS = useMemo(
-    () => OPTION_VALUES.map(value => t(`stake.ethereum.category.${value}.name`)),
-    [t],
+    () => optionValues.map(value => t(`stake.ethereum.category.${value}.name`)),
+    [t, optionValues],
   );
 
   const listProvidersSorted: ListProvider[] = useMemo(
     () =>
-      providers
+      filteredProviders
         .sort(has32Eth ? descending : ascending)
-        .filter(x => !x.disabled && (selected === "all" || selected === x.category)),
-    [has32Eth, providers, selected],
+        .filter(x => selected === "all" || selected === x.category),
+    [has32Eth, filteredProviders, selected],
   );
 
   return (
@@ -88,13 +94,13 @@ function Content({ accountId, has32Eth, providers }: Props) {
             activeBg={colors.primary.c80}
             activeColor={colors.neutral.c00}
             inactiveColor={colors.neutral.c100}
-            gap={4}
+            gap={8}
             inactiveBg={colors.neutral.c40}
             activeIndex={selectedIndex}
             onChange={index => {
               setSelectedIndex(index);
               track(BUTTON_CLICKED_TRACK_EVENT, {
-                button: `filter_${OPTION_VALUES[index]}`,
+                button: `filter_${optionValues[index]}`,
               });
             }}
             stretchItems={false}
diff --git a/libs/ui/packages/native/src/components/Tabs/Chip/index.tsx b/libs/ui/packages/native/src/components/Tabs/Chip/index.tsx
index 852986e6606f..44e293367716 100644
--- a/libs/ui/packages/native/src/components/Tabs/Chip/index.tsx
+++ b/libs/ui/packages/native/src/components/Tabs/Chip/index.tsx
@@ -9,7 +9,7 @@ const TabBox = styled(TouchableOpacity)<
 >`
   text-align: center;
   flex-grow: ${(p) => (p.stretchItems ? "1" : "0")};
-  margin: auto;
+  ${(p) => (p.stretchItems ? "margin: auto;" : "margin: auto 0;")}
   padding: ${(p) => p.theme.space[p.size === "small" ? 3 : 5]}px;
   border-radius: 8px;
   background-color: ${(p) =>
diff --git a/libs/ui/packages/native/src/components/Tabs/TemplateTabs/index.tsx b/libs/ui/packages/native/src/components/Tabs/TemplateTabs/index.tsx
index ee2ba49f0727..49b7f16a37b0 100644
--- a/libs/ui/packages/native/src/components/Tabs/TemplateTabs/index.tsx
+++ b/libs/ui/packages/native/src/components/Tabs/TemplateTabs/index.tsx
@@ -35,7 +35,8 @@ export const TabsContainer = styled(FlexBox)<{ stretchItems: boolean }>`
   size: undefined;
   flex-direction: row;
   width: 100%;
-  align-items: ${(p) => (p.stretchItems ? "stretch" : "center")};
+  align-items: stretch;
+  ${(p) => (p.stretchItems ? "" : "justify-content: center;")}
 `;
 
 const TemplateTabsGroup = ({