hirosystems / explorer

Explore transactions and accounts on the Stacks blockchain. Clone any contract and experiment in your browser with the Explorer sandbox.

Stacks Explorer

Environment	Status
Prod
Staging
Dev

Stacks Explorer

The Stacks Explorer is an observability tool that helps users, developers, miners, and investors understand the Stacks Blockchain. It's built with React, next.js and Chakra UI.

This README will guide you through the process of setting up and running the Stacks Explorer locally and how to contribute to the project.

Bugs and feature requests

If you encounter a bug or have a feature request for the Stacks Explorer, we encourage you to follow the steps below:

1. Search for existing issues: Before submitting a new issue, please search existing and closed issues to check if a similar problem or feature request has already been reported.
2. Open a new issue: If it hasn't been addressed, please open a new issue. Choose the appropriate issue template and provide as much detail as possible, including steps to reproduce the bug or a clear description of the requested feature.
3. Evaluation SLA: Our team reads and evaluates all the issues and pull requests. We are avaliable Monday to Friday and we make a best effort to respond within 7 business days.

Please do not use the issue tracker for personal support requests or to ask for the status of a transaction. You'll find help at the #support Discord channel.

Contributing

Development of the Explorer happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving the Stacks Explorer.

Code of Conduct

Please read the Explorer's Code of conduct since we expect project participants to adhere to it.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes.

Community

Join our community and stay connected with the latest updates and discussions:

• Join our Discord community chat to engage with other users, ask questions, and participate in discussions.

• Visit hiro.so for updates and subcribing to the mailing list.

• Follow Hiro on Twitter.

License

The Stacks Explorer is open source and released under the MIT License.

explorer's Issues

deserialize function summary data on contract call page

This is referring to contract-call​ transaction types right? If so, they are available. Here’s an example:

{"block_hash":"0x7e1122cbacb525d2d056513e1eb7581c0df846a05eb1cf3616b2bdea7e364b36","block_height":7,"tx_id":"0x02151c5bc5c873f13f991acee916aee7dfa12600d449ef8e40d2910fcfba79a2","tx_index":1,"tx_status":"success","tx_type":"contract_call","fee_rate":"123456","sender_address":"ST2ZRX0K27GW0SP3GJCEMHD95TQGJMKB7G9Y0X1MH","sponsored":false,"contract_call":{"contract_id":"ST2ZRX0K27GW0SP3GJCEMHD95TQGJMKB7G9Y0X1MH.hello-world-contract","function_name":"set-value","function_args":["0x020000000461736466","0x02000000087479747974797479"]},"events":[]}​

​​Note: the args are Clarity values — these can be deserialized into the type name and value.

Events section typing

Currently the events section is only using static data. This needs correct typings and data.

Explorer Testing Placeholder

Began reviewing the staging explorer at https://explorer-silk.now.sh/

Currently there is an issue where somethings don't work because of https mixed content. Functionality is limited but I can connect to API http://crashy-stacky.zone117x.com/tx and return info for some of the tx_id but no other data points.

The URL below returns valid data
https://explorer-silk.now.sh/txid/0xeaf47b0d9b4a7439ff46943ac313637e3484c2393729da49fceac0d04d4d1ce0

@kyranjamie will let me know when the explorer is functional and ready for test.

Component: Meta card

See in Figma

Address links in row component

Where does this go? cc @jasperjansz @jeffdomke @zone117x

Post conditions section should take real data

Currently the data is just static. Needs correct typings.

Component: Rows

Add OpenGraph metadata to pages

Ensure relevant metadata is shown when twitting/linking to a transaction, see OpenGraph

Fetch data from staging sidecar

We now have a staging instance for the sidecar to pull data from, we should fetch tx data from that.

Contract creation example

Row component updates

The row component takes data from an object and renders it as such:

We need to be able to pass in more complex things to render, such as what is found within this screenshot from figma:

• Custom labels
  • Pass icons/colors/props
• render children in a similar row style/indented rows

Contact source section

