Feature/pool page

apps/flame-defi/app/bridge/page.tsx

@@ -46,7 +46,7 @@ export default function BridgePage(): React.ReactElement {
     <section className="min-h-[calc(100vh-85px-96px)] flex flex-col items-center mt-[100px]">
       <div className="w-full px-0 md:px-4 lg:px-4 md:w-2/3 lg:w-2/3 xl:w-1/2 max-w-[676px]">
         <div className="p-4 sm:p-4 md:p-8 lg:p-12 bg-[radial-gradient(144.23%_141.13%_at_50.15%_0%,#221F1F_0%,#050A0D_100%)] shadow-[inset_1px_1px_1px_-1px_rgba(255,255,255,0.5)] rounded-2xl">
-          <div className="flex items-center justify-center p-1 w-full bg-white/[0.04] border-[1px] border-white/20 rounded-xl border-b-0 border-r-0 mb-5">
+          <div className="flex items-center justify-center p-1 w-full bg-semi-white border-[1px] border-white/20 rounded-xl border-b-0 border-r-0 mb-5">
             <ul className="flex w-full text-center">
               {tabs.map((tab) => (
                 <Tab

apps/flame-defi/app/components/DepositCard/DepositCard.tsx

@@ -90,14 +90,17 @@ export default function DepositCard(): React.ReactElement {
     useState<string>("");
   const [isRecipientAddressEditable, setIsRecipientAddressEditable] =
     useState<boolean>(false);
+
   const handleEditRecipientClick = useCallback(() => {
     setIsRecipientAddressEditable(!isRecipientAddressEditable);
   }, [isRecipientAddressEditable]);
+
   const handleEditRecipientSave = () => {
     setIsRecipientAddressEditable(false);
     // reset evmWalletState when user manually enters address
     resetEvmWalletState();
   };
+
   const handleEditRecipientClear = () => {
     setIsRecipientAddressEditable(false);
     setRecipientAddressOverride("");
@@ -166,6 +169,7 @@ export default function DepositCard(): React.ReactElement {
   }, [selectedEvmChain, handleConnectEvmWallet]);
 
   const handleDeposit = async () => {
+    console.log("handleDeposit");
     if (!selectedCosmosChain || !selectedIbcCurrency) {
       addNotification({
         toastOpts: {
@@ -359,7 +363,7 @@ export default function DepositCard(): React.ReactElement {
       {isAnimating ? (
         <AnimatedArrowSpacer isAnimating={isAnimating} />
       ) : (
-        <div className="flex flex-row justify-center sm:justify-start mt-4 sm:my-4">
+        <div className="flex flex-row justify-center sm:justify-start mt-4 sm:my-4 h-[40px]">
           <div>
             <ArrowUpDownIcon size={32} />
           </div>
@@ -515,7 +519,7 @@ export default function DepositCard(): React.ReactElement {
 
       <div className="mt-4">
         <ActionButton
-          onClick={handleDeposit}
+          callback={handleDeposit}
           disabled={isDepositDisabled}
           isLoading={isLoading}
           buttonText={"Deposit"}

apps/flame-defi/app/components/MobileWalletConnect/MobileWalletConnect.tsx

@@ -107,11 +107,10 @@ export default function MobileWalletConnect({
               {isConnected ? "Connected" : "Connect"}
             </Button>
           )}
-
           {!isBridgePage && (
             <div>
               {userAccount.address ? (
-                <div className="flex items-center border border-border rounded-md px-3 py-2 h-[36px]">
+                <div className="flex items-center border border-border rounded-md px-3 py-2 h-[36px] cursor-pointer">
                   <div className="flex items-center gap-2">
                     <FlameIcon size={16} />
                     <span className="text-white text-base font-normal">

apps/flame-defi/app/components/NetworkSelector/NetworkSelector.tsx

@@ -25,6 +25,11 @@ export default function NetworkSelector(): React.ReactElement {
     [selectFlameNetwork],
   );
 
+  //NOTES: THING TO TRACK:
+  // evmChainOptions
+  // selectedEvmChain
+  // selectedEvmNetwork
+
   return (
     <Select
       defaultValue={selectedFlameNetwork}
@@ -52,7 +57,7 @@ export default function NetworkSelector(): React.ReactElement {
             <SelectItem
               key={network}
               value={network}
-              className="capitalize cursor-pointer data-[state=checked]:bg-white/5 data-[state=checked]:text-orange-soft [&:hover]:bg-white/5"
+              className="capitalize cursor-pointer data-[state=checked]:bg-semi-white data-[state=checked]:text-orange-soft [&:hover]:bg-semi-white"
             >
               <div className="flex items-center gap-1 text-white text-base">
                 <FlameIcon size={16} />

apps/flame-defi/app/components/SideTag/SideTag.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useConfig } from "../../config/hooks/useConfig";
+import { UpRightSquareIcon } from "@repo/ui/icons";
+
+interface SideTagProps {
+  label: string;
+}
+
+/**
+ * SideTag component to render a side tag with an icon and label.
+ * @param label
+ */
+
+export const SideTag = ({ label }: SideTagProps) => {
+  const { feedbackFormURL } = useConfig();
+
+  return (
+    <div className="hidden md:inline-flex items-center absolute top-1/2 right-0 bg-orange-soft text-white text-xs font-bold translate-x-10 -rotate-90 overflow-hidden">
+      <a
+        href={feedbackFormURL || ""}
+        target="_blank"
+        rel="noreferrer"
+        className="flex items-center gap-2 transition px-3 py-2 text-white hover:bg-black/10 text-base"
+      >
+        <span className="w-5 h-5 flex items-center justify-center">
+          <UpRightSquareIcon />
+        </span>
+        <span>{label}</span>
+      </a>
+    </div>
+  );
+};

apps/flame-defi/app/components/WithdrawCard/WithdrawCard.tsx

@@ -511,7 +511,7 @@ export default function WithdrawCard(): React.ReactElement {
 
       <div className="mt-4">
         <ActionButton
-          onClick={handleWithdraw}
+          callback={handleWithdraw}
           disabled={isWithdrawDisabled}
           isLoading={isLoading}
           buttonText={"Withdraw"}

apps/flame-defi/app/constants.ts

@@ -0,0 +1,73 @@
+import {
+  CelestiaIcon,
+  MilkTiaIcon,
+  StrideTiaIcon,
+  UsdcIcon,
+  WrappedTiaIcon,
+} from "@repo/ui/icons";
+import { TokenItem } from "@repo/ui/types";
+
+export enum TOKEN_INPUTS {
+  TOKEN_ONE = "token_one",
+  TOKEN_TWO = "token_two",
+}
+
+// NOTE: temporary tokens until we have a real token list from a api
+export const tokens: TokenItem[] = [
+  {
+    Icon: CelestiaIcon,
+    title: "TIA",
+    symbol: "TIA",
+  },
+  {
+    Icon: WrappedTiaIcon,
+    title: "Wrapped Celestia",
+    symbol: "WTIA",
+  },
+  {
+    Icon: MilkTiaIcon,
+    title: "Milk TIA",
+    symbol: "milkTIA",
+  },
+  {
+    Icon: StrideTiaIcon,
+    title: "Stride TIA",
+    symbol: "stTIA",
+  },
+  {
+    Icon: UsdcIcon,
+    title: "USDC",
+    symbol: "USDC",
+  },
+];
+
+export const feeData = [
+  {
+    id: 0,
+    feePercent: "0.3%",
+    text: "Best for most pairs.",
+    tvl: "100M",
+    selectPercent: "0.3%",
+  },
+  {
+    id: 1,
+    feePercent: "0.5%",
+    text: "Best for stable pairs.",
+    tvl: "100M",
+    selectPercent: "0.5%",
+  },
+  {
+    id: 2,
+    feePercent: "1%",
+    text: "Best for high-volatility pairs.",
+    tvl: "100M",
+    selectPercent: "1%",
+  },
+  {
+    id: 3,
+    feePercent: "1%",
+    text: "Best for high-volatility pairs.",
+    tvl: "100M",
+    selectPercent: "1%",
+  },
+];

apps/flame-defi/app/features/EvmWallet/components/SingleWalletConnect/SingleWalletConnect.tsx

@@ -39,6 +39,7 @@ export function SingleWalletContent({
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <FlameIcon />
+
           <span className="text-white text-base font-normal">
             {shortenAddress(address)}
           </span>

apps/flame-defi/app/globals.css

@@ -7,13 +7,14 @@
     /* Base Colors */
     --color-white: 0 0% 96%;
     --color-whitest: 0 0% 100%;
+    --color-semi-white: 0 0% 96% / 0.06;
     --color-black: 203 45% 4%;
     --color-grey-dark: 0 0% 20%;
     --color-grey-medium: 0 0% 40%;
     --color-grey-light: 0 0% 60%;
     --color-grey-lighter: 0 0% 80%;
     --color-red: 2 58% 46%;
-    --color-orange: 17 73% 50%;
+    --color-orange: 24 96% 51%;
     --color-orange-soft: 35 87% 54%;
     --color-green: 140 35% 36%;
     --color-blue-light: 203 35% 60%;
@@ -58,12 +59,11 @@
 }
 
 @layer components {
-  .side-tag {
-    @apply absolute top-1/2 right-0 bg-orange-soft text-white text-xs font-bold translate-x-10 -rotate-90 overflow-hidden;
+  .gradient-container {
+    @apply p-4 sm:p-4 md:p-8 lg:p-12 border border-solid border-transparent bg-radial-dark shadow-[inset_1px_1px_1px_-1px_hsla(0,0%,100%,0.5)] rounded-2xl;
   }
-
-  .side-tag-link {
-    @apply flex items-center px-3 py-2 text-white transition-colors duration-200 hover:bg-black/10;
+  .normalize-input {
+    @apply flex-1 bg-transparent focus:outline-none text-[36px] placeholder:text-grey-light [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none;
   }
 }
 

apps/flame-defi/app/layout.tsx

@@ -4,6 +4,7 @@ import { Providers } from "./providers";
 import "./globals.css";
 import "@interchain-ui/react/styles";
 import "@rainbow-me/rainbowkit/styles.css";
+import { SideTag } from "./components/SideTag/SideTag";
 
 export const metadata = {
   title: "Flame App",
@@ -21,6 +22,7 @@ export default function RootLayout({
         <Providers>
           <div className="min-h-screen flex flex-col">
             <Navbar />
+            <SideTag label="Get Help" />
             <main className="flex-grow">{children}</main>
             <Footer />
           </div>

apps/flame-defi/app/pool/components/AreaChartWithRange.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import ReactECharts from "echarts-for-react";
+
+const AreaChartWithRange: React.FC = () => {
+  const option = {
+    backgroundColor: "#071520", // HSL(203, 45%, 4%) converted to hex
+    tooltip: {
+      trigger: "axis",
+    },
+    // We adjust the grid so our chart has some margins and won't clip the axis.
+    // The chart itself sits "behind" the dataZoom overlay.
+    grid: {
+      left: 50,
+      right: 30,
+      top: 50,
+      bottom: 50,
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: [
+        120, 132, 101, 134, 90, 230, 210, 180, 222, 150, 210, 300, 250, 400,
+      ],
+    },
+    yAxis: {
+      type: "value",
+      splitLine: { show: false },
+      axisLabel: { show: false },
+    },
+    series: [
+      {
+        name: "Example Data",
+        type: "line",
+        smooth: false,
+        showSymbol: false,
+        areaStyle: {
+          color: "rgba(230, 149, 41, 0.2)",
+        },
+        lineStyle: {
+          color: "rgba(230, 149, 41, 1)",
+        },
+        itemStyle: {
+          color: "rgba(230, 149, 41, 1)",
+        },
+        data: [
+          120, 132, 101, 134, 90, 230, 210, 180, 222, 150, 210, 300, 250, 400,
+        ],
+      },
+    ],
+    // This dataZoom configuration creates a draggable range‐selector
+    // that covers the entire plotting area. We make it semi‐transparent
+    // so that the chart is still visible behind it.
+    dataZoom: [
+      {
+        type: "slider",
+        show: true,
+        // Fill the full chart area:
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "100%",
+
+        // Default range (from 0% to 100% of x‐axis)
+        start: 0,
+        end: 100,
+
+        // Give it some transparency so the data is visible underneath
+        backgroundColor: "rgba(0, 0, 0, 0.1)",
+        fillerColor: "rgba(0, 0, 0, 0.1)",
+        borderColor: "transparent",
+
+        // Turn off extra details and shadows to keep it looking clean
+        showDetail: false,
+        showDataShadow: false,
+
+        // Make the handles smaller (default is 100%)
+        handleSize: "30%",
+
+        // Hide the top bar
+        moveHandleSize: 0, // Hide the move handle
+        moveHandleIcon: "M 0 0 V 100", // Vertical line from top to bottom
+        moveHandleStyle: {
+          opacity: 0,
+        },
+
+        handleStyle: {
+          color: "rgba(230, 149, 41, 0.5)",
+          borderColor: "rgba(230, 149, 41, 0.5)",
+        },
+        emphasis: {
+          handleStyle: {
+            color: "rgba(230, 149, 41, 1)",
+            borderColor: "rgba(230, 149, 41, 1)",
+          },
+        },
+      },
+    ],
+  };
+
+  return (
+    <div style={{ width: "100%", margin: "0 auto" }}>
+      <ReactECharts
+        option={option}
+        style={{ width: "100%", height: "200px" }}
+      />
+    </div>
+  );
+};
+
+export default AreaChartWithRange;