3Box Extensions

A Plan To Compose 3Box Authentication, Storage and Messaging into Decentralized Applications

Kames
Kames
Nov 7 · 4 min read

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 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.

  1. Developers can more quickly build decentralized applications with ready-to-go components and structured data schemas.

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.

3Box Methods as a Side Effect

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.

Mooor coming soon!

Kames

Written by

Kames

Open Source The World

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade