Giter Club home page Giter Club logo

op-scan's Introduction

Warning

This project is under active development and not yet suitable for production. For questions or feature requests, contact us on Telegram or submit an issue. To track progress, star the repository. Supported by an Optimism grant, the project is divided into four milestones. This warning will be removed after completion of Milestone 4.

  • Milestone 1: Homepage and basic nav (current stage)
  • Milestone 2: Tx detail page
  • Milestone 3: Contract detail page
  • Milestone 4: Feedback incorporation and polish

🔎 OP Scan

OP Scan is a transaction explorer tailored specifically for the OP Stack and the Superchain vision. 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.

screenshot

🦄 How OP Scan Differs from Other Explorers

  1. Lightweight: The code and dependencies are designed to be minimalistic. This ensures minimal resource consumption, allowing anyone to run it locally alongside an OP Stack node when working on a rollup.
  2. OP Stack Native: This explorer is purpose-built for the OP Stack. It ensures 100% compatibility with rollups in Optimism’s Superchain.
  3. Scalable: Despite its lightweight design, the explorer is built to handle any scale.
  4. Open Source: All code is open source from day one. This alignment with the community allows anyone to contribute or fork the repository to meet their specific needs.

🙋‍♀️ Share Feedback by Submitting an Issue

OP Scan is built for rollups built on the OP Stack. If you are interested in it, have feedback or feature request, submit an issue here.

⚙️ Installation

The app requires the following dependencies:

NodeJS >= 20
pnpm >= 9

Run the Explorer Locally

Clone this repository:

git clone [email protected]:walnuthq/op-scan

Install the dependencies:

pnpm install

You will need to copy .env.local.example into .env.local at the root of your repository and populate it with your own values.

In particular you will need to provide configuration for both L1 and L2 chains:

NEXT_PUBLIC_L1_CHAIN_ID="11155111"
NEXT_PUBLIC_L1_NAME="Sepolia"
NEXT_PUBLIC_L1_RPC_URL="https://eth-sepolia.g.alchemy.com/v2/API_KEY"
NEXT_PUBLIC_L2_CHAIN_ID="42069"
NEXT_PUBLIC_L2_NAME="OP Local"
NEXT_PUBLIC_L2_RPC_URL="http://localhost:8545"

You can get free node rpcs url by signing up to services such as Alchemy or Infura.

You will also need to provide your L1 contracts addresses:

NEXT_PUBLIC_DISPUTE_GAME_FACTORY_ADDRESS="..."
NEXT_PUBLIC_L2_OUTPUT_ORACLE_ADDRESS="..."
NEXT_PUBLIC_OPTIMISM_PORTAL_ADDRESS="..."
NEXT_PUBLIC_L1_STANDARD_BRIDGE_ADDRESS="..."
NEXT_PUBLIC_L1_CROSS_DOMAIN_MESSENGER_ADDRESS="..."

You will find theses addresses in your rollup deployment artifacts in contracts-bedrock/deployments/your-deployment/L1Contract.json. Note that you always need to provide the proxy address, not the underlying contract.

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 Mainnet.

When you're done configuring your environment variables you can build the app:

pnpm build

Make sure your local chain is started and launch the explorer to see it running at http://localhost:3000

pnpm start

Run the Indexer

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):

DATABASE_URL="file:dev.db"
L1_RPC_WSS="wss://eth-mainnet.g.alchemy.com/v2/API_KEY"
L2_RPC_WSS="wss://opt-mainnet.g.alchemy.com/v2/API_KEY"

Then you can sync your local database with the Prisma schema:

pnpm prisma:db:push

We use Bun to run the indexer as a long-running script so make sure it is installed globally on your system. Now you will be able to start indexing the blockchain by running the op-indexer command:

pnpm op-indexer

You should start seeing blocks getting indexed in your terminal and you can explore the state of your local database using Prisma studio:

pnpm prisma:studio

