Update file for Staking(Done)

app/api/alchemy-iscontract/route.ts

@@ -0,0 +1,165 @@
+import { NextResponse } from "next/server";
+
+const ALCHEMY_API_KEY = process.env.ALCHEMY_API_KEY;
+const ALCHEMY_API_URL = `https://eth-mainnet.g.alchemy.com/v2/${ALCHEMY_API_KEY}`;
+
+interface ContractData {
+  isContract: boolean;
+  contractInfo?: {
+    name: string;
+    symbol?: string;
+    tokenType?: 'ERC20' | 'ERC721' | 'ERC1155';
+    totalSupply?: string;
+    decimals?: number;
+    logo?: string;
+    holders?: number;
+    transactions?: number;
+    deployedAt?: string;
+    implementationAddress?: string;
+    verified: boolean;
+  };
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const address = searchParams.get("address");
+
+  if (!address) {
+    return NextResponse.json(
+      { error: "Address is required" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    // Check if address is a contract
+    const codeResponse = await fetch(ALCHEMY_API_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        jsonrpc: '2.0',
+        id: 1,
+        method: 'eth_getCode',
+        params: [address, 'latest']
+      })
+    });
+
+    const codeData = await codeResponse.json();
+    const isContract = codeData.result !== '0x';
+
+    if (!isContract) {
+      return NextResponse.json({ isContract: false });
+    }
+
+    // Check contract interfaces to determine type
+    const [erc721Response, erc1155Response] = await Promise.all([
+      // Check ERC721 interface
+      fetch(ALCHEMY_API_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          jsonrpc: '2.0',
+          id: 2,
+          method: 'eth_call',
+          params: [{
+            to: address,
+            data: '0x01ffc9a780ac58cd00000000000000000000000000000000000000000000000000000000'
+          }, 'latest']
+        })
+      }),
+      // Check ERC1155 interface
+      fetch(ALCHEMY_API_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          jsonrpc: '2.0',
+          id: 3,
+          method: 'eth_call',
+          params: [{
+            to: address,
+            data: '0x01ffc9a7d9b67a2600000000000000000000000000000000000000000000000000000000'
+          }, 'latest']
+        })
+      })
+    ]);
+
+    const [erc721Data, erc1155Data] = await Promise.all([
+      erc721Response.json(),
+      erc1155Response.json()
+    ]);
+
+    // Get token metadata
+    const metadataResponse = await fetch(ALCHEMY_API_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        jsonrpc: '2.0',
+        id: 4,
+        method: 'alchemy_getTokenMetadata',
+        params: [address]
+      })
+    });
+
+    const metadataData = await metadataResponse.json();
+    const metadata = metadataData.result;
+
+    // Determine token type
+    let tokenType: 'ERC20' | 'ERC721' | 'ERC1155' | undefined;
+
+    if (erc721Data.result === '0x0000000000000000000000000000000000000000000000000000000000000001') {
+      tokenType = 'ERC721';
+    } else if (erc1155Data.result === '0x0000000000000000000000000000000000000000000000000000000000000001') {
+      tokenType = 'ERC1155';
+    } else if (metadata?.decimals !== undefined) {
+      tokenType = 'ERC20';
+    }
+
+    // Get deployment info
+    const deploymentResponse = await fetch(ALCHEMY_API_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        jsonrpc: '2.0',
+        id: 5,
+        method: 'alchemy_getAssetTransfers',
+        params: [
+          {
+            fromBlock: "0x0",
+            toAddress: address,
+            category: ["external"],
+            withMetadata: true,
+            excludeZeroValue: true,
+            maxCount: "0x1"
+          }
+        ]
+      })
+    });
+
+    const deploymentData = await deploymentResponse.json();
+    const deployment = deploymentData.result?.transfers?.[0];
+
+    const contractData: ContractData = {
+      isContract: true,
+      contractInfo: {
+        name: metadata?.name || "Unknown Contract",
+        symbol: metadata?.symbol,
+        tokenType,
+        totalSupply: metadata?.totalSupply,
+        decimals: metadata?.decimals,
+        logo: metadata?.logo,
+        holders: 0,
+        transactions: 0,
+        deployedAt: deployment?.metadata?.blockTimestamp,
+        verified: Boolean(metadata?.name),
+      }
+    };
+
+    return NextResponse.json(contractData);
+  } catch (error) {
+    console.error("Error detecting contract:", error);
+    return NextResponse.json(
+      { error: "Failed to detect contract" },
+      { status: 500 }
+    );
+  }
+}

