thirdweb-example · Amendris · Sep 1, 2025 · Sep 1, 2025 · Sep 1, 2025 · Sep 1, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,17 +17,19 @@
     "@emotion/styled": "^11.11.5",
     "@tanstack/react-query": "^5.44.0",
     "blo": "^1.2.0",
+    "ethers": "^6.15.0",
     "framer-motion": "^11.2.10",
     "next": "14.2.4",
     "react": "^18",
-    "react-dom": "^18",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "thirdweb": "^5.75.0"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "pino-pretty": "^13.1.1",
     "postcss": "^8",
     "typescript": "^5"
   }

diff --git a/public/images/assets/Image.png b/public/images/assets/Image.png
diff --git a/public/images/assets/bg-gun-2.jpg b/public/images/assets/bg-gun-2.jpg
diff --git a/public/images/assets/bg_component_3.78899868 (1).jpg b/public/images/assets/bg_component_3.78899868 (1).jpg
diff --git a/public/images/assets/button.png b/public/images/assets/button.png
diff --git a/public/images/assets/dark_layout.jpg b/public/images/assets/dark_layout.jpg
diff --git a/public/images/assets/hedera-hbar-h.jpg b/public/images/assets/hedera-hbar-h.jpg
diff --git a/public/images/assets/helm.png b/public/images/assets/helm.png
diff --git a/public/images/assets/home_logo.png b/public/images/assets/home_logo.png
diff --git a/public/images/assets/knife.png b/public/images/assets/knife.png
diff --git a/public/images/assets/pistol.png b/public/images/assets/pistol.png
diff --git a/public/images/assets/texture.jpg b/public/images/assets/texture.jpg
diff --git a/public/images/assets/ub_banner.png b/public/images/assets/ub_banner.png
diff --git a/public/images/assets/weaponpremium.png b/public/images/assets/weaponpremium.png
diff --git a/public/images/dummynfts/default-nft.png b/public/images/dummynfts/default-nft.png
diff --git a/public/images/dummynfts/default-nft0.png b/public/images/dummynfts/default-nft0.png
diff --git a/public/images/dummynfts/default-nft1.png b/public/images/dummynfts/default-nft1.png
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -0,0 +1,15 @@
+/* src/app/globals.css */
+
+/* Opcional: tipografía global si usas system fonts */
+:root {
+  color-scheme: light dark;
+}
+
+/* Reseteos muy leves; Chakra ya maneja la mayoría */
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+
+/* Si quieres, forzá que el body no tape el footer */
+body { min-height: 100dvh; }
+
+/* Deja Chakra trabajar: el fondo y color vendrán del tema UndeadBlocks */
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
 			<body style={{ paddingBottom: "100px" }}>
 				<Providers>
 					<AutoConnect client={client} />
-					<Navbar />
+					{/* <Navbar /> */}
 					{children}
 				</Providers>
 			</body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,113 +1,216 @@
