Sourcify Contract Viewer

A Next.js application for viewing verified smart contract details from the Sourcify API.

Linking to source code

A contract page can link to a source file and to lines in that file. The link puts the position in the URL hash, after the #:

https://repo.sourcify.dev/<chainId>/<address>#file=<path>&L=<start>-<end>

For example, this link opens ECDSA.sol in the SeaDrop contract and highlights lines 60 to 72:

https://repo.sourcify.dev/1/0x00005EA00Ac477B1030CE78506496e8C2dE24bf5#file=lib/openzeppelin-contracts/contracts/utils/cryptography/ECDSA.sol&L=60-72

Parameters

Key	Value	Example
file	The source path, as it appears in the contract's source files	file=src/SeaDrop.sol
L	One line, or a range of lines. Line numbers start at 1.	L=40 or L=60-72
sym	A declaration in the file: Contract.member, or a name	sym=SeaDrop._publicDrops
R	A byte range in the file (UTF-8 offsets, from a source map)	R=6520-6548

• file is necessary. Without L, the link opens the file and selects no lines.
• If the range is in the wrong order (L=72-60), the page sorts it.
• If the range goes past the end of the file, the page stops the highlight at the last line.
• If no source file has that path, the page ignores the link and shows the main contract file.

Encoding the path

Encode the path with encodeURIComponent. The page also accepts /, @ and : without encoding, and writes them that way to keep links readable. You must encode &, #, =, %, + and spaces.

const hash = `#file=${encodeURIComponent(path)}&L=${start}-${end}`;

What the page does with a link

1. It opens the file in a tab.
2. It highlights the lines and scrolls them to the middle of the editor.
3. It scrolls the page to the Source Code section.

A hash change on an open page (for example a click on a #file=… link elsewhere on the page) does the same, without a reload. The browser does not send the hash to the server, so a link to lines costs no extra server work.

Selecting lines in the page

• Click a line number to select that line. Shift+click a second line number to select a range.
• The address bar updates while you select. Copy link in the editor toolbar copies the link.
• You can also select code, right-click it, and choose Copy Link to Selected Lines.
• The ? button in the editor toolbar shows the same help.

The code that reads and writes these links is in src/utils/sourceHash.ts. The key sym names a declaration, as Contract.member or name; the Storage Layout links use it (see "Storage layout links" below). The key R is a byte range from the bytecode's source map (see "Bytecode and source" below).

Searching the source code

The Source Code section can search all source files of a contract at the same time, including library files such as OpenZeppelin.

Opening the search

• Click the search icon at the top of the left panel. The folder icon goes back to the file tree.
• Or press Cmd+Shift+F (macOS) or Ctrl+Shift+F (Windows, Linux) while the focus is in the Source Code section. If text on one line is selected in the editor, the search starts with that text.
• Ctrl+F or Cmd+F in the editor still searches only the open file.

Search options

The search runs while you type. Three buttons in the search box change how it matches:

Button	Shortcut	Effect
Aa Match Case	Alt+C	Matches upper and lower case exactly. Without it, owner also finds Owner.
ab Match Whole Word	Alt+W	Matches only full names. Letters, digits, _ and $ count as parts of a name, so owner does not find _owner or setOwner.
.* Use Regular Expression	Alt+R	Reads the query as a JavaScript regular expression. ^ and $ match at the start and end of each line.

If the regular expression is not valid, the panel shows the error and no results.

Results

• The results are grouped by file. The main contract file comes first, then the other files in path order.
• The panel shows the number of results and files. A screen reader announces this number.
• Click a result to open the file. The editor selects the match and highlights all other matches in the file, also in the minimap and in the scrollbar.
• With the keyboard: Enter in the search box opens the first result. Down arrow moves into the results, and the arrow keys move between them. Esc goes back to the search box, and a second Esc goes to the editor.
• The search stops at 2,000 results. Then the count shows 2,000+ and asks you to narrow the search.

The search code is in src/utils/sourceSearch.ts. It runs in the browser on the source files that the page already has, so it sends no requests to the server.

This is the beginning of the README. Read the rest at the original. Read the full README ↗