3box / 3box-dapp

3Box Hub App: User profiles and storage drive

⚠️ ⚠️ Deprecated in favor of Ceramic ⚠️ ⚠️

3box.js and related tools built by 3Box Labs are deprecated and no loger supported. Developers are encurraged to build with https://ceramic.network which is a more secure and decentralized protocol for sovereign data.

3Box Profiles Application

This is the home of the 3Box Profiles Application, which is deployed at https://3box.io and works on all standard web3-compatible browsers. The 3Box Profiles Application is built on top of the 3Box user data network and allows users to:

• create a social web3 profile, which they can use to sign in to Ethereum applications
• store and manage their information on IPFS, in OrbitDB instances
• verify their Github and Twitter social accounts for use throughout the web3 dapp ecosystem
• view their unified, integrated Ethereum and 3Box activity feed

Getting Started

• New users create a profile
• Existing users sign in to your profile
• Experiencing an issue? Report it here
• Want to contribute? Read our contributor's guide

For an overview of 3Box and all of our components, check out the main 3Box project repo.

Functionality

Create a Social Profile

The primary feature of the 3Box Profiles App is that it allows Ethereum users to create a shareable social profile for their Ethereum account. 3Box profiles consist of various public and private information saved by the user and other applications (with the user's consent).

Public Profile

Public profiles are available for all to see. The 3Box Profiles App allows users to add a name, image, description, emoji, twitter, github, education, and work history to their public profile. Third-party applications can save additional information to the user's public profile as well, such as public group affiliations, using the 3Box.js API. Public profiles are available for all to query using the getProfile() method in the 3Box.js API, even without the user's consent – since the information is public.

Private Profile

Private profiles consist of encrypted data and are only made available to specific third-party applications that the user approves. The 3Box Profiles App offers users the ability save email and birthday to their private profile, however applications can save additional information there as well.

View Your Activity Feed

User activity feeds in the Profiles App display a simple, unified view on a user's activity across all Ethereum networks and the 3Box network. The 3Box activity feed relies on the 3box-js getProfile() method and the MetaMask contract metadata library to replace hexadecimal Ethereum addresses with more user-friendly information.

Verify Your Web2 Social Accounts

The Profiles App allows users to verify certain important attributes of their profile so other users and third-party apps can be more confident in the information that users claim about themselves. Users' Twitter and Github account handles are verified and saved to their public profile, while emails are verified and saved to the private profile. The code for verifications can be found at 3box-verifications. Verifications follow decentralized identity (DID) standards proposed by the decentralized identity foundation (DIF), and are issued as JWTs.

Technical Components

3Box.js

The 3Box Profiles App uses the 3Box.js API (3box-js) for all interactions with the 3Box user data network, including setting, getting, and removing information.

3Box Verifications

The Profiles App relies on the 3box-verifications library to issue and verify Github, Twitter, and Email claims.

3Box Activity

The activity feed populates 3Box activity using 3box-js and Ethereum activity using the 3box-activity library. The 3box-activity library is a wrapper on the Etherscan API which presents public network activity.

Maintainers

@zachferland

3box-dapp's Issues

CircleCI

Assure New 3Box User Upon Consent

Create a UX that introduces 3Box concepts simply, assure how users' data is used, and how it will be safe, on same page as final consent signature prompt.

Debug any issues that come up

Have Conversation Regarding the Redux Actions, Reducers, Sagas Structure

I use a slightly different method for handling Redux actions and sagas that reduces the amount of reducers required to be written i.e. always expect a payload and metadata plus keep track of the status of the request in a single reducer that monitors all requests via delta identifier. That being said, the setup still allows for custom reducers if that need arises as demonstrated in the ether.js reducer.

This might cause some confusion for developers use to a more traditional Redux setup. Probably worth ripping out and using a more standard style.

export default (state = initialState, {type, payload, metadata, batch, entity} ) => {
  if(!!(metadata && metadata.delta) && entity === 'ethers') {
    return {
      ...state,
      [metadata.delta]: {
        ...state[metadata.delta],
        status: {
          REQUESTED: undefined,
          SUCCESS: true,
          FAILURE: false
        }[batch],
        data: payload
      }
    }
  } else{
    switch (type) {
      case actions.PROVIDER_CHANGE:
        return {
          ...state,
          provider: payload
        }
      case actions.CHAIN_CHANGE:
        return {
          ...state,
          chain: payload
        }
      case actions.JSONRPC_URL_CHANGE:
        return {
          ...state,
          url: payload
        }
      default:
        return state
    }
  }
}

Assure New 3Box User Upon Consent

Create a UX that introduces 3Box concepts simply, assure how users' data is used, and how it will be safe, on same page as final consent signature prompt.

Assure New 3Box User Upon Consent

Create a UX that introduces 3Box concepts simply, assure how users' data is used, and how it will be safe, on same page as final consent signature prompt.

Make dapp mobile responsive

dapp MVP

Landing Page - all UI arranged for MVP

@michaelsena commented on Wed Sep 12 2018

Login in to MM Warning Modal

@oznekenzo commented on Mon Oct 01 2018

Activity organized by address in the feed

Edit Profile Page - all UI arranged for MVP

@michaelsena commented on Wed Sep 12 2018

Use Token Name & Symbol in Activity

Ensure that dapp passes tests and builds

Update Landing Page

Update Profile Page

Add license to 3box-dapp repo

We need to decide what the license is and then get the page up.

Ensure dapp deploys

Add timestamped data to feed

Change beta dapp URL to beta.3box.io

from develop.3box.io. This update will make the URL more user-friendly and intuitive

Provide users with a unique and specific profile URL

This will set the stage for us to be able to share profiles with this link.

Allow users to verify their Github handle

Can integrate a @mi-xu library for this probably?

Enable CircleCI for the new AWS account

Create Client Install screen for mobile browser

As a user visiting 3Box.io from a mobile Safari/Chrome browser, I need to immediately see an interrupting screen that directs me to:

1. Button to install Coinbase Wallet

2. Button to Install Status.im

3. Directions to open site in Coinbase or Status Browser.

(see how 0x does it)

Make sure dapp works with the new library

Assure New 3Box User Upon Consent

Create a UX that introduces 3Box concepts simply, assure how users' data is used, and how it will be safe, on same page as final consent signature prompt.

Assure New 3Box User Upon Consent

Create a UX that introduces 3Box concepts simply, assure how users' data is used, and how it will be safe, on same page as final consent signature prompt.

Assure New 3Box User Upon Consent

Create a UX that introduces 3Box concepts simply, assure how users' data is used, and how it will be safe, on same page as final consent signature prompt.

Add the ability for users to follow other users

Subscribe to certain users, and build a following themselves

Add privacy page to website

Create design assets for Coinbase Wallet Submittion

Here's more detail on the requirements: https://docs.google.com/forms/d/e/1FAIpQLSfZ3IQUL4xgT8fEyj19lDuir2cQ-rhq0PCrZq-cAmMGJAUkCg/viewform

Efficient 3box calls & save to redux store

Profile Page - all UI arranged for MVP

@michaelsena commented on Wed Sep 12 2018

Allow users to verify their email address

Can integrate a @mi-xu library for this probably?

Clean dapp code

Create 3box-dapp hosting on AWS

Add the ability for users to view a global feed for all 3Box users

Like venmo

Add terms page to website

Set up basic react web app scaffolding

@michaelsena commented on Wed Aug 15 2018

---

@kamescg commented on Wed Aug 15 2018

What's required here exactly in terms of scaffolding?

Do y'all need application state management i.e. Redux (Actions, Reducers) and Sagas, like in the the MobileApp? Should I include boilerplate for communicating with a Blockchain and IPFS via Infura? Want to use ethers.js or web3.js 1.0.x for the latest and greatest? Need a set of atomic design components for rapid UI/UX prototyping using styled-components?

Is this for a contact list app? Something else?

What's the short-term objective? And perhaps a little insight into the more long-term objective, so I can know what to do or not do in this scaffolding?

I have questions :)

