Merge pull request #8067 from LedgerHQ/hotfix/staking-modal-hide-empt…

…y-filters EARN: hide category filter when providers' list is empty
LedgerHQ · Oct 11, 2024 · 3cff5ae · 3cff5ae
2 parents d0c2599 + bde70f9
commit 3cff5ae
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 15 deletions.
diff --git a/.changeset/beige-planes-shake.md 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
@@ -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
@@ -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
@@ -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
@@ -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 = ({