diff --git a/packages/nextjs/app/pools/_components/PoolActions.tsx b/packages/nextjs/app/pools/_components/PoolActions.tsx
index 5e67aa2e..692d3cf8 100644
--- 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")}
/>
- Swap a token with the pool
+
{
);
};
+
+const SwapTab = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/nextjs/app/pools/_components/PoolComposition.tsx b/packages/nextjs/app/pools/_components/PoolComposition.tsx
index 9cdc67a3..57a8c80e 100644
--- a/packages/nextjs/app/pools/_components/PoolComposition.tsx
+++ b/packages/nextjs/app/pools/_components/PoolComposition.tsx
@@ -5,6 +5,11 @@ export const PoolComposition = () => {
return (
Composition
+
);
};
+
+const SkeletonLoader = () => {
+ return ;
+};
diff --git a/packages/nextjs/app/pools/page.tsx b/packages/nextjs/app/pools/page.tsx
index cd9192bb..6ed5d345 100644
--- 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("");
- const [selectedPool, setSelectedPool] = useState("");
const isValidAddress = isAddress(poolAddress);
@@ -21,6 +19,9 @@ const Pools: NextPage = () => {
...details,
}));
+ const [selectedPool, setSelectedPool] = useState(scaffoldPools[0].address);
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
return (
@@ -34,22 +35,35 @@ const Pools: NextPage = () => {
-
-
-
{selectedPool && (
-
-