Adds wip of the new pool page

Adds PriceRangeStep and DepositAmountsStep adds global classes fixes side tag Adds reset button functionality for pool page fixes errors hides the side tag on mobile fixes txn animation fixes txn animation
astriaorg · Jan 28, 2025 · 8ea75e0 · 8ea75e0
1 parent 07f1b44
commit 8ea75e0
Show file tree

Hide file tree

Showing 37 changed files with 1,388 additions and 159 deletions.
diff --git a/apps/flame-defi/app/bridge/page.tsx b/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

diff --git a/apps/flame-defi/app/components/DepositCard/DepositCard.tsx b/apps/flame-defi/app/components/DepositCard/DepositCard.tsx
@@ -50,6 +50,7 @@ export default function DepositCard(): React.ReactElement {
     getCosmosSigningClient,
   } = useCosmosWallet();
 
+
   // ensure cosmos wallet connection when selected ibc chain changes
   useEffect(() => {
     if (!selectedCosmosChain) {
@@ -65,7 +66,7 @@ export default function DepositCard(): React.ReactElement {
       return defaultEvmCurrencyOption;
     }
     const matchingEvmCurrency = selectedEvmChain?.currencies.find(
-      (currency) => currency.coinDenom === selectedIbcCurrency.coinDenom,
+      (currency) => currency.coinDenom === selectedIbcCurrency.coinDenom
     );
     if (!matchingEvmCurrency) {
       return null;
@@ -90,20 +91,23 @@ 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("");
   };
   const updateRecipientAddressOverride = (
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement>
   ) => {
     setRecipientAddressOverride(event.target.value);
   };
@@ -124,7 +128,7 @@ export default function DepositCard(): React.ReactElement {
 
   const checkIsFormValid = (
     addressInput: string | null,
-    amountInput: string,
+    amountInput: string
   ) => {
     if (addressInput === null) {
       setIsRecipientAddressValid(false);
@@ -166,6 +170,7 @@ export default function DepositCard(): React.ReactElement {
   }, [selectedEvmChain, handleConnectEvmWallet]);
 
   const handleDeposit = async () => {
+    console.log("handleDeposit");
     if (!selectedCosmosChain || !selectedIbcCurrency) {
       addNotification({
         toastOpts: {
@@ -195,7 +200,7 @@ export default function DepositCard(): React.ReactElement {
     try {
       const formattedAmount = Decimal.fromUserInput(
         amount,
-        selectedIbcCurrency.coinDecimals,
+        selectedIbcCurrency.coinDecimals
       ).atomics;
 
       const signer = await getCosmosSigningClient();
@@ -204,7 +209,7 @@ export default function DepositCard(): React.ReactElement {
         fromAddress,
         recipientAddress,
         formattedAmount,
-        selectedIbcCurrency,
+        selectedIbcCurrency
       );
       addNotification({
         toastOpts: {
@@ -281,7 +286,7 @@ export default function DepositCard(): React.ReactElement {
         RightIcon: PlusIcon,
       },
     ],
-    [connectCosmosWallet],
+    [connectCosmosWallet]
   );
 
   const additionalEvmChainOptions = useMemo(() => {
@@ -359,7 +364,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 +520,7 @@ export default function DepositCard(): React.ReactElement {
 
       <div className="mt-4">
         <ActionButton
-          onClick={handleDeposit}
+          callback={handleDeposit}
           disabled={isDepositDisabled}
           isLoading={isLoading}
           buttonText={"Deposit"}

diff --git a/apps/flame-defi/app/components/MobileWalletConnect/MobileWalletConnect.tsx b/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">

diff --git a/apps/flame-defi/app/components/NetworkSelector/NetworkSelector.tsx b/apps/flame-defi/app/components/NetworkSelector/NetworkSelector.tsx
@@ -18,13 +18,19 @@ export default function NetworkSelector(): React.ReactElement {
   const { selectedFlameNetwork, selectFlameNetwork, networksList } =
     useConfig();
 
+
   const handleNetworkSelect = useCallback(
     (network: FlameNetwork) => {
       selectFlameNetwork(network);
     },
-    [selectFlameNetwork],
+    [selectFlameNetwork]
   );
 
+  //NOTES: THING TO TRACK:
+  // evmChainOptions
+  // selectedEvmChain
+  // selectedEvmNetwork
+
   return (
     <Select
       defaultValue={selectedFlameNetwork}
@@ -52,7 +58,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} />

diff --git a/apps/flame-defi/app/components/SideTag/SideTag.tsx b/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>
+  );
+};
diff --git a/apps/flame-defi/app/components/WithdrawCard/WithdrawCard.tsx b/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"}

diff --git a/apps/flame-defi/app/constants.ts b/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%",
+    },
+  ];
diff --git a/...-defi/app/features/EvmWallet/components/ConnectEvmWalletButton/ConnectEvmWalletButton.tsx b/...-defi/app/features/EvmWallet/components/ConnectEvmWalletButton/ConnectEvmWalletButton.tsx
@@ -45,6 +45,7 @@ export default function ConnectEvmWalletButton({
     connectEvmWallet();
   }, [connectEvmWallet]);
 
+
   return userAccount.address ? (
     <Accordion type="single" collapsible>
       <AccordionItem

diff --git a/.../flame-defi/app/features/EvmWallet/components/SingleWalletConnect/SingleWalletConnect.tsx b/.../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>

diff --git a/apps/flame-defi/app/globals.css b/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%;
@@ -57,13 +58,12 @@
   }
 }
 
-@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;
+@layer components {  
+  .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
   }
 }
 

diff --git a/apps/flame-defi/app/layout.tsx b/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,9 @@ 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>