feat: trades page

elizaOS · Dec 5, 2024 · 281e93d · 281e93d
1 parent e883a9c
commit 281e93d
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 30 deletions.
diff --git a/src/components/trades/Trades.tsx b/src/components/trades/Trades.tsx
@@ -1,6 +1,7 @@
 import type { FC } from "react"
 import Image from "next/image"
 import styles from "./Trades.module.css"
+import { AvatarWithFallback } from "../leaderboard/AvatarImage"
 
 interface Trade {
   id: string
@@ -21,32 +22,37 @@ interface Trade {
 }
 
 const TradeRow: FC<{ trade: Trade }> = ({ trade }) => (
-  <div className="flex items-center justify-between bg-[#1C1C1C] rounded-lg p-4 mb-2">
-    <div className="flex items-center gap-3">
-      <div className="relative">
+  <div className="mb-2 flex items-center justify-between rounded-3xl bg-[#2d2d2d] p-3.5">
+    <div className="flex items-center gap-2">
+      <div className="relative h-[34px] w-[34px]">
+        <div className="absolute bottom-0 right-0 z-10 inline-flex items-center justify-center rounded-full border-2 border-[#2d2d2d]">
+          <AvatarWithFallback
+            src={trade.user.avatarUrl}
+            name={trade.user.name}
+            size={24}
+            className="h-[24px] max-h-[24px] min-h-[24px] w-[24px] min-w-[24px] max-w-[24px]"
+          />
+        </div>
         <Image
-          src="/solana-logo.png"
+          src="/logo_solana.svg"
           alt="Solana Logo"
-          width={24}
-          height={24}
-          className="absolute top-0 right-0"
-        />
-        <Image
-          src={trade.user.avatarUrl}
-          alt={trade.user.name}
-          width={40}
-          height={40}
-          className="rounded-full"
+          width={17}
+          height={17}
+          className="absolute left-0 top-0"
         />
       </div>
       <div className="flex flex-col">
-        <span className="text-white text-lg">{trade.type}</span>
+        <span className="text-lg text-white">{trade.type}</span>
         <span className="text-gray-400">{trade.user.name}</span>
       </div>
     </div>
     <div className="flex flex-col items-end">
-      <span className="text-green-400">+{trade.tokenOut.amount.toLocaleString()} ${trade.tokenOut.symbol}</span>
-      <span className="text-white">-{trade.tokenIn.amount} {trade.tokenIn.symbol}</span>
+      <span className="text-green-400">
+        +{trade.tokenOut.amount.toLocaleString()} ${trade.tokenOut.symbol}
+      </span>
+      <span className="text-white">
+        -{trade.tokenIn.amount} {trade.tokenIn.symbol}
+      </span>
     </div>
   </div>
 )
@@ -60,26 +66,44 @@ const Trades: FC = () => {
       type: "Swapped",
       tokenIn: { amount: 100, symbol: "SOL" },
       tokenOut: { amount: 234324, symbol: "WIF" },
-      user: { name: "Jupiter", avatarUrl: "/avatar.png" }
+      user: { name: "Jupiter", avatarUrl: "/avatar.png" },
+    },
+    {
+      id: "2",
+      date: new Date("2024-11-12"),
+      type: "Swapped",
+      tokenIn: { amount: 100, symbol: "SOL" },
+      tokenOut: { amount: 234324, symbol: "WIF" },
+      user: { name: "Jupiter", avatarUrl: "/avatar.png" },
+    },
+    {
+      id: "2",
+      date: new Date("2024-11-14"),
+      type: "Swapped",
+      tokenIn: { amount: 100, symbol: "SOL" },
+      tokenOut: { amount: 234324, symbol: "WIF" },
+      user: { name: "Jupiter", avatarUrl: "/avatar.png" },
     },
     // Add more mock trades as needed
   ]
 
   return (
-    <div className="max-w-4xl mx-auto p-4">
-      <h1 className="text-4xl font-bold text-white text-center mb-4">Marc's Trades</h1>
-      <p className="text-gray-400 text-center mb-8">
-        Join our discord for access to Marc's Cabal Chat.
+    <div className="mx-auto w-full max-w-xl py-12">
+      <h1 className="mb-4 text-center text-4xl font-bold text-white">
+        Marc&apos;s Trades
+      </h1>
+      <p className="mb-8 text-center text-gray-400">
+        Join our discord for access to Marc&apos;s Cabal Chat.
       </p>
-      
+
       <div className="space-y-4">
-        {trades.map(trade => (
+        {trades.map((trade) => (
           <div key={trade.id}>
-            <div className="text-gray-400 mb-2">
-              {trade.date.toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric',
-                year: 'numeric'
+            <div className="mb-2 text-gray-400">
+              {trade.date.toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
               })}
             </div>
             <TradeRow trade={trade} />

diff --git a/src/pages/trades.tsx b/src/pages/trades.tsx
@@ -1,6 +1,9 @@
 import type { NextPage } from "next"
 import Head from "next/head"
 import Trades from "../components/trades/Trades"
+import NavBar from "@/components/nav-element/NavBar"
+import Link from "next/link"
+import { ContentContainer } from "@/components/ContentContainer"
 
 const TradesPage: NextPage = () => {
   return (
@@ -12,7 +15,21 @@ const TradesPage: NextPage = () => {
           content="View Marc's trading activity and performance"
         />
       </Head>
-      <Trades />
+      <NavBar>
+        <Link
+          href="https://gmgn.ai/sol/address/GnGSB33wYPgJFei8nsGyYRDgaeZrpcLbWoAbEPuSE9QV"
+          className="inline-flex items-center rounded-full bg-white/20 px-3.5 py-2 transition-all duration-300 hover:bg-white/30"
+        >
+          <span className="text-base font-semibold text-white">
+            View Wallet
+          </span>
+        </Link>
+      </NavBar>
+      <main className="flex flex-1 justify-center">
+        <ContentContainer>
+          <Trades />
+        </ContentContainer>
+      </main>
     </div>
   )
 }