Merge branch 'main' into fix-translation-bugs

CONTRIBUTING.md

@@ -13,6 +13,7 @@ Here are a few guidelines to follow:
 - **Write tests** to prevent regressions, unit tests with [Jest](https://jestjs.io/) in `__tests__` folder, end to end tests with [Playwright](https://playwright.dev/) in `e2e` folder
 - **Run tests locally** with `npm run test-all` before submitting any PR. This will help you find issues fast.
 - **Try to avoid custom CSS** - the project uses [DaisyUI](https://daisyui.com/) and [TailwindCSS](https://tailwindcss.com/docs/) for styling, whenever possible use the existing components and classes, the full rationale (by creator of TailwindCSS) is [here](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
+- **Use [Redux Dev Tools Extension](https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)** for easy debugging of redux state. Watch this [1 min video tutorial](https://www.youtube.com/watch?v=5qrIbU1XspA) on how to set it up.
 
 If you happen to use VS Code, install the recommended extensions to get automatic formatting and linting on save, they are listed in `.vscode/extensions.json` and VS Code will prompt you to install them.
 

src/app/components/PromoBannerCarousel.tsx

@@ -9,6 +9,8 @@ export interface PromoBannerProps {
   redirectUrl: string; // target redirect address when banner is clicked
   redirectOpensInSameTab?: boolean; // redirection should not be "_blank" but samepage
   backgroundColor?: string; // background color, in the format of bg-[#fff]
+  startDate?: Date; // banner won't be shown before this date is reached
+  expirationDate?: Date; // banner won't be shown after this date is reached
 }
 
 interface PromoBannerCarouselProps {
@@ -24,28 +26,39 @@ export function PromoBannerCarousel({
   items,
   interval = 10000,
 }: PromoBannerCarouselProps) {
+  // Filter items based on startDate and expirationDate
+  const validItems = useMemo(() => {
+    return items.filter((item) => {
+      const currentDate = new Date();
+      const startDateValid = !item.startDate || item.startDate <= currentDate;
+      const expirationDateValid =
+        !item.expirationDate || item.expirationDate >= currentDate;
+      return startDateValid && expirationDateValid;
+    });
+  }, [items]);
+
   // Use null initially to not show any image and prevent hydration error
   const [currentImageSrc, setCurrentImageSrc] = useState<string | null>(null);
   const [activeIndex, setActiveIndex] = useState(0);
   const [backgroundColor, setBackgroundColor] = useState(
-    items[0].backgroundColor || DEFAULT_GRADIENT_BACKGROUND
+    validItems[0]?.backgroundColor || DEFAULT_GRADIENT_BACKGROUND
   );
   const [fade, setFade] = useState(true);
 
-  const hasRedirectUrl = items[activeIndex].redirectUrl !== "";
+  const hasRedirectUrl = validItems[activeIndex].redirectUrl !== "";
   const redirectOpensInSameTab =
-    items[activeIndex].redirectOpensInSameTab || false;
+    validItems[activeIndex].redirectOpensInSameTab || false;
 
   const { imageUrlMobile, imageUrl, redirectUrl } = useMemo(
-    () => items[activeIndex],
-    [items, activeIndex]
+    () => validItems[activeIndex],
+    [validItems, activeIndex]
   );
 
   const moveToNextSlide = useCallback(() => {
     setActiveIndex((prevIndex) =>
-      prevIndex === items.length - 1 ? 0 : prevIndex + 1
+      prevIndex === validItems.length - 1 ? 0 : prevIndex + 1
     );
-  }, [items.length]);
+  }, [validItems.length]);
 
   const handleRedirect = () => {
     if (hasRedirectUrl && typeof window !== "undefined") {
@@ -65,13 +78,13 @@ export function PromoBannerCarousel({
   };
 
   useEffect(() => {
-    const selectedBg = items[activeIndex].backgroundColor;
+    const selectedBg = validItems[activeIndex].backgroundColor;
     if (selectedBg) {
       setBackgroundColor(selectedBg);
     } else {
       setBackgroundColor(DEFAULT_GRADIENT_BACKGROUND);
     }
-  }, [activeIndex, items]);
+  }, [activeIndex, validItems]);
 
   useEffect(() => {
     // Determine which image to show based on the client's screen size
@@ -96,18 +109,15 @@ export function PromoBannerCarousel({
     return () => clearInterval(intervalId);
   }, [moveToNextSlide, interval]);
 
-  // const handleDotClick = useCallback((idx: number) => {
-  //   setFade(false);
-  //   setTimeout(() => {
-  //     setActiveIndex(idx);
-  //     setFade(true);
-  //   }, 500); // Duration of the fade out
-  // }, []);
-
   if (currentImageSrc === null || currentImageSrc === "") {
     return null; // Return null if no image should be shown
   }
 
+  // Return null if no valid items are available
+  if (validItems.length === 0) {
+    return null;
+  }
+
   return (
     <div className={`min-h-[64px] ${backgroundColor} `}>
       <div className="relative">

src/app/state/accountHistorySlice.ts

@@ -79,7 +79,7 @@ export const fetchAccountHistoryAllPairs = createAsyncThunk<
     (pairInfo) => pairInfo.address
   );
 
-  const account = state.radix?.walletData.accounts[0]?.address || "";
+  const account = state.radix?.selectedAccount?.address || "";
 
   const orderHistoryPromises = pairAddresses.map((pairAddress) =>
     adex.getAccountOrders(account, pairAddress, 0)

src/app/trade/page.tsx

@@ -79,13 +79,14 @@ export default function Trade() {
     <div className="grow">
       <PromoBannerCarousel
         items={[
-          // mox liquidity incentive banner
+          // DAO vote banner
           {
-            imageUrl: "/promo-banners/mox-desktop.png",
-            imageUrlMobile: "/promo-banners/mox-mobile.png",
-            redirectUrl: "https://dexteronradix.com/trade?pair=mox-xrd",
-            backgroundColor: "bg-[#FF5634]",
-            redirectOpensInSameTab: true,
+            imageUrl: "/promo-banners/crumbsup-tokenomics-desktop2x.png",
+            imageUrlMobile: "/promo-banners/crumbsup-tokenomics-mobile2x.png",
+            redirectUrl:
+              "https://www.crumbsup.io/#proposal?id=f7bf5bcc-dafd-4aa0-8d18-1754f2aa7b46",
+            backgroundColor: "bg-[#087277]",
+            expirationDate: new Date("2024-08-19"),
           },
           // tokentrek banner
           {