Agent: read-only UI

apps/agent/app/.eslintrc

@@ -10,10 +10,12 @@
     "prettier/react"
   ],
   "parser": "babel-eslint",
-  "plugins": ["prettier", "react"],
+  "plugins": ["prettier", "react", "react-hooks"],
   "rules": {
     "valid-jsdoc": "error",
     "react/prop-types": 0,
-    "linebreak-style": ["error", "unix"]
+    "linebreak-style": ["error", "unix"],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }

apps/agent/app/package.json

@@ -4,19 +4,19 @@
   "private": true,
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@aragon/api": "^2.0.0-beta.9",
-    "@aragon/api-react": "^2.0.0-beta.9",
+    "@aragon/api": "^2.0.0-beta.6",
+    "@aragon/api-react": "^2.0.0-beta.6",
     "@aragon/templates-tokens": "^1.2.0",
-    "@aragon/ui": "^1.2.1",
+    "@aragon/ui": "^1.3.0",
     "@babel/polyfill": "^7.0.0",
     "date-fns": "2.0.0-alpha.22",
     "file-saver": "^2.0.2",
-    "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "rxjs": "^6.5.2",
     "styled-components": "^4.3.2",
+    "web3-eth-abi": "^1.2.1",
     "web3-utils": "^1.2.0"
   },
   "devDependencies": {
@@ -35,6 +35,7 @@
     "eslint-plugin-prettier": "^2.7.0",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-react-hooks": "^2.4.0",
     "eslint-plugin-standard": "^4.0.0",
     "parcel-bundler": "^1.10.1",
     "prettier": "^1.11.1"

apps/agent/app/src/App.js

@@ -1,43 +1,48 @@
-import React, { useEffect } from 'react'
-import { Main, Header, SyncIndicator, useLayout } from '@aragon/ui'
+import React, { useCallback } from 'react'
 import { useAragonApi } from '@aragon/api-react'
-import InstallFrame from './components/InstallFrame'
+import { Header, Main, SyncIndicator } from '@aragon/ui'
+import Balances from './components/Balances'
 import { IdentityProvider } from './components/IdentityManager/IdentityManager'
-import ComingSoon from './components/ComingSoon'
+import InstallFrame from './components/InstallFrame'
+import Transactions from './components/Transactions'
 
-function App({ api, appState, isSyncing }) {
-  const { layoutName } = useLayout()
-  const compactMode = layoutName === 'small'
-  const { balances, transactions, tokens, proxyAddress } = appState
-  const handleResolveLocalIdentity = address => {
-    return api.resolveAddressIdentity(address).toPromise()
-  }
-  const handleShowLocalIdentityModal = address => {
-    return api.requestAddressIdentityModification(address).toPromise()
-  }
+function App() {
+  const { api, appState, guiStyle } = useAragonApi()
+  const { balances, isSyncing, transactions, tokens, proxyAddress } = appState
+  const { appearance } = guiStyle
 
-  return (
-    <IdentityProvider
-      onResolve={handleResolveLocalIdentity}
-      onShowLocalIdentityModal={handleShowLocalIdentityModal}
-    >
-      <div css="min-width: 320px">
-        <SyncIndicator visible={isSyncing} />
-        <Header primary="Agent" />
-        <InstallFrame />
-        <ComingSoon />
-      </div>
-    </IdentityProvider>
+  const handleResolveLocalIdentity = useCallback(
+    address => {
+      return api.resolveAddressIdentity(address).toPromise()
+    },
+    [api]
   )
-}
 
-export default () => {
-  const { api, appState, guiStyle } = useAragonApi()
-  const { appearance } = guiStyle
+  const handleShowLocalIdentityModal = useCallback(
+    address => {
+      return api.requestAddressIdentityModification(address).toPromise()
+    },
+    [api]
+  )
 
   return (
-    <Main theme={appearance} assetsUrl="./aragon-ui">
-      <App api={api} appState={appState} isSyncing={appState.isSyncing} />
+    <Main assetsUrl="./aragon-ui" theme={appearance}>
+      <IdentityProvider
+        onResolve={handleResolveLocalIdentity}
+        onShowLocalIdentityModal={handleShowLocalIdentityModal}
+      >
+        <SyncIndicator visible={isSyncing} shift={50} />
+        <Header primary="Agent" />
+        <InstallFrame />
+        <Balances balances={balances} />
+        <Transactions
+          agentAddress={proxyAddress}
+          transactions={transactions}
+          tokens={tokens}
+        />
+      </IdentityProvider>
     </Main>
   )
 }
+
+export default App

apps/agent/app/src/app-state-reducer.js

@@ -13,8 +13,10 @@ const compareBalancesByEthAndSymbol = (tokenA, tokenB) => {
 }
 
 function appStateReducer(state) {
-  const { balances, transactions } = state || { balances: [], transactions: [] }
-
+  const { balances = [], transactions = [] } = state || {
+    balances: [],
+    transactions: [],
+  }
   const balancesBn = balances
     .map(balance => ({
       ...balance,