I am not positive about this functionality (hover to see stx fees). I'd wait on implementation of this. It's also blocked currently.

Build out function summary section

Question: is this all the possible data to be shown?

Continuous integration and linting

Add tooltips to row contents

Component: Codebox

Transaction page titles

We should display a title for the transaction including: type, status, txid?

Set up error tracking with Sentry

On launch, we should have an error tracking tool in place. I'm familiar with Sentry and would recommend it.

@agraebe Are you able to set up an account/billing?

Truncate component

Kyran made a truncate function -> https://github.com/blockstack/explorer/blob/master/src/common/utils.ts#L23, we can use this to create a truncate text component.

Setup next.js, routing, redux state

[design] Search bar error states / helper

The input validates either a tx_id, which would be a hash -> https://github.com/blockstack/explorer/blob/86074e982e00f075cecea175c370834915d8fa7f/src/common/utils.ts#L50 or a contract name -> https://github.com/blockstack/explorer/blob/86074e982e00f075cecea175c370834915d8fa7f/src/common/utils.ts#L55.

We need an error state to display which one is invalid, and some helpful information for using the search. How would a user know to search for a contract name or tx_id?

Also, with the recently viewed component living below the search bar, the typical location of below the input for errors won't work as well.

Component: Transaction status

See in Figma

Meta card mobile view

Currently the content is centered on mobile. Figma reflects they should be left justified:

Hover states & copy fn for row component

Figure out live updating for the transaction pending (prob. websocket)

Token transfer component updates

We need to determine the shape of the data that will populate this component:

Additionally we need to make the show more functionality work:

• show actual number of not visible rows
• do we show them all on click? or show a smaller amount and require multiple clicks?

Make tickets for each component

Poison-microblock page example

Update styles/types/props for function summary section

(from staging)

• should only accept props from what the actual tx object gives
• the child row component needs a bit of styling edits:
  • no border on first item
  • no border on last item
  • check spacing

Component: Transaction Tags

See in Figma

TransactionDetails transforms

Depending on the type of transaction, the top section displays different labels for the same key:

Right now it's only set up to display one variation of the data, we need to model out an example of each TX and have the page display it correctly.

Header component used on tx page

Build out post-conditions section

2 or more:

empty state:

Create some sample transactions with dummy data

Contract call page example

Component: Tooltip

This will ultimately go into@blockstack/ui

Inventory of components and rank them on ability to deliver in testnet Phase 1

deserialize post-conditions data

The string is the raw hex encoded format. They can be deserialized with the stacks-transactions-jb lib, it also has some examples in unit tests here https://github.com/blockstack/stacks-transactions-js/blob/master/tests/src/postcondition-tests.ts
​​
​​The API will return an already deserialized format soon — just not yet ready.

How will images of smart contracts work?

This is an open question: How will the images for smart contracts function? where are they hosted, how does one associate an image with a smart contract? Do we want to enforce any boundaries/rules?

cc @zone117x

Token transfer page example

Build out transactions page UI

Update transaction pages to use query

Right now, all the types of tx pages are manually created. We should have one tx page that gets some data, eg the tx, and determines the type of that transaction and displays the accurate sections. Types here: https://www.npmjs.com/package/@blockstack/stacks-blockchain-sidecar-types

Deserialize smart_contract_log data for events section

​​This is the event_type: smart_contract_log​ data from the above JSON screenshot. topic​ is the event name, value​ is the Clarity event value. It can be deserialized using the stacks-transctions lib which will also give you the type, see this function https://github.com/blockstack/stacks-transactions-js/blob/8e8530aba67db7c770e7a6b8bc28864359ff89a6/src/clarity/deserialize.ts#L21
​​
​​Also, I think at the moment the topic​ can only be "print"​.

Build out events section

Setup staging

Address links

Currently the designs show that you can click on an address. We don't have a page designed for addresses. Where will the link go to?

cc @jasperjansz @zone117x

API spec for transactions and search

Coinbase page example

Persist recent searches to display in dropdown

Use localStorage to persist client side recently viewed transactions/contracts

Component: Title