Experimental OE fixes

.github/workflows/commitlint.yml

@@ -0,0 +1,11 @@
+name: Commit Linter
+on: [pull_request]
+
+jobs:
+  commitlint:
+    runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - uses: actions/checkout@v1
+      - uses: wagoid/commitlint-github-action@v1

.travis.yml

@@ -33,35 +33,41 @@ jobs:
       script: npm run lint
 
     - stage: test
-      script: travis_wait 60 npm run coverage -- --scope=@tps/apps-address-book
+      script: travis_wait 60 npm run coverage -- --scope=@autarklabs/apps-address-book
       name: Address Book app tests and coverage report
       install: npm run bootstrap
       after_success: npm run coveralls
 
     - stage: test
-      script: travis_wait 60 npm run coverage -- --scope=@tps/apps-allocations
+      script: travis_wait 60 npm run coverage -- --scope=@autarklabs/apps-allocations
       name: Allocations app tests and coverage report
       install: npm run bootstrap
       after_success: npm run coveralls
 
     - stage: test
-      script: travis_wait 60 npm run coverage -- --scope=@tps/apps-projects
+      script: travis_wait 60 npm run coverage -- --scope=@autarklabs/apps-projects
       name: Projects app tests and coverage report
       install: npm run bootstrap
       after_success: npm run coveralls
 
     - stage: test
-      script: travis_wait 60 npm run coverage -- --scope=@tps/apps-dot-voting
+      script: travis_wait 60 npm run coverage -- --scope=@autarklabs/apps-dot-voting
       name: Dot Voting app tests and coverage report
       install: npm run bootstrap
       after_success: npm run coveralls
 
     - stage: test
-      script: travis_wait 60 npm run coverage -- --scope=@tps/apps-rewards
+      script: travis_wait 60 npm run coverage -- --scope=@autarklabs/apps-rewards
       name: Rewards app tests and coverage report
       install: npm run bootstrap
       after_success: npm run coveralls
 
+    - stage: test
+      script: travis_wait 60 npm run coverage -- --scope=@autarklabs/templates-open-enterprise
+      name: Template tests and coverage report
+      install: npm run bootstrap
+      after_success: npm run coveralls
+
     - stage: deploy
       before_install:
       - mkdir $HOME/.aragon

apps/address-book/app/api-react.js

@@ -28,6 +28,6 @@ const functions = process.env.NODE_ENV !== 'production' && ((appState, setAppSta
   })
 }))
 
-const { AragonApi, useAragonApi } = buildStubbedApiReact({ initialState, functions })
+const { AragonApi, useAragonApi, useInstalledApps, useNetwork } = buildStubbedApiReact({ initialState, functions })
 
-export { AragonApi, useAragonApi }
+export { AragonApi, useAragonApi, useInstalledApps, useNetwork }

apps/address-book/app/components/App/App.js

