Agent: read-only UI (#1082)

* Agent: add initial background script

* Agent: update script to pass transaction hashes

* Agent: rename `address` to `token` for token address inside tokenTransfers

* Agent: handle ProxyDeposit events

* Integrate darkmode, fix script initialization, heavy component refactor

* Add correct transaction types

* Temporarily correct transfer bugs to repair build

* Fix dataview design debt

* Working multiple token transfers

* Update aragon ui, use tokenIconUrl() for tokens

* Fix token icons

* Add custom badge functionality

* Fix token display, add colors to entry expansion

* Fix double scroll UI bug :-)

* Fix mobile network bug, add initial filtering

* Demo-ready

* Find target contract interaction if there are no token transfers, modify badges, cosmetic enhancements

* Minor cosmetic refactor

* Refactor script, memoize transaction list

* Cosmetic code cleanup

* Revert empty results memoization

* Refactor transactions, add proper mobile view and other points from design QA

* Code cleanup

* ESLint: add exhaustive deps

* ESLint fixes

* Optimize SVG

* Add code review suggestions

* Correct format error, remove console logs

* Remove lodash throttle, remove firefox translate3d fix

* Remove unused prop

* Use ROUNDING_AMOUNT

* Fix addresses not resolving on CSV

* Fix badges taking column width

* Non-breaking spaces

* Create CSV data on demand

* Date formats

* Use DataView empty state

* Code style

* CSV files: escape double quotes in content

* CSV: add type

* Remove TRANSACTION_TYPES_STRING

* Fix aragonUI update breaking changes

* Manually checkout the other apps

They got included in the merge commit 0fe37e3, even though the merge
commit indicates a clean merge (no changes at all).

* Manually checkout future-apps

* More cleanup after the manual checkout

* Remove unused component

* Apply most code review suggestions

* Change 'marshal' to 'marshalTransactionDetails'

* Remove agent ABIs, fix entity logic for badges, minor cosmetic code changes

* Add agent app address and transaction hash to file

* use event target to get the target contract

* Remove console log and unused findTargetFromReceipt function in token-utils

* Update manifest.json and add screenshots

* Agent: Fix test color on dataview expansion

Co-authored-by: Brett Sun <qisheng.brett.sun@gmail.com>
Co-authored-by: Pierre Bertet <hello@pierre.world>

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

@@ -7,16 +7,16 @@
     "@aragon/api": "^2.0.0-beta.9",
     "@aragon/api-react": "^2.0.0-beta.9",
     "@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,