Chris Hitchcott (Digix Core Dev)

Today I’m pleased to announced that we have open sourced the Spectrum repository. Additionally, there will be a contributor bounty program — where developers, designers and people with good ideas can earn DGD rewards for helping the the growth of Spectrum. 🌳

Become a Spectrum Bounty Hunter 🔫

What is Spectrum?

Earlier this year we released the first alpha version of Spectrum, a fully-featured “zero client” web app for interacting with Ethereum blockchains. Since then we’ve been using it internally for various dapps — including the Digix Proof of Assets Interface, the ETC-Redemption contract and now, the Marketplace. In the future, Spectrum will also be used for other Digix products such as the governance/voting system, rewards claiming UI, and more.

Since its inception, Spectrum was designed to be an integral part of the Digix roadmap — a platform for us to use as a base for building user interfaces quickly and effectively. It is part of the fabric of Digix and will provide consistent high standard UX to users interacting with Digix contracts.

Spectrum is a website — end users can visit it and connect to Ethereum without needing to download anything. They can read data from the blockchain, and securely sign transactions from within the web browser, a bit like MyEtherWallet. One key feature though is this idea of easily extending Spectrum for use within dapps — it’s designed to provide a set of tools to make things easy for UI developers.

Over time Spectrum has incrementally gained a range of features that can be re-applied to new dapps with no extra development — things like Ledger Nano transaction signing, Multisig wallet transactions, mobile and offline capabilities, multiple networks, simplified UX, and of course, the standard tokens and transaction signing features.

Why Open Sourcing now?

Now that we’re approaching the watershed launch of the DGX 2.0 contracts, it’s clear that Spectrum is becoming an increasingly important tool for our own use at Digix as we plan to build the next stages of the product line. All of the effort put in so far means we don’t need to re-invent the wheel each time we come up with a new UI requirement. Spectrum was designed specifically for the purpose of building user interfaces rapidly, and it now represents a set of tools that is mature enough to allow us to achieve this and deploy with.

As ambitious as its feature set is, so far Spectrum hasn’t had a full time developer working on it as there have been many other tasks that took priority at Digix (such as writing contract tests, other backend JS tooling for the core contracts, etc.). In order to push things forward and really accelerate the progress of Spectrum, not just as a platform for Digix, but for the whole community, we are now calling for engagement and contributions from others in the space, with the goal of combining efforts and creating tool that benefits the whole ecosystem (and in turn, DGD holders).

Bounty Program

Not only this, but I wanted to try something different in in order to encourage contribution to this open source project and to help grow a community around Spectrum, I’m committing 1,000 DGDs to be given away in the form of a Contributor Bounty Program.

If you’re a developer, designer or ideas person, there is now an opportunity to be rewarded for contributing dev time, designs or ideas to the Spectrum project. If racking up some DGD rewards sounds appealing to you — head over to the SCBP wiki. I look forward to to crowdsourcing talent!

Community Engagement

Along with the bounty program, I will be creating a series of supporting tutorials and videos to help people new to Spectrum and react development.

Spectrum’s react-redux data store

Web3-redux & event-driven updates

Components Overview & React-Semantic-UI

Using the form system for transactions

Solidity patterns for UI development

Theming with Semantic UI

Once this series is complete, the goal is for any web developer to be able to spend a few hours studying, and then be ready to build the next killer dapp using Spectrum.

An Evolved Vision

Since the inception of Spectrum, a lot has changed in the ecosystem and there’s been a lot of opportunity to learn and adapt. In light of this knowledge, I wanted to highlight an additional few concepts that we’re going to take forward with Spectrum, and underline some we already announced.

Modular ecosystem; Truffle integration

The killer feature of truffle is it’s ability to integrate elegantly with the NPM/javascript ecosystem. With a standardised, importable format for deployed contracts, this enables the potential for a vast number of periphery tools and integrations. One such integration that we are committing to for Spectrum is to use truffle projects for packaging UI components alongside contracts and importing these ‘dapplets’ into Spectrum, keeping things super DRY and separating concerns. We’re using this pattern ourselves at Digix, and in the future, the Spectrum toolset will include a CLI tool for publishing dapplets of this format with a one-liner command that hooks into the truffle build system.

