Announcing Spectrum — Full Gamut Lightsuite for Ethereum Blockchains

Chris Hitchcott — (Digix Core Dev)

Digix is providing a new UX solution for interacting with Ethereum with the purpose of increasing future adoption of DGX and the wider ecosystem.

Lightwhat?

What is a Lightsuite? It’s a word invented to describe that what wasn’t fully encapsulated by the term Lightwallet.

Basically, a Lightwallet in the case of Ethereum is a piece of software that provides an interface for users to interact with a blockchain by creating accounts, connecting to a node, reading chain data, signing and broadcasting transactions.

At some point, though, a Lightwallet gets too many features to be properly considered a ‘wallet’ anymore. The Mist browser, for instance, is more of a multi-tool than a wallet. It’s got an address bar and everything, so we call that a ‘browser’. But what if it hasn’t got an address bar?

Well, similar to a Mist, a Lightsuite is a full spectrum of tools for Ethereum — and just like a Lightwallet, they’re available in the browser; it’s a user interface for connecting to Ethereum by via a hosted (or local) node.

Let there be Light

Over the last couple of weeks I’ve been working on the groundwork for a Lightsuite called Spectrum, which we at Digix will be using to help the development of the Ethereum ecosystem and for use in future Digix and third party projects.

The main goal of the project is to create a tool that provides the best possible user experience for the full spectrum of users; investors, developers and casual. One critical requirement is to have a ‘zero-install’ entry point (i.e. web-based) for zero-friction welcome to Ethereum.

For developers (and in particular us at Digix), it also means more rapid development of dapps — no accounts or web3 state management to rewrite, so new DigixDAO experiences can be rolled out faster than ever, and will be one-click away from existing Spectrum users.

There are a number of tools existing that tick some of those boxes, but there are currently no offerings that cover this full spectrum of ‘Best Possible UX’ options.

Please note, screenshots in this announcement are early alpha and may not fully reflect the completed project.

Feature Overview

Spectrum achieves its UX goal through a combination of technologies that marry the accessibility of MyEtherWallet, the portability of Jaxx and the dapp store platform vision of Mist/Parity.

Spectrum Comparison

(Might not be 100% accurate when you read this; please let me know when it becomes outdated!)

Adoption First

The ultimate goal of Spectrum is to provide a low-barrier easy to use experience whilst still providing a powerful set of tools. There are a few key features in terms of both accessibility and UX design that together ensure a wider number of users can intuitively make use of Ethereum.

Works everywhere instantly with no installs By connecting to Ethereum using third party nodes and signing transactions on the client, an acceptable balance of security and convenience is achieved without requiring a central trusted service. Designed to work fully featured in any modern browser and device, using Spectrum is as simple as visiting a website, and requires no waiting for the blockchain to re-sync.

Travel with your application state Depending on your security/convenience tolerance, Spectrum’s encrypted app-state backup system allows you to sync your accounts, transactions and other data with a number of storage adapters with ease, and share individual app sessions with multiple devices using JSON File, Google Drive, Dropbox, IPFS and eventually, Swarm.

Responsive design The Semantic UI responsive grid is used extensively to provide an optimized user experience on mobile, desktop and tablet.

1st class support for offline transaction signing Generate data with every transaction for offline signing, allowing for a seamless cold-storage experience.

Sessions and Keystores

Session backups include accounts configuration and Ethereum private keys (in encrypted geth-compatible format), as well as application state and transaction history.

It lets you easily divide your portfolio up into different security groups depending on use case, and keeps the (already encrypted) wallets along with the account-specific application data in the same place encrypted with AES256 + optional custom entropy.

In app storage and runtime state, keystores are always stored as the standard, serialized, encrypted v3 objects. A secret key that is not saved in persistent state is required to be entered to decrypt and sign the transaction.

Various storage adapters are available for backup/restoring of sessions, as well as standard exporting for keystores.

Keystore Exports compatible with Spectrum, Geth, MyEtherWallet, etc.

  • JSON
  • Mnemonic
  • Private Key

Session Exports compatible with Spectrum, optionally encrypted

  • LocalStorage
  • JSON
  • Cloud Backup (google/dropbox)
  • IPFS
  • Swarm

Multi-Nodes

Users can configure multiple networks and providers they connect to in-app, giving complete flexibility during testing, production and private deployments. Either connect to a local geth/parity service or connect to a remote node — be it private, premium, or public (although defaults aren’t confirmed yet).

We’re hoping to work with some existing node providers (such as Infura, Azure, etc) to provide a service for Spectrum users by default on Ethereum Mainnet and Testnet.

Plugins & Middleware

Spectrum’s dynamic provider creation and redux architecture allows for powerful, unobtrusive user experiences; particularly for signing transactions. Developers can register custom signing components that provide custom UI for different types of signing — be it Hardware wallets, 2FA contracts, or other third party services.

Dapplets

Spectrum comes complete with a selection of official and community ‘dapplets’ — fully fledged apps that run within React components in the Spectrum environment and use its accounts system to sign transactions (whilst seamlessly hooking into any transaction signing plugins).

Spectrum provides dapplet developers with an intuitive web3-style syntax for hooking into the accounts system and managing web3 state, with a custom redux environment injected for each dapplet. Dapplet state can be saved persistently between sessions so authors can deliver a superior long-term experience.