app/block-txns/page.tsx

@@ -57,6 +57,12 @@ export default function BlockTransactions() {
 
   useEffect(() => {
     const fetchBlockData = async () => {
+      // Reset states when starting a new fetch
+      setLoading(true);
+      setError(null);
+      setBlockData(null);
+      setPage(1); // Reset pagination when new block is loaded
+
       if (!blockNumber) {
         setError("Block number is required");
         setLoading(false);
@@ -82,7 +88,6 @@ export default function BlockTransactions() {
       }
     };
 
-    setLoading(true);
     fetchBlockData();
   }, [blockNumber]);
 
@@ -166,7 +171,7 @@ export default function BlockTransactions() {
           </div>
         </div>
 
-        <Card className="bg-transparent border-amber-500/20 shadow-xl hover:shadow-amber-500/10 transition-all duration-500 rounded-[10px]">
+        <Card className="bg-transparent border-amber-500/20 shadow-xl hover:shadow-amber-500/10 transition-all duration-500 rounded-[10px] backdrop-blur-sm">
           <CardContent className="p-6">
             {totalTransactions > 0 ? (
               <>

app/block/page.tsx

@@ -10,7 +10,7 @@ import {
   Loader2, Copy, ExternalLink, 
   Clock, Hash, ChevronUp,
   Cpu, Fuel, Pickaxe,
-  Database, Layers
+  Database, Layers, ArrowLeft
 } from "lucide-react";
 import { toast } from "sonner";
 import { format } from "date-fns";
@@ -54,6 +54,11 @@ export default function BlockDetails() {
 
   useEffect(() => {
     const fetchBlock = async () => {
+      // Reset states when starting a new fetch
+      setLoading(true);
+      setError(null);
+      setBlock(null);
+
       if (!blockNumber) {
         setError("Block number is required");
         setLoading(false);
@@ -69,8 +74,11 @@ export default function BlockDetails() {
         }
 
         setBlock(data);
+        setError(null);
       } catch (err) {
+        console.error("Error fetching block:", err);
         setError(err instanceof Error ? err.message : "Failed to fetch block details");
+        setBlock(null);
       } finally {
         setLoading(false);
       }
@@ -99,15 +107,30 @@ export default function BlockDetails() {
 
   if (error || !block) {
     return (
-      <div className="container mx-auto p-4">
-        <Card className="mt-8 border-red-500/50">
-          <CardContent className="p-6">
-            <div className="text-center text-red-500">
-              <p className="text-lg">{error || "Block not found"}</p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+      <>
+        <ParticlesBackground />
+        <motion.div 
+          initial={{ opacity: 0 }} 
+          animate={{ opacity: 1 }}
+          className="container mx-auto p-4"
+        >
+          <Card className="mt-8 border-red-500/50">
+            <CardContent className="p-6">
+              <div className="text-center text-red-500">
+                <p className="text-lg">{error || "Block not found"}</p>
+                <Button
+                  variant="ghost"
+                  className="mt-4 text-amber-500 hover:text-amber-400"
+                  onClick={() => router.back()}
+                >
+                  <ArrowLeft className="h-4 w-4 mr-2" />
+                  Go Back
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </>
     );
   }
 
@@ -120,7 +143,7 @@ export default function BlockDetails() {
       transition={{ duration: 0.5 }}
       className="container mx-auto p-4"
     >
-      <Card className="mt-8 bg-transparent border-amber-500/20 shadow-xl hover:shadow-amber-500/10 transition-all duration-500">
+      <Card className="mt-8 bg-transparent border-amber-500/20 shadow-xl hover:shadow-amber-500/10 transition-all duration-500 backdrop-blur-sm rounded-[10px]">
         <CardContent className="p-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <InfoCard title="Block Number" icon={Layers}>