---

@oed commented on Thu Aug 16 2018

From the technical standpoint you only need to provide a way of getting the ethereum address from MM. Then everything that relates to getting data from ipfs/ethereum would be preformed by the 3box client library. I don't think we need very complicated state management, but I'm sure @michaelsena can fill you in on the design details.

The short term objective is to create a dapp where you can manage your public profile, your private data, and your public activity.

---

@kamescg commented on Thu Aug 16 2018

Perfect.

Regarding MM, I know their planning to stop injecting Web3 natively soon, which might effect getting the Ethereum address easily, so I'll see what it might require to future proof the scaffolding from such a change.

For the rest of the scaffolding, just let me know what you need in terms of components i.e. avatar (blockies?), form components (redux form?) and maybe wireframe outline of any important pages?

@oed I like to use recompose and pure functional components, but that might be a bit much here?

/* --- External Dependencies --- */
import React from 'react'
import { connect } from 'react-redux';
import { compose, lifecycle } from 'recompose'
/* --- Module Package --- */
import { databaseReadRequest } from 'store/departments/actions'

/* ------ Module ------*/
const QueryLifecycle = lifecycle(
{
  componentDidMount()
  {
    if (this.props.branch && this.props.delta ) {
      this.props.loadImage({
        metadata: {
          branch: this.props.branch,
          delta: this.props.delta,
        }
      })
    }
  }
})


