Upgrade rxjs to v6 in token-manager app (#716)

* Import new package name * Add rxjs as an explicit dependency * Watch background script too * fixup! Watch background script too * Migrate script to use rxjs6 - remove first/take where the observable returns a single value and completes because of sendAndObserveResponse * Migrate app to use rxjs v6 * Use toPromise wherever possible
aragon · Mar 20, 2019 · 2fd55c3 · 2fd55c3
1 parent 08aecb4
commit 2fd55c3
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 102 deletions.
diff --git a/apps/token-manager/app/package.json b/apps/token-manager/app/package.json
@@ -4,13 +4,14 @@
   "private": true,
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@aragon/client": "^1.1.0",
     "@aragon/ui": "^0.32.0",
+    "@aragon/api": "^1.0.0-beta.1",
     "bn.js": "^4.11.6",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-spring": "^7.2.10",
+    "rxjs": "^6.2.1",
     "styled-components": "4.1.3",
     "web3-utils": "^1.0.0-beta.30"
   },
@@ -41,8 +42,9 @@
   "scripts": {
     "test": "jest",
     "lint": "eslint ./src",
-    "start": "npm run sync-assets && npm run build:script -- --no-minify && parcel serve index.html -p 3003 --out-dir build/",
+    "start": "npm run sync-assets && npm run watch:script & parcel serve index.html -p 3003 --out-dir build/",
     "build": "npm run sync-assets && npm run build:script && parcel build index.html --out-dir build/ --public-url \".\"",
+    "watch:script": "parcel watch src/script.js --out-dir build/ --no-hmr",
     "build:script": "parcel build src/script.js --out-dir build/",
     "sync-assets": "copy-aragon-ui-assets -n aragon-ui ./build && rsync -rtu ./public/ ./build"
   },

diff --git a/apps/token-manager/app/src/App.js b/apps/token-manager/app/src/App.js
@@ -1,6 +1,7 @@
 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 EmptyState from './screens/EmptyState'
 import Holders from './screens/Holders'
@@ -171,45 +172,47 @@ export default observe(
   // Convert tokenSupply and holders balances to BNs,
   // and calculate tokenDecimalsBase.
   observable =>
-    observable.map(state => {
-      const appStateReady = hasLoadedTokenSettings(state)
-      if (!appStateReady) {
-        return {
-          ...state,
-          appStateReady,
+    observable.pipe(
+      map(state => {
+        const appStateReady = hasLoadedTokenSettings(state)
+        if (!appStateReady) {
+          return {
+            ...state,
+            appStateReady,
+          }
         }
-      }
 
-      const {
-        holders,
-        maxAccountTokens,
-        tokenDecimals,
-        tokenSupply,
-        tokenTransfersEnabled,
-      } = state
+        const {
+          holders,
+          maxAccountTokens,
+          tokenDecimals,
+          tokenSupply,
+          tokenTransfersEnabled,
+        } = state
 
-      const tokenDecimalsBase = new BN(10).pow(new BN(tokenDecimals))
+        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',
-      }
-    }),
+        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)
diff --git a/apps/token-manager/app/src/index.js b/apps/token-manager/app/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Aragon, { providers } from '@aragon/client'
+import Aragon, { providers } from '@aragon/api'
 import App from './App'
 
 class ConnectedApp extends React.Component {

diff --git a/apps/token-manager/app/src/rxjs.js b/apps/token-manager/app/src/rxjs.js
diff --git a/apps/token-manager/app/src/script.js b/apps/token-manager/app/src/script.js
@@ -1,5 +1,5 @@
-import Aragon from '@aragon/client'
-import { of } from './rxjs'
+import Aragon from '@aragon/api'
+import { of } from 'rxjs'
 import tokenSettings, { hasLoadedTokenSettings } from './token-settings'
 import { addressesEqual } from './web3-utils'
 import tokenAbi from './abi/minimeToken.json'
@@ -38,22 +38,19 @@ const retryEvery = (callback, initialRetryTimer = 1000, increaseFactor = 5) => {
 
 // Get the token address to initialize ourselves
 retryEvery(retry => {
-  app
-    .call('token')
-    .first()
-    .subscribe(initialize, err => {
-      console.error(
-        'Could not start background script execution due to the contract not loading the token:',
-        err
-      )
-      retry()
-    })
+  app.call('token').subscribe(initialize, err => {
+    console.error(
+      'Could not start background script execution due to the contract not loading the token:',
+      err
+    )
+    retry()
+  })
 })
 
 async function initialize(tokenAddr) {
   const token = app.external(tokenAddr, tokenAbi)
   try {
-    const tokenSymbol = await loadTokenSymbol(token)
+    const tokenSymbol = await token.symbol().toPromise()
     app.identify(tokenSymbol)
   } catch (err) {
     console.error(
@@ -81,7 +78,7 @@ async function createStore(token, tokenAddr) {
         nextState = {
           ...nextState,
           tokenAddress: tokenAddr,
-          maxAccountTokens: await loadMaxAccountTokens(),
+          maxAccountTokens: await app.call('maxAccountTokens').toPromise(),
         }
       } else if (addressesEqual(address, tokenAddr)) {
         switch (event) {
@@ -125,7 +122,7 @@ async function claimedTokens(token, state, { _token, _controller }) {
 async function transfer(token, state, { _from, _to }) {
   const changes = await loadNewBalances(token, _from, _to)
   // The transfer may have increased the token's total supply, so let's refresh it
-  const tokenSupply = await loadTokenSupply(token)
+  const tokenSupply = await token.totalSupply().toPromise()
   return updateState(
     {
       ...state,
@@ -167,25 +164,13 @@ function updateHolders(holders, changed) {
   }
 }
 
-function loadMaxAccountTokens() {
-  return new Promise((resolve, reject) =>
-    app
-      .call('maxAccountTokens')
-      .first()
-      .subscribe(resolve, reject)
-  )
-}
-
 function loadNewBalances(token, ...addresses) {
   return Promise.all(
-    addresses.map(
-      address =>
-        new Promise((resolve, reject) =>
-          token
-            .balanceOf(address)
-            .first()
-            .subscribe(balance => resolve({ address, balance }), reject)
-        )
+    addresses.map(address =>
+      token
+        .balanceOf(address)
+        .toPromise()
+        .then(balance => ({ address, balance }))
     )
   ).catch(err => {
     console.error(
@@ -198,26 +183,12 @@ function loadNewBalances(token, ...addresses) {
   })
 }
 
-function loadTokenSupply(token) {
-  return new Promise((resolve, reject) =>
-    token
-      .totalSupply()
-      .first()
-      .subscribe(resolve, reject)
-  )
-}
-
 function loadTokenSettings(token) {
   return Promise.all(
-    tokenSettings.map(
-      ([name, key, type = 'string']) =>
-        new Promise((resolve, reject) =>
-          token[name]()
-            .first()
-            .subscribe(value => {
-              resolve({ [key]: value })
-            }, reject)
-        )
+    tokenSettings.map(([name, key]) =>
+      token[name]()
+        .toPromise()
+        .then(value => ({ [key]: value }))
     )
   )
     .then(settings =>
@@ -229,12 +200,3 @@ function loadTokenSettings(token) {
       return {}
     })
 }
-
-function loadTokenSymbol(token) {
-  return new Promise((resolve, reject) =>
-    token
-      .symbol()
-      .first()
-      .subscribe(resolve, reject)
-  )
-}