From 15837875b7a2003805dc40123ee297583f7d4d38 Mon Sep 17 00:00:00 2001
From: Marco Toniut <marco.toniut-ext@ledger.fr>
Date: Thu, 10 Oct 2024 15:33:58 +0100
Subject: [PATCH 1/2] fix: hide the category filters when the providers' list
 for that category is empty

---
 .../families/evm/StakeFlowModal/index.tsx     | 16 ++++++++++-----
 .../src/families/evm/StakingDrawer/index.tsx  | 20 ++++++++++++-------
 2 files changed, 24 insertions(+), 12 deletions(-)

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..e229a4991ed4 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 (
@@ -94,7 +100,7 @@ function Content({ accountId, has32Eth, providers }: Props) {
             onChange={index => {
               setSelectedIndex(index);
               track(BUTTON_CLICKED_TRACK_EVENT, {
-                button: `filter_${OPTION_VALUES[index]}`,
+                button: `filter_${optionValues[index]}`,
               });
             }}
             stretchItems={false}

From bde70f93227bfb7c421536b4c60392c87d3d2a26 Mon Sep 17 00:00:00 2001
From: Marco Toniut <marco.toniut-ext@ledger.fr>
Date: Fri, 11 Oct 2024 09:29:20 +0100
Subject: [PATCH 2/2] fix: tweak gap in filters, and add changeset

---
 .changeset/beige-planes-shake.md                           | 7 +++++++
 .../src/families/evm/StakingDrawer/index.tsx               | 2 +-
 libs/ui/packages/native/src/components/Tabs/Chip/index.tsx | 2 +-
 .../native/src/components/Tabs/TemplateTabs/index.tsx      | 3 ++-
 4 files changed, 11 insertions(+), 3 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-mobile/src/families/evm/StakingDrawer/index.tsx b/apps/ledger-live-mobile/src/families/evm/StakingDrawer/index.tsx
index e229a4991ed4..a9f929a78af8 100644
--- a/apps/ledger-live-mobile/src/families/evm/StakingDrawer/index.tsx
+++ b/apps/ledger-live-mobile/src/families/evm/StakingDrawer/index.tsx
@@ -94,7 +94,7 @@ 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 => {
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 = ({