const mapDispatchToProps = dispatch => ({
  loadImage: (action)=>dispatch(databaseReadRequest(action)),
})

const Component = ()=> <div></div>

export default compose(
  connect(null, mapDispatchToProps),
  QueryLifecycle,
)(Component);

Since you'll most likely maintain long-term should I stick with the standard Class orientated component development for the scaffolding?

---

@oed commented on Fri Aug 17 2018

Sounds good re MM.

We need a way to set and display avatar, name, email, and maybe some more fields. I think @michaelsena is working on a wireframe that he will give you.
I usually like that type of functional components, I think it makes sense to use if it isn't too much additional work. We are planning on keeping this dapp for longer term.

Assure New 3Box User Upon Consent

Create a UX that introduces 3Box concepts simply, assure how users' data is used, and how it will be safe, on same page as final consent signature prompt.

Debug build react app

Submit the Coinbase Wallet Dapp Integration Form

Found Here: https://docs.google.com/forms/d/e/1FAIpQLSfZ3IQUL4xgT8fEyj19lDuir2cQ-rhq0PCrZq-cAmMGJAUkCg/viewform

Assure New 3Box User Upon Consent

Create a UX that introduces 3Box concepts simply, assure how users' data is used, and how it will be safe, on same page as final consent signature prompt.

Integrate Get Activity into dapp

Remove Unnecessary Dependencies from package.json & Update React to 16.x.x

The package.json contains multiple unnecessary dependencies. I will review in the coming days and remove packages which are no longer required for this project.

Additionally, after removing a few outdated dependencies I should be able to update to React 16, so the project can use fancy new React features in the future.

"dependencies": {
    "@material-ui/core": "^1.2.0",
    "blob-util": "^2.0.2",
    "ethers": "3.0.15",
    "filter-keys": "^1.1.0",
    "firebase": "^4.9.1",
    "glamor": "^2.20.40",
    "history": "^4.6.3",
    "idx": "^1.5.0",
    "ipfs-api": "^22.0.1",
    "js-sha3": "^0.7.0",
    "lodash": "^4.17.4",
    "material": "^0.2.6",
    "material-ui": "^0.18.6",
    "material-ui-chip-input": "^0.19.0",
    "mnid": "^0.1.1",
    "palx": "^1.0.2",
    "raw-loader": "^0.5.1",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.6.0",
    "react-async-component": "^1.0.2",
    "react-dev-utils": "^3.0.2",
    "react-dom": "^15.6.1",
    "react-dropzone": "^4.2.11",
    "react-error-overlay": "^1.0.9",
    "react-hot-loader": "next",
    "react-particles-js": "^2.2.0",
    "react-perfect-scrollbar": "^1.0.0",
    "react-places-autocomplete": "^7.1.2",
    "react-popover": "^0.4.16",
    "react-qr-svg": "^2.1.0",
    "react-redux": "^5.0.5",
    "react-remarkable": "^1.1.3",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "next",
    "react-svg-inline": "^2.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "react-toastify": "^3.3.2",
    "recompose": "^0.25.0",
    "redux": "^3.7.2",
    "redux-form": "7.1.2",
    "redux-form-material-ui": "^4.2.0",
    "redux-logger": "^3.0.6",
    "redux-saga": "^0.15.4",
    "redux-saga-firebase": "git+https://github.com/KamesCG/redux-saga-firebase",
    "redux-saga-thunk": "^0.5.1",
    "style-loader": "0.18.2",
    "styled-components": "^2.1.1",
    "styled-system": "1.1.1",
    "styled-theme": "^0.3.3",
    "sw-precache-webpack-plugin": "0.11.3",
    "uport-connect": "^0.7.0",
    "url-loader": "0.5.9",
    "uuid": "^3.2.1",
    "validator": "^8.0.0",
    "web3": "^1.0.0-beta.34",
    "webassembly": "^0.11.0",
    "whatwg-fetch": "2.0.3",
    "write-file-webpack-plugin": "^4.2.0"

Update Edit Profile Page

Add search to 3box-dapp

Allow users to search getPublicProfile from the dapp, and view results in realtime

Add way to let users discover where they can use 3Box profile

Like a "Dapp Universe" page or something that highlights partners, or at a minimum links to this github page if it achieves traction: https://github.com/uport-project/3box/blob/master/COMMUNITY-PROJECTS.md.

Integrate private store into dapp

Assure 3Box User Upon Consent

Create a UX that introduces 3Box concepts simply, assure how users' data is used, and how it will be safe, on same page as final consent signature prompt.