Merge pull request #3 from kaneki003/main

Resolved Next Server Build  + Some bug fixes

Author: Zahnentferner

LICENSE

@@ -1 +1,36 @@
-# Maelstrom-WebUI
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

README.md

@@ -1,6 +1,5 @@
 "use client";
 
-import { Header } from "@/components/header";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -11,8 +10,8 @@ import { CONTRACT_ADDRESS } from "@/types/contract";
 import { InitPool } from "@/types/pool";
 import { useState } from "react";
 import { toast } from "sonner";
-import { parseEther, isAddress } from "viem";
-import { Loader2, Plus, DollarSign, Coins } from "lucide-react";
+import { parseEther, isAddress, Address } from "viem";
+import { Loader2, Plus } from "lucide-react";
 
 export default function CreatePoolPage() {
   const { writeContractAsync } = useWriteContract();
@@ -22,7 +21,7 @@ export default function CreatePoolPage() {
     writeContractAsync,
     publicClient
   );
-  const { address, isConnected } = useAccount();
+  const { isConnected } = useAccount();
 
   const [formData, setFormData] = useState<InitPool>({
     token: "",
@@ -51,7 +50,7 @@ export default function CreatePoolPage() {
 
     setIsValidatingToken(true);
     try {
-      const token = await contractClient.getToken(tokenAddress as any);
+      const token = await contractClient.getToken(tokenAddress as Address);
       setTokenInfo({
         symbol: token.symbol,
         name: token.name,
@@ -161,9 +160,6 @@ export default function CreatePoolPage() {
 
   return (
     <div className="min-h-screen relative bg-gradient-pattern overflow-hidden">
-      {/* Enhanced background effects */}
-      <Header />
-
       <main className="container relative mx-auto px-4 py-8">
         <div className="max-w-2xl mx-auto space-y-8">
           {/* Page Header with glass effect */}
@@ -226,7 +222,6 @@ export default function CreatePoolPage() {
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div className="space-y-2">
                     <Label htmlFor="ethAmount" className="text-white flex items-center gap-2">
-                      <DollarSign className="h-4 w-4" />
                       ETH Amount
                     </Label>
                     <Input
@@ -241,7 +236,6 @@ export default function CreatePoolPage() {
 
                   <div className="space-y-2">
                     <Label htmlFor="tokenAmount" className="text-white flex items-center gap-2">
-                      <Coins className="h-4 w-4" />
                       Token Amount
                     </Label>
                     <Input

maelstrom/app/create/page.tsx app/create/page.tsxmaelstrom/app/create/page.tsx renamed to app/create/page.tsx

@@ -1,17 +1,16 @@
 "use client";
 
-import { Header } from "@/components/header";
 import { DashboardOverview } from "@/components/dashboard/dashboard-overview";
 import { PoolsTable } from "@/components/dashboard/pools-table";
 import { RecentActivity } from "@/components/dashboard/recent-activity";
+import { DashboardSkeleton } from "@/components/dashboard/dashboard-skeleton";
 import { useAccount, usePublicClient, useWriteContract } from "wagmi";
 import { ContractClient } from "@/lib/contract-client";
 import { CONTRACT_ADDRESS } from "@/types/contract";
 import { useEffect, useState } from "react";
 import { RowPool } from "@/types/pool";
 import { toast } from "sonner";
-import { set } from "lodash";
-import { formatEther, parseEther } from "viem";
+import { formatEther } from "viem";
 import { Deposit, Withdraw } from "@/types/trades";
 
 export default function DashboardPage() {
@@ -46,16 +45,18 @@ export default function DashboardPage() {
 
   const fetchUserPools = async (poolCount: number) => {
     if (!address) return;
-    if(poolCount == pools.length) return;
+    if (poolCount === 0) return;
     try {
+      const allPools: RowPool[] = [];
       for (let i = 0; i < Math.ceil(poolCount / POOL_FETCH_LIMIT); i++) {
         const userPools = await contractClient.getUserPools(
           address,
           i * POOL_FETCH_LIMIT,
-          Math.min(POOL_FETCH_LIMIT,poolCount - 1)
+          Math.min(i * POOL_FETCH_LIMIT + POOL_FETCH_LIMIT, poolCount - 1)
         );
-        setPools((prevPools) => [...prevPools, ...userPools]);
+        allPools.push(...userPools);
       }
+      setPools(allPools);
     } catch (error) {
       console.error("Error fetching user pools:", error);
       toast.error("Failed to fetch user pools.");
@@ -98,44 +99,42 @@ export default function DashboardPage() {
     }
   };
 
-  const fetchUserLiquidity = async () => {
-    if (!address) return;
-    try {
-      const liquidity = await contractClient.getUserLiquidity(address);
-      setTotalLiquidity(formatEther(BigInt(liquidity)));
-    } catch (error) {
-      console.error("Error fetching user liquidity:", error);
-      toast.error("Failed to fetch user liquidity.");
-    }
-  };
 
-  const calculatePortfolioValue = () => {
+
+  const calculatePortfolioValue = (poolsData: RowPool[]) => {
     let total = 0;
-    for (const pool of pools) {
+    for (const pool of poolsData) {
       const proportion =
-        BigInt(pool.lpToken!.balance) / BigInt(pool.lpToken!.totalSupply);
+        Number(pool.lpToken!.balance) / Number(pool.lpToken!.totalSupply);
       total += Number(proportion) * Number(pool.totalLiquidity);
     }
-    console.log(pools)
-    setPortfolioValue((formatEther(BigInt(total))));
+    return formatEther(BigInt(total));
   };
 
-  const calculateProfit = () => {
-    const gain =
-      ((Number(portfolioValue) - Number(totalLiquidity)) /
-        Number(totalLiquidity)) *
-      100;
-    setTotalProfit(gain.toFixed(2));
+  const calculateProfit = (portfolio: string, liquidity: string) => {
+    const portfolioNum = Number(portfolio);
+    const liquidityNum = Number(liquidity);
+    if (liquidityNum === 0) return "0.00";
+    const gain = ((portfolioNum - liquidityNum) / liquidityNum) * 100;
+    return gain.toFixed(2);
   };
 
   useEffect(() => {
+    if (!address) return;
+
     const fetchData = async () => {
       try {
         setIsLoading(true);
+        
+        // Fetch all data
         const count = await fetchPoolCount();
-        if(count == undefined) throw new Error("Pool count is undefined");
+        if (count === undefined) throw new Error("Pool count is undefined");
+        
         await fetchUserPools(count);
-        await fetchUserLiquidity();
+        const liquidity = await contractClient.getUserLiquidity(address);
+        const liquidityFormatted = formatEther(BigInt(liquidity));
+        setTotalLiquidity(liquidityFormatted);
+        
         await fetchRecentDeposits();
         await fetchRecentWithdrawals();
 
@@ -146,20 +145,26 @@ export default function DashboardPage() {
         setIsLoading(false);
       }
     };
-    const calculateValues = () => {
-      calculatePortfolioValue();
-      calculateProfit();
-      setIsLoading(false);
-    }
+
     fetchData();
-    calculateValues();
-  },[pools]);
+  }, [address]);
+
+  // Separate effect to calculate values when pools or liquidity changes
+  useEffect(() => {
+    if (pools.length > 0 && totalLiquidity !== "0") {
+      const portfolio = calculatePortfolioValue(pools);
+      setPortfolioValue(portfolio);
+      const profit = calculateProfit(portfolio, totalLiquidity);
+      setTotalProfit(profit);
+    }
+  }, [pools, totalLiquidity]);
+
+  if (isLoading) {
+    return <DashboardSkeleton />;
+  }
 
   return (
     <div className="min-h-screen relative bg-gradient-pattern overflow-hidden">
-      {/* Enhanced background effects */}
-      <Header />
-
       <main className="container relative mx-auto px-4 py-8">
         <div className="space-y-8">
           {/* Page Header with glass effect */}

maelstrom/app/dashboard/page.tsx app/dashboard/page.tsxmaelstrom/app/dashboard/page.tsx renamed to app/dashboard/page.tsx

@@ -252,6 +252,10 @@
     animation: slide-up 0.3s ease-out;
   }
 
+  .animate-shimmer {
+    animation: shimmer 2s ease-in-out infinite;
+  }
+
   /* Startup-style liquid animations */
   .animate-liquid-primary {
     animation: liquid-flow-primary 35s ease-in-out infinite;
@@ -768,6 +772,15 @@
   }
 }
 
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 /* Accessibility and reduced motion support */
 @media (prefers-reduced-motion: reduce) {
   .animate-ripple,
@@ -778,6 +791,7 @@
   .animate-pulse-slow,
   .animate-fade-in,
   .animate-slide-up,
+  .animate-shimmer,
   .animate-liquid-primary,
   .animate-liquid-secondary {
     animation: none;

maelstrom/app/globals.css app/globals.cssmaelstrom/app/globals.css renamed to app/globals.css

@@ -1,11 +1,11 @@
 import type React from "react";
 import type { Metadata } from "next";
 import { ThemeProvider } from "@/components/theme-provider";
-import { NotificationProvider } from "@/components/ui/notification-system";
-import { TourProvider } from "@/components/ui/guided-tour";
 import { Suspense } from "react";
 import { Providers } from "@/providers/chain-provider";
 import "./globals.css";
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
 
 export const metadata: Metadata = {
   title: "Maelstrom",
@@ -14,19 +14,24 @@ export const metadata: Metadata = {
   generator: "maelstrom-ui",
   keywords: ["DeFi", "trading", "liquidity", "blockchain", "swap", "tokens"],
   authors: [{ name: "Maelstrom Team" }],
+  icons: {
+    icon: [{ url: "/logo_maelstrom.svg", type: "image/svg+xml" }],
+    shortcut: "/logo_maelstrom.svg",
+    apple: "/logo_maelstrom.svg",
+  },
   openGraph: {
     title: "Maelstrom",
     description:
       "Experience fluid, innovative DeFi trading with advanced liquidity mechanics.",
     type: "website",
-    images: ["/public/logo_maelstrom.svg"],
+    images: ["/logo_maelstrom.svg"],
   },
   twitter: {
     card: "summary_large_image",
     title: "Maelstrom",
     description:
       "Experience fluid, innovative DeFi trading with advanced liquidity mechanics.",
-    images: ["/public/logo_maelstrom.svg"],
+    images: ["/logo_maelstrom.svg"],
   },
 };
 
@@ -46,9 +51,11 @@ export default function RootLayout({
             disableTransitionOnChange
           >
             <Providers>
-              <NotificationProvider>
-                <TourProvider>{children}</TourProvider>
-              </NotificationProvider>
+              <div>
+                <Header />
+                <main>{children}</main>
+                <Footer />
+              </div>
             </Providers>
           </ThemeProvider>
         </Suspense>

maelstrom/app/layout.tsx app/layout.tsxmaelstrom/app/layout.tsx renamed to app/layout.tsx

@@ -1,21 +1,15 @@
-import { Header } from "@/components/header"
 import { HeroSection } from "@/components/landing/hero-section"
 import { ValuePropsSection } from "@/components/landing/value-props-section"
 import { StatsSection } from "@/components/landing/stats-section"
-import { Footer } from "@/components/footer"
-import { RealTimeTicker } from "@/components/ui/real-time-ticker"
 
 export default function LandingPage() {
   return (
     <div className="min-h-screen">
-      <Header />
-      <RealTimeTicker />
       <main className="bg-gradient-pattern overflow-hidden">
         <HeroSection />
         <ValuePropsSection />
         <StatsSection />
       </main>
-      <Footer />
     </div>
   )
 }

maelstrom/app/page.tsx app/page.tsxmaelstrom/app/page.tsx renamed to app/page.tsx

@@ -1,10 +1,8 @@
-import { Header } from "@/components/header"
 import { SwapInterface } from "@/components/swap/swap-interface"
 
 export default function SwapPage() {
   return (
     <div className="min-h-screen bg-gradient-pattern overflow-hidden">
-      <Header />
       <main className="container mx-auto px-4 py-8 relative">
         <div className="max-w-6xl mx-auto">
           {/* Page Header */}

maelstrom/app/swap/page.tsx app/swap/page.tsxmaelstrom/app/swap/page.tsx renamed to app/swap/page.tsx

@@ -1,13 +1,18 @@
 "use client";
 
-import { Header } from "@/components/header";
 import { TokenList } from "@/components/tokens/TokenList";
 import { Card, CardContent } from "@/components/ui/card";
+import { useSearchParams } from "next/navigation";
+import TokenPage from "./pool-detail";
 
 export default function TokensPage() {
+  const searchParams = useSearchParams();
+  const tokenAddress = searchParams.get("tokenAddress");
+  if (tokenAddress) {
+    return <TokenPage tokenAddress={tokenAddress} />;
+  }
   return (
     <div className="min-h-screen overflow-hidden bg-gradient-pattern relative">
-      <Header />
       <main className="container mx-auto px-4 py-8 relative">
         <div className="max-w-screen-xl mx-auto space-y-8">
           {/* Page Header */}