Merge branch 'main' into make-stats-widget-a-section

src/app/components/AccountHistory.tsx

@@ -31,6 +31,12 @@ import Papa from "papaparse";
 import HoverGradientButton from "./HoverGradientButton";
 import { twMerge } from "tailwind-merge";
 
+import {
+  setHideOtherPairs,
+  selectCombinedOrderHistory,
+  selectCombinedOpenOrders,
+} from "../state/accountHistorySlice";
+
 function createOrderReceiptAddressLookup(
   pairsList: PairInfo[]
 ): Record<string, string> {
@@ -201,19 +207,35 @@ function DisplayTable() {
   );
   const openOrders = useAppSelector(selectOpenOrders);
   const orderHistory = useAppSelector(selectOrderHistory);
+  const dispatch = useAppDispatch();
+  const hideOtherPairs = useAppSelector(
+    (state) => state.accountHistory.hideOtherPairs
+  );
+  const combinedOrderHistory = useAppSelector(selectCombinedOrderHistory);
+  const combinedOpenOrders = useAppSelector(selectCombinedOpenOrders);
+
+  const handleToggleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(setHideOtherPairs(e.target.checked));
+  };
 
   const tableToShow = useMemo(() => {
     switch (selectedTable) {
       case Tables.OPEN_ORDERS:
+        const filteredRowsForOpenOrders = hideOtherPairs
+          ? openOrders
+          : combinedOpenOrders;
         return {
           headers: headers[Tables.OPEN_ORDERS],
-          rows: <OpenOrdersRows data={openOrders} />,
+          rows: <OpenOrdersRows data={filteredRowsForOpenOrders} />,
         };
 
       case Tables.ORDER_HISTORY:
+        const filteredRowsForOrderHistory = hideOtherPairs
+          ? orderHistory
+          : combinedOrderHistory;
         return {
           headers: headers[Tables.ORDER_HISTORY],
-          rows: <OrderHistoryRows data={orderHistory} />,
+          rows: <OrderHistoryRows data={filteredRowsForOrderHistory} />,
         };
 
       default:
@@ -222,10 +244,44 @@ function DisplayTable() {
           rows: <></>,
         };
     }
-  }, [openOrders, orderHistory, selectedTable]);
+  }, [
+    openOrders,
+    orderHistory,
+    selectedTable,
+    hideOtherPairs,
+    combinedOrderHistory,
+    combinedOpenOrders,
+  ]);
 
   return (
     <div className="overflow-x-auto scrollbar-none">
+      <div className="flex flex-col md:items-end xs:items-start">
+        <label className="label cursor-pointer">
+          <input
+            type="checkbox"
+            className="peer hidden"
+            checked={hideOtherPairs}
+            role="switch"
+            onChange={handleToggleChange}
+          />
+          <span
+            className={`relative inline-flex items-center w-8 h-4 rounded-lg transition-colors duration-300 ease-in-out xs:ml-4 ${
+              hideOtherPairs ? "bg-content-dark" : "border border-white"
+            }`}
+          >
+            <span
+              className={`absolute left-0.5 top-0.3 w-3 h-3 rounded-lg shadow-md transform transition-transform duration-300 ease-in-out  ${
+                hideOtherPairs
+                  ? "translate-x-4 bg-dexter-green"
+                  : "translate-x-0 bg-gray-200"
+              }`}
+            />
+          </span>
+          <span className="label-text text-xs md:pl-0 mr-16 xs:ml-2">
+            Hide other pairs
+          </span>
+        </label>
+      </div>
       <table className="table table-zebra table-xs !mt-0 mb-16 w-full max-w-[100%]">
         <thead>
           <tr className="h-12">

src/app/components/NavBar.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 import { useSelector } from "react-redux";
-import { useAppDispatch, useAppSelector } from "hooks";
+import { useAppDispatch, useAppSelector, useHydrationErrorFix } from "hooks";
 import { getSupportedLanguagesAsString } from "../state/i18nSlice";
 
 import { i18nSlice } from "../state/i18nSlice";
@@ -79,7 +79,9 @@ export function Navbar() {
           <WalletSelector />
           <radix-connect-button></radix-connect-button>
         </div>
-        <HamburgerMenu />
+        <span className="pl-2">
+          <HamburgerMenu />
+        </span>
       </div>
     </nav>
   );
@@ -237,42 +239,47 @@ function NavbarItemsDesktop() {
 function HamburgerMenu() {
   const [menuOpen, setMenuOpen] = useState(false);
   return (
-    <div className="sm:hidden flex justify-center items-center mr-6 ml-4">
-      <button onClick={() => setMenuOpen(true)}>
-        <Image
-          src="/hamburger-icon.svg"
-          alt="menu"
-          width="32"
-          height="32"
-          className="h-auto color-white"
-        />
+    <div className="sm:hidden flex justify-center items-center mr-6 ml-4 relative right-4">
+      <button
+        onClick={() => setMenuOpen((prev) => !prev)}
+        className={`z-[9999] w-8 h-8 relative left-[16%] top-1/2 flex justify-center items-center`}
+      >
+        <AnimatedBurger menuOpen={menuOpen} />
       </button>
-      {menuOpen && <MobileMenu setMenuOpen={setMenuOpen} />}
+      <MobileMenu menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
     </div>
   );
 }
 
 function MobileMenu({
+  menuOpen,
   setMenuOpen,
 }: {
+  menuOpen: boolean;
   setMenuOpen: (newMenuOpen: boolean) => void;
 }) {
+  const isClient = useHydrationErrorFix();
+  if (!isClient) return null;
+
   return (
     <div
-      className={`flex flex-col items-end w-[100vw] h-[100vh] bg-[rgba(0,0,0,0.8)] overflow-hidden z-[1000] fixed top-0 left-0 backdrop-blur-lg py-5 ${
-        isMobile() ? "px-6" : "px-10"
-      }`}
+      className={`flex flex-col 
+          items-end 
+          w-[100vw] h-[100vh] 
+          overflow-hidden 
+          z-[1000] 
+          fixed top-0 left-0 
+          py-5
+          bg-[rgba(0,0,0,0.8)] backdrop-blur-lg
+           ${isMobile() ? "px-6" : "px-10"}
+            ${
+              menuOpen
+                ? "opacity-100 scale-100"
+                : "opacity-0 scale-95 pointer-events-none"
+            }
+            transition-all duration-300
+           `}
     >
-      {/* Close Menu Button */}
-      <button onClick={() => setMenuOpen(false)}>
-        <Image
-          src="/close-x.svg"
-          alt="menu"
-          width="32"
-          height="32"
-          className="h-auto color-white opacity-70"
-        />
-      </button>
       {/* Navbar Items */}
       <div className="mt-10 w-full">
         {NavItems.map((navItem, indx) => {
@@ -372,3 +379,43 @@ function LanguageSelection({
 function HideOnSmallScreens({ children }: { children: React.ReactNode }) {
   return <div className="hidden sm:flex">{children}</div>;
 }
+
+const AnimatedBurger = ({ menuOpen }: { menuOpen: boolean }) => {
+  return (
+    <div
+      className={`
+            z-[9999]
+            absolute 
+            top-1/2 
+            ${menuOpen ? "-translate-y-1" : ""}
+            h-[0.175rem] w-7 
+
+            rounded-sm
+            ${menuOpen ? "bg-transparent" : "bg-secondary-content"}
+            transition-all
+            duration-500
+            
+            before:absolute 
+            before:content-[""]
+            before:h-[0.175rem] before:w-7
+            before:-translate-x-3.5
+            before:-translate-y-[0.65rem]
+            before:rounded-sm
+            before:transition-all
+            before:duration-500
+            before:bg-secondary-content
+            ${menuOpen ? "before:rotate-45 before:translate-y-[45%]" : ""}
+
+            after:absolute 
+            after:content-[""]
+            after:h-[0.175rem] after:w-7
+            after:-translate-x-3.5
+            after:translate-y-[0.65rem]
+            after:rounded-sm
+            after:transition-all after:duration-500
+            after:bg-secondary-content
+            ${menuOpen ? "after:translate-y-[65%] after:-rotate-45" : ""}
+            `}
+    ></div>
+  );
+};

src/app/components/PairSelector.tsx

@@ -47,6 +47,8 @@ export function PairSelector() {
   const pairSelector = useAppSelector((state) => state.pairSelector);
   const dispatch = useAppDispatch();
 
+  const menuRef = useRef<HTMLDivElement>(null);
+
   const inputRef = useRef<HTMLInputElement>(null);
   const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
@@ -187,8 +189,26 @@ export function PairSelector() {
     }
   }, [isOpen, options, setFilteredOptions, setHighlightedIndex]);
 
+  const handleClickOutside = (event: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("click", handleClickOutside);
+    } else {
+      document.removeEventListener("click", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isOpen]);
+
   return (
     <div
+      ref={menuRef}
       className={
         "w-full h-full relative uppercase" + (isOpen ? " bg-base-100" : "")
       }