AutarkLabs · ottodevs · Apr 24, 2020 · Apr 24, 2020 · Apr 24, 2020 · May 21, 2020
diff --git a/.babelrc b/.babelrc
@@ -11,8 +11,7 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    ["styled-components", { "displayName": true }],
-    "@babel/plugin-proposal-class-properties"
+    ["styled-components", { "displayName": true }]
   ],
   "env": {
     "test": {

diff --git a/package.json b/package.json
@@ -21,43 +21,48 @@
   ],
   "author": "Aragon Institution MTU <[email protected]>",
   "engines": {
-    "node": "10.x"
+    "node": ">=10.x"
   },
   "dependencies": {
+    "3box": "1.17.1",
     "@aragon/templates-tokens": "^1.2.1",
     "@aragon/ui": "^1.2.1",
-    "@aragon/wrapper": "petermphillips/aragon-wrapper",
+    "@aragon/wrapper": "AutarkLabs/wrapper-build",
     "@babel/polyfill": "^7.0.0",
-    "@openworklabs/aragon-profile": "petermphillips/aragon-profile",
+    "@openworklabs/aragon-profile": "AutarkLabs/profile-build",
     "@sentry/browser": "^5.5.0",
     "@ungap/event-target": "^0.1.0",
     "axios": "^0.19.0",
     "clipboard-polyfill": "^2.8.6",
+    "codemirror": "^5.51.0",
     "core-js": "^3.3.2",
     "date-fns": "2.0.0-alpha.22",
     "decimal.js": "^10.2.0",
+    "drag-tracker": "^1.0.0",
     "eth-ens-namehash": "^2.0.8",
     "eth-provider": "^0.2.0",
     "file-saver": "^2.0.1",
     "history": "^4.9.0",
+    "ipfs-http-client": "^41.0.1",
     "lodash.debounce": "^4.0.8",
     "lodash.memoize": "^4.1.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
     "multicodec": "0.5.6",
     "prop-types": "^15.6.2",
-    "react": "^16.8.6",
+    "react": "^16.13.1",
     "react-dom": "^16.8.6",
     "react-dropzone": "^10.1.3",
     "react-helmet": "^5.2.1",
+    "react-markdown": "^4.3.1",
     "react-spring": "^7.2.10",
     "react-use-gesture": "^5.2.4",
     "regenerator-runtime": "^0.13.3",
     "remark": "^10.0.1",
     "remark-react": "^5.0.1",
     "resolve-pathname": "^3.0.0",
     "styled-components": "^4.1.3",
-    "web3": "^1.2.2",
+    "web3": "1.2.7",
     "web3-eth-abi": "^1.2.4",
     "web3-utils": "^1.2.2"
   },
@@ -106,6 +111,7 @@
     "build:staging": "cross-env ARAGON_ENS_REGISTRY_ADDRESS=0xfe03625ea880a8cba336f9b5ad6e15b0a3b5a939 npm run build",
     "build:ropsten": "cross-env ARAGON_ETH_NETWORK_TYPE=ropsten npm run build",
     "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix",
     "test": "npm run lint && npm run jest",
     "jest": "jest",
     "publish:major": "node scripts/publish major --only-content --files public/",

diff --git a/src/App.js b/src/App.js
@@ -26,6 +26,7 @@ import { IPFSStorageProvider } from './contexts/IpfsStorageContext'
 import { OrgInfoProvider } from './contexts/OrgInfoContext'
 import { IdentityProvider } from './components/IdentityManager/IdentityManager'
 import { LocalIdentityModalProvider } from './components/LocalIdentityModal/LocalIdentityModalManager'
+import { ThreeBoxProvider } from './contexts/ThreeBoxContext'
 import LocalIdentityModal from './components/LocalIdentityModal/LocalIdentityModal'
 import HelpScoutBeacon from './components/HelpScoutBeacon/HelpScoutBeacon'
 import GlobalPreferences from './components/GlobalPreferences/GlobalPreferences'
@@ -120,8 +121,8 @@ class App extends React.Component {
     }
   }
 
