[ECO-2373] Add deposit/withdraw pills to liquidity page (#342)

Co-authored-by: Matt <[email protected]>

src/typescript/frontend/src/components/EmojiPill.tsx

@@ -0,0 +1,36 @@
+import { type MouseEventHandler } from "react";
+import { Text } from "components/text";
+import { Emoji } from "utils/emoji";
+import Popup from "./popup";
+import { emoji } from "utils";
+import { type AnyEmojiName } from "@sdk/emoji_data/types";
+
+export const EmojiPill = ({
+  emoji: emojiName,
+  description,
+  onClick,
+}: {
+  emoji: AnyEmojiName;
+  description: string;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+}) => {
+  return (
+    <Popup
+      content={
+        <Text textScale="pixelHeading4" textTransform="uppercase" color="black">
+          {description}
+        </Text>
+      }
+    >
+      <div
+        className={
+          "px-[.7rem] py-[.2rem] border-[1px] border-solid rounded-full " +
+          "border-dark-gray h-[1.5rem] w-fit cursor-pointer hover:bg-neutral-800"
+        }
+        onClick={onClick}
+      >
+        <Emoji className="mt-[.11rem]" emojis={emoji(emojiName)} />
+      </div>
+    </Popup>
+  );
+};

src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/SwapComponent.tsx

@@ -1,13 +1,7 @@
 "use client";
 
 import { AptosInputLabel, EmojiInputLabel } from "./InputLabels";
-import {
-  type PropsWithChildren,
-  useEffect,
-  useState,
-  useMemo,
-  type MouseEventHandler,
-} from "react";
+import { type PropsWithChildren, useEffect, useState, useMemo } from "react";
 import FlipInputsArrow from "./FlipInputsArrow";
 import { Column, Row } from "components/layout/components/FlexContainers";
 import { SwapButton } from "./SwapButton";
@@ -23,43 +17,14 @@ import { useAptos } from "context/wallet-context/AptosContextProvider";
 import { AnimatePresence, motion } from "framer-motion";
 import { toCoinTypes } from "@sdk/markets/utils";
 import { Flex, FlexGap } from "@containers";
-import Popup from "components/popup";
-import { Text } from "components/text";
 import { InputNumeric } from "components/inputs";
 import { emoji } from "utils";
 import { getTooltipStyles } from "components/selects/theme";
 import { useThemeContext } from "context";
 import { TradeOptions } from "components/selects/trade-options";
 import { getMaxSlippageSettings } from "utils/slippage";
 import { Emoji } from "utils/emoji";
-import { type AnyEmojiName } from "@sdk/emoji_data/types";
-
-const SmallEmojiButton = ({
-  emoji: emojiName,
-  description,
-  onClick,
-}: {
-  emoji: AnyEmojiName;
-  description: string;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-}) => {
-  return (
-    <Popup
-      content={
-        <Text textScale="pixelHeading4" textTransform="uppercase" color="black">
-          {description}
-        </Text>
-      }
-    >
-      <div
-        className="px-[.7rem] py-[.2rem] border-[1px] border-solid rounded-full border-dark-gray h-[1.5rem] cursor-pointer hover:bg-neutral-800"
-        onClick={onClick}
-      >
-        <Emoji className="mt-[.11rem]" emojis={emoji(emojiName)} />
-      </div>
-    </Popup>
-  );
-};
+import { EmojiPill } from "components/EmojiPill";
 
 const SimulateInputsWrapper = ({ children }: PropsWithChildren) => (
   <div className="flex flex-col relative gap-[19px]">{children}</div>
@@ -236,14 +201,14 @@ export default function SwapComponent({
           <FlexGap flexDirection="row" gap="5px">
             {isSell ? (
               <>
-                <SmallEmojiButton
+                <EmojiPill
                   emoji="nauseated face"
                   description="Sell 50%"
                   onClick={() => {
                     setInputAmount(emojicoinBalance / 2n);
                   }}
                 />
-                <SmallEmojiButton
+                <EmojiPill
                   emoji="face vomiting"
                   description="Sell 100%"
                   onClick={() => {
@@ -253,21 +218,21 @@ export default function SwapComponent({
               </>
             ) : (
               <>
-                <SmallEmojiButton
+                <EmojiPill
                   emoji={"waxing crescent moon"}
                   description="Buy 25%"
                   onClick={() => {
                     setInputAmount(availableAptBalance / 4n);
                   }}
                 />
-                <SmallEmojiButton
+                <EmojiPill
                   emoji={"first quarter moon"}
                   description="Buy 50%"
                   onClick={() => {
                     setInputAmount(availableAptBalance / 2n);
                   }}
                 />
-                <SmallEmojiButton
+                <EmojiPill
                   emoji={"full moon"}
                   description="Buy 100%"
                   onClick={() => {

src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx

@@ -91,7 +91,7 @@ const MainCard = (props: MainCardProps) => {
         </Link>
 
         <Column maxWidth="100%" ellipsis>
-          <div className="flex flex-row content-center">
+          <div className="flex flex-row items-center">
             <span className="text-medium-gray pixel-heading-text">HOT</span>
             <span>&nbsp;</span>
             <div>

src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx

@@ -28,6 +28,7 @@ import { TypeTag } from "@aptos-labs/ts-sdk";
 import Info from "components/info";
 import { type AnyNumberString } from "@sdk/types/types";
 import { type PoolsData } from "../../ClientPoolsPage";
+import { EmojiPill } from "components/EmojiPill";
 
 type LiquidityProps = {
   market: PoolsData | undefined;
@@ -253,29 +254,78 @@ const Liquidity: React.FC<LiquidityProps> = ({ market, geoblocked }) => {
   return (
     <Flex width="100%" justifyContent="center" p={{ _: "64px 17px", mobileM: "64px 33px" }}>
       <Column width="100%" maxWidth="414px" justifyContent="center">
-        <Flex width="100%" justifyContent="space-between" alignItems="baseline">
-          <FlexGap gap="10px" position="relative" justifyContent="left" alignItems="baseline">
-            <Text textScale="heading1" textTransform="uppercase" mb="16px">
-              {t(direction === "add" ? "Add liquidity" : "Remove liquidity")}
-            </Text>
-
-            <Info>
-              <Text
-                textScale="pixelHeading4"
-                lineHeight="20px"
-                color="black"
-                textTransform="uppercase"
+        <Flex width="100%" justifyContent="space-between" alignItems="baseline" mb="10px">
+          <Flex flexDirection="row">
+            <FlexGap gap="10px" position="relative" justifyContent="left" alignItems="baseline">
+              <button
+                onClick={() => setDirection(direction === "add" ? "remove" : "add")}
+                className="absolute left-[-30px] top-[-2px]"
               >
-                Liquidity providers receive a 0.25% fee from all trades, proportional to their pool
-                share. Fees are continuously reinvested in the pool and can be claimed by
-                withdrawing liquidity.
+                <Arrows color="econiaBlue" />
+              </button>
+
+              <Text textScale="heading1" textTransform="uppercase">
+                {t(direction === "add" ? "Add liquidity" : "Remove liquidity")}
               </Text>
-            </Info>
-          </FlexGap>
 
-          <button onClick={() => setDirection(direction === "add" ? "remove" : "add")}>
-            <Arrows color="econiaBlue" />
-          </button>
+              <Info>
+                <Text
+                  textScale="pixelHeading4"
+                  lineHeight="20px"
+                  color="black"
+                  textTransform="uppercase"
+                >
+                  Liquidity providers receive a 0.25% fee from all trades, proportional to their
+                  pool share. Fees are continuously reinvested in the pool and can be claimed by
+                  withdrawing liquidity.
+                </Text>
+              </Info>
+            </FlexGap>
+          </Flex>
+          <FlexGap flexDirection="row" gap="5px">
+            {direction === "add" ? (
+              <>
+                <EmojiPill
+                  emoji={"waxing crescent moon"}
+                  description="Deposit 25%"
+                  onClick={() => {
+                    setLiquidity(aptBalance / 4n);
+                  }}
+                />
+                <EmojiPill
+                  emoji={"first quarter moon"}
+                  description="Deposit 50%"
+                  onClick={() => {
+                    setLiquidity(aptBalance / 2n);
+                  }}
+                />
+                <EmojiPill
+                  emoji={"full moon"}
+                  description="Deposit 100%"
+                  onClick={() => {
+                    setLiquidity(aptBalance);
+                  }}
+                />
+              </>
+            ) : (
+              <>
+                <EmojiPill
+                  emoji="nauseated face"
+                  description="Withdraw 50%"
+                  onClick={() => {
+                    setLP(emojicoinLPBalance / 2n);
+                  }}
+                />
+                <EmojiPill
+                  emoji="face vomiting"
+                  description="Withdraw 100%"
+                  onClick={() => {
+                    setLP(emojicoinLPBalance);
+                  }}
+                />
+              </>
+            )}
+          </FlexGap>
         </Flex>
 
         {direction === "add" ? (