3box / 3box-dapp

3Box Hub App: User profiles and storage drive

Welcome to 3Box Labs!

3Box Labs is a Web3 product studio that creates software to advance a more open, safe, and collaborative web. We are the inventors and a core maintainer of Ceramic, a decentralized network for composable data. Permissionless data composability will inevitably network all of the information on the web, transform the way we build applications, and connect users to their data, and each other, in new and exciting ways. To learn more about 3Box Labs, visit https://3boxlabs.com/.

Getting Started

👤 Visit Ceramic Network to build applications with composable data.

💬 Join Ceramic Community Discord to chat with the core team and developer community

👩‍💻 Explore our blog to learn more about Ceramic, comopsable data and Web3 - and sign up for our newsletter.

3box-dapp's Issues

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.

CircleCI

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.

Login in to MM Warning Modal

@oznekenzo commented on Mon Oct 01 2018

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.

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

Submit the Coinbase Wallet Dapp Integration Form

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

Efficient 3box calls & save to redux store

Add license to 3box-dapp repo

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

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.

Debug build react app

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.

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.

Profile Page - all UI arranged for MVP

@michaelsena commented on Wed Sep 12 2018

Create 3box-dapp hosting on AWS

Add timestamped data to feed

Add terms page to website

Debug any issues that come up

Edit 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?

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.

Use Token Name & Symbol in Activity

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

Integrate private store into dapp

Update Edit Profile Page

Add privacy page to website

Allow users to verify their Github handle

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

Enable CircleCI for the new AWS account

Activity organized by address in the feed

Update Profile Page

Change beta dapp URL to beta.3box.io

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

Add search to 3box-dapp

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

Make sure dapp works with the new library

Landing Page - all UI arranged for MVP

@michaelsena commented on Wed Sep 12 2018

Make dapp mobile responsive

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)

Clean dapp code

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"

dapp MVP

Update Landing Page

Ensure that dapp passes tests and builds

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

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

Like venmo

Ensure dapp deploys

Add the ability for users to follow other users

Subscribe to certain users, and build a following themselves