fix: only display tab buttons when more than one tab (#629)

secretkeylabs · Oct 27, 2023 · eb380ac · eb380ac
1 parent eb6366b
commit eb380ac
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
     "*.{ts,tsx}": [
       "prettier --write",
       "eslint",
-      "tsc-files --noEmit"
+      "tsc-files --noEmit src/styled.d.ts src/react-app-env.d.ts"
     ],
     "*.json": [
       "prettier --write"

diff --git a/src/app/screens/nftDashboard/collectiblesTabs.tsx b/src/app/screens/nftDashboard/collectiblesTabs.tsx
@@ -142,23 +142,25 @@ export default function CollectiblesTabs({
   const showNoBundlesNotice =
     ordinalBundleCount === 0 && !rareSatsQuery.isLoading && !rareSatsQuery.error;
 
-  const filterActivatedTabs = (tab: TabButton): boolean => {
+  const visibleTabButtons = tabs.filter((tab: TabButton) => {
     if (tab.key === 'rareSats' && !hasActivatedRareSatsKey) {
       return false;
     }
     if (tab.key === 'inscriptions' && !hasActivatedOrdinalsKey) {
       return false;
     }
     return true;
-  };
+  });
 
   return (
     <Tabs className={className} selectedIndex={tabIndex} onSelect={handleSelectTab}>
-      <StyledTabList>
-        {tabs.filter(filterActivatedTabs).map(({ key, label }) => (
-          <StyledTab key={key}>{t(label)}</StyledTab>
-        ))}
-      </StyledTabList>
+      {visibleTabButtons.length > 1 && (
+        <StyledTabList>
+          {visibleTabButtons.map(({ key, label }) => (
+            <StyledTab key={key}>{t(label)}</StyledTab>
+          ))}
+        </StyledTabList>
+      )}
       {hasActivatedOrdinalsKey && (
         <TabPanel>
           {inscriptionsQuery.isLoading ? (