-
-
Blocks
-
-
- {flashMode &&
-
Flashblocks
-
- }
+ return (
+
+
+
Blocks
+
- );
+ {flashMode &&
+
Flashblocks
+
+ }
+
+ );
};
const sendTransactionButton = () => {
@@ -100,7 +101,7 @@ export function BlockExplorer() {
if (txns[txn]) {
return txns;
}
- return {...txns, [txn]: true};
+ return { ...txns, [txn]: true };
});
}}
/>
@@ -114,6 +115,16 @@ export function BlockExplorer() {
Start Building
+
{sendTransactionButton()}
diff --git a/src/hooks/useFlashblocks.ts b/src/hooks/useFlashblocks.ts
index a0384e3..da175a6 100644
--- a/src/hooks/useFlashblocks.ts
+++ b/src/hooks/useFlashblocks.ts
@@ -1,8 +1,8 @@
-import {useEffect, useState} from 'react';
-import {Block, SubBlock} from "@/utils/block-utils";
-import {parseTransaction} from 'viem/op-stack';
-import {OpStackTransactionSerialized} from "viem/chains";
-import {keccak256, TransactionRequestBase} from "viem";
+import { useEffect, useState } from 'react';
+import { Block, SubBlock } from "@/utils/block-utils";
+import { parseTransaction } from 'viem/op-stack';
+import { OpStackTransactionSerialized } from "viem/chains";
+import { keccak256, TransactionRequestBase } from "viem";
interface Flashblock {
payload_id: string;
@@ -44,7 +44,7 @@ export function flashBlockToBlock(flashBlock: Flashblock): Block {
}],
};
- flashBlock.diff.transactions.map((t ) => {
+ flashBlock.diff.transactions.map((t) => {
const tx = parseTransaction(t as OpStackTransactionSerialized) as TransactionRequestBase;
block.subBlocks[0].transactions.push({
hash: keccak256(t as `0x{string}`),
@@ -67,7 +67,7 @@ function updateBlock(block: Block, flashBlock: Flashblock): Block {
};
flashBlock.diff.transactions.map((t) => {
- const tx = parseTransaction(t as OpStackTransactionSerialized) ;
+ const tx = parseTransaction(t as OpStackTransactionSerialized);
newSubBlock.transactions.push({
hash: keccak256(t as `0x{string}`),
from: "",
@@ -96,11 +96,20 @@ const clamp = (data: Block[]): Block[] => {
return data;
}
-export const useFlashblocks = (): State => {
- const url = process.env.NEXT_PUBLIC_WEBSOCKET_URL
- if (!url) {
- throw new Error("No websocket URL provided");
- }
+export const useFlashblocks = (network: string): State => {
+ const getWebsocketUrl = (network: string) => {
+ switch (network) {
+ case 'sepolia':
+ return "wss://flashbots-base-sepolia.flashbots.net";
+ case 'mainnet':
+ // TODO: Replace with actual mainnet URL when available
+ return "wss://flashbots-base-mainnet.flashbots.net";
+ default:
+ return "wss://flashbots-base-sepolia.flashbots.net";
+ }
+ };
+
+ const url = getWebsocketUrl(network);
const [state, setState] = useState
({
blocks: [],
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1e410a8..3987c1e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,9 @@
-import {BlockExplorer} from "@/components/block-explorer";
-import {createConfig, http, WagmiProvider} from "wagmi";
-import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
-import {baseSepolia} from "viem/chains";
+import { BlockExplorer } from "@/components/block-explorer";
+import { createConfig, http, WagmiProvider } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { baseSepolia } from "viem/chains";
+import { useState } from "react";
+import { useFlashblocks } from "@/hooks/useFlashblocks";
const config = createConfig({
chains: [baseSepolia],
@@ -13,6 +15,9 @@ const config = createConfig({
const queryClient = new QueryClient()
export default function Home() {
+ const [selectedNetwork, setSelectedNetwork] = useState('sepolia');
+ const { blocks, pendingBlock } = useFlashblocks(selectedNetwork);
+
return (