+// "use client";
+
+// import { Link } from "@chakra-ui/next-js";
+// import { Box, Card, CardBody, CardHeader, Flex, Heading, Image, Stack, StackDivider, Text } from "@chakra-ui/react";
+// import BuySellPage from "@/components/buySell-page/buysellpage";
+// import { NFT_CONTRACTS } from "@/consts/nft_contracts";
+// import { hederaMainnet } from "@/consts/chains";
+// import MarketBoard from "@/components/buySell-page/MarketBoard";
+// import AuctionsBoard from "@/components/auctions/AuctionsBoard"
+// export default function Page() {
+//   return (
+//     <>
+//       {/* Bloque 1 */}
+//       <Flex>
+//         <Box mt="24px" m="auto">
+//           <Flex direction="column" gap="4">
+//             {/* Intro card */}
+//             <Card border="1px" maxW="90vw" mx="auto">
+//               <CardHeader>
+//                 <Heading size="md">Marketplace UndeadBlocks</Heading>
+//               </CardHeader>
+
+
+
+//               {/* <CardBody>
+//                 <Stack divider={<StackDivider />} spacing="4">
+//                   {_latestUpdates.map((item) => (
+//                     <Box key={item.title}>
+//                       <Heading size="xs" textTransform="uppercase">
+//                         {item.title}
+//                       </Heading>
+//                       {item.bullet_points.map((pt) => (
+//                         <Text pt="2" fontSize="sm" key={pt}>
+//                           {pt}
+//                         </Text>
+//                       ))}
+//                     </Box>
+//                   ))} 
+//                 </Stack>
+//               </CardBody> */}
+//             </Card>
+
+//             {/* Buy/Sell panel
+//             <Heading ml="20px" mt="40px">
+//               Trending collections
+//             </Heading>
+//             <BuySellPage address="" chain={hederaMainnet} /> */}
+
+//             {/* Collections grid */}
+//             <Flex
+//               direction="row"
+//               wrap="wrap"
+//               mt="20px"
+//               gap="5"
+//               justifyContent="space-evenly"
+//             >
+//               {NFT_CONTRACTS.map((item) => (
+//                 <Link
+//                   _hover={{ textDecoration: "none" }}
+//                   w={300}
+//                   h={400}
+//                   key={`${item.chain.id}-${item.address}`}
+//                   href={`/collection/${item.chain.id.toString()}/${item.address}`}
+//                 >
+//                   <Image
+//                     src={item.thumbnailUrl}
+//                     alt={item.title}
+//                     w="300px"
+//                     h="300px"
+//                     objectFit="cover"
+//                     borderRadius="md"
+//                   />
+//                   <Text fontSize="lg" mt="10px">
+//                     {item.title}
+//                   </Text>
+//                 </Link>
+//               ))}
+//             </Flex>
+//           </Flex>
+//         </Box>
+//       </Flex>
+
+//       {/* Marketplace */}
+//       <Flex direction="column" gap="8" mt="24px" mx="auto" maxW="1200px">
+//         <Box>
+//           <Heading size="lg" mb="4">My NFTs</Heading>
+//           <BuySellPage address="" chain={hederaMainnet} />
+//         </Box>
+
+//         <Box>
+//           <Heading size="lg" mb="4">Marketplace</Heading>
+//           <MarketBoard />
+//             <Box mt="40px">
+//                   <Heading size="lg" mb="4">Auctions</Heading>
+//                   <AuctionsBoard />
+//             </Box>
+//         </Box>
+//       </Flex>
+//     </>
+//   );
+// };
+
+
+
+// // const _latestUpdates: Array<{ title: string; bullet_points: string[] }> = [
+// //   {
+// //     title: "Weapons",
+// //     bullet_points: [
+// //       "Shipped with the latest thirdweb SDK (v5) and Next.js 14 (App router)",
+// //     ],
+// //   },
+// //   {
+// //     title: "Last News",
+// //     bullet_points: [
+// //       "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+// //       "Support for Hedera Mainnet",
+// //     ],
+// //   },
+// //   {
+// //     title: "Multiple collections supported",
+// //     bullet_points: [
+// //       "The new template now supports multiple collections, you can view your owned NFTs and your listings",
+// //     ],
+// //   },
+// //   {
+// //     title: "Upcoming features in game and marketplace",
+// //     bullet_points: [
+// //       "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+// //       "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+// //     ],
+// //   },
+// //   {
+// //     title: "Contribute",
+// //     bullet_points: [
+// //       "We welcome all contributions from the community.",
+// //       "Found a bug or have some suggestions? Send an email to [email protected]",
+// //     ],
+// //   },
+// // ];
+// src/app/page.tsx
 "use client";
 
-import { NFT_CONTRACTS } from "@/consts/nft_contracts";
 import { Link } from "@chakra-ui/next-js";
 import {
   Box,
-  Card,
-  CardBody,
-  CardHeader,
   Flex,
   Heading,
   Image,
-  Stack,
-  StackDivider,
   Text,
 } from "@chakra-ui/react";
+import HeroBanner from "@/components/hero/Herobanner";
+import BuySellPage from "@/components/buySell-page/buysellpage";
+import { NFT_CONTRACTS } from "@/consts/nft_contracts";
+import { hederaMainnet } from "@/consts/chains";
+import MarketBoard from "@/components/buySell-page/MarketBoard";
+import AuctionsBoard from "@/components/auctions/AuctionsBoard";
 
