Feat/as w4 d2

assignments/7-block-explorer/block-explorer/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

assignments/7-block-explorer/block-explorer/README.md

@@ -0,0 +1,36 @@
+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.

assignments/7-block-explorer/block-explorer/app/block/[blocknumber]/page.tsx

@@ -0,0 +1,49 @@
+import { Header } from '@/app/components/header'
+import Overview from '@/app/components/overview'
+
+type BlockTag = "latest" | "pending" | "finalized" | "safe" | string;
+
+async function getBlockByNumber(
+  blocknumber: BlockTag,
+  fullTxObjects: boolean
+) {
+  const res = await fetch('https://ethereum-rpc.publicnode.com', {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      jsonrpc: "2.0",
+      id: 1,
+      method: "eth_getBlockByNumber",
+      params: [blocknumber, fullTxObjects],
+    }),
+  });
+
+  const response = await res.json();
+  console.log('Fetched Block Data:', response);
+  return response.result;
+}
+
+function toHexBlockNumber(decimal: string) {
+  return "0x" + Number(decimal).toString(16);
+}
+
+const Blockpage = async ({ params }: { params: Promise<{ blocknumber: string }> }) => {
+   const { blocknumber } = await params;
+  console.log('Requested Block Number:', blocknumber);
+  console.log('Type of Block Number:', typeof blocknumber);
+  const hexBlockNumber = toHexBlockNumber(blocknumber);
+  console.log('Hex Block Number:', hexBlockNumber);
+
+  const block = await getBlockByNumber(hexBlockNumber, true);
+
+  return (
+    <div className="p-4">
+      <Header />
+      <div className="p-5">
+        <Overview block={block} />
+      </div>
+    </div>
+  );
+};
+
+export default Blockpage;

assignments/7-block-explorer/block-explorer/app/components/Navbar.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Searchbar } from './searchbar'
+import { FaHome } from "react-icons/fa";
+
+
+
+export const Navbar = () => {
+  return (
+    <div className='flex justify-between items-center p-5 '>
+    <div className="mx-3">
+  <h1 className="text-2xl font-extrabold tracking-tight text-green-500 drop-shadow-sm">
+    Block Explorer
+  </h1>
+</div>
+
+   <div><Searchbar/></div> 
+   <div><FaHome className="w-6 h-6 text-green-500"/></div> 
+   </div>
+  )
+}

assignments/7-block-explorer/block-explorer/app/components/OverviewItem.tsx

@@ -0,0 +1,16 @@
+const Item = ({
+  label,
+  value,
+}: {
+  label: string
+  value: React.ReactNode
+}) => (
+  <div className="flex flex-col">
+    <span className="text-gray-500">{label}:</span>
+    <span className="text-gray-900 dark:text-gray-100">
+      {value}
+    </span>
+  </div>
+)
+
+export default Item

assignments/7-block-explorer/block-explorer/app/components/header.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Navbar } from './Navbar';
+
+export const Header = () => {
+  return (
+    <div>
+       <div className='flex  w-full  justify-evenly items-center text-gray-400 my-1 font-sans border-b-2 border-green-700 pb-3 shadow-lg'>
+            <div className='
+            text-xs  mx-3 border-2
+             border-green-500 rounded-lg
+             shadow-cyan-300 p-5'>
+                ETH Price: $20000
+            </div>
+
+              <div className='
+            text-xs  mx-3 border-2
+             border-green-500 rounded-lg
+             shadow-cyan-300 p-5'>
+                Market Cap: $20000
+            </div>
+
+             <div className='
+            text-xs  mx-3 border-2
+             border-green-500 rounded-lg
+             shadow-cyan-300 p-5'>
+                Transactions: $20000
+            </div>
+       </div>
+
+  <div>
+    <Navbar/>
+    </div>      
+
+        </div>
+  )
+};