Dapplets are lazy-loaded on-demand to reduce the initial bundle size and give users an optimal experience for their use requirements.

Digix Dapplets One of the main reasons for the creation of spectrum is to facilitate future official Digix projects, including UI for upcoming contracts and services:

  • DGD Governance / Voting
  • DGX Reward Claims
  • Aegis Vault
  • TBA Future Digix Services

Dapplet Registry Initially an official list of dapplets published by Digix will be added to a single Spectrum dapplet/plugin registry, including standard types:

  • Tokens (EIP20 and misc. types; pre-populated / custom)
  • MultiSig
  • 2FA Signing
  • Scriptable actions (e.g. tumbling)
  • Custom token signer (e.g. nano ledger, trezor, etc.)
  • Generic contract/ABI interaction
  • With a bit of luck, browser-solidity

Custom Registries In future releases the registry contract will be updated to enable community dapplets with content verified by author address and content hash, and eventually custom registries (pending a security review).

Technology

There has been a lot of advancements in the world of web application development in the last year or so, and having migrated away from Meteor/Blaze earlier this year, I became familiar with a delightful toolset that plays particular nicely with client-side apps. Having used it for around a year, I was confident that it was the best pick for a complex modern application like Spectrum.

Ticking all of the boxes can only be achieved with a specific tech stack, which will be open source and offer a free commercial use license.

ES6 HTML5 Web App

  • Offline support
  • Optional encrypted LocalStorage sessions
  • Modern, composable, extendable, tree-shakeable, importable architecture
  • Modular separation of core/UI logic
  • Component Lazy Loading

React Components

  • Reusable UI Components (e.g. Account Selector)
  • Wide Developer Adoption
  • Excellent Developer Toolkit
  • Mature Package Community

Webpack Bundler

  • Aggressive bundle optimisation & partitioning
  • Seamlessly deploy to multiple environments
  • Ubiquitous client-only deployments (Github / IPFS / Serverless)

ProviderEngine

  • Dynamic provider and accounts injection per-container
  • Transaction signing UI plugins/middleware
  • Custom Node Config: Ethereum, Ropsten, Private Chains

Web3-Redux

One major component is web3-redux, a library I’ve been working on as part of the spectrum project. I’m particularly happy with it’s integration with the redux architecture by using a familiar web3 api. It can be used as such:

Web3-redux does a bunch of wiring up in the background to handle the actions and reducers for web3 requests, and ties them all behind the same-style web3 API for use in redux apps.

  • Simplified web3 integration with reactive pseudo-syncronous style
  • Injected redux state/methods with traditional web3 api
  • Promisified contracts/transactions
  • Intelligent fetching/caching middleware
  • Other potential middleware plugins options in the future

Stay tuned for more on web3-redux as development progresses.

Semantic UI

SUI is our favourite CSS framework, and it’s recently come with a new react library which makes it even more delightful to work with, and along with some custom components, it’ll be the underlying fabric for the Spectrum GTK.

This might deserve it’s own blog post, but i’ll summarise:

  • Beautifully crafted components
  • Fairly common usage in the wild
  • Standardised UI for intuitive usage
  • Also standard between dapplets (think myspace -> facebook)
  • Declarative API for developers
  • Lightning fast React library; no jQuery
  • Theme Manager w/ Community Themes

Roadmap

Here’s a rough, best-case-scenario estimate of progress. We’ll be open sourcing after alpha release, so you can follow development on github.

Alpha (Next Week)

  • LocalStorage Sessions
  • JSON, Mnemonic, Private Key Import/Export
  • Quick ETH Transfer
  • Token Transfer

Beta (Jan/Feb 2017)

  • Address Book
  • Cloud Backup
  • IPFS Backup
  • Hard-coded dapplet regsitry
  • Theme Manager
  • Transaction signing plugins
  • Cold storage transactions

Stable 1.0 (Q1 2017 + beyond)

  • Security Review
  • End-to-end test coverage

Fandango

  • i18n (Chinese esp.)
  • QR code scanner for mobile
  • Hardware wallet support

Majorelle

  • Community dapplet registry contract
  • Digix governance dapplet
  • 3rd party services dapplets
  • Dapplet develop toolkit

Harlequin

  • 2FA signing
  • Swarm Backup?
  • Raiden network?

Aureolin

  • Chrome extension & Electron/Cordova apps

Carmine

  • TBA Premium Services

Trivia

Why Spectrum? Apart from the reference to all-encompassing feature set, it was originally an ode to ‘Electrum’ and is a play on Lightwallet. Also it sounds badass and opens up the opportunity for a slick Ethereum Icon / ‘Dark Side of the Moon’ mashup logo.

Thank You

One last thing I wanted to do was a give a shoutout to all the Digix fans and DGD holders who have continued to show their support and patience whilst we build these tools in the right way. I hope this contributes to the Metropolis vision as Spectrum evolves into the future.

I welcome all your feedback!

Catch you next week with an alpha demo.

To Note:
Development on spectrum will not affect progress on DGX 2.0, in fact, it will have a positive effect on DGX 2.0 and DigixDAO as all our DAO governance UI will be on Spectrum.