If you need to change the Prisma schema at some point, make sure to regenerate the Prisma client and push to your local database:

pnpm prisma:generate
pnpm prisma:db:push

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). You will probably meet 429 errors related to rate-limiting, you may provide up to 2 fallback RPC URLs in case this happens:

NEXT_PUBLIC_L1_FALLBACK1_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK1_API_KEY"
NEXT_PUBLIC_L2_FALLBACK1_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK1_API_KEY"
NEXT_PUBLIC_L1_FALLBACK2_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK2_API_KEY"
NEXT_PUBLIC_L2_FALLBACK2_RPC_URL="https://opt-mainnet.g.alchemy.com/v2/FALLBACK2_API_KEY"

You can pass several parameters to the indexer to control the indexing range and execution:

  • --l2-from-block (short -f, defaults to latest block) start indexing from this L2 block.
  • --l2-index-block (short -b) index this particular L2 block number.
  • --l1-from-block (defaults to latest block) start indexing from this L1 block.
  • --l1-index-block index this particular L1 block number.
  • --index-delay (short -d, defaults to 1000) delay in ms between indexing 2 blocks to avoid overloading the RPC.

Example of running the indexer:

pnpm op-indexer -f 123416717 --l1-index-block 20426733 --l1-index-block 20426726 -d 500

🚀 Deploying

Deployments are handled automatically by Vercel, as soon as your PR is merged to main.

🤗 Contributing

Head on to the issues tab to find a list of open contributions. Before making your first contribution, get familiar with our contributor guidelines.

op-scan's People

Contributors

saimeunt avatar danielcdz avatar armandocodecr avatar mazurroman avatar dprof-in-tech avatar bhavyagosai avatar benjtalkshow avatar ugo-x avatar melnikga avatar adrianvrj avatar joelvr17 avatar coxmars avatar joy-adah avatar jaipaljadeja avatar juandiegocv27 avatar matthieuauger avatar renzobanegass avatar

Stargazers

Michael avatar  avatar  avatar  avatar tEmhItHoRpHe avatar RAJAT PRAKASH avatar Poulav Bhowmick avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar Roman avatar Fishon Amos avatar Abdulhakeem Abdulazeez Ayodeji avatar  avatar Wolf avatar Luis Jiménez avatar martin machiebe avatar Asher avatar Aguwa Blessing avatar  avatar

op-scan's Issues

Explore integration of Sourcify for Contract Verification

Explore integration of Sourcify for Contract Verification

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

In the future, we plan to add contract verification into the explorer.

What we want to achieve ideally:

  • On a Contract page, it will query sourcify to check if it has the source code. If yes it downloads it and presents it
  • On a Contract page, new flow is created for verifying contracts. The contracts will be uploaded to Sourcify's public database

The goal of this task is to try to implement a POC (quick&dirty) integration with Sourcify (https://github.com/ethereum/sourcify) to see if it's a good solution for our needs. Mainly:

  • Is it possible to leverage Sourcify's publicly hosted service to query code and also upload code for verification?
  • Any roadblocks / problems / issues?

Latest blocks page

Latest blocks page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

  • As a user, I want to see the list of the latest block created on the blockchain by visiting /blocks
  • I want to see a table of the list of newly created blocks as well as the entire history through pagination. The detail for each block should be block number, timestamp, txns count, gas used and gas limit.

Validation

It should look like the Etherscan latest blocks list: https://optimistic.etherscan.io/blocks

Image

For the gas used column, you should add the percentage against gas limit and you can show a progress bar using https://ui.shadcn.com/docs/components/progress
Don't forget to add links to block details page /block/:number and block txs /block/:number/txs page.

Do NOT include block metrics such as Network utilization, block size, etc.
Do NOT add a "Download Page Data" button.
Do NOT add a "Show rows" dropdown, this is out of scope for this issue.

Implementation

Use a simple table from shadcn/ui, always display 25 blocks and use a query parameter to handle pagination:
If current block head is 100 then

  • /blocks => blocks 100 => 76
  • /blocks?p=2 => blocks 75 => 51
  • /blocks?p=3 => blocks 50 => 26
    Use client state to keep track of the latest block number upon first visiting the page, and use this as a reference for navigation: when we click on page 2, we want to see the next 25 blocks from the initial block head (100), not the next 25 blocks from the new current block head.

You must use NextJS best practices about handling query parameters, in particular, read searchParams from the top-level Page component and use a React Server Component to fetch the blocks needed. Do NOT fetch the blocks client-side.

Resources

Contract page transactions

Contract page transactions

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access a contract details page, I want to see the list of transactions interacting with this contract.
The transactions list should be displayed as a table showing tx hash, method, block number, timestamp, from, to, amount and tx fee.

Validation

It should look like the Etherscan contract details transactions page, eg. https://optimistic.etherscan.io/address/0x087000a300de7200382b55d40045000000e5d60e

Image

Do NOT add the "Download Page Data" button and the filters dropdown.
Do NOT handle pagination for the moment.
You must reuse some of the components already build for the other pages displaying transactions (/block/:number/txs and /txs).

Implementation

You can use the transactions page as an inspiration for the global architecture, see /txs.
We will need to use an indexer to retrieve all the transactions targeting a specific address, to build an MVP of the feature you can use a contract with a lot of transactions such as https://optimistic.etherscan.io/address/0x087000a300de7200382b55d40045000000e5d60e and fetch the latest transactions then filter out the txs having to equal to the contract address.

Resources

Latest transactions page

Latest transactions page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

  • As a user, I want to see the list of the latest transactions created on the blockchain by visiting /txs
  • I want to see a table of the list of newly created transactions. The detail for each tx should be tx hash, method ID, block number, timestamp, from address, to address, value and txn fee.

Validation

It should look like the Etherscan latest txs list: https://optimistic.etherscan.io/txs

Image

For the method ID column, just display the 4 bytes selector, function name mapping is out of scope.
Don't forget to add links to tx details page /tx/:hash, block details page /block/:number and from/to addresses /address/:address.

Do NOT include txs metrics such as txs count over 24h, pending txs, etc.
Do NOT add a "Download Page Data" button.
Do NOT add pagination, it will be done in another separate issue.
Do NOT add a "Show rows" dropdown, this is out of scope for this issue.

Implementation

Use a simple table from shadcn/ui, always display the last 50 txs from the last 10 most recent blocks.
Extract transactions from blocks using getBlock({ blockNumber: N, includeTransactions: true }) and sort them by descending timestamp.

You must use React Server Components and fetch the blocks server-side, you can use work done on the block txs page as an inspiration.

Resources

Fetch block transactions from database

Fetch block transactions from database

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a rollup developer using op-scan, I want to fetch the block transactions data either from JSON-RPC (current behavior) or from a database fed from op-indexer.
The data source should be abstracted away in a dedicated function and is configured using an environment variable.

Validation

It should fetch the exact same data whether calling the RPC directly or querying the database.
It MUST adhere to the existing design pattern already implemented in the tx details page.

Implementation

Create a new helper function under components/pages/block-txs/fetch-block-transactions.ts, use the same logic found in components/pages/tx/fetch-transaction-details.ts, a top level exported function which is data source agnostic and 2 separate functions fetching data from either JSON-RPC (this is already implemented here: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/block-txs/index.tsx#L11-L37) or from the database (this is what has to be implemented).
Move the block transactions data fetching logic from the block txs page to this helper function and just call this function in the block txs page top-level server component.

Run op-indexer as a background task in another terminal along the explorer to keep an up-to-date database mirroring what you'd fetch from the JSON-RPC endpoint.

Resources

UI: Copy button next to addresses

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributor guidelines

Description

Similar to Etherscan, we want a copy label next to addresses to make it simpler for people to copy those hashes. Once the copy button has been clicked, let's show a quick toast indicating the address has been copied.

CleanShot 2024-07-29 at 16 09 36@2x
CleanShot 2024-07-29 at 16 11 48@2x

UI: Live price for the homepage chart

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributor guidelines

Task description

In the chart on the homepage, the "Price" always says $2 because it is hardcoded. Fetch the live data from Coinbase API and display the accurate price for each date in the chart.

CleanShot 2024-07-29 at 16 25 38@2x

Contract page token holdings

Contract page holdings

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access a contract page, I want to see all the contract token holdings both in token quantity and dollar value, I want to see every ERC20 as well as ERC721/1155 for NFTs.
When I click on the token holdings combobox, I can search for a particular token by name, and it should display some details about the selected token holding, such as quantity, dollar value and the spot price taken to compute the current dollar value.

Validation

It should look like the Etherscan contract page token holdings, eg. https://optimistic.etherscan.io/address/0x5ae97e4770b7034c7ca99ab7edc26a18a23cb412

Image

Do NOT implement a dedicated token holdings page, it will be done in a separate issue.
Stick to the minimum viable feature, do NOT implement token holdings sorting.

Implementation

Use the combobox component from shadcn/ui.
For token prices, you can use the Coinbase spot price API, feel free to use something else if you find a better alternative.
This feature will highly benefit from using an indexer to keep track of the contract token holdings, for the time being it's okay to build an MVP of the feature by tracking token transfers from the most recent blocks and using these logs to fetch the contract balance of the specific tokens found in the latest logs.

Resources

Fetch latest transactions from database

Fetch latest transactions from database

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a rollup developer using op-scan, I want to fetch the latest transactions data either from JSON-RPC (current behavior) or from a database fed from op-indexer.
The data source should be abstracted away in a dedicated function and is configured using an environment variable.

Validation

It should fetch the exact same data whether calling the RPC directly or querying the database.
It MUST adhere to the existing design pattern already implemented in the tx details page.

Implementation

Create a new helper function under components/pages/txs/fetch-transactions.ts, use the same logic found in components/pages/tx/fetch-transaction-details.ts, a top level exported function which is data source agnostic and 2 separate functions fetching data from either JSON-RPC (this is already implemented here: https://github.com/walnuthq/op-scan/blob/main/src/lib/fetch-data.ts#L30-L111) or from the database (this is what has to be implemented).
Move the fetchLatestTransactions data fetching logic from the lib/fetch-data.ts to this helper function and just call this function in the txs page top-level server component.
You will need to make sure the pagination logic is preserved when querying data via Prisma.

Run op-indexer as a background task in another terminal along the explorer to keep an up-to-date database mirroring what you'd fetch from the JSON-RPC endpoint.

Resources

Account details page

Account details page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access an account details page, I want to see very basic info about this particular address.

Validation

It should look like Etherscan account details page.
EOA: https://optimistic.etherscan.io/address/0x1017a988aa1521a0599c91a9f202d27b8d25fcdb
Contract: https://optimistic.etherscan.io/address/0x80942a0066f72efff5900cf80c235dd32549b75d
Only display whether the account is an EOA (Address) or a contract (Contract) along with the native token balance.
Do NOT display any other info at the moment.

Implementation

You can use the tx details page as an inspiration of the global architecture.
The URL of the page should be /address/:address.
Use a simple card to display the account balance, you can take inspiration from blocks on this dashboard: https://ui.shadcn.com/blocks#dashboard-01 (use lift mode).
Use getCode and getBalance to fetch the data needed to render the account details page correctly.

Resources

Token transfers in tx details page

Token transfers in tx details page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

  • As a user, I want to see the list of ERC20 tokens transfers that occurred in a transaction.
    For each item in the list, I can click on from / to / token addresses and get redirected to the corresponding account detail page.

Validation

It should look like the Etherscan token transfers list, eg. https://optimistic.etherscan.io/tx/0x3b680d4727227d6afb35ddf620c3b16e33877f3cc06ec1151a6c45bd167b9f30
For the time being, we will only track ERC20 transfers and display only the token amount and raw addresses from / to / token, you should not compute the amount in $ or try to map the the token address to a list of known tokens.
You do not need to compute the net transfers either.

Image

Implementation

You will need to leverage the logs emitted in the transaction and create your list of token transfers from the Transfer events.
You should continue the work already done on the basic tx detail page and reuse the description list component.

Resources

Latest L1->L2 transactions

Latest L1->L2 transactions

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

  • As a user, I want to see the 6 latest L1->L2 transactions (mainly bridging assets from L1 to L2) when I access the homepage, with the L1 block number and tx hash along with the corresponding L2 tx hash.

Validation

At the moment, the frontend part is fully functional and fed with placeholder data in the accompanying util function fetchLatestL1L2Transactions in src/lib/utils.ts.
You only need to implement this util function properly to return the same transactions displayed on Etherscan.

Image

Implementation

In the long run we'd like this data to be consumed from an indexer but we can build a functional POC to help us better understand how to retrieve the needed info from the blockchain. We will reuse this logic later when we build the indexer.
My take on this is to fetch the logs from the latest 1000 blocks both on the L1 and L2 chain and perform a matching between the SentMessage/SentMessageExtension1 events emitted on L1 by L1CrossDomainMessenger and RelayedMessage emitted on L2 by L2CrossDomainMessenger.
The contracts ABI and viem encapsulation is already available under src/lib/contracts.
The correct way to perform the matching is to recompute the msgHash emitted in RelayedMessage from the arguments of SentMessage and SentMessageExtension1.
Feel free to propose and implement an alternative method if you find something more simple and straightforward.

Resources

UI: Search improvements

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributor guidelines

TODO

  • When someone enters text in the search bar, query is being made. The UI should force the user to wait until the query returns. When the user, for example, clicks enter while the query is in progress, nothing should happen
  • Once the query returns, the user sees available options in the dropdown. We only use titles to differentiate between different sections (i.e. addresses vs contracts). We don't need tabs so let's remove them (see screenshot, tabs are in green)
  • On homepage, we want a big search similar style to https://optimistic.etherscan.io/ ; on subpages we can keep search in the header, similar to what we have today. The homepage search should also have a header based on the RPC network connection. In our case, it is OP Mainnet Explorer, so same style as here: https://optimistic.etherscan.io/

CleanShot 2024-07-29 at 15 59 26@2x

Contract page NFT transfers

Contract page NFT transfers

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access a contract details page, I want to see the list of NFT transfers involving this contract.
The transactions list should be displayed as a table showing tx hash, method, block number, timestamp, from, to, type and item.

Validation

It should look like the Etherscan contract details NFT transfers page, eg. https://optimistic.etherscan.io/address/0x087000a300de7200382b55d40045000000e5d60e#nfttransfers

Image

Do NOT add the "Download Page Data" button and the filters dropdown.
Do NOT handle pagination for the moment.

Implementation

You can use the transactions page as an inspiration for the global architecture, see /txs.
We will need to use an indexer to retrieve all the transactions targeting a specific address, to build an MVP of the feature you can use a contract with a lot of token transfers such as https://optimistic.etherscan.io/address/0x087000a300de7200382b55d40045000000e5d60e and fetch the latest NFT transfers then filter out the txs having to equal to the contract address.
You will need to fetch the latest Transfer events using the ERC721/1155 contract ABI which you will need to add in the project (use what is already done with ERC20 as an inspiration).
Display the NFT image using standard token URI format (JSON metadata file pointing to an external image).

Resources

Latest L1->L2 transactions page

Latest L1->L2 transactions page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

  • As a user, I want to see the list of the latest L1->L2 transactions created on the blockchain by visiting /txs-enqueued
  • I want to see a table of the list of newly created L1->L2 transactions. The detail for each tx should be L1 block number, L2 tx hash, timestamp, L1 tx hash, L1 tx origin and gas limit.

Validation

It should look like the Etherscan latest L1->L2 txs list: https://optimistic.etherscan.io/txsEnqueued

Image

Don't forget to add external links to L1 block number, L1 tx hash, L1 tx origin and an internal link to L2 tx hash.
You can take inspiration from here: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/home/latest-l1-l2-transactions.tsx

Do NOT include the Queue index column.
Do NOT add a "Download Page Data" button.
Do NOT add pagination, it will be done in another separate issue.
Do NOT add a "Show rows" dropdown, this is out of scope for this issue.

Implementation

Use a simple table from shadcn/ui, always display the last 50 txs from placeholder data.
Update the fetchLatestL1L2Transactions (https://github.com/walnuthq/op-scan/blob/main/src/lib/utils.ts#L86) function to return all the fields necessary and 50 records instead of 6.

Resources

🔥 Contributor Guidelines 🔥

About OP Scan

See README.

How to get an issue assigned

Warning

Submitted PRs without proper assignment will NOT be accepted.

At Walnut, we highly value code quality. We ensure that only the best contributors work on our code, which is why our selection process is careful and thorough.

We do not assign issues on a first-come, first-served basis. Primarily, we assign issues to contributors who have previously worked with us. However, if you are new, don’t worry—we are eager to attract new talent. We just need to get to know you and ensure you have the skills to complete the task. Below are detailed instructions on how to get an issue assigned.

It’s Your First Contribution to Walnut’s Repositories

  1. Add a comment briefly introducing yourself and provide your OnlyDust profile if you want to, so we can assess if your skills match the issue.
  2. Provide detailed technical instructions on how you plan to accomplish the task. Mention which functions or files you plan to edit and what code you intend to write. This will help you coming up with an appropriate solution and make sure you're not heading in the wrong direction.

You Have Already Contributed to Any of Walnut's Repositories

Please comment and provide some technical details on how you plan to accomplish the task. We may choose to assign to you even if you only comment "I'm up for it!" if nobody else is interested in the issue.

💪 Why contribute?

Asides from OnlyDust rewards, contributors providing quality PRs will be considered for interviewing with the Walnut team for an extended collaboration and/or job offer.

💬 Contributor's chat

Join us on Telegram here. Do not hesitate to ask any question, we will do our best to answer in the best way we can.

⌨️ Coding conventions

The project is already pre-configured with Eslint, TypeScript, and Prettier.

Check for any linting issues:

pnpm lint

Run prettier before committing:

pnpm prettier

🤗 Get updates from us

Highlight equal addresses

Highlight equal addresses

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

On a Transaction detail page, when a user hovers over an address, the address should get highlighted in a yellow-ish color, similar to Etherscan.

Other addresses on this page that are equal to the address being hovered, should also be highlighted.

This will help the user to easily see equal addresses when exploring the transaction detail page.

Research: Explore the Explorers

⚠️ Reading contributors guidelines to get assigned is MANDATORY!
#1

⚠️ This task is for writing an article
The goal of this task is to write an article in human english. No code is required.

Task description

Put yourself in the shoes of a new OP-Stack based rollup builder. One of the tasks you have, when building a rollup, is to find an explorer for your rollup. Use google or chatgpt and find few major solutions that you can integrate with your rollup - analyse the solutions and offer pros/cons

  • Write an article that would analyze the major available explorers in the EVM ecosystem
  • The article would compare (pros and cons) across all of the explorers
  • One of the explorers analyzed in the article would be the OP Scan (this repo)

Write the article in Markdown and share it as a PR on this repo. You can put the markdown file into a newly created folder called research.

How to get the task assigned

Comment with your name and articles / content you have written in the past. Mention which explorers do you plan to include in the analysis. Also mention what criteria do you intend to use when comparing the explorers (don't forget you are comparing it from a new rollup builder perspective)

Fetch block details from database

Fetch block details from database

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a rollup developer using op-scan, I want to fetch the block details data either from JSON-RPC (current behavior) or from a database fed from op-indexer.
The data source should be abstracted away in a dedicated function and is configured using an environment variable.

Validation

It should fetch the exact same data whether calling the RPC directly or querying the database.
It MUST adhere to the existing design pattern already implemented in the tx details page.

Implementation

Create a new helper function under components/pages/block/fetch-block-details.ts, use the same logic found in components/pages/tx/fetch-transaction-details.ts, a top level exported function which is data source agnostic and 2 separate functions fetching data from either JSON-RPC (this is already implemented here: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/block/index.tsx#L9) or from the database (this is what has to be implemented).
Move the block details data fetching logic from the block page to this helper function and just call this function in the block details page top-level server component.

Run op-indexer as a background task in another terminal along the explorer to keep an up-to-date database mirroring what you'd fetch from the JSON-RPC endpoint.

Resources

Contract page token transfers

Contract page token transfers

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access a contract details page, I want to see the list of token transfers involving this contract.
The transactions list should be displayed as a table showing tx hash, method, block number, timestamp, from, to, amount and token.

Validation

It should look like the Etherscan contract details token transfers page, eg. https://optimistic.etherscan.io/address/0x087000a300de7200382b55d40045000000e5d60e#tokentxns

Image

Do NOT add the "Download Page Data" button and the filters dropdown.
Do NOT handle pagination for the moment.

Implementation

You can use the transactions page as an inspiration for the global architecture, see /txs.
We will need to use an indexer to retrieve all the transactions targeting a specific address, to build an MVP of the feature you can use a contract with a lot of token transfers such as https://optimistic.etherscan.io/address/0x087000a300de7200382b55d40045000000e5d60e and fetch the latest token transfers then filter out the txs having to equal to the contract address.
You will need to fetch the latest Transfer events using the ERC20 contract ABI which is available in the project.

Resources

Block transactions list page

Block transactions list page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

  • As a user, I want to see a list of block transactions when visiting /block/:number/txs.
    The list should include tx hash, method, timestamp, from address, to address, value and fee.
    Add links where applicable (tx hash, from/to addresses

Validation

It should look like the Etherscan block transactions list page, eg. https://optimistic.etherscan.io/txs?block=121612939
We can use the method ID for now, we'll implement method identification later on.
Do NOT implement the "Download Page Data" functionality.

Image

Implementation

You can use the transaction details page as inspiration for the global architecture.
Use the table component from shadcn/ui to show the list of transactions.

Resources:

Block details page

Block details page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access a block details page, I want to see basic info about the block such as block number, block hash, mining timestamp, number of transactions contained in the block as well as total gas used by the block.
When I click on previous block / next block buttons I want to navigate between adjacent blocks.
When I click on the number of transactions I want to be redirected to the block transactions list: /block/:number/txs.

Validation

It should look like the Etherscan block detail page, eg. https://optimistic.etherscan.io/block/121511346
Do NOT use an accordion to show more details, just display block hash below block number.
Do NOT implement the block transactions list page.

Implementation

You can use the transaction details page as inspiration for the global architecture.
The URL of the page should be /block/:number.
You should use a description list similar to the tx details page to display the block attributes and the pagination component for the previous / next block buttons.

Resources

Contract page events

Contract page events

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access a contract details page, I want to see the list of events involving this contract.
The events list should be displayed as a table showing tx hash, block number, timestamp, method and decoded logs.

Validation

It should look like the Etherscan contract details events page, eg. https://optimistic.etherscan.io/address/0xa5f565650890fba1824ee0f21ebbbf660a179934#events

Image

Do NOT add the search button.
Do NOT handle pagination for the moment.

Implementation

We will need to use an indexer to retrieve all the logs emitted from a specific contract, to build an MVP of the feature you can use a contract with a lot of events such as https://optimistic.etherscan.io/address/0xa5f565650890fba1824ee0f21ebbbf660a179934 and fetch the latest events then filter out the logs having address equal to the contract address.

Resources

UI: Consolidate table views

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributor guidelines

Description

This issue is about the following pages:

TODO on the Blocks page

This page.

  • Align the "Total of ..." section, and the "Latest block number:[123330938]" section with the table content (push it to the left)
  • Use bold
  • Make it look more like on the original (link)

TODO on the /txs and /txs-enqueued pages

  • Those pages should be more consistent with the /blocks page. Currently, the headings are different. The table widths are also different. It should all be consistent + all pages should also have pagination.
  • Use https://optimistic.etherscan.io/ as a reference

Initial setup feedback

  • Fresh install, with no changes done to the project, created a github change file in the pnpm-lock.yaml file, see the following screenshot
    CleanShot 2024-06-17 at 16 35 33@2x

  • small improvement: would be great to use a transparent logo so that there is no white background in the dark version. I am attaching the logo

opscan-logo-transparent

Build errors

When performing pnpm build on the current main branch, the following error occurs.

./src/hooks/useSearch.ts
Error:
  x Expected '>', got 'ref'

It seems to have started occurring after this commit.
Could you check it?

From/To in tx details page

From/To in tx details page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

  • As a user, I want to see the from and to addresses of the transaction in the tx details page.
    From / To addresses should be links to the corresponding account details page.
  • I want to be able to differentiate between EOA to EOA transfers and EOA to contract interaction.

Validation

You should study how Etherscan displays these fields based on the different possible scenarios: https://optimistic.etherscan.io/tx/0x3b680d4727227d6afb35ddf620c3b16e33877f3cc06ec1151a6c45bd167b9f30

Image

In particular, we need to detect contract interaction and if execution went through or reverted.

Implementation

Use the data available in the transaction object in the tx details page to display the correct information.
You should continue the work already done on the basic tx detail page and reuse the description list component.

Fetch latest blocks from database

Fetch latest blocks from database

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a rollup developer using op-scan, I want to fetch the latest blocks data either from JSON-RPC (current behavior) or from a database fed from op-indexer.
The data source should be abstracted away in a dedicated function and is configured using an environment variable.

Validation

It should fetch the exact same data whether calling the RPC directly or querying the database.
It MUST adhere to the existing design pattern already implemented in the tx details page.

Implementation

Create a new helper function under components/pages/blocks/fetch-blocks.ts, use the same logic found in components/pages/tx/fetch-transaction-details.ts, a top level exported function which is data source agnostic and 2 separate functions fetching data from either JSON-RPC (this is already implemented here: https://github.com/walnuthq/op-scan/blob/main/src/lib/fetch-data.ts#L20-L28) or from the database (this is what has to be implemented).
Move the fetchLatestBlocks data fetching logic from the lib/fetch-data.ts to this helper function and just call this function in the blocks page top-level server component.
You will need to make sure the pagination logic is preserved when querying data via Prisma.

Run op-indexer as a background task in another terminal along the explorer to keep an up-to-date database mirroring what you'd fetch from the JSON-RPC endpoint.

Resources

Search Box v1

Search Box v1

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I paste an Address / Txn Hash / Block / Token in the search bar, I want to see a list of corresponding exact matches in a combobox, with the proper category displayed (Block / Transaction / Address).
When I click on a result, I want to be redirected to the detailed page of the resource.

Validation

The end result should look like the Etherscan search box:
Image
As it is a v1, we want to keep it simple so no extra work on the UI is needed beyond what can be achieved with shadcn/ui combobox.

Implementation details

For the time being, we will validate client side the type of the input box (one of block number / tx hash / address) and display only one exact match result.
If the input is a block number, call getBlock to validate and display a result with a link to the block /block/:number.
If the input is a tx hash, call getTransaction to validate and display a result with a link to the tx /tx/:hash.
If the input is an address, call isAddress to validate and display a result with a link to the EOA/contract /address/:address.

Resources

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.