Profile

package.json

@@ -21,6 +21,7 @@
   ],
   "author": "Aragon Institution MTU <[email protected]>",
   "dependencies": {
+    "3box": "^1.8.3",
     "@aragon/templates-tokens": "^1.2.1",
     "@aragon/ui": "^0.38.1",
     "@aragon/wrapper": "^5.0.0-rc.7",
@@ -30,9 +31,12 @@
     "eth-provider": "^0.2.0",
     "file-saver": "^2.0.1",
     "history": "^4.7.2",
+    "ipfs-http-client": "^32.0.1",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.memoize": "^4.1.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
+    "moment": "^2.24.0",
     "onecolor": "^3.0.5",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
@@ -49,6 +53,7 @@
     "resolve-pathname": "^3.0.0",
     "styled-components": "^4.1.3",
     "underscore": "1.8.3",
+    "uuid": "^3.3.2",
     "web3": "1.0.0-beta.33",
     "web3-utils": "1.0.0-beta.33"
   },
@@ -85,6 +90,7 @@
     "ui-assets": "copy-aragon-ui-assets -n aragon-ui ./build",
     "start": "node scripts/start",
     "start:local": "node scripts/launch-local",
+    "start:with:profiles": "cross-env WITH_PROFILES=true node scripts/start",
     "start:mainnet": "cross-env REACT_APP_ETH_NETWORK_TYPE=main npm start",
     "start:rinkeby": "npm start",
     "start:staging": "cross-env REACT_APP_ENS_REGISTRY_ADDRESS=0xfe03625ea880a8cba336f9b5ad6e15b0a3b5a939 npm start",

src/App.js

@@ -270,10 +270,7 @@ class App extends React.Component {
         log('transaction bag', transactionBag)
         this.setState({ transactionBag })
       },
