3Box Extensions
A Plan To Compose 3Box Authentication, Storage and Messaging into Decentralized Applications
3Box Extensions is an unofficial (non-affiliated) project focused on creating a React focused 3Box extensions system — ideally an extension system supporting multiple environments though: Mobile, Browser and Desktop.
TL;DR: Light-weight, global state management. Common decentralized identity interface components. Side-effect management. API for building re-usable plugins. Add 3Box to new React applications with minimal dependencies and include a light-weight, un-opinionated, design system.
Official 3Box Site: https://3box.io
Unofficial 3Box Extensions Site: http://3box-extensions.netlify.com

Why
3Box is making great strides towards simplifying the DID building blocks. Plus, for an internal Research and Development project at ConsenSys we need an extensible state management system that connects with decentralized identity.
Thus, 3box-extensions is crafted ⚗️!
What
A cross-environment 3Box Extension system. Functional React components wrapped around core 3Box/3ID methods. Un-opinionated design system to globally change element styles/effects.
Getting Started
https://github.com/KamesCG/3box-extensions
git clone git:github.com/KamesCG/3box-extensions
Terminal 1
yarn
yarn watch
Terminal 2 (Demo)
cd apps/dapp ; yarn start
The best place for developers to get understand what’s happening is to start at the root module, which is packages/3box-ui-state.
Overview
The 3box-extensions project is a Lerna/Workspaces mono-repo.
- 3Box UI State
3box-ui-state - 3Box UI System
3box-ui-system - 3Box UI System Render
3box-ui-system-render - 3Box UI Profiles
3box-ui-profiles - 3Box UI Storage
3box-ui-storage - 3Box UI Messaging
3box-ui-messaging
3Box UI State
The 3Box UI State 3box-ui-state module provides a lightweight state management container for handling 3Box interactions. Utilizing the latest functional React component paradigm (Hooks, Reducers, Context) the module provides the getters/setters/dispatchers required for communication with 3Box Pinning Nodes and JSON-RPC endpoints.
Developers can worry less about dispatching and handling requests and more about composing together components to build a unique user experience.
Adding the BoxUIProvider to an application component tree will provide the state handlers to all child components using the BoxUIContext or BoxUIInject state providers.
import React from 'react'
import { BoxUIProvider } from '3box-ui-system'
export default props =>
<BoxUIProvider>
{props.children}
</BoxUIProvider>Similar to Redux, state is passed to specific components from a global state manager (Context) and controlled with reducers. Providing a light-weight state management system for interface components to share.
// Context Interface
enable: () => { },
login: () => { },
logout: () => { },
addRequest: () => { },
confirmRequest: () => { },
confirmAllRequests: () => { },
openSpace: () => { },
listSpaces: () => { },
subscribedThreads: () => { },
getThread: () => { },
getThreadByAddress: () => { },
getConfig: () => { },
getVerifiedAccounts: () => { },
joinThread: () => { },
joinThreadByAddress: () => { },
threadPost: () => { },
threadPostDelete: () => { },
threadListen: () => { },
threadAddModerator: () => { },
threadAddMember: () => { },The dispatch methods general are parity the 3Box API methods. Non-standard names implies the 3box-ui-state is extending, enhancing or simplifying an existing method.
3Box UI System
The 3Box UI System 3box-ui-system uses the 3box-ui-state module and adds core 3Box features: authentication, storage and messaging as components.
Encapsulating 3Box methods into components provides several benefits.
- Developers can more quickly build decentralized applications with ready-to-go components and structured data schemas.
- React can be a “headless” state management system for 3Box and serve entirely as a side-effect management system.
First, the 3Box UI System adds core features like Access Control, Login Components, Privacy Controls, etc… The interface system, while slightly opinionated in the form of what Components you’re likely to include and build, generally includes minimal styling and provides an abundance of opportunity to add custom components when required.
Second, the new React paradigm of functional programming with components is also a great approach to writing software in general. For example wrapping the 3Box storage set method as a side-effect of bigger application help’s us contain specific logic into a composable block, whether a render component is returned or not.
In short, the the 3Box UI System module wraps core 3Box.js functionality into composable components, used both for rendering an interface, and also potentially* managing application side-effects (i.e. state updates)
*The side-effect system approach is untested and just a hypothesis at the moment. To better understand the importance of a side-effect management system for 3Box more experimentation is still required.
Authentication Examples
Login
Enable Ethereum
Access Control
AccessAuthentication
https://gist.github.com/KamesCG/e124e546ac2a327eae39de885aecf11f
AccessSpace
AccessThread
3Box UI System Render
The 3Box UI System Render 3box-ui-system-render is responsible selecting/retrieving data from addressed storage spaces.
The render module provides a thin component factory layer. Allowing developers to easily select data and pass that data into props into custom render components.