@@ -14,7 +14,8 @@ const ASSETS_URL = './aragon-ui'
 
 const App = () => {
   const [ panelVisible, setPanelVisible ] = useState(false)
-  const { api, appState = {} } = useAragonApi()
+  const { api, appState = {}, guiStyle } = useAragonApi()
+  const { appearance, theme } = guiStyle
 
   const { entries = [], isSyncing = true } = appState
 
@@ -61,7 +62,7 @@ const App = () => {
   const addressList = entries.map(entry => entry.addr)
 
   return (
-    <Main assetsUrl={ASSETS_URL}>
+    <Main assetsUrl={ASSETS_URL} theme={theme || appearance}>
       <IdentityProvider
         onResolve={handleResolveLocalIdentity}
         onShowLocalIdentityModal={handleShowLocalIdentityModal}

apps/address-book/app/components/Card/Empty.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { Button, EmptyStateCard, GU, Info, Link, LoadingRing } from '@aragon/ui'
+import { Button, EmptyStateCard, GU, Link, LoadingRing } from '@aragon/ui'
 import emptyStatePng from '../../assets/no-contacts.png'
 
 const illustration = <img src={emptyStatePng} alt="" height="160" />
@@ -17,16 +17,6 @@ const BetterLink = styled(Link)`
 
 const Empty = ({ action, isSyncing }) => (
   <EmptyWrapper>
-    <Info style={{ margin: 3 * GU }} mode="warning">
-      Note: The Address Book application is designed to act as a new Identity
-      Provider for Aragon Organizations, so you can assign a name to an
-      Ethereum address and have that name be displayed in all of your Aragon
-      apps in place of the address. This requires <BetterLink
-        href="https://github.com/aragon/aragon.js/pull/391">an enhancement to
-      aragonSDK</BetterLink>, which is scheduled for an upcoming release. We will
-      remove this note once it’s fully available, but until then you can begin
-      naming and categorizing addresses.
-    </Info>
     <EmptyStateCard
       text={
         isSyncing ? (
@@ -61,11 +51,10 @@ Empty.propTypes = {
 }
 
 const EmptyWrapper = styled.div`
-  align-items: center;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   height: calc(100vh - ${14 * GU}px);
-  justify-content: space-between;
 `
 
 export default Empty

apps/address-book/app/components/LocalIdentityBadge/IdentityManager.js

@@ -10,13 +10,16 @@ const IdentityContext = React.createContext({
 })
 
 function useIdentity(address) {
-  const [ name, setName ] = useState(null)
+  const [ label, setLabel ] = useState(null)
+  const [ source, setSource ] = useState(null)
+  //const [ image, setImage ] = useState(null)
   const { resolve, updates$, showLocalIdentityModal } = useContext(
     IdentityContext
   )
 
-  const handleNameChange = useCallback(metadata => {
-    setName(metadata ? metadata.name : null)
+  const handleChange = useCallback(metadata => {
+    setLabel(metadata ? metadata.name : null)
+    setSource(metadata && metadata.source ? metadata.source : null)
   }, [])
 
   const handleShowLocalIdentityModal = useCallback(
@@ -30,18 +33,18 @@ function useIdentity(address) {
   )
 
   useEffect(() => {
-    resolve(address).then(handleNameChange)
+    resolve(address).then(handleChange)
 
     const subscription = updates$.subscribe(updatedAddress => {
       if (updatedAddress.toLowerCase() === address.toLowerCase()) {
         // Resolve and update state when the identity have been updated
-        resolve(address).then(handleNameChange)
+        resolve(address).then(handleChange)
       }
     })
     return () => subscription.unsubscribe()
-  }, [ address, handleNameChange, updates$ ])
+  }, [ address, handleChange, updates$ ])
 
-  return [ name, handleShowLocalIdentityModal ]
+  return [ label, source, handleShowLocalIdentityModal ]
 }
 
 const IdentityProvider = ({

apps/address-book/app/components/LocalIdentityBadge/LocalIdentityBadge.js

@@ -1,26 +1,60 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { useNetwork } from '@aragon/api-react'
-import { IdentityBadge } from '@aragon/ui'
+import { useInstalledApps, useNetwork } from '../../api-react'
+import { GU, IconLabel, IdentityBadge, Link, useTheme } from '@aragon/ui'
 import { useIdentity } from './IdentityManager'
 import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
 import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
 
-const LocalIdentityBadge = ({ entity, forceAddress, ...props }) => {
+const LocalIdentityBadge = ({ entity, ...props }) => {
   const network = useNetwork()
-  const [ label, showLocalIdentityModal ] = useIdentity(entity)
-  const handleClick = () => showLocalIdentityModal(entity)
+  const installedApps = useInstalledApps()
+  const kernel = installedApps.find(app => app.name === 'Kernel').appAddress
+  const [ label, source, handleShowLocalIdentityModal ] = useIdentity(entity)
+  const handleCustomLabel = () => handleShowLocalIdentityModal(entity)
+  const handleProfile = () => {}
+  const getPopoverAction = () => {
+    const theme = useTheme()
+    //if(source === 'addressBook') return null
+    if(source === '3box') {
+      return {
+        label: (
+          <Link
+            href={kernel && network.type !== 'private'
+              ? `https://preview.autark.xyz/#/${kernel}/profile/${entity}`
+              : `https://www.3box.io/${entity}`
+            }
+            css={`
+              display: flex;
+              align-items: center;
+              text-decoration: none;
+              color: ${theme.contentSecondary}
+            `}
+          >
+            <IconLabel
+              css={`
+                margin-right: ${1 * GU}px;
+              `}
+            />
+            View profile
+          </Link>
+        ),
+        onClick: handleProfile
+      }
+    }
+    return {
+      label: <LocalLabelPopoverActionLabel hasLabel={Boolean(label)} />,
+      onClick: handleCustomLabel
+    }
+  }
+
   return (
     <IdentityBadge
-      label={(!forceAddress && label) || ''}
+      label={label || ''}
       entity={entity}
       networkType={network && network.type}
-      popoverAction={{
-        label: <LocalLabelPopoverActionLabel hasLabel={Boolean(label)} />,
-        onClick: handleClick,
-      }}
+      popoverAction={getPopoverAction()}
       popoverTitle={
-        label ? <LocalLabelPopoverTitle label={label} /> : undefined
+        <LocalLabelPopoverTitle label={label || ''} source={source}/>
       }
       {...props}
     />
@@ -29,7 +63,6 @@ const LocalIdentityBadge = ({ entity, forceAddress, ...props }) => {
 
 LocalIdentityBadge.propTypes = {
   ...IdentityBadge.propTypes,
-  forceAddress: PropTypes.bool
 }
 
 export default LocalIdentityBadge

apps/address-book/app/components/LocalIdentityBadge/LocalLabelPopoverTitle.js

@@ -2,7 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { GU, Tag } from '@aragon/ui'
 
-function LocalLabelPopoverTitle({ label }) {
+const getTag = (source) => {
+  if (source === '3box') return '3Box'
+  if (source === 'addressBook') return 'Address Book'
+  return 'Custom Label'
+}
+
+function LocalLabelPopoverTitle({ label, source = null }) {
   return (
     <div
       css={`
@@ -27,13 +33,14 @@ function LocalLabelPopoverTitle({ label }) {
           margin-left: ${2 * GU}px;
         `}
       >
-        Custom label
+        {getTag(source)}
       </Tag>
     </div>
   )
 }
 LocalLabelPopoverTitle.propTypes = {
   label: PropTypes.string.isRequired,
+  source: PropTypes.string,
 }
 
 export default LocalLabelPopoverTitle

apps/address-book/arapp.json

@@ -34,6 +34,12 @@
       "wsRPC": "wss://rinkeby.eth.aragon.network/ws",
       "network": "rinkeby"
     },
+    "experimental": {
+      "registry": "0x98df287b6c145399aaa709692c8d308357bc085d",
+      "appName": "address-book-experimental.open.aragonpm.eth",
+      "wsRPC": "wss://rinkeby.eth.aragon.network/ws",
+      "network": "rinkeby"
+    },
     "rinkeby": {
       "registry": "0x98df287b6c145399aaa709692c8d308357bc085d",
       "appName": "address-book.aragonpm.eth",

apps/address-book/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@tps/apps-address-book",
+  "name": "@autarklabs/apps-address-book",
   "version": "0.0.1",
   "description": "Address book app from Planning Suite",
   "scripts": {
@@ -30,9 +30,9 @@
     "test": "cross-env TRUFFLE_TEST=true npm run ganache-cli:test"
   },
   "dependencies": {
-    "@aragon/api": "2.0.0-beta.8",
-    "@aragon/api-react": "2.0.0-beta.8",
-    "@aragon/ui": "^1.0.0-alpha.26",
+    "@aragon/api": "petermphillips/aragon-api",
+    "@aragon/api-react": "2.0.0-beta.9",
+    "@aragon/ui": "1.2.1",
     "axios": "^0.18.0",
     "ipfs-http-client": "29.1.0",
     "prop-types": "^15.7.2",
@@ -48,7 +48,7 @@
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "@tps/test-helpers": "^0.0.1",
+    "@autarklabs/test-helpers": "^0.0.1",
     "babel-eslint": "^10.0.1",
     "babel-plugin-styled-components": "^1.10.0",
     "cross-env": "^5.2.0",

apps/allocations/app/api-react.js

@@ -105,6 +105,6 @@ const functions = process.env.NODE_ENV !== 'production' && ((appState, setAppSta
   }),
 }))
 
-const { AragonApi, useAragonApi, usePath } = buildStubbedApiReact({ initialState, functions })
+const { AragonApi, useAragonApi, useInstalledApps, useNetwork } = buildStubbedApiReact({ initialState, functions })
 
-export { AragonApi, useAragonApi, usePath }
+export { AragonApi, useAragonApi, useInstalledApps, useNetwork }

apps/allocations/app/app-state-reducer.js

@@ -14,13 +14,15 @@ const compareBalancesByEthAndSymbol = (tokenA, tokenB) => {
 }
 
 const getTokenFromAddress = (tokenAddress, tokenList) => {
-  if (!tokenList || !tokenList.length) return tokenAddress
+  if (!tokenList || !tokenList.length) return null
   return tokenList.find(token => addressesEqual(token.address, tokenAddress))
 }
 
 function appStateReducer(state) {
-  const { accounts: budgets, balances , allocations } = state || {}
-
+  const { accounts: budgets, balances, allocations, period } = state || {}
+  const { endDate } = period || {}
+  const currentDate = new Date()
+  // TODO: convert balances to an object to decrease computational complexity on token lookups in script.js
   const balancesBn = balances
     ? balances
       .map(balance => ({
@@ -39,24 +41,33 @@ function appStateReducer(state) {
     : []
 
   const budgetsBn = budgets
-    ? budgets.map(budget => ({
-      ...budget,
-      active: budget.hasBudget && Number(budget.amount) > 0,
-      // get some extra info about the token
-      token: getTokenFromAddress(budget.token, balances)
+    ? budgets
+      // prevent any budgets missing token data from getting passed to the frontend
+      .filter(budget => getTokenFromAddress(budget.token, balances))
+      .map(budget => ({
+        ...budget,
+        active: budget.hasBudget && Number(budget.amount) > 0,
+        // get some extra info about the token
+        token: getTokenFromAddress(budget.token, balances),
+        // if current period end date is less than now, current period is over
+        // but not updated on chain. so we reset the remaining budget
+        remaining: endDate < currentDate ? budget.amount : budget.remaining,
       // amount: new BigNumber(budget.amount),
       // numData: {
       //   amount: parseInt(budget.amount, 10),
       // },
-    }))
+      }))
     : []
 
   const allocationsBn = allocations
-    ? allocations.map(allocation => ({
-      ...allocation,
-      // get some extra info about the token
-      tokenDecimal: getTokenFromAddress(allocation.token, balances).decimals
-    }))
+    ? allocations
+      // prevent any allocation details missing token data from getting passed to the frontend
+      .filter(allocation => getTokenFromAddress(allocation.token, balances))
+      .map(allocation => ({
+        ...allocation,
+        // get some extra info about the token
+        tokenDecimal: getTokenFromAddress(allocation.token, balances).decimals
+      }))
     : []
 
   const newState = {