Fundamentals - Select All - more fixes

growthepie · Jan 25, 2024 · ebb5fb6 · ebb5fb6
1 parent 876e143
commit ebb5fb6
Showing 1 changed file with 12 additions and 7 deletions.
diff --git a/components/layout/MetricsTable.tsx b/components/layout/MetricsTable.tsx
@@ -8,7 +8,7 @@ import { useTransition, animated } from "@react-spring/web";
 import { useUIContext } from "@/contexts/UIContext";
 import { navigationItems } from "@/lib/navigation";
 import { CorporateContactJsonLd } from "next-seo";
-import { set } from "lodash";
+import { intersection } from "lodash";
 
 const MetricsTable = ({
   data,
@@ -45,16 +45,21 @@ const MetricsTable = ({
     ).map((chain) => chain.key),
   );
 
-  type ChainSelectToggle = "all" | "none" | "normal";
-
   const chainSelectToggleState = useMemo(() => {
+    if (intersection(selectedChains, chainKeys).length === 1) return "none";
+
+    if (intersection(selectedChains, chainKeys).length === chainKeys.length)
+      return "all";
+
+    return "normal";
+
     // ethereum always selected
     if (selectedChains.length === 1) return "none";
 
     if (selectedChains.length === chainKeys.length) return "all";
 
     return "normal";
-  }, [chainKeys.length, selectedChains]);
+  }, [chainKeys, selectedChains]);
 
   const onChainSelectToggle = useCallback(() => {
     // if all chains are selected, unselect all
@@ -339,9 +344,9 @@ const MetricsTable = ({
 
   return (
     <div className="flex flex-col mt-3 md:mt-0 ml-0 lg:-ml-2 font-semibold space-y-[5px] overflow-x-scroll md:overflow-x-visible z-100 w-full py-5 scrollbar-thin scrollbar-thumb-forest-900 scrollbar-track-forest-500/5 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scroller">
-      <div className="min-w-[570px] md:min-w-[600px] lg:min-w-full pr-[20px] md:pr-[50px] lg:pr-2 w-full">
+      <div className="relative min-w-[570px] md:min-w-[600px] lg:min-w-full pr-[20px] md:pr-[50px] lg:pr-2 w-full">
         <div
-          className={`relative flex items-center justify-between py-1 pl-4 pr-7 lg:pl-2 lg:pr-12 rounded-full font-semibold whitespace-nowrap text-xs lg:text-sm lg:mt-4`}
+          className={`flex items-center justify-between py-1 pl-4 pr-7 lg:pl-2 lg:pr-12 rounded-full font-semibold whitespace-nowrap text-xs lg:text-sm lg:mt-4`}
         >
           <div
             className={`${
@@ -379,7 +384,7 @@ const MetricsTable = ({
             ))}
           </div>
           <div
-            className={`absolute right-[24px]  cursor-pointer `}
+            className={`absolute right-[44px] md:right-[33px] cursor-pointer `}
             onClick={onChainSelectToggle}
           >
             <div