|
| 1 | +--- |
| 2 | +title: op-scan |
| 3 | +lang: en-US |
| 4 | +description: Learn how to launch OP Scan, a block explorer designed for your OP Stack chain. |
| 5 | +--- |
| 6 | + |
| 7 | +import { Callout } from "nextra/components"; |
| 8 | + |
| 9 | +# 🔎 OP Scan |
| 10 | + |
| 11 | +[OP Scan](https://github.com/walnuthq/op-scan) is a transaction explorer tailored specifically for the [OP Stack](https://docs.optimism.io/builders/chain-operators/tutorials/create-l2-rollup) and the [Superchain vision](https://www.youtube.com/watch?v=O6vYNgrQ1LE). |
| 12 | +It's purpose built to be lightweight, so that anyone can run it locally next to their OP Stack nodes, when working on a new rollup. |
| 13 | + |
| 14 | +<Callout> |
| 15 | + Check out the [OP Scan README](https://github.com/walnuthq/op-scan) for |
| 16 | + up-to-date information on how to launch OP Scan. |
| 17 | +</Callout> |
| 18 | + |
| 19 | + |
| 20 | + |
| 21 | +# ⚙️ Installation |
| 22 | + |
| 23 | +The app requires the following dependencies: |
| 24 | + |
| 25 | +``` |
| 26 | +NodeJS >= 22 |
| 27 | +pnpm >= 9 |
| 28 | +``` |
| 29 | + |
| 30 | +### Explorer Configuration |
| 31 | + |
| 32 | +Clone this repository: |
| 33 | + |
| 34 | +```sh |
| 35 | +git clone [email protected]:walnuthq/op-scan |
| 36 | +``` |
| 37 | + |
| 38 | +Install the dependencies: |
| 39 | + |
| 40 | +```sh |
| 41 | +pnpm install |
| 42 | +``` |
| 43 | + |
| 44 | +You will need to copy `.env.local.example` into `.env.local` at the root of your repository and populate it with your own values. |
| 45 | + |
| 46 | +In particular you will need to provide configuration for both L1 and L2 chains: |
| 47 | + |
| 48 | +``` |
| 49 | +NEXT_PUBLIC_L1_CHAIN_ID="11155111" |
| 50 | +NEXT_PUBLIC_L1_NAME="Sepolia" |
| 51 | +NEXT_PUBLIC_L1_RPC_URL="https://eth-sepolia.g.alchemy.com/v2/API_KEY" |
| 52 | +NEXT_PUBLIC_L2_CHAIN_ID="42069" |
| 53 | +NEXT_PUBLIC_L2_NAME="OP Local" |
| 54 | +NEXT_PUBLIC_L2_RPC_URL="http://localhost:8545" |
| 55 | +``` |
| 56 | + |
| 57 | +You can get free node rpcs url by signing up to services such as [Alchemy](https://www.alchemy.com/) or [Infura](https://www.infura.io/). |
| 58 | + |
| 59 | +You will also need to provide your L1 contracts addresses: |
| 60 | + |
| 61 | +``` |
| 62 | +NEXT_PUBLIC_OPTIMISM_PORTAL_ADDRESS="..." |
| 63 | +NEXT_PUBLIC_L1_CROSS_DOMAIN_MESSENGER_ADDRESS="..." |
| 64 | +``` |
| 65 | + |
| 66 | +You will find theses addresses in your rollup deployment artifacts in `contracts-bedrock/deployments/your-deployment/L1Contract.json`. |
| 67 | +Note that you always need to provide the proxy address, not the underlying contract. |
| 68 | + |
| 69 | +If you don't want to run the explorer with your local chain setup, you will find all the necessary environment variables commented in `.env.local.example` to configure the explorer with OP Sepolia or OP Mainnet. |
| 70 | + |
| 71 | +If you want to be able to use the Write Contract feature on verified contracts, you will also need to provide a [Reown](https://docs.reown.com/) project ID. |
| 72 | + |
| 73 | +``` |
| 74 | +NEXT_PUBLIC_REOWN_PROJECT_ID="..." |
| 75 | +``` |
| 76 | + |
| 77 | +### Indexer Configuration |
| 78 | + |
| 79 | +To run the indexer, you first need to setup your `DATABASE_URL` in `.env.local` as well as websocket connections to your L1/L2 chains (once again you can get them from a 3rd-party provider): |
| 80 | + |
| 81 | +``` |
| 82 | +DATABASE_URL="file:dev.db" |
| 83 | +L1_RPC_WS="wss://eth-mainnet.g.alchemy.com/v2/API_KEY" |
| 84 | +L2_RPC_WS="wss://opt-mainnet.g.alchemy.com/v2/API_KEY" |
| 85 | +``` |
| 86 | + |
| 87 | +Then you can sync your local database with the Prisma schema: |
| 88 | + |
| 89 | +```sh |
| 90 | +pnpm prisma:db:push |
| 91 | +``` |
| 92 | + |
| 93 | +We use [Bun](https://bun.sh/) to run the indexer as a long-running script so make sure it is installed globally on your system. |
| 94 | +Now you will be able to start indexing the blockchain by running the `op-indexer` command: |
| 95 | + |
| 96 | +```sh |
| 97 | +pnpm op-indexer |
| 98 | +``` |
| 99 | + |
| 100 | +You should start seeing blocks getting indexed in your terminal and you can explore the state of your local database using Prisma studio: |
| 101 | + |
| 102 | +```sh |
| 103 | +pnpm prisma:studio |
| 104 | +``` |
| 105 | + |
| 106 | +If you need to change the Prisma schema at some point, make sure to regenerate the Prisma client and push to your local database: |
| 107 | + |
| 108 | +```sh |
| 109 | +pnpm prisma:generate |
| 110 | +pnpm prisma:db:push |
| 111 | +``` |
| 112 | + |
| 113 | +Indexing a blockchain is putting a heavy load on the RPC as you need to perform a large number of JSON-RPC requests to fully index a block (along with transactions and logs). |
| 114 | +When indexing non-local chains you will probably encounter 429 errors related to rate-limiting, you may provide up to 3 fallback RPC URLs in case this happens: |
| 115 | + |
| 116 | +``` |
| 117 | +NEXT_PUBLIC_L1_FALLBACK1_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK1_API_KEY" |
| 118 | +NEXT_PUBLIC_L2_FALLBACK1_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK1_API_KEY" |
| 119 | +NEXT_PUBLIC_L1_FALLBACK2_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK2_API_KEY" |
| 120 | +NEXT_PUBLIC_L2_FALLBACK2_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK2_API_KEY" |
| 121 | +NEXT_PUBLIC_L1_FALLBACK3_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK3_API_KEY" |
| 122 | +NEXT_PUBLIC_L2_FALLBACK3_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK3_API_KEY" |
| 123 | +``` |
| 124 | + |
| 125 | +You can pass several parameters to the indexer to control the indexing range and execution: |
| 126 | + |
| 127 | +- `--l2-from-block` (short `-f`, defaults to latest block) start indexing from this L2 block. |
| 128 | +- `--l2-index-block` (short `-b`) index this particular L2 block number. |
| 129 | +- `--l1-from-block` (defaults to latest block) start indexing from this L1 block. |
| 130 | +- `--l1-index-block` index this particular L1 block number. |
| 131 | +- `--index-delay` (short `-d`, defaults to 1000) delay in ms between indexing 2 blocks to avoid overloading the RPC. |
| 132 | + |
| 133 | +Example of running the indexer: |
| 134 | + |
| 135 | +```sh |
| 136 | +pnpm op-indexer -f 123416717 --l1-index-block 20426733 --l1-index-block 20426726 -d 500 |
| 137 | +``` |
| 138 | + |
| 139 | +### Running the Explorer |
| 140 | + |
| 141 | +When you're done configuring your environment variables you can build the app: |
| 142 | + |
| 143 | +```sh |
| 144 | +pnpm build |
| 145 | +``` |
| 146 | + |
| 147 | +Make sure your local chain is started and the indexer is running, then launch the explorer to see it live at `http://localhost:3000` |
| 148 | + |
| 149 | +```sh |
| 150 | +pnpm start |
| 151 | +``` |
| 152 | + |
| 153 | +Alternatively you can launch the explorer in dev mode if you want to customize it |
| 154 | + |
| 155 | +```sh |
| 156 | +pnpm dev |
| 157 | +``` |
0 commit comments