assignments/7-block-explorer/block-explorer/app/components/overview.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import Item from "./OverviewItem"
+
+const weiToEth = (wei: string) =>
+  Number(BigInt(wei)) / 1e18
+
+const gweiFromWei = (wei: string) =>
+  Number(BigInt(wei)) / 1e9
+
+const formatTimestamp = (timestampHex: string) => {
+  const ts = parseInt(timestampHex, 16) * 1000
+  const date = new Date(ts)
+  return date.toUTCString()
+}
+
+const Overview = ({ block }: { block: any }) => {
+  if (!block) return null
+
+  const burntFeesWei = (BigInt(block.baseFeePerGas) * BigInt(block.gasUsed)).toString();
+   const burntFeesEth = weiToEth(burntFeesWei);
+
+  const blockNumber = parseInt(block.number, 16)
+  const gasUsed = parseInt(block.gasUsed, 16)
+  const gasLimit = parseInt(block.gasLimit, 16)
+  const size = parseInt(block.size, 16)
+  const txCount = block.transactions.length
+
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0b0e14] p-6">
+
+      {/* Header */}
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold">
+          Block <span className="text-blue-600">#{blockNumber}</span>
+        </h2>
+      </div>
+
+      {/* Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-4 text-sm">
+
+        <Item label="Block Height" value={blockNumber} />
+
+        <Item
+          label="Status"
+          value={
+            <span className="px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+              Unfinalized
+            </span>
+          }
+        />
+
+        <Item
+          label="Timestamp"
+          value={formatTimestamp(block.timestamp)}
+        />
+
+        <Item
+          label="Transactions"
+          value={`${txCount} transactions`}
+        />
+
+        <Item
+          label="Withdrawals"
+          value={`${block.withdrawals?.length ?? 0} withdrawals`}
+        />
+
+        <Item
+          label="Fee Recipient"
+          value={
+            <span className="text-blue-600 break-all">
+              {block.miner}
+            </span>
+          }
+        />
+
+        <Item
+          label="Gas Used"
+          value={`${gasUsed.toLocaleString()} (${(
+            (gasUsed / gasLimit) *
+            100
+          ).toFixed(2)}%)`}
+        />
+
+        <Item label="Gas Limit" value={gasLimit.toLocaleString()} />
+        <Item label="Size" value={`${size.toLocaleString()} bytes`} />
+
+        <Item
+          label="Base Fee Per Gas"
+          value={`${gweiFromWei(block.baseFeePerGas).toFixed(9)} Gwei`}
+        />
+
+        <Item
+          label="Burnt Fees"
+          value={
+            <span className="text-orange-600 font-medium">
+              🔥{burntFeesEth.toFixed(6)} ETH
+            </span>
+          }
+        />
+
+        <Item
+          label="Extra Data"
+          value={
+            <div className="break-all text-xs text-gray-500">
+              {block.extraData}
+            </div>
+          }
+        />
+
+      </div>
+    </div>
+  )
+}
+
+export default Overview

assignments/7-block-explorer/block-explorer/app/components/searchbar.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { useState } from "react";
+import { obg } from "../utils/obj";
+
+export const Searchbar = () => {
+  const [open, setOpen] = useState(false);
+  const [category, setCategory] = useState(obg[0].name);
+
+  const toggleDropdown = () => setOpen((prev) => !prev);
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="relative flex items-stretch h-12 rounded-xl shadow-lg border border-green-500/30">
+
+        {/* Category dropdown */}
+        <button
+          type="button"
+          onClick={toggleDropdown}
+          className="flex items-center gap-2 px-4 text-sm font-medium text-green-500 bg-green-500/10 hover:bg-green-500/20 border-r border-green-500/30 rounded-l-xl"
+        >
+          {category}
+          <svg
+            className={`w-4 h-4 transition-transform ${open ? "rotate-180" : ""}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="m19 9-7 7-7-7" />
+          </svg>
+        </button>
+
+        {/* Dropdown menu */}
+        {open && (
+          <div className="absolute top-full left-0 mt-1 w-44 bg-neutral-900 border border-green-500/30 rounded-lg shadow-xl z-20">
+            {obg.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => {
+                  setCategory(item.name);
+                  setOpen(false);
+                }}
+                className="w-full text-left px-4 py-2 text-sm text-green-400 hover:bg-green-500/10"
+              >
+                {item.name}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Search input */}
+        <input
+          type="search"
+          placeholder="Search by Address / Txn Hash / Block"
+          className="flex-1 px-5 text-sm bg-transparent text-green-200 placeholder-green-500/50 focus:outline-none"
+        />
+
+        {/* Search button */}
+        <button
+          type="submit"
+          className="px-6 bg-green-500 text-black font-semibold hover:bg-green-400 transition rounded-r-xl"
+        >
+          Search
+        </button>
+      </div>
+    </div>
+  );
+};