Voting: use aragonAPI for React + React hooks

apps/voting/app/package.json

@@ -16,7 +16,6 @@
     "react-linkify": "^0.2.2",
     "react-spring": "^5.7.2",
     "rxjs": "^6.2.1",
-    "rxjs-compat": "^6.2.1",
     "seed-random": "^2.2.0",
     "styled-components": "4.1.3"
   },

apps/voting/app/src/App.js

@@ -127,13 +127,11 @@ function App() {
 
     let cancelled = false
     Promise.all(
-      votes.map(
-        vote =>
-          new Promise((resolve, reject) => {
-            api
-              .call('getVoterState', vote.voteId, userAccount)
-              .subscribe(result => resolve([vote.voteId, result]), reject)
-          })
+      votes.map(vote =>
+        api
+          .call('getVoterState', vote.voteId, userAccount)
+          .toPromise()
+          .then(result => [vote.voteId, result])
       )
     ).then(voteStates => {
       if (!cancelled) {

apps/voting/app/src/components/VotePanelContent.js

@@ -115,7 +115,7 @@ class VotePanelContent extends React.Component {
 
     this.setState({ loadingCanExecute: true })
     const canExecute = await api.call('canExecute', vote.voteId).toPromise()
-    this.setState({ canExecute, loadingCanExecute: false })
+    this.setState({ loadingCanExecute: false, canExecute })
   }
   renderBlockLink = snapshotBlock => {
     const {

apps/voting/app/src/script.js

@@ -1,6 +1,5 @@
 import Aragon from '@aragon/api'
 import { of } from 'rxjs'
-import { map } from 'rxjs/operators'
 import voteSettings, { hasLoadedVoteSettings } from './vote-settings'
 import { EMPTY_CALLSCRIPT } from './evmscript-utils'
 import tokenDecimalsAbi from './abi/token-decimals.json'
@@ -42,13 +41,17 @@ const retryEvery = (callback, initialRetryTimer = 1000, increaseFactor = 5) => {
 
 // Get the token address to initialize ourselves
 retryEvery(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()
-  })
+  app
+    .call('token')
+    .toPromise()
+    .then(initialize)
+    .catch(err => {
+      console.error(
+        'Could not start background script execution due to the contract not loading the token:',
+        err
+      )
+      retry()
+    })
 })
 
 async function initialize(tokenAddr) {
@@ -73,7 +76,7 @@ async function initialize(tokenAddr) {
 
   let tokenDecimals
   try {
-    tokenDecimals = await token.decimals().toPromise()
+    tokenDecimals = (await token.decimals().toPromise()) || '0'
   } catch (err) {
     console.err(
       `Failed to load token decimals for token at ${tokenAddr} due to:`,
@@ -193,11 +196,10 @@ async function loadVoteDescription(vote) {
 }
 
 function loadVoteData(voteId) {
-  return new Promise(resolve => {
-    app
-      .call('getVote', voteId)
-      .subscribe(vote => resolve(loadVoteDescription(marshallVote(vote))))
-  })
+  return app
+    .call('getVote', voteId)
+    .toPromise()
+    .then(vote => loadVoteDescription(marshallVote(vote)))
 }
 
 async function updateVotes(votes, voteId, transform) {
@@ -229,23 +231,12 @@ async function updateState(state, voteId, transform) {
 
 function loadVoteSettings() {
   return Promise.all(
-    voteSettings.map(
-      ([name, key, type = 'string']) =>
-        new Promise((resolve, reject) =>
-          app
-            .call(name)
-            .pipe(
-              map(val => {
-                if (type === 'time') {
-                  return marshallDate(val)
-                }
-                return val
-              })
-            )
-            .subscribe(value => {
-              resolve({ [key]: value })
-            }, reject)
-        )
+    voteSettings.map(([name, key, type = 'string']) =>
+      app
+        .call(name)
+        .toPromise()
+        .then(val => (type === 'time' ? marshallDate(val) : val))
+        .then(value => ({ [key]: value }))
     )
   )
     .then(settings =>

apps/voting/app/src/vote-hooks.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 
 // when `params` are updated, call `fn` and pass the result
-function usePromiseResult(fn, params, defaultValue) {
+function usePromiseResult(fn, params, memoParams, defaultValue) {
   const [result, setResult] = useState(defaultValue)
   useEffect(() => {
     let cancelled = false
@@ -13,7 +13,7 @@ function usePromiseResult(fn, params, defaultValue) {
     return () => {
       cancelled = true
     }
-  }, params)
+  }, memoParams)
   return result
 }
 
@@ -49,15 +49,6 @@ async function getCanExecute(vote, api) {
   return api.call('canExecute', vote.voteId).toPromise()
 }
 
-export const useUserBalance = (...params) =>
-  usePromiseResult(getUserBalance, params, -1)
-
-export const useCanVote = (...params) =>
-  usePromiseResult(getCanVote, params, false)
-
-export const useCanExecute = (...params) =>
-  usePromiseResult(getCanVote, params, false)
-
 export const useCurrentVoteData = (
   vote,
   userAccount,
@@ -66,19 +57,23 @@ export const useCurrentVoteData = (
   tokenDecimals
 ) => {
   return {
-    canUserVote: useCanVote(
-      vote,
-      userAccount,
-      api,
-      tokenContract,
-      tokenDecimals
+    canUserVote: usePromiseResult(
+      getCanVote,
+      [vote, userAccount, api],
+      [vote && vote.voteId, userAccount, api],
+      false
+    ),
+    canExecute: usePromiseResult(
+      getCanExecute,
+      [vote, api],
+      [vote && vote.voteId, api],
+      false
     ),
-    canExecute: useCanExecute(vote, api),
-    userBalance: useUserBalance(
-      vote,
-      userAccount,
-      tokenContract,
-      tokenDecimals
+    userBalance: usePromiseResult(
+      getUserBalance,
+      [vote, userAccount, tokenContract, tokenDecimals],
+      [vote && vote.voteId, userAccount, tokenContract, tokenDecimals],
+      -1
     ),
   }
 }