mock up pools page design

balancer · Mar 16, 2024 · f3531ed · f3531ed
1 parent e0f959f
commit f3531ed
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 25 deletions.
diff --git a/packages/nextjs/app/pools/_components/PoolActions.tsx b/packages/nextjs/app/pools/_components/PoolActions.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { Fragment, useState } from "react";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
 /**
  * Allow user to perform swap, join, and exit transactions with a pool
@@ -22,7 +23,7 @@ export const PoolActions = () => {
           onChange={() => setSelectedTab("swap")}
         />
         <div role="tabpanel" className="tab-content bg-base-200 border-base-300 rounded-box p-6">
-          Swap a token with the pool
+          <SwapTab />
         </div>
 
         <input
@@ -54,3 +55,55 @@ export const PoolActions = () => {
     </div>
   );
 };
+
+const SwapTab = () => {
+  return (
+    <Fragment>
+      <div className="mb-5">
+        <div>
+          <label>Token In</label>
+        </div>
+        <div className="relative">
+          <input type="number" className="text-2xl w-full input input-bordered rounded-lg bg-base-200 p-10" />
+          <div className="dropdown dropdown-end absolute top-3 right-4 ">
+            <div tabIndex={0} role="button" className="btn m-1 btn-accent rounded-lg w-24">
+              DAI <ChevronDownIcon className="w-4 h-4" />
+            </div>
+            <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+              <li>
+                <a>Item 1</a>
+              </li>
+              <li>
+                <a>Item 2</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className="mb-5">
+        <div>
+          <label>Token Out</label>
+        </div>
+        <div className="relative">
+          <input type="number" className="text-2xl w-full input input-bordered rounded-lg bg-base-200 p-10" />
+          <div className="dropdown dropdown-end absolute top-3 right-4 ">
+            <div tabIndex={0} role="button" className="btn m-1 btn-accent rounded-lg w-24">
+              USDe <ChevronDownIcon className="w-4 h-4" />
+            </div>
+            <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+              <li>
+                <a>Item 1</a>
+              </li>
+              <li>
+                <a>Item 2</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div>
+        <button className="btn btn-accent mt-3 w-full rounded-lg">Swap</button>
+      </div>
+    </Fragment>
+  );
+};
diff --git a/packages/nextjs/app/pools/_components/PoolComposition.tsx b/packages/nextjs/app/pools/_components/PoolComposition.tsx
@@ -5,6 +5,11 @@ export const PoolComposition = () => {
   return (
     <div className="w-full">
       <h5 className="text-2xl font-bold mb-3">Composition</h5>
+      <SkeletonLoader />
     </div>
   );
 };
+
+const SkeletonLoader = () => {
+  return <div className="animate-pulse bg-base-200 rounded-xl w-full h-72"></div>;
+};
diff --git a/packages/nextjs/app/pools/page.tsx b/packages/nextjs/app/pools/page.tsx
@@ -1,17 +1,15 @@
 "use client";
 
-import { Fragment, useState } from "react";
+import { useState } from "react";
 import { PoolActions, PoolComposition, PoolDetails } from "./_components/";
 import type { NextPage } from "next";
 import { type Address, isAddress } from "viem";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { AddressInput } from "~~/components/scaffold-eth";
 import deployedContractsData from "~~/contracts/deployedContracts";
 import scaffoldConfig from "~~/scaffold.config";
 
 const Pools: NextPage = () => {
   const [poolAddress, setPoolAddress] = useState<Address>("");
-  const [selectedPool, setSelectedPool] = useState<Address>("");
 
   const isValidAddress = isAddress(poolAddress);
 
@@ -21,6 +19,9 @@ const Pools: NextPage = () => {
     ...details,
   }));
 
+  const [selectedPool, setSelectedPool] = useState<Address>(scaffoldPools[0].address);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
   return (
     <div className="bg-base-300 flex-grow">
       <div className="flex items-center flex-col flex-grow py-10 px-5 md:px-10 xl:px-20">
@@ -34,22 +35,35 @@ const Pools: NextPage = () => {
           </p>
         </div>
 
-        <section className="flex justify-between flex-wrap gap-5 w-full mb-5 items-center text-xl border-b border-white py-7">
-          <div className="flex items-center gap-5">
-            <select
-              className="select select-base-100 w-72"
-              value={selectedPool}
-              onChange={e => setSelectedPool(e.target.value)}
+        <section className="flex justify-center flex-wrap gap-5 w-full mb-5 items-center text-xl border-b border-white py-5">
+          <div className={`dropdown dropdown-end ${isDropdownOpen ? "dropdown-open" : ""}`}>
+            <div
+              tabIndex={0}
+              role="button"
+              className="btn text-lg btn-accent w-96"
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+            >
+              Choose Custom Pool
+            </div>
+            <ul
+              tabIndex={0}
+              className={`dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mt-3 ${
+                !isDropdownOpen ? "hidden" : ""
+              }`}
             >
-              <option disabled value={""}>
-                Select your custom pool
-              </option>
               {scaffoldPools.map(pool => (
-                <option key={pool.name} value={pool.address}>
-                  {pool.name}
-                </option>
+                <li key={pool.name}>
+                  <button
+                    onClick={() => {
+                      setSelectedPool(pool.address);
+                      setIsDropdownOpen(false); // Close the dropdown
+                    }}
+                  >
+                    {pool.name}
+                  </button>
+                </li>
               ))}
-            </select>
+            </ul>
           </div>
           <div>OR</div>
           <form
@@ -60,10 +74,21 @@ const Pools: NextPage = () => {
               setPoolAddress("");
             }}
           >
-            <AddressInput value={poolAddress} onChange={setPoolAddress} placeholder={"Search by contract address"} />
-            <button className="btn btn-sm btn-accent" type="submit" disabled={!isValidAddress}>
-              <MagnifyingGlassIcon className="h-5 w-5" />
-            </button>
+            <div className="relative">
+              <input
+                value={poolAddress}
+                onChange={e => setPoolAddress(e.target.value)}
+                className="input input-bordered bg-base-200 w-96 text-center pr-16"
+                placeholder="Search by contract addresss"
+              />
+              <button
+                className="btn btn-sm btn-accent absolute top-2 right-3 "
+                type="submit"
+                disabled={!isValidAddress}
+              >
+                <MagnifyingGlassIcon className="h-5 w-5" />
+              </button>
+            </div>
           </form>
         </section>
 
@@ -73,15 +98,15 @@ const Pools: NextPage = () => {
           </h3>
         </div>
         {selectedPool && (
-          <Fragment>
-            <div className="grid grid-cols-1 lg:grid-cols-2 w-full gap-10 mb-5">
+          <div className="w-full">
+            <div className="grid grid-cols-1 xl:grid-cols-2 w-full gap-10 mb-5">
               <PoolDetails poolAddress={selectedPool} />
               <PoolActions />
             </div>
             <div className="w-full">
               <PoolComposition />
             </div>
-          </Fragment>
+          </div>
         )}
       </div>
     </div>