-export default function Home() {
+export default function Page() {
   return (
-    <Flex>
-      <Box mt="24px" m="auto">
-        <Flex direction="column" gap="4">
-          {/* Delete this <Card /> in your own app */}
-          <Card border="1px" maxW="90vw" mx="auto">
-            <CardHeader>
-              <Heading size="md">Marketplace Template v2</Heading>
-            </CardHeader>
+    <>
+      {/* HERO CABECERA (full-width, integra login + theme + Hedera) */}
+      <HeroBanner
+        title="title placeholder"
+        subtitle="subtitle placeholder"
+        ctaText="Call to Action"
+        // opcional: puedes pasar onCtaClick si quieres navegación
+        // onCtaClick={() => router.push("/collection/hedera")}
+        backgroundImage="/images/hero/undeadblocks_hero.jpg"
+        hederaBadgeSrc="/images/hedera-badge.png"
+      />
 
-            <CardBody>
-              <Stack divider={<StackDivider />} spacing="4">
-                {_latestUpdates.map((item) => (
-                  <Box key={item.title}>
-                    <Heading size="xs" textTransform="uppercase">
-                      {item.title}
-                    </Heading>
-                    {item.bullet_points.map((pt) => (
-                      <Text pt="2" fontSize="sm" key={pt}>
-                        {pt}
-                      </Text>
-                    ))}
-                  </Box>
-                ))}
-              </Stack>
-            </CardBody>
-          </Card>
-          <Heading ml="20px" mt="40px">
-            Trending collections
-          </Heading>
-          <Flex
-            direction="row"
-            wrap="wrap"
-            mt="20px"
-            gap="5"
-            justifyContent="space-evenly"
-          >
-            {NFT_CONTRACTS.map((item) => (
-              <Link
-                _hover={{ textDecoration: "none" }}
-                w={300}
-                h={400}
-                key={item.address}
-                href={`/collection/${item.chain.id.toString()}/${item.address}`}
-              >
-                <Image src={item.thumbnailUrl} />
-                <Text fontSize="large" mt="10px">
-                  {item.title}
-                </Text>
-              </Link>
-            ))}
-          </Flex>
-        </Flex>
-      </Box>
-    </Flex>
+      {/* CONTENIDO */}
+      <Flex direction="column" gap="8" mt="24px" mx="auto" maxW="1200px">
+        {/* Grid de colecciones */}
+        {/* <Flex direction="row" wrap="wrap" mt="20px" gap="5" justifyContent="space-evenly">
+          {NFT_CONTRACTS.map((item) => (
+            <Link
+              _hover={{ textDecoration: "none" }}
+              w={300}
+              h={400}
+              key={`${item.chain.id}-${item.address}`}
+              href={`/collection/${item.chain.id.toString()}/${item.address}`}
+            >
+              <Image
+                src={item.thumbnailUrl}
+                alt={item.title}
+                w="300px"
+                h="300px"
+                objectFit="cover"
+                borderRadius="md"
+              />
+              <Text fontSize="lg" mt="10px">
+                {item.title}
+              </Text>
+            </Link>
+          ))}
+        </Flex> */}
+
+        {/* Bloques Marketplace existentes */}
+        <Box>
+          <Heading size="lg" mb="4">My NFTs</Heading>
+          <BuySellPage address="" chain={hederaMainnet} />
+        </Box>
+
+        <Box>
+          <Heading size="lg" mb="4">Marketplace</Heading>
+          <MarketBoard />
+          <Box mt="40px">
+            <Heading size="lg" mb="4">Auctions</Heading>
+            <AuctionsBoard />
+          </Box>
+        </Box>
+      </Flex>
+    </>
   );
 }
-
-// Delete this in your own app
-const _latestUpdates: Array<{ title: string; bullet_points: string[] }> = [
-  {
-    title: "Latest software",
-    bullet_points: [
-      "Shipped with the latest thirdweb SDK (v5) and Next.js 14 (App router)",
-    ],
-  },
-  {
-    title: "Multi-chain",
-    bullet_points: [
-      "Seamlessly trade and browse items on multiple chains",
-      "You'd have to deploy a thirdweb Marketplace V3 contract on each of the chains you want to support",
-    ],
-  },
-  {
-    title: "Multiple collections supported",
-    bullet_points: [
-      "The new template now supports multiple collections, you can view your owned NFTs and your listings",
-    ],
-  },
-  {
-    title: "Upcoming features",
-    bullet_points: [
-      "Select different currencies (ERC20) when creating listings",
-      "UI for English Auctions",
-    ],
-  },
-  {
-    title: "Contribute",
-    bullet_points: [
-      "We welcome all contributions from the community.",
-      "Found a bug or have some suggestions? Create a GitHub issue!",
-      "Repo: https://github.com/thirdweb-example/marketplace-template",
-    ],
-  },
-];