Merge branch 'master' into fix-finance-filters

.travis.yml

@@ -10,6 +10,7 @@ cache:
     - apps/token-manager/app/node_modules
     - apps/vault/node_modules
     - apps/voting/node_modules
+    - future-apps/payroll/node_modules
     - shared/migrations/node_modules
     - shared/minime/node_modules
     - shared/test-helpers/node_modules
@@ -29,17 +30,20 @@ env:
     - TASK=test:token-manager:app INSTALL_FRONTEND=true
     - TASK=test:vault
     - TASK=test:voting
+    - TASK=test:payroll
     - TASK=coverage:agent
     - TASK=coverage:finance
     - TASK=coverage:survey
     - TASK=coverage:token-manager
     - TASK=coverage:vault
     - TASK=coverage:voting
+    - TASK=coverage:payroll
     - TASK=test:shared
 matrix:
   allow_failures:
     - env: TASK=coverage:agent
     - env: TASK=coverage:finance
+    - env: TASK=coverage:payroll
 install:
   - travis_wait 60 npm install
 before_script:

apps/finance/app/src/App.js

@@ -1,9 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import BN from 'bn.js'
-import { map } from 'rxjs/operators'
-import { EmptyStateCard, Main, SidePanel, observe } from '@aragon/ui'
+import { EmptyStateCard, Main, SidePanel } from '@aragon/ui'
 import { useAragonApi } from '@aragon/api-react'
 import Balances from './components/Balances'
 import NewTransferPanelContent from './components/NewTransfer/PanelContent'
