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
- It opens the file in a tab.
- It highlights the lines and scrolls them to the middle of the editor.
- 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.
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