-  setFetchedData = bool => this.setState({ fetchedData: bool})
-  //setOrgInfo = data => this.setState({ orgInfo: data})
+  setFetchedData = bool => this.setState({ fetchedData: bool })
+  // setOrgInfo = data => this.setState({ orgInfo: data})
 
   // Handle URL changes
   handleHistoryChange = ({ pathname, search, state = {} }) => {
@@ -150,7 +151,10 @@ class App extends React.Component {
     const { locator: prevLocator } = this.state
 
     // New DAO: need to reinit the wrapper
-    if (locator.dao && (Object.keys(prevLocator).length === 0 || locator.dao !== prevLocator.dao)) {
+    if (
+      locator.dao &&
+      (Object.keys(prevLocator).length === 0 || locator.dao !== prevLocator.dao)
+    ) {
       this.updateDao(locator.dao)
     }
 
@@ -435,8 +439,8 @@ class App extends React.Component {
                   dao={daoAddress.address}
                   fetchedData={fetchedData}
                   setFetchedData={this.setFetchedData}
-                  //orgInfo={orgInfo}
-                  //setOrgInfo={this.setOrgInfo}
+                  // orgInfo={orgInfo}
+                  // setOrgInfo={this.setOrgInfo}
                   wrapper={wrapper}
                 >
                   <CustomToast>
@@ -466,32 +470,40 @@ class App extends React.Component {
                               apps={appsWithIdentifiers}
                               permissions={permissions}
                             >
-                              <div css="position: relative; z-index: 0">
-                                <Wrapper
-                                  visible={mode === APP_MODE_ORG}
-                                  apps={appsWithIdentifiers}
-                                  appsStatus={appsStatus}
-                                  canUpgradeOrg={canUpgradeOrg}
-                                  connected={connected}
-                                  daoAddress={daoAddress}
-                                  daoStatus={daoStatus}
-                                  historyBack={this.historyBack}
-                                  historyPush={this.historyPush}
-                                  locator={locator}
-                                  onRequestAppsReload={
-                                    this.handleRequestAppsReload
-                                  }
-                                  onRequestEnable={enableWallet}
-                                  onSignatures={this.onSignatures}
-                                  openPreferences={this.openPreferences}
-                                  permissionsLoading={permissionsLoading}
-                                  repos={repos}
-                                  signatureBag={signatureBag}
-                                  transactionBag={transactionBag}
-                                  web3={web3}
-                                  wrapper={wrapper}
-                                />
-                              </div>
+                              <ThreeBoxProvider
+                                apps={appsWithIdentifiers}
+                                dao={daoAddress.address}
+                                onSignatures={this.onSignatures}
+                                web3={web3}
+                                wrapper={wrapper}
+                              >
+                                <div css="position: relative; z-index: 0">
+                                  <Wrapper
+                                    visible={mode === APP_MODE_ORG}
+                                    apps={appsWithIdentifiers}
+                                    appsStatus={appsStatus}
+                                    canUpgradeOrg={canUpgradeOrg}
+                                    connected={connected}
+                                    daoAddress={daoAddress}
+                                    daoStatus={daoStatus}
+                                    historyBack={this.historyBack}
+                                    historyPush={this.historyPush}
+                                    locator={locator}
+                                    onRequestAppsReload={
+                                      this.handleRequestAppsReload
+                                    }
+                                    onRequestEnable={enableWallet}
+                                    onSignatures={this.onSignatures}
+                                    openPreferences={this.openPreferences}
+                                    permissionsLoading={permissionsLoading}
+                                    repos={repos}
+                                    signatureBag={signatureBag}
+                                    transactionBag={transactionBag}
+                                    web3={web3}
+                                    wrapper={wrapper}
+                                  />
+                                </div>
+                              </ThreeBoxProvider>
                             </PermissionsProvider>
 
                             <Onboarding

diff --git a/src/Wrapper.js b/src/Wrapper.js
@@ -3,7 +3,14 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import memoize from 'lodash.memoize'
 import { Profile } from '@openworklabs/aragon-profile'
-import { AppCenter, Console, Home, Organization, Permissions } from './apps'
+import {
+  AppCenter,
+  Console,
+  Forum,
+  Home,
+  Organization,
+  Permissions,
+} from './apps'
 import App404 from './components/App404/App404'
 import AppIFrame from './components/App/AppIFrame'
 import AppInternal from './components/App/AppInternal'
@@ -160,9 +167,7 @@ class Wrapper extends React.PureComponent {
       ? historyPush(
           `${getAppPath({ dao: locator.dao, instanceId })}/${account}`
         )
-      : historyPush(
-          getAppPath({ dao: locator.dao, instanceId, instancePath })
-        )
+      : historyPush(getAppPath({ dao: locator.dao, instanceId, instancePath }))
   }
 
   handleAppIFrameRef = appIFrame => {
@@ -343,12 +348,27 @@ class Wrapper extends React.PureComponent {
       onSignatures,
       permissionsLoading,
       repos,
+      web3,
       wrapper,
     } = this.props
 
     const appsLoading = appsStatus === APPS_STATUS_LOADING
     const reposLoading = appsLoading || Boolean(apps.length && !repos.length)
 
+    if (instanceId === 'forum') {
+      return (
+        <AppInternal>
+          <Forum
+            apps={apps}
+            locator={locator}
+            onPathRequest={this.handlePathRequest}
+            web3={web3}
+            wrapper={wrapper}
+          />
+        </AppInternal>
+      )
+    }
+
     if (instanceId === 'home') {
       return (
         <AppInternal>
@@ -426,7 +446,7 @@ class Wrapper extends React.PureComponent {
             enableWallet={onRequestEnable}
             onSignatures={onSignatures}
             parts={parts}
-            web3Provider={window.web3}
+            web3Provider={web3}
           />
         </AppInternal>
       )

diff --git a/src/apps/Forum/Forum.js b/src/apps/Forum/Forum.js
@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from 'react'
+import { AppStateProvider } from './context/AppStateContext'
+import { useAppState, usePathHelpers } from './hooks'
+import {
+  Bar,
+  BackButton,
+  Button,
+  GU,
+  Header,
+  IconPlus,
+  SyncIndicator,
+} from '@aragon/ui'
+import { Empty } from './components/Card'
+import { Threads, ThreadDetail } from './components/Content'
+import { ThreadModal } from './components/Modal'
+import { use3Box } from '../../hooks'
+
+const Forum = () => {
+  const { threads = [], isSyncing } = useAppState()
+  const {
+    activateThread,
+    activeThreadAddress,
+    activeThreadName,
+    deactivateThread,
+  } = use3Box()
+  const { parsePath, requestPath } = usePathHelpers()
+  const { threadName } = parsePath('^/threads/:threadName')
+  const [verifiedThread, setVerifiedThread] = useState()
+  const [modalVisible, setModalVisible] = useState(false)
+
+  function processThreads(threads, context) {
+    let filteredThreads
+    if (context) {
+      filteredThreads = threads.filter(thread => thread.context === context)
+    } else {
+      filteredThreads = threads
+    }
+    filteredThreads.reverse()
+    return filteredThreads
+  }
+
+  function verifyThread(threads, threadName) {
+    const thread = threads.find(thread => thread.name === threadName)
+    return thread
+  }
+
+  const handleBack = () => {
+    requestPath('/')
+    deactivateThread()
+  }
+
+  const processedThreads = processThreads(threads, 'forum')
+
+  useEffect(() => {
+    if (threadName) {
+      const thread = verifyThread(processedThreads, threadName)
+      if (thread && thread.address !== activeThreadAddress) {
+        setVerifiedThread(thread)
+        activateThread(thread.address)
+      }
+    } else {
+      setVerifiedThread(undefined)
+      if (activeThreadAddress || activeThreadName) deactivateThread()
+    }
+  }, [
+    processedThreads,
+    threadName,
+    activateThread,
+    activeThreadAddress,
+    activeThreadName,
+    deactivateThread,
+  ])
+
+  return (
+    <>
+      {processedThreads.length === 0 ? (
+        <Empty onClick={() => setModalVisible(true)} />
+      ) : (
+        <>
+          <Header
+            primary={verifiedThread ? verifiedThread.title : 'Forum'}
+            secondary={
+              !threadName && (
+                <Button
+                  mode="strong"
+                  icon={<IconPlus />}
+                  onClick={() => setModalVisible(true)}
+                  label="New thread"
+                />
+              )
+            }
+            css={`
+              @media only screen and (max-width: 600px) {
+                padding: ${2 * GU}px 0;
+              }
+            `}
+          />
+          {verifiedThread ? (
+            <>
+              <Bar primary={<BackButton onClick={() => handleBack()} />} />
+              <ThreadDetail thread={verifiedThread} />
+            </>
+          ) : (
+            <Threads threads={processedThreads} />
+          )}
+        </>
+      )}
+      <ThreadModal
+        visible={modalVisible}
+        closeModal={() => setModalVisible(false)}
+      />
+      <SyncIndicator visible={isSyncing} />
+    </>
+  )
+}
+
+const App = props => (
+  <AppStateProvider {...props}>
+    <Forum />
+  </AppStateProvider>
+)
+
+export default App