Upgrade rxjs to v6 in finance app (#698)

* finance: add rxjs v6 as an explicit dependency * finance: watch background script in dev mode * finance: migrate background script to rxjs v6 - use pipe for operators - remove first/take where the observable returns a single value and completes because of sendAndObserveResponse * finance: remove local rxjs package, migrate app * finance: remove first operator where needless - Single response observables * Use first instead of take(1) * chore: update @aragon/client to @aragon/api * Update imports to new packages
aragon · Mar 15, 2019 · fffc70e · fffc70e
1 parent 6527536
commit fffc70e
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 138 deletions.
diff --git a/apps/finance/app/package.json b/apps/finance/app/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@aragon/client": "^1.1.0",
+    "@aragon/api": "^1.0.0-beta.1",
     "@aragon/templates-tokens": "^1.1.1",
     "@aragon/ui": "^0.31.0",
     "@babel/polyfill": "^7.0.0",
@@ -17,6 +17,7 @@
     "react-display-name": "^0.2.3",
     "react-dom": "^16.2.0",
     "react-spring": "^7.2.8",
+    "rxjs": "^6.2.1",
     "seed-random": "^2.2.0",
     "styled-components": "4.1.3",
     "web3-utils": "^1.0.0-beta.30"
@@ -44,8 +45,9 @@
   "scripts": {
     "lint": "eslint ./src",
     "sync-assets": "copy-aragon-ui-assets -n aragon-ui ./build && rsync -rtu ./public/ ./build",
-    "start": "npm run sync-assets && npm run build:script -- --no-minify && parcel serve index.html -p 3002 --out-dir build/",
+    "start": "npm run sync-assets && npm run watch:script & parcel serve index.html -p 3002 --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/"
   },
   "browserslist": [

diff --git a/apps/finance/app/src/App.js b/apps/finance/app/src/App.js
@@ -2,6 +2,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 Balances from './components/Balances'
 import NewTransferPanelContent from './components/NewTransfer/PanelContent'
@@ -190,60 +191,62 @@ const compareBalancesByEthAndSymbol = (tokenA, tokenB) => {
 
 export default observe(
   observable =>
-    observable.map(state => {
-      const { balances, transactions } = state || {}
-
-      const balancesBn = balances
-        ? balances
-            .map(balance => ({
-              ...balance,
-              amount: new BN(balance.amount),
-              decimals: new BN(balance.decimals),
-              // Note that numbers in `numData` are not safe for accurate
-              // computations (but are useful for making divisions easier).
+    observable.pipe(
+      map(state => {
+        const { balances, transactions } = state || {}
+
+        const balancesBn = balances
+          ? balances
+              .map(balance => ({
+                ...balance,
+                amount: new BN(balance.amount),
+                decimals: new BN(balance.decimals),
+                // Note that numbers in `numData` are not safe for accurate
+                // computations (but are useful for making divisions easier).
+                numData: {
+                  amount: parseInt(balance.amount, 10),
+                  decimals: parseInt(balance.decimals, 10),
+                },
+              }))
+              .sort(compareBalancesByEthAndSymbol)
+          : []
+
+        const transactionsBn = transactions
+          ? transactions.map(transaction => ({
+              ...transaction,
+              amount: new BN(transaction.amount),
               numData: {
-                amount: parseInt(balance.amount, 10),
-                decimals: parseInt(balance.decimals, 10),
+                amount: parseInt(transaction.amount, 10),
               },
             }))
-            .sort(compareBalancesByEthAndSymbol)
-        : []
-
-      const transactionsBn = transactions
-        ? transactions.map(transaction => ({
-            ...transaction,
-            amount: new BN(transaction.amount),
-            numData: {
-              amount: parseInt(transaction.amount, 10),
-            },
-          }))
-        : []
-
-      return {
-        ...state,
-
-        tokens: balancesBn.map(
-          ({
-            address,
-            name,
-            symbol,
-            numData: { amount, decimals },
-            verified,
-          }) => ({
-            address,
-            amount,
-            decimals,
-            name,
-            symbol,
-            verified,
-          })
-        ),
-
-        // Filter out empty balances
-        balances: balancesBn.filter(balance => !balance.amount.isZero()),
-
-        transactions: transactionsBn,
-      }
-    }),
+          : []
+
+        return {
+          ...state,
+
+          tokens: balancesBn.map(
+            ({
+              address,
+              name,
+              symbol,
+              numData: { amount, decimals },
+              verified,
+            }) => ({
+              address,
+              amount,
+              decimals,
+              name,
+              symbol,
+              verified,
+            })
+          ),
+
+          // Filter out empty balances
+          balances: balancesBn.filter(balance => !balance.amount.isZero()),
+
+          transactions: transactionsBn,
+        }
+      })
+    ),
   {}
 )(App)
diff --git a/apps/finance/app/src/components/NewTransfer/Deposit.js b/apps/finance/app/src/components/NewTransfer/Deposit.js
@@ -129,30 +129,24 @@ class Deposit extends React.Component {
     // ETH
     if (addressesEqual(address, ETHER_TOKEN_FAKE_ADDRESS)) {
       return new Promise((resolve, reject) =>
-        app
-          .web3Eth('getBalance', userAccount)
-          .first()
-          .subscribe(
-            ethBalance =>
-              resolve({
-                decimals: 18,
-                loading: false,
-                symbol: 'ETH',
-                userBalance: ethBalance,
-              }),
-            reject
-          )
+        app.web3Eth('getBalance', userAccount).subscribe(
+          ethBalance =>
+            resolve({
+              decimals: 18,
+              loading: false,
+              symbol: 'ETH',
+              userBalance: ethBalance,
+            }),
+          reject
+        )
       )
     }
 
     // Tokens
     const token = app.external(address, tokenAbi)
 
     return new Promise(async (resolve, reject) => {
-      const userBalance = await token
-        .balanceOf(userAccount)
-        .first()
-        .toPromise()
+      const userBalance = await token.balanceOf(userAccount).toPromise()
 
       const decimalsFallback =
         tokenDataFallback(address, 'decimals', network.type) || '0'
@@ -168,10 +162,7 @@ class Deposit extends React.Component {
 
       const [tokenSymbol, tokenDecimals] = await Promise.all([
         getTokenSymbol(app, address),
-        token
-          .decimals()
-          .first()
-          .toPromise(),
+        token.decimals().toPromise(),
       ])
 
       // If symbol or decimals are resolved, overwrite the fallbacks

diff --git a/apps/finance/app/src/index.js b/apps/finance/app/src/index.js
@@ -2,7 +2,7 @@ import '@babel/polyfill'
 
 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/finance/app/src/lib/token-utils.js b/apps/finance/app/src/lib/token-utils.js
@@ -48,19 +48,13 @@ export async function getTokenSymbol(app, address) {
   // Symbol is optional; note that aragon.js doesn't return an error (only an falsey value) when
   // getting this value fails
   let token = app.external(address, tokenSymbolAbi)
-  let tokenSymbol = await token
-    .symbol()
-    .first()
-    .toPromise()
+  let tokenSymbol = await token.symbol().toPromise()
   if (tokenSymbol) {
     return tokenSymbol
   }
   // Some tokens (e.g. DS-Token) use bytes32 as the return type for symbol().
   token = app.external(address, tokenSymbolBytesAbi)
-  tokenSymbol = await token
-    .symbol()
-    .first()
-    .toPromise()
+  tokenSymbol = await token.symbol().toPromise()
 
   return tokenSymbol ? toUtf8(tokenSymbol) : null
 }
@@ -69,19 +63,13 @@ export async function getTokenName(app, address) {
   // Name is optional; note that aragon.js doesn't return an error (only an falsey value) when
   // getting this value fails
   let token = app.external(address, tokenNameAbi)
-  let tokenName = await token
-    .name()
-    .first()
-    .toPromise()
+  let tokenName = await token.name().toPromise()
   if (tokenName) {
     return tokenName
   }
   // Some tokens (e.g. DS-Token) use bytes32 as the return type for name().
   token = app.external(address, tokenNameBytesAbi)
-  tokenName = await token
-    .name()
-    .first()
-    .toPromise()
+  tokenName = await token.name().toPromise()
 
   return tokenName ? toUtf8(tokenName) : null
 }
diff --git a/apps/finance/app/src/rxjs.js b/apps/finance/app/src/rxjs.js
diff --git a/apps/finance/app/src/script.js b/apps/finance/app/src/script.js
@@ -1,5 +1,6 @@
-import Aragon from '@aragon/client'
-import { of } from './rxjs'
+import Aragon from '@aragon/api'
+import { first } from 'rxjs/operators'
+import { of } from 'rxjs'
 import { getTestTokenAddresses } from './testnet'
 import {
   ETHER_TOKEN_FAKE_ADDRESS,
@@ -64,27 +65,24 @@ const retryEvery = (callback, initialRetryTimer = 1000, increaseFactor = 5) => {
 
 // Get the token address to initialize ourselves
 retryEvery(retry => {
-  app
-    .call('vault')
-    .first()
-    .subscribe(
-      vaultAddress => initialize(vaultAddress, ETHER_TOKEN_FAKE_ADDRESS),
-      err => {
-        console.error(
-          'Could not start background script execution due to the contract not loading the token:',
-          err
-        )
-        retry()
-      }
-    )
+  app.call('vault').subscribe(
+    vaultAddress => initialize(vaultAddress, ETHER_TOKEN_FAKE_ADDRESS),
+    err => {
+      console.error(
+        'Could not start background script execution due to the contract not loading the token:',
+        err
+      )
+      retry()
+    }
+  )
 })
 
 async function initialize(vaultAddress, ethAddress) {
   const vaultContract = app.external(vaultAddress, vaultAbi)
 
   const network = await app
     .network()
-    .take(1)
+    .pipe(first())
     .toPromise()
   TEST_TOKEN_ADDRESSES.push(...getTestTokenAddresses(network.type))
 
@@ -113,7 +111,6 @@ async function createStore(settings) {
   try {
     vaultInitializationBlock = await settings.vault.contract
       .getInitializationBlock()
-      .first()
       .toPromise()
   } catch (err) {
     console.error("Could not get attached vault's initialization block:", err)
@@ -176,10 +173,7 @@ async function initializeState(state, settings) {
   const nextState = {
     ...state,
     periodDuration: marshallDate(
-      await app
-        .call('getPeriodDuration')
-        .first()
-        .toPromise()
+      await app.call('getPeriodDuration').toPromise()
     ),
     vaultAddress: settings.vault.address,
   }
@@ -320,12 +314,7 @@ async function loadEthBalance(state, settings) {
 }
 
 function loadTokenBalance(tokenAddress, { vault }) {
-  return new Promise((resolve, reject) => {
-    vault.contract
-      .balance(tokenAddress)
-      .first()
-      .subscribe(resolve, reject)
-  })
+  return vault.contract.balance(tokenAddress).toPromise()
 }
 
 function loadTokenDecimals(tokenContract, tokenAddress, { network }) {
@@ -335,19 +324,17 @@ function loadTokenDecimals(tokenContract, tokenAddress, { network }) {
     } else {
       const fallback =
         tokenDataFallback(tokenAddress, 'decimals', network.type) || '0'
-      tokenContract
-        .decimals()
-        .first()
-        .subscribe(
-          (decimals = fallback) => {
-            tokenDecimals.set(tokenContract, decimals)
-            resolve(decimals)
-          },
-          () => {
-            // Decimals is optional
-            resolve(fallback)
-          }
-        )
+
+      tokenContract.decimals().subscribe(
+        (decimals = fallback) => {
+          tokenDecimals.set(tokenContract, decimals)
+          resolve(decimals)
+        },
+        () => {
+          // Decimals is optional
+          resolve(fallback)
+        }
+      )
     }
   })
 }
@@ -382,7 +369,6 @@ function loadTransactionDetails(id) {
   return new Promise((resolve, reject) =>
     app
       .call('getTransaction', id)
-      .first()
       .subscribe(
         transaction => resolve(marshallTransactionDetails(transaction)),
         reject