The killer feature of truffle is it’s ability to integrate elegantly with the NPM/javascript ecosystem. With a standardised, importable format for deployed contracts, this enables the potential for a vast number of periphery tools and integrations. One such integration that we are committing to for Spectrum is to use truffle projects for packaging UI components alongside contracts and importing these ‘dapplets’ into Spectrum, keeping things super DRY and separating concerns. We’re using this pattern ourselves at Digix, and in the future, the Spectrum toolset will include a CLI tool for publishing dapplets of this format with a one-liner command that hooks into the truffle build system. Accessibility / Security Paradigm

Spectrum has always been designed with this ‘accessibility/security paradigm’ in mind. We want to provide the full *ahem* spectrum of choice for individuals for any given use case — from the day to day user with a few dollars on their mobile phone, to the uber-paranoid whale with potentially billions of dollars of value being dealt with. Spectrum’s goal is to provide solutions for all these use cases, and will carefully guide people into making the right choices based on their ‘threat level’ (or how much they’re using). We see poor security partly as a UX issue, and hope to lower the barrier to improved security practices whilst encouraging (but not forcing) people to use them.

Spectrum has always been designed with this ‘accessibility/security paradigm’ in mind. We want to provide the full *ahem* spectrum of choice for individuals for any given use case — from the day to day user with a few dollars on their mobile phone, to the uber-paranoid whale with potentially billions of dollars of value being dealt with. Spectrum’s goal is to provide solutions for all these use cases, and will carefully guide people into making the right choices based on their ‘threat level’ (or how much they’re using). We see poor security partly as a UX issue, and hope to lower the barrier to improved security practices whilst encouraging (but not forcing) people to use them. Dapplet store

The recent release of webpack 3 has brought some nice new features and insights for making the design of the dapplet store more efficient 🎉. We’re really looking forward to getting this implemented and will be a killer feature that allows anyone to publish and showcase their decentralized apps. This will be part of Spectrum soon™.

The recent release of webpack 3 has brought some nice new features and insights for making the design of the dapplet store more efficient 🎉. We’re really looking forward to getting this implemented and will be a killer feature that allows anyone to publish and showcase their decentralized apps. This will be part of Spectrum soon™. Premium Services

Finally, there are some additional features that simply cannot be provided by a static site and RPC connection. We have alluded to push message notifications, token scanning and others (and have more in the pipeline). We have also figured out an innovative token-based payment mechanism that we plan to use for easily onboarding new users without needing to manage a payment gateway — yet another awesome use for Ethereum.

MIlestone Update

Now that we have a solid platform, the next immediate task is to achieve 100% test coverage of the existing codebase. This will hopefully be completed within the next couple of weeks, and as we plan to have serious value flowing through the veins of Spectrum eventually, we’re being highly meticulous. Spectrum’s test suite is currently set up to run 2 types of test environment:

End-to-end acceptance tests using Cucumber, WebdriverIO & Selenium which will allow features to be clearly defined and tested in an as-close-to-real-world environment, including on mobile. This framework lets us write our tests in english prose that’s understandable to non developers — covering broad features like “As a customer, I want to purchase 1,000 DGX”, and creating automated tests for this process in a real web browser. Running these tests each time release means the likelihood of costly bugs will be minimised.

which will allow features to be clearly defined and tested in an as-close-to-real-world environment, including on mobile. This framework lets us write our tests in english prose that’s understandable to non developers — covering broad features like “As a customer, I want to purchase 1,000 DGX”, and creating automated tests for this process in a real web browser. Running these tests each time release means the likelihood of costly bugs will be minimised. Component Unit Tests using Jest & Enzyme for specifying and asserting the behaviour of individual react components. By ensuring that we have 100% coverage of each component, we guarantee that each bit of UI logic is thoroughly vetted.

Combining these two types of testing to cover all of the core functionality of Spectrum will yield a very robust base for building on top of, and will provide peace of mind for implementing future features without introducing regressions.

After this, there are tonnes of feature ideas to be implemented with Spectrum. If you’re a web developer, designer or ideas person who’d like to help build the metropolis vision, you know who to call. Thanks!

Oh, and just a little side note on another project that we helped pioneer — Kovan has now processed over 1 MILLION transactions! See you in the faucet channel :)