-      onSignatures: signatureBag => {
-        log('signature bag', signatureBag)
-        this.setState({ signatureBag })
-      },
+      onSignatures: this.onSignatures,
       onIdentityIntent: async identityIntent => {
         // set the state for modifying a specific address identity
         let name = null
@@ -351,6 +348,10 @@ class App extends React.Component {
     return this.state.wrapper.requestAddressIdentityModification(address)
   }
 
+  onSignatures = signatureBag => {
+    this.setState({ signatureBag })
+  }
+
   render() {
     const {
       account,
@@ -444,6 +445,7 @@ class App extends React.Component {
                       locator={locator}
                       onRequestAppsReload={this.handleRequestAppsReload}
                       onRequestEnable={enableWallet}
+                      onSignatures={this.onSignatures}
                       permissionsLoading={permissionsLoading}
                       repos={repos}
                       signatureBag={signatureBag}

src/Wrapper.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import memoize from 'lodash.memoize'
 import { useViewport } from '@aragon/ui'
-import { AppCenter, Permissions, Settings } from './apps'
+import { AppCenter, Permissions, Settings, Profile } from './apps'
 import AppIFrame from './components/App/AppIFrame'
 import App404 from './components/App404/App404'
 import Home from './components/Home/Home'
@@ -26,6 +26,7 @@ import {
 import { getAppPath } from './routing'
 import { APPS_STATUS_LOADING, DAO_STATUS_LOADING } from './symbols'
 import { addressesEqual } from './web3-utils'
+import { withProfiles } from './repo-utils'
 
 class Wrapper extends React.PureComponent {
   static propTypes = {
@@ -43,6 +44,7 @@ class Wrapper extends React.PureComponent {
     locator: PropTypes.object.isRequired,
     onRequestAppsReload: PropTypes.func.isRequired,
     onRequestEnable: PropTypes.func.isRequired,
+    onSignatures: PropTypes.func.isRequired,
     permissionsLoading: PropTypes.bool.isRequired,
     repos: PropTypes.arrayOf(RepoType).isRequired,
     transactionBag: PropTypes.object,
@@ -372,6 +374,7 @@ class Wrapper extends React.PureComponent {
       connected,
       daoAddress,
       locator,
+      onSignatures,
       permissionsLoading,
       repos,
       walletNetwork,
@@ -438,6 +441,16 @@ class Wrapper extends React.PureComponent {
       )
     }
 
+    if (withProfiles && instanceId === 'profile') {
+      return (
+        <Profile
+          account={account}
+          onSignatures={onSignatures}
+          parts={locator.parts}
+        />
+      )
+    }
+
     // AppLoader will display a loading screen in that case
     if (!wrapper || appsLoading) {
       return null

src/apps/Profile/ipfs/index.js

@@ -0,0 +1,9 @@
+import ipfsClient from 'ipfs-http-client'
+
+const infuraIpfs = ipfsClient({
+  host: 'ipfs.infura.io',
+  port: '5001',
+  protocol: 'https',
+})
+
+export default infuraIpfs

src/apps/Profile/modules/3box-LD.js

@@ -0,0 +1,125 @@
+import { isIPFS } from 'ipfs-http-client'
+
+import {
+  worksFor,
+  schoolAffiliation,
+  homeLocation,
+  schemaDotOrgImage,
+} from './things'
+
+const usedFields = new Set([
+  'name',
+  'jobTitle',
+  'homeLocation',
+  'affiliation',
+  'url',
+  'description',
+  'image',
+  'worksFor',
+])
+
+const handleJobTitle = publicProfile => {
+  if (publicProfile.job) {
+    const { job } = publicProfile
+    delete publicProfile.job
+    return { ...publicProfile, jobTitle: job }
+  }
+  return publicProfile
+}
+
+const handleEmployer = publicProfile => {
+  if (publicProfile.employer) {
+    const { employer } = publicProfile
+    delete publicProfile.employer
+    return { ...publicProfile, worksFor: worksFor(employer) }
+  }
+  return publicProfile
+}
+
+const handleEducation = publicProfile => {
+  const hasEducation = !!publicProfile.school
+  if (!hasEducation) return publicProfile
+
+  const affiliation = publicProfile.affiliation || []
+
+  return {
+    ...publicProfile,
+    affiliation: schoolAffiliation(publicProfile.school, affiliation),
+  }
+}
+
+const handleWebsite = publicProfile => {
+  if (publicProfile.website) {
+    const { website } = publicProfile
+    delete publicProfile.website
+    return { ...publicProfile, url: website }
+  }
+  return publicProfile
+}
+
+const handleLocation = publicProfile => {
+  if (publicProfile.location) {
+    const { location } = publicProfile
+    delete publicProfile.location
+    return {
+      ...publicProfile,
+      homeLocation: homeLocation(location),
+    }
+  }
+
+  return publicProfile
+}
+
+const handlePerson = publicProfile => {
+  const isPerson =
+    publicProfile['@type'] === 'Person' &&
+    publicProfile['@context'] === 'http://schema.org/'
+
+  if (isPerson) return publicProfile
+  return {
+    ...publicProfile,
+    '@type': 'Person',
+    '@context': 'http://schema.org/',
+  }
+}
+
+export const handleImage = publicProfile => {
+  const hasImage = !!publicProfile.image && publicProfile.image.length > 0
+  if (!hasImage) return publicProfile
+  const isProperlyTyped =
+    Array.isArray(publicProfile.image) &&
+    publicProfile.image.length > 0 &&
+    publicProfile.image[0].contentUrl &&
+    typeof publicProfile.image[0].contentUrl === 'object'
+
+  const cid = isProperlyTyped && publicProfile.image[0].contentUrl['/']
+  const isIPLD = isIPFS.cid(cid)
+
+  if (isIPLD) {
+    delete publicProfile.image
+    return { ...publicProfile, image: schemaDotOrgImage(cid) }
+  }
+  throw new Error('unknown image type passed')
+}
+
+/* prettier-ignore */
+export const format = publicProfile => {
+  const formattedProfile =
+    handlePerson(
+        handleLocation(
+          handleWebsite(
+            handleEducation(
+              handleEmployer(
+                handleJobTitle(
+                  handleImage({ ...publicProfile })))))))
+  return formattedProfile
+}
+
+export const populateFormValue = publicProfile => {
+  const strippedObject = {}
+  Object.keys(publicProfile)
+    .filter(field => usedFields.has(field))
+    .forEach(field => (strippedObject[field] = publicProfile[field]))
+
+  return strippedObject
+}