[ECO-2353] Rearrange items on the market page

src/typescript/frontend/src/components/charts/PrivateChart.tsx

@@ -368,8 +368,8 @@ export const Chart = (props: ChartContainerProps) => {
   });
 
   return (
-    <div className="relative w-full">
-      <div className="absolute left-0 top-0 flex h-full w-full animate-fadeIn items-center justify-center text-center font-roboto-mono text-xl font-light leading-6 text-neutral-500 opacity-0 delay-[2000]">
+    <div className="relative w-full h-[420px]">
+      <div className="absolute left-0 top-0 flex h-full w-full animate-fadeIn items-center justify-center text-center font-roboto-mono text-lg font-light leading-6 text-neutral-500 opacity-0 delay-[2000]">
         <div>
           {showErrorMessage ? (
             <>

src/typescript/frontend/src/components/pages/emojicoin/ClientEmojicoinPage.tsx

@@ -7,7 +7,6 @@ import DesktopGrid from "./components/desktop-grid";
 import MobileGrid from "./components/mobile-grid";
 import { type EmojicoinProps } from "./types";
 import { useEventStore } from "context/event-store-context";
-import TextCarousel from "components/text-carousel/TextCarousel";
 import MainInfo from "./components/main-info/MainInfo";
 import { useReliableSubscribe } from "@hooks/use-reliable-subscribe";
 import { type BrokerEvent } from "@/broker/types";
@@ -35,7 +34,6 @@ const ClientEmojicoinPage = (props: EmojicoinProps) => {
 
   return (
     <Box pt="85px">
-      <TextCarousel />
       <MainInfo data={props.data} />
       {isTablet || isMobile ? <MobileGrid data={props.data} /> : <DesktopGrid data={props.data} />}
     </Box>

src/typescript/frontend/src/components/pages/emojicoin/components/desktop-grid/index.tsx

@@ -1,13 +1,8 @@
 import React, { Suspense } from "react";
 
-import { Text } from "components";
-
-import { translationFunction } from "context/language-context";
-
 import {
   StyledContentWrapper,
   StyledContentColumn,
-  StyledContentHeader,
   StyledBlockWrapper,
   StyledContentInner,
   StyledBlock,
@@ -16,22 +11,16 @@ import {
 import ChatBox from "../chat/ChatBox";
 import TradeHistory from "../trade-history";
 import { type GridProps } from "../../types";
-import { LiquidityButton } from "../trade-emojicoin/LiquidityButton";
 import ChartContainer from "components/charts/ChartContainer";
 import SwapComponent from "../trade-emojicoin/SwapComponent";
 import Loading from "components/loading";
 
 const DesktopGrid = (props: GridProps) => {
-  const { t } = translationFunction();
-
   return (
     <StyledContentWrapper>
       <StyledContentInner>
         <StyledContentColumn>
-          <StyledBlock
-            width="57%"
-            className="bg-black z-10 border-t border-solid border-t-dark-gray"
-          >
+          <StyledBlock width="57%" className="bg-black z-10">
             <StyledBlockWrapper>
               <Suspense fallback={<Loading numEmojis={20} />}>
                 <ChartContainer
@@ -44,8 +33,6 @@ const DesktopGrid = (props: GridProps) => {
             </StyledBlockWrapper>
           </StyledBlock>
           <StyledBlock width="43%">
-            <LiquidityButton data={props.data} />
-
             <StyledBlockWrapper>
               <SwapComponent
                 emojicoin={props.data.symbolData.symbol}
@@ -59,24 +46,12 @@ const DesktopGrid = (props: GridProps) => {
 
         <StyledContentColumn>
           <StyledBlock width="57%">
-            <StyledContentHeader>
-              <Text textScale="pixelHeading3" color="lightGray" textTransform="uppercase">
-                {t("Trade History")}
-              </Text>
-            </StyledContentHeader>
-
             <StyledBlockWrapper>
               <TradeHistory data={props.data} />
             </StyledBlockWrapper>
           </StyledBlock>
 
           <StyledBlock width="43%">
-            <StyledContentHeader>
-              <Text textScale="pixelHeading3" color="lightGray" textTransform="uppercase">
-                {t("Chat")}
-              </Text>
-            </StyledContentHeader>
-
             <StyledBlockWrapper>
               <ChatBox data={props.data} />
             </StyledBlockWrapper>

src/typescript/frontend/src/components/pages/emojicoin/components/desktop-grid/styled.tsx

@@ -20,6 +20,19 @@ export const StyledContentColumn = styled(Flex)`
 
   border-left: 1px solid ${({ theme }) => theme.colors.darkGray};
   border-right: 1px solid ${({ theme }) => theme.colors.darkGray};
+  position: relative;
+
+  &:after,
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 200vw;
+    background-color: ${({ theme }) => theme.colors.darkGray};
+    height: 1px;
+    transform: translateX(-50%);
+    z-index: 10;
+  }
 `;
 
 export const StyledContentHeader = styled.div`

src/typescript/frontend/src/components/pages/emojicoin/components/main-info/BondingProgress.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from "react";
+
+import { translationFunction } from "context/language-context";
+import { type MainInfoProps } from "../../types";
+import { useEventStore } from "context/event-store-context";
+import { useLabelScrambler } from "components/pages/home/components/table-card/animation-variants/event-variants";
+import { motion } from "framer-motion";
+import { getBondingCurveProgress } from "utils/bonding-curve";
+import Button from "components/button";
+import Link from "next/link";
+import { ROUTES } from "router/routes";
+import { useThemeContext } from "context";
+
+const statsTextClasses = "uppercase ellipses font-forma text-[24px]";
+
+const BondingProgress = ({ data }: MainInfoProps) => {
+  const { t } = translationFunction();
+  const { theme } = useThemeContext();
+
+  const marketEmojis = data.symbolEmojis;
+  const stateEvents = useEventStore((s) => s.getMarket(marketEmojis)?.stateEvents ?? []);
+
+  const [bondingProgress, setBondingProgress] = useState(
+    getBondingCurveProgress(data.state.state.clammVirtualReserves.quote)
+  );
+
+  useEffect(() => {
+    if (stateEvents.length === 0) return;
+    const event = stateEvents.at(0);
+    if (event) {
+      setBondingProgress(getBondingCurveProgress(event.state.clammVirtualReserves.quote));
+    }
+  }, [stateEvents]);
+
+  const { ref: bondingCurveRef } = useLabelScrambler(`${bondingProgress.toFixed(2)}%`, "%");
+
+  return (
+    <div className="flex flex-col w-fit">
+      <div className="flex justify-between gap-[8px] mb-[.2em]">
+        <div className={statsTextClasses + " text-light-gray font-pixelar text-[32px]"}>
+          {t("Bonding progress:")}
+        </div>
+        <div className={statsTextClasses + " text-white"}>
+          <div
+            className="text-ec-blue font-pixelar text-[32px] text-end min-w-[3.5em]"
+            ref={bondingCurveRef}
+          >
+            {bondingProgress.toFixed(2)}%
+          </div>
+        </div>
+      </div>
+      {bondingProgress >= 100 ? (
+        <Link
+          href={{
+            pathname: ROUTES.pools,
+            query: { pool: data.emojis.map((e) => e.emoji).join("") },
+          }}
+        >
+          <Button scale="lg">{t("Provide liquidity")}</Button>
+        </Link>
+      ) : (
+        <div
+          style={{
+            width: "100%",
+            border: `1px solid ${theme.colors.darkGray}`,
+            padding: "0.15em",
+            borderRadius: "5px",
+          }}
+        >
+          <motion.div
+            initial={{ width: "0%" }}
+            animate={{ width: `${Math.max(bondingProgress, 1).toFixed(2)}%` }}
+            // Allow the page to load first so that users can actually see the animation.
+            transition={{ delay: 0.3 }}
+            style={{
+              height: "0.8em",
+              background: theme.colors.econiaBlue,
+              borderRadius: "3px",
+            }}
+          ></motion.div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BondingProgress;

src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx

@@ -4,21 +4,19 @@ import { translationFunction } from "context/language-context";
 import { toCoinDecimalString } from "lib/utils/decimals";
 import AptosIconBlack from "components/svg/icons/AptosBlack";
 import { type MainInfoProps } from "../../types";
-import { emojisToName } from "lib/utils/emojis-to-name-or-symbol";
 import { useEventStore } from "context/event-store-context";
 import { useLabelScrambler } from "components/pages/home/components/table-card/animation-variants/event-variants";
 import { isMarketStateModel } from "@sdk/indexer-v2/types";
+import BondingProgress from "./BondingProgress";
+import { useThemeContext } from "context";
+import { useMatchBreakpoints } from "@hooks/index";
 import { Emoji } from "utils/emoji";
 
-const innerWrapper = `flex flex-col md:flex-row justify-around w-full max-w-[1362px] px-[30px] lg:px-[44px] py-[17px]
-md:py-[37px] xl:py-[68px]`;
-const headerWrapper =
-  "flex flex-row md:flex-col md:justify-between gap-[12px] md:gap-[4px] w-full md:w-[58%] xl:w-[65%] mb-[8px]";
-const statsWrapper = "flex flex-col w-full md:w-[42%] xl:w-[35%] mt-[-8px]";
-const statsTextClasses = "display-6 md:display-4 uppercase ellipses font-forma";
+const statsTextClasses = "uppercase ellipses font-forma text-[24px]";
 
 const MainInfo = ({ data }: MainInfoProps) => {
   const { t } = translationFunction();
+  const { theme } = useThemeContext();
 
   const marketEmojis = data.symbolEmojis;
   const stateEvents = useEventStore((s) => s.getMarket(marketEmojis)?.stateEvents ?? []);
@@ -41,27 +39,48 @@ const MainInfo = ({ data }: MainInfoProps) => {
     }
   }, [stateEvents]);
 
-  const { ref: marketCapRef } = useLabelScrambler(marketCap);
-  const { ref: dailyVolumeRef } = useLabelScrambler(dailyVolume);
-  const { ref: allTimeVolumeRef } = useLabelScrambler(allTimeVolume);
+  const { ref: marketCapRef } = useLabelScrambler(toCoinDecimalString(marketCap, 2));
+  const { ref: dailyVolumeRef } = useLabelScrambler(toCoinDecimalString(dailyVolume, 2));
+  const { ref: allTimeVolumeRef } = useLabelScrambler(toCoinDecimalString(allTimeVolume, 2));
 
-  return (
-    <div className="flex justify-center">
-      <div className={innerWrapper}>
-        <div className={headerWrapper}>
-          <div
-            title={emojisToName(data.emojis).toUpperCase()}
-            className=" text-white uppercase ellipses display-4 font-forma-bold md:display-2"
-          >
-            {emojisToName(data.emojis)}
-          </div>
+  const { isMobile } = useMatchBreakpoints();
 
-          <Emoji className="text-[24px] md:display-2 my-auto text-white" emojis={data.emojis} />
-        </div>
+  return (
+    <div
+      className="flex justify-center mt-[10px]"
+      style={{
+        borderTop: `1px solid ${theme.colors.darkGray}`,
+      }}
+    >
+      <div
+        style={
+          isMobile
+            ? {
+                display: "flex",
+                gap: "1em",
+                flexDirection: "column",
+                width: "100%",
+                padding: "40px",
+              }
+            : {
+                display: "grid",
+                gridTemplateColumns: "57fr 43fr",
+                width: "100%",
+                maxWidth: "1362px",
+                padding: "40px",
+              }
+        }
+      >
+        <Emoji
+          className="text-[24px] text-center md:display-2 my-auto text-white"
+          emojis={data.emojis}
+        />
 
-        <div className={statsWrapper}>
-          <div className="flex gap-[8px]">
-            <div className={statsTextClasses + " text-light-gray"}>{t("Mkt. Cap:")}</div>
+        <div
+          className={`flex flex-col mt-[-8px] ${isMobile ? "m-auto" : "ml-[4em]"} w-fit gap-[2px]`}
+        >
+          <div className="flex justify-between">
+            <div className={statsTextClasses + " text-light-gray"}>{t("Market Cap:")}</div>
             <div className={statsTextClasses + " text-white"}>
               <div className="flex flex-row justify-center items-center">
                 <div ref={marketCapRef}>{toCoinDecimalString(marketCap, 2)}</div>
@@ -71,7 +90,7 @@ const MainInfo = ({ data }: MainInfoProps) => {
             </div>
           </div>
 
-          <div className="flex gap-[8px]">
+          <div className="flex justify-between">
             <div className={statsTextClasses + " text-light-gray"}>{t("24 hour vol:")}</div>
             <div className={statsTextClasses + " text-white"}>
               <div className="flex flex-row justify-center items-center">
@@ -82,7 +101,7 @@ const MainInfo = ({ data }: MainInfoProps) => {
             </div>
           </div>
 
-          <div className="flex gap-[8px]">
+          <div className="flex justify-between">
             <div className={statsTextClasses + " text-light-gray"}>{t("All-time vol:")}</div>
             <div className={statsTextClasses + " text-white"}>
               <div className="flex flex-row justify-center items-center">
@@ -92,6 +111,10 @@ const MainInfo = ({ data }: MainInfoProps) => {
               </div>
             </div>
           </div>
+
+          <div className="mt-[.6em]">
+            <BondingProgress data={data} />
+          </div>
         </div>
       </div>
     </div>