@@ -18,6 +16,7 @@ import addFundsIcon from './components/assets/add-funds-icon.svg'
 class App extends React.Component {
   static propTypes = {
     api: PropTypes.object,
+    appState: PropTypes.object,
   }
   static defaultProps = {
     balances: [],
@@ -89,7 +88,7 @@ class App extends React.Component {
   }
 
   render() {
-    const { api, appState } = this.props
+    const { appState } = this.props
     const { newTransferOpened } = this.state
     const { balances, transactions, tokens, proxyAddress } = appState
 

apps/finance/app/src/components/MenuButton/MenuButton.js

@@ -1,6 +1,5 @@
 import React from 'react'
-import { ButtonIcon } from '@aragon/ui'
-import IconMenu from './IconMenu'
+import { ButtonIcon, IconMenu } from '@aragon/ui'
 
 export default props => (
   <ButtonIcon

apps/finance/app/src/components/NewTransfer/PanelContent.js

@@ -32,13 +32,7 @@ class PanelContent extends React.Component {
 
   render() {
     const { screenIndex } = this.state
-    const {
-      opened,
-      tokens,
-      onWithdraw,
-      onDeposit,
-      proxyAddress,
-    } = this.props
+    const { opened, tokens, onWithdraw, onDeposit, proxyAddress } = this.props
     return (
       <div>
         <TabBarWrapper>

apps/token-manager/app/package.json

@@ -5,9 +5,10 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@aragon/api": "^1.0.0",
+    "@aragon/api-react": "^1.0.0-beta.2",
     "@aragon/ui": "^0.33.0",
     "bn.js": "^4.11.6",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.7.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-spring": "^7.2.10",

apps/token-manager/app/src/App.js

@@ -1,15 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import BN from 'bn.js'
-import { map } from 'rxjs/operators'
-import { Badge, Main, SidePanel, observe } from '@aragon/ui'
+import { Badge, Main, SidePanel } from '@aragon/ui'
+import { useAragonApi } from '@aragon/api-react'
 import EmptyState from './screens/EmptyState'
 import Holders from './screens/Holders'
 import AssignVotePanelContent from './components/Panels/AssignVotePanelContent'
 import AssignTokensIcon from './components/AssignTokensIcon'
 import AppLayout from './components/AppLayout'
-import { networkContextType } from './provide-network'
-import { hasLoadedTokenSettings } from './token-settings'
 import { addressesEqual } from './web3-utils'
 import { IdentityProvider } from './components/IdentityManager/IdentityManager'
 
@@ -18,34 +16,20 @@ const initialAssignTokensConfig = {
   holderAddress: '',
 }
 
-class App extends React.Component {
+class App extends React.PureComponent {
   static propTypes = {
-    app: PropTypes.object.isRequired,
-    sendMessageToWrapper: PropTypes.func.isRequired,
+    api: PropTypes.object,
   }
   static defaultProps = {
     appStateReady: false,
     holders: [],
-    network: {},
-    userAccount: '',
+    connectedAccount: '',
     groupMode: false,
   }
   state = {
     assignTokensConfig: initialAssignTokensConfig,
     sidepanelOpened: false,
   }
-  static childContextTypes = {
-    network: networkContextType,
-  }
-  getChildContext() {
-    const { network } = this.props
-
-    return {
-      network: {
-        type: network.type,
-      },
-    }
-  }
   getHolderBalance = address => {
     const { holders } = this.props
     const holder = holders.find(holder =>
@@ -54,13 +38,13 @@ class App extends React.Component {
     return holder ? holder.balance : new BN('0')
   }
   handleUpdateTokens = ({ amount, holder, mode }) => {
-    const { app } = this.props
+    const { api } = this.props
 
     if (mode === 'assign') {
-      app.mint(holder, amount)
+      api.mint(holder, amount)
     }
     if (mode === 'remove') {
-      app.burn(holder, amount)
+      api.burn(holder, amount)
     }
 
     this.handleSidepanelClose()
@@ -80,9 +64,6 @@ class App extends React.Component {
       sidepanelOpened: true,
     })
   }
-  handleMenuPanelOpen = () => {
-    this.props.sendMessageToWrapper('menuPanel', true)
-  }
   handleSidepanelClose = () => {
     this.setState({ sidepanelOpened: false })
   }
@@ -92,17 +73,16 @@ class App extends React.Component {
     }
   }
   handleResolveLocalIdentity = address => {
-    return this.props.app.resolveAddressIdentity(address).toPromise()
+    return this.props.api.resolveAddressIdentity(address).toPromise()
   }
   handleShowLocalIdentityModal = address => {
-    return this.props.app
+    return this.props.api
       .requestAddressIdentityModification(address)
       .toPromise()
   }
   render() {
     const {
       appStateReady,
-      contentPadding,
       groupMode,
       holders,
       maxAccountTokens,
@@ -113,7 +93,8 @@ class App extends React.Component {
       tokenSupply,
       tokenSymbol,
       tokenTransfersEnabled,
-      userAccount,
+      connectedAccount,
+      requestMenu,
     } = this.props
     const { assignTokensConfig, sidepanelOpened } = this.state
     return (
@@ -126,7 +107,7 @@ class App extends React.Component {
             <AppLayout
               title="Token Manager"
               afterTitle={tokenSymbol && <Badge.App>{tokenSymbol}</Badge.App>}
-              onMenuOpen={this.handleMenuPanelOpen}
+              onMenuOpen={requestMenu}
               mainButton={{
                 label: 'Assign tokens',
                 icon: <AssignTokensIcon />,
@@ -145,7 +126,7 @@ class App extends React.Component {
                   tokenSupply={tokenSupply}
                   tokenSymbol={tokenSymbol}
                   tokenTransfersEnabled={tokenTransfersEnabled}
-                  userAccount={userAccount}
+                  userAccount={connectedAccount}
                   onAssignTokens={this.handleLaunchAssignTokens}
                   onRemoveTokens={this.handleLaunchRemoveTokens}
                 />
@@ -184,51 +165,14 @@ class App extends React.Component {
   }
 }
 
-export default observe(
-  // Convert tokenSupply and holders balances to BNs,
-  // and calculate tokenDecimalsBase.
-  observable =>
-    observable.pipe(
-      map(state => {
-        const appStateReady = hasLoadedTokenSettings(state)
-        if (!appStateReady) {
-          return {
-            ...state,
-            appStateReady,
-          }
-        }
-
-        const {
-          holders,
-          maxAccountTokens,
-          tokenDecimals,
-          tokenSupply,
-          tokenTransfersEnabled,
-        } = state
-
-        const tokenDecimalsBase = new BN(10).pow(new BN(tokenDecimals))
-
-        return {
-          ...state,
-          appStateReady,
-          tokenDecimalsBase,
-          // Note that numbers in `numData` are not safe for accurate computations
-          // (but are useful for making divisions easier)
-          numData: {
-            tokenDecimals: parseInt(tokenDecimals, 10),
-            tokenSupply: parseInt(tokenSupply, 10),
-          },
-          holders: holders
-            ? holders
-                .map(holder => ({ ...holder, balance: new BN(holder.balance) }))
-                .sort((a, b) => b.balance.cmp(a.balance))
-            : [],
-          tokenDecimals: new BN(tokenDecimals),
-          tokenSupply: new BN(tokenSupply),
-          maxAccountTokens: new BN(maxAccountTokens),
-          groupMode: tokenTransfersEnabled && maxAccountTokens === '1',
-        }
-      })
-    ),
-  {}
-)(App)
+export default () => {
+  const { api, appState, connectedAccount, requestMenu } = useAragonApi()
+  return (
+    <App
+      api={api}
+      connectedAccount={connectedAccount}
+      requestMenu={requestMenu}
+      {...appState}
+    />
+  )
+}

apps/token-manager/app/src/app-state-reducer.js

@@ -0,0 +1,48 @@
+import BN from 'bn.js'
+import { hasLoadedTokenSettings } from './token-settings'
+
+// Convert tokenSupply and holders balances to BNs,
+// and calculate tokenDecimalsBase.
+function appStateReducer(state) {
+  const appStateReady = hasLoadedTokenSettings(state)
+  if (!appStateReady) {
+    return {
+      ...state,
+      appStateReady,
+    }
+  }
+
+  const {
+    holders,
+    maxAccountTokens,
+    tokenDecimals,
+    tokenSupply,
+    tokenTransfersEnabled,
+  } = state
+
+  const tokenDecimalsBase = new BN(10).pow(new BN(tokenDecimals))
+
+  return {
+    ...state,
+    appStateReady,
+    tokenDecimalsBase,
+
+    // Note that numbers in `numData` are not safe for accurate computations
+    // (but are useful for making divisions easier)
+    numData: {
+      tokenDecimals: parseInt(tokenDecimals, 10),
+      tokenSupply: parseInt(tokenSupply, 10),
+    },
+    holders: holders
+      ? holders
+          .map(holder => ({ ...holder, balance: new BN(holder.balance) }))
+          .sort((a, b) => b.balance.cmp(a.balance))
+      : [],
+    tokenDecimals: new BN(tokenDecimals),
+    tokenSupply: new BN(tokenSupply),
+    maxAccountTokens: new BN(maxAccountTokens),
+    groupMode: tokenTransfersEnabled && maxAccountTokens === '1',
+  }
+}
+
+export default appStateReducer