From 6021317ab67d5422ecad75c45bb7f3fa2a381c5f Mon Sep 17 00:00:00 2001
From: Bogdan Crisan <bogdan@crbl.studio>
Date: Mon, 20 Jan 2025 17:06:09 +0100
Subject: [PATCH] Add market page banner and navigation link to arena

---
 .../frontend/src/app/market/[market]/page.tsx |  9 ++++++-
 .../frontend/src/components/Badge.tsx         | 22 ++++++++++++++++
 .../header/components/menu-item/index.tsx     |  3 ++-
 .../header/components/menu-item/types.ts      |  1 +
 .../components/mobile-menu-item/index.tsx     |  4 ++-
 .../components/mobile-menu-item/types.ts      |  4 +++
 .../header/components/mobile-menu/index.tsx   | 14 ++++++++++-
 .../src/components/header/constants.ts        |  2 +-
 .../frontend/src/components/header/index.tsx  |  7 +++++-
 .../pages/emojicoin/ClientEmojicoinPage.tsx   | 25 +++++++++++++++++++
 .../src/components/pages/emojicoin/types.ts   |  1 +
 .../src/components/svg/icons/LogoIcon.tsx     | 19 +-------------
 src/typescript/frontend/src/router/routes.ts  |  1 +
 13 files changed, 88 insertions(+), 24 deletions(-)
 create mode 100644 src/typescript/frontend/src/components/Badge.tsx

diff --git a/src/typescript/frontend/src/app/market/[market]/page.tsx b/src/typescript/frontend/src/app/market/[market]/page.tsx
index 385db9934..24311ed94 100644
--- a/src/typescript/frontend/src/app/market/[market]/page.tsx
+++ b/src/typescript/frontend/src/app/market/[market]/page.tsx
@@ -8,6 +8,7 @@ import { getMarketAddress } from "@sdk/emojicoin_dot_fun";
 import { type Metadata } from "next";
 import { getAptPrice } from "lib/queries/get-apt-price";
 import { AptPriceContextProvider } from "context/AptPrice";
+import { fetchMelee } from "@/queries/arena";
 
 export const revalidate = 2;
 
@@ -77,13 +78,18 @@ const EmojicoinPage = async (params: EmojicoinPageProps) => {
     const { marketID } = state.market;
     const marketAddress = getMarketAddress(emojis);
 
-    const [chats, swaps, marketView, aptPrice] = await Promise.all([
+    const [chats, swaps, marketView, aptPrice, melee] = await Promise.all([
       fetchChatEvents({ marketID, pageSize: EVENTS_ON_PAGE_LOAD }),
       fetchSwapEvents({ marketID, pageSize: EVENTS_ON_PAGE_LOAD }),
       wrappedCachedContractMarketView(marketAddress.toString()),
       getAptPrice(),
+      fetchMelee({}),
     ]);
 
+    const isInMelee =
+      melee?.arenaMelee.emojicoin0MarketAddress === state.market.marketAddress ||
+      melee?.arenaMelee.emojicoin1MarketAddress === state.market.marketAddress;
+
     return (
       <AptPriceContextProvider aptPrice={aptPrice}>
         <ClientEmojicoinPage
@@ -95,6 +101,7 @@ const EmojicoinPage = async (params: EmojicoinPageProps) => {
             marketView,
             ...state.market,
           }}
+          isInMelee={isInMelee}
         />
       </AptPriceContextProvider>
     );
diff --git a/src/typescript/frontend/src/components/Badge.tsx b/src/typescript/frontend/src/components/Badge.tsx
new file mode 100644
index 000000000..d2d5320a6
--- /dev/null
+++ b/src/typescript/frontend/src/components/Badge.tsx
@@ -0,0 +1,22 @@
+import { useThemeContext } from "context";
+import type { Colors } from "theme/types";
+
+export const Badge: React.FC<React.PropsWithChildren<{ color: keyof Colors }>> = ({
+  children,
+  color,
+}) => {
+  const { theme } = useThemeContext();
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${theme.colors[color]}`,
+        borderRadius: "8px",
+        color: theme.colors[color],
+      }}
+      className="pixel-heading-4 px-[.4rem] h-min h-min"
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/src/typescript/frontend/src/components/header/components/menu-item/index.tsx b/src/typescript/frontend/src/components/header/components/menu-item/index.tsx
index 16857a18a..7a1f55ae2 100644
--- a/src/typescript/frontend/src/components/header/components/menu-item/index.tsx
+++ b/src/typescript/frontend/src/components/header/components/menu-item/index.tsx
@@ -8,7 +8,7 @@ import { FlexGap } from "@containers";
 
 import { type MenuItemProps } from "./types";
 
-const MenuItem: React.FC<MenuItemProps> = ({ title, width, onClick = () => {} }) => {
+const MenuItem: React.FC<MenuItemProps> = ({ title, width, onClick = () => {}, pill }) => {
   const { t } = translationFunction();
 
   const { ref, replay } = useScramble({
@@ -32,6 +32,7 @@ const MenuItem: React.FC<MenuItemProps> = ({ title, width, onClick = () => {} })
         ref={ref}
         ellipsis
       />
+      {pill}
       <Text textScale="pixelHeading4" color="econiaBlue" textTransform="uppercase" fontSize="24px">
         {" }"}
       </Text>
diff --git a/src/typescript/frontend/src/components/header/components/menu-item/types.ts b/src/typescript/frontend/src/components/header/components/menu-item/types.ts
index 4d5842498..556af9b17 100644
--- a/src/typescript/frontend/src/components/header/components/menu-item/types.ts
+++ b/src/typescript/frontend/src/components/header/components/menu-item/types.ts
@@ -2,4 +2,5 @@ export type MenuItemProps = {
   title: string;
   width: string;
   onClick?: () => void;
+  pill?: React.ReactNode;
 };
diff --git a/src/typescript/frontend/src/components/header/components/mobile-menu-item/index.tsx b/src/typescript/frontend/src/components/header/components/mobile-menu-item/index.tsx
index 8485c6e41..38c871f3a 100644
--- a/src/typescript/frontend/src/components/header/components/mobile-menu-item/index.tsx
+++ b/src/typescript/frontend/src/components/header/components/mobile-menu-item/index.tsx
@@ -14,6 +14,7 @@ const MobileMenuItem: React.FC<MobileMenuItemProps> = ({
   title,
   onClick = () => {},
   borderBottom = true,
+  pill,
 }) => {
   const { t } = translationFunction();
 
@@ -25,7 +26,7 @@ const MobileMenuItem: React.FC<MobileMenuItemProps> = ({
 
   return (
     <StyledItemWrapper onMouseOver={replay} onClick={onClick} borderBottom={borderBottom}>
-      <div className={withIcon?.className}>
+      <div className={`${withIcon?.className} ${pill?.className}`}>
         {withIcon?.icon}
         <Text
           textScale={withIcon ? "pixelHeading4" : "pixelHeading3"}
@@ -33,6 +34,7 @@ const MobileMenuItem: React.FC<MobileMenuItemProps> = ({
           textTransform="uppercase"
           ref={ref}
         />
+        {pill?.pill}
       </div>
       {!withIcon && <Arrow width="18px" color="black" />}
     </StyledItemWrapper>
diff --git a/src/typescript/frontend/src/components/header/components/mobile-menu-item/types.ts b/src/typescript/frontend/src/components/header/components/mobile-menu-item/types.ts
index 702b4b44f..4664fcdce 100644
--- a/src/typescript/frontend/src/components/header/components/mobile-menu-item/types.ts
+++ b/src/typescript/frontend/src/components/header/components/mobile-menu-item/types.ts
@@ -8,4 +8,8 @@ export type MobileMenuItemProps = {
   title: string;
   onClick?: () => void;
   borderBottom?: boolean;
+  pill?: {
+    className: string;
+    pill: React.ReactNode;
+  };
 };
diff --git a/src/typescript/frontend/src/components/header/components/mobile-menu/index.tsx b/src/typescript/frontend/src/components/header/components/mobile-menu/index.tsx
index c158d60ae..7cb021679 100644
--- a/src/typescript/frontend/src/components/header/components/mobile-menu/index.tsx
+++ b/src/typescript/frontend/src/components/header/components/mobile-menu/index.tsx
@@ -17,6 +17,7 @@ import { useWalletModal } from "context/wallet-context/WalletModalContext";
 import { AnimatePresence, useAnimationControls } from "framer-motion";
 import AnimatedDropdownItem from "./components/animated-dropdown-item";
 import useIsUserGeoblocked from "@hooks/use-is-user-geoblocked";
+import { Badge } from "components/Badge";
 
 const IconClass = "w-[22px] h-[22px] m-auto ml-[3ch] mr-[1.5ch]";
 
@@ -146,7 +147,18 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({
                 onClick={handleCloseMobileMenu}
                 width="100%"
               >
-                <MobileMenuItem title={title} borderBottom={i !== linksForCurrentPage.length - 1} />
+                <MobileMenuItem
+                  title={title}
+                  borderBottom={i !== linksForCurrentPage.length - 1}
+                  pill={
+                    title === "arena"
+                      ? {
+                          className: "flex flex-row items-center gap-[.5em]",
+                          pill: <Badge color="black">NEW</Badge>,
+                        }
+                      : undefined
+                  }
+                />
               </Link>
             );
           })}
diff --git a/src/typescript/frontend/src/components/header/constants.ts b/src/typescript/frontend/src/components/header/constants.ts
index 91fcf4316..a30877e63 100644
--- a/src/typescript/frontend/src/components/header/constants.ts
+++ b/src/typescript/frontend/src/components/header/constants.ts
@@ -1,7 +1,7 @@
 import { ROUTES } from "router/routes";
 
 export const NAVIGATE_LINKS = [
-  { title: "home", path: ROUTES.home, width: "45px" },
+  { title: "arena", path: ROUTES.arena, width: "52px" },
   { title: "pools", path: ROUTES.pools, width: "52px" },
   { title: "launch emojicoin", path: ROUTES.launch, width: "158px" },
   { title: "docs", path: ROUTES.docs, width: "42px" },
diff --git a/src/typescript/frontend/src/components/header/index.tsx b/src/typescript/frontend/src/components/header/index.tsx
index f8b3672af..71a9e2978 100644
--- a/src/typescript/frontend/src/components/header/index.tsx
+++ b/src/typescript/frontend/src/components/header/index.tsx
@@ -19,6 +19,7 @@ import ButtonWithConnectWalletFallback from "./wallet-button/ConnectWalletButton
 import { useSearchParams } from "next/navigation";
 import Link, { type LinkProps } from "next/link";
 import { useEmojiPicker } from "context/emoji-picker-context";
+import { Badge } from "components/Badge";
 
 const Header = ({ isOpen, setIsOpen }: HeaderProps) => {
   const { isDesktop } = useMatchBreakpoints();
@@ -91,7 +92,11 @@ const Header = ({ isOpen, setIsOpen }: HeaderProps) => {
                     href={path}
                     target={path.startsWith("https://") ? "_blank" : undefined}
                   >
-                    <MenuItem width={width} title={title} />
+                    <MenuItem
+                      width={width}
+                      title={title}
+                      pill={title === "arena" ? <Badge color="econiaBlue">NEW</Badge> : undefined}
+                    />
                   </Link>
                 );
               })}
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/ClientEmojicoinPage.tsx b/src/typescript/frontend/src/components/pages/emojicoin/ClientEmojicoinPage.tsx
index 596040b32..d64b3694d 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/ClientEmojicoinPage.tsx
+++ b/src/typescript/frontend/src/components/pages/emojicoin/ClientEmojicoinPage.tsx
@@ -11,6 +11,12 @@ import MainInfo from "./components/main-info/MainInfo";
 import { useReliableSubscribe } from "@hooks/use-reliable-subscribe";
 import { type BrokerEvent } from "@/broker/types";
 import { marketToLatestBars } from "@/store/event/candlestick-bars";
+import Carousel from "components/carousel";
+import { Text } from "components";
+import { GlobeIcon } from "lucide-react";
+import { useThemeContext } from "context";
+import Link from "next/link";
+import { ROUTES } from "router/routes";
 
 const EVENT_TYPES: BrokerEvent[] = ["Chat", "PeriodicState", "Swap"];
 
@@ -32,8 +38,27 @@ const ClientEmojicoinPage = (props: EmojicoinProps) => {
 
   useReliableSubscribe({ eventTypes: EVENT_TYPES });
 
+  const { theme } = useThemeContext();
+
   return (
     <Box>
+      {props.isInMelee && (
+        <Carousel gap={16}>
+          <div className="flex flex-row items-center gap-[16px]">
+            <Link href={ROUTES.arena}>
+              <Text
+                textScale="pixelHeading3"
+                color="econiaBlue"
+                className="w-max"
+                textTransform="uppercase"
+              >
+                To trade this inside the melee, go to arena
+              </Text>
+            </Link>
+            <GlobeIcon color={theme.colors.econiaBlue} />
+          </div>
+        </Carousel>
+      )}
       <MainInfo data={props.data} />
       {isTablet || isMobile ? <MobileGrid data={props.data} /> : <DesktopGrid data={props.data} />}
     </Box>
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/types.ts b/src/typescript/frontend/src/components/pages/emojicoin/types.ts
index faf383696..f343e5d90 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/types.ts
+++ b/src/typescript/frontend/src/components/pages/emojicoin/types.ts
@@ -17,6 +17,7 @@ type DataProps = MarketMetadataModel & {
 
 export interface EmojicoinProps {
   data: DataProps;
+  isInMelee: boolean;
 }
 
 export interface MainInfoProps {
diff --git a/src/typescript/frontend/src/components/svg/icons/LogoIcon.tsx b/src/typescript/frontend/src/components/svg/icons/LogoIcon.tsx
index 2a4d25d29..1da419ac8 100644
--- a/src/typescript/frontend/src/components/svg/icons/LogoIcon.tsx
+++ b/src/typescript/frontend/src/components/svg/icons/LogoIcon.tsx
@@ -4,25 +4,8 @@ import Svg from "components/svg/Svg";
 import { VERSION } from "lib/env";
 import { type SvgProps } from "../types";
 import { useThemeContext } from "context";
-import Text from "components/text";
 import type { Colors } from "theme/types";
-
-const Badge: React.FC<React.PropsWithChildren<{ color: keyof Colors }>> = ({ children, color }) => {
-  const { theme } = useThemeContext();
-
-  return (
-    <Text
-      style={{
-        border: `1px solid ${theme.colors[color]}`,
-        borderRadius: "8px",
-        color: theme.colors[color],
-      }}
-      className="!pixel-heading-4 px-[.4rem] text-[15px]"
-    >
-      {children}
-    </Text>
-  );
-};
+import { Badge } from "components/Badge";
 
 const VersionBadge: React.FC<{ color: keyof Colors }> = ({ color }) =>
   // prettier-ignore
diff --git a/src/typescript/frontend/src/router/routes.ts b/src/typescript/frontend/src/router/routes.ts
index b4fe25e16..875db2f57 100644
--- a/src/typescript/frontend/src/router/routes.ts
+++ b/src/typescript/frontend/src/router/routes.ts
@@ -12,4 +12,5 @@ export const ROUTES = {
   maintenance: "/maintenance",
   launching: "/launching",
   dexscreener: "/dexscreener",
+  arena: "/arena",
 } as const;