Introducing ‘chainstrap’ — The Dapp Transparency Framework
- “It isn’t transparent if you don’t know where & how to look.”
- “It isn’t transparent if it requires a humongous effort to find, see, and verify the data.”
- “It isn’t transparent if 99% of users are deterred from wanting to look.”
- “If it isn’t transparent it can’t be trusted!”
Beltran Berrocal, Web3 Design Principles.
This article really struck a chord with me. Whenever I explain decentralized applications to friends who are curious, it is very hard for them to understand the value in it and how they differ from centralized apps, even more so if they are not in tech. In order to deliver on the blockchain’s promise of transparency and verifiability, we have to provide users with tools to understand what they are interacting with and how it is different to a centralized application. We mustn’t fall into the trap of hiding a dapp’s unique properties, thinking it will make users feel more comfortable and drive mass adoption. We must embrace these properties and present them in a way that makes users learn, understand, and value decentralization.
Beltran’s article proposes a tool that can help us move in the right direction, and this article introduces an implementation I’ve started to work on.
The Chain View
It all starts with a wrapper component for your dapp.
This wrapper does a few things.
It checks that `web3` is loaded and that your account is unlocked. If it can’t find `web3` it will let you know. If it can’t find an account, maybe because your MetaMask is locked, it will let you know.
It wraps your app in custom `redux` provider so that the components talked about later in this article work.
It renders a togglable side panel for configuring different parts of `chainstrap`.
For now, this panel only lets you toggle contracts’ data provenance and transaction visibility, and set their colors, but in the future it will house all sorts of tools and their configurations. For example, a contract event log/hub, an on-chain action history log, a REPL with contract code for verifying any data shown in the dapp, a real time dapp usage stats center, etc.
The Components
The components exported from `chainstrap` connect to `ChainView`’s custom store to provide a set of building blocks for building transparency into your dapps.
For example, the `ChainData` component, lets you tag parts of the UI that come from the chain.
Now your users won’t have to guess at which data comes from the chain and which data comes from a centralized provider. They can also get a quick gas estimate without having to send the transaction to their wallet.
Other utility components like `ChainHash` for displaying addresses in a human readable format will also be provided.
A set of educational components will also be provided. These can be used by developers to layer blockchain terminology lessons throughout the UX so that users can understand what is going on without being overwhelmed with information.
The Actions
Action creators that are prebound to the `ChainView` store will also be provided. This will allow dapps to interact with `ChainView`’s public interface programmatically.
A Symbol Of Trust
Just like HTTPS gives you a green lock on your browser’s address bar, `chainstrap` will give you a green chain in your dapps. Once the new version of `web3` is officially released and new features like middleware a la `web3.py` are built in, we will be able to build comprehensive coverage tools that interact with `chainstrap` to show metrics like percentage of contract calls tagged in the UI, to automatically infer function signatures from ABIs, and to warn users whenever the dapp looks like it is doing something funny.
Stay tuned for more `chainstrap` developments, check out the code, and contribute, at https://github.com/kleros/kleros-juror-front.
Learn More
Join the community chat on Telegram.
Visit our website.
Follow us on Twitter.
Join our Slack for developer conversations.
Contribute on Github.
