Voting: avoid crashing when external app details are not loadable

apps/voting/app/src/App.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback } from 'react'
 import {
   Button,
   Header,

apps/voting/app/src/app-logic.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { AragonApi, useApi, useAppState, usePath } from '@aragon/api-react'
 import appStateReducer from './app-state-reducer'
 import { EMPTY_CALLSCRIPT } from './evmscript-utils'

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

@@ -10,10 +10,6 @@ import {
   useSidePanelFocusOnReady,
 } from '@aragon/ui'
 
-const initialState = {
-  question: '',
-}
-
 const NewVotePanel = React.memo(function NewVotePanel({
   panelState,
   onCreateVote,

apps/voting/app/src/components/VoteCard/VoteOptions.js

@@ -30,7 +30,10 @@ class VoteOptions extends React.Component {
 
     const percentages =
       votingPower > 0
-        ? percentageList(options.map(o => o.power / votingPower), 2)
+        ? percentageList(
+            options.map(o => o.power / votingPower),
+            2
+          )
         : [0, 0]
 
     return (

apps/voting/app/src/hooks/usePanelState.js

@@ -1,5 +1,4 @@
 import { useCallback, useMemo, useState } from 'react'
-import { noop } from '../utils'
 
 // Handles the state of a panel.
 export default function usePanelState() {

apps/voting/app/src/hooks/useVotes.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useAppState, useCurrentApp, useInstalledApps } from '@aragon/api-react'
 import { isVoteOpen } from '../vote-utils'
 import { VOTE_ABSENT } from '../vote-types'
-import { EMPTY_ADDRESS } from '../web3-utils'
+import { EMPTY_ADDRESS, shortenAddress } from '../web3-utils'
 import useNow from './useNow'
 
 // Decorate the votes array with more information relevant to the frontend
@@ -24,12 +24,10 @@ function useDecoratedVotes() {
           `Voting: vote #${vote.voteId} does not list any execution targets. The app's cache is likely corrupted and needs to be reset.`
         )
       } else if (!executionTargets.length) {
-        // If there's no execution target, consider it targetting this Voting app
-        targetApp = {
-          ...currentApp,
-          // Don't attach an identifier for this Voting app
-          identifier: undefined,
-        }
+        // If there's no execution target, consider it targeting this Voting app
+        targetApp = { ...currentApp }
+        // Don't attach an identifier for this Voting app
+        delete targetApp.identifier
       } else if (executionTargets.length > 1) {
         // If there's multiple targets, make a "multiple" version
         targetApp = {
@@ -53,11 +51,12 @@ function useDecoratedVotes() {
       if (targetApp) {
         const { appAddress, icon, identifier, name } = targetApp
         executionTargetData = {
+          identifier,
           address: appAddress,
-          name,
+          // If the app name was not loaded, use the app's address
+          name: name || shortenAddress(appAddress),
           // Only try to get the icon if it's available
           iconSrc: typeof icon === 'function' ? icon(24) : null,
-          identifier,
         }
       }
 
@@ -78,9 +77,12 @@ function useDecoratedVotes() {
       .map(({ appAddress, identifier, name }) => ({
         appAddress,
         identifier,
-        name,
+        // If the app name was not loaded, use the app's address
+        name: name || shortenAddress(appAddress),
       }))
-      .sort((a, b) => a.name.localeCompare(b.name))
+      .sort((a, b) => {
+        return a.name ? a.name.localeCompare(b.name) : 1
+      })
 
     return [decoratedVotes, executionTargets]
   }, [votes, connectedAccountVotes, currentApp, installedApps])

apps/voting/app/src/screens/Votes.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   Bar,
   DropDown,
@@ -47,10 +47,14 @@ const Votes = React.memo(function Votes({
   const { layoutName } = useLayout()
   const { openVotes, closedVotes } = useVotes(filteredVotes)
 
-  const multipleOfTarget = executionTargets.reduce((map, { name }) => {
-    map.set(name, map.has(name))
-    return map
-  }, new Map())
+  const multipleOfTarget = useMemo(
+    () =>
+      executionTargets.reduce((map, { appAddress }) => {
+        map.set(appAddress, map.has(appAddress))
+        return map
+      }, new Map()),
+    [executionTargets]
+  )
 
   return (
     <React.Fragment>
@@ -121,9 +125,9 @@ const Votes = React.memo(function Votes({
                 'All',
                 <ThisVoting showTag={multipleOfTarget.get('Voting')} />,
                 ...executionTargets.map(
-                  ({ name, identifier }) =>
+                  ({ appAddress, name, identifier }) =>
                     `${name}${
-                      multipleOfTarget.get(name) && identifier
+                      multipleOfTarget.get(appAddress) && identifier
                         ? ` (${identifier})`
                         : ''
                     }`
@@ -175,7 +179,10 @@ const ThisVoting = ({ showTag }) => (
 )
 
 const VoteGroups = React.memo(({ openVotes, closedVotes, onSelectVote }) => {
-  const voteGroups = [['Open votes', openVotes], ['Closed votes', closedVotes]]
+  const voteGroups = [
+    ['Open votes', openVotes],
+    ['Closed votes', closedVotes],
+  ]
 
   return (
     <React.Fragment>

apps/voting/app/src/web3-utils.js

@@ -3,6 +3,46 @@ const ETH_ADDRESS_TEST_REGEX = /(0x[a-fA-F0-9]{40}(?:\b|\.|,|\?|!|;))/g
 
 export const EMPTY_ADDRESS = '0x0000000000000000000000000000000000000000'
 
+/**
+ * Check address equality without checksums
+ * @param {string} first First address
+ * @param {string} second Second address
+ * @returns {boolean} Address equality
+ */
+export function addressesEqual(first, second) {
+  first = first && first.toLowerCase()
+  second = second && second.toLowerCase()
+  return first === second
+}
+
+/**
+ * Shorten an Ethereum address. `charsLength` allows to change the number of
+ * characters on both sides of the ellipsis.
+ *
+ * Examples:
+ *   shortenAddress('0x19731977931271')    // 0x1973…1271
+ *   shortenAddress('0x19731977931271', 2) // 0x19…71
+ *   shortenAddress('0x197319')            // 0x197319 (already short enough)
+ *
+ * @param {string} address The address to shorten
+ * @param {number} [charsLength=4] The number of characters to change on both sides of the ellipsis
+ * @returns {string} The shortened address
+ */
+export function shortenAddress(address, charsLength = 4) {
+  const prefixLength = 2 // "0x"
+  if (!address) {
+    return ''
+  }
+  if (address.length < charsLength * 2 + prefixLength) {
+    return address
+  }
+  return (
+    address.slice(0, charsLength + prefixLength) +
+    '…' +
+    address.slice(-charsLength)
+  )
+}
+
 // Detect Ethereum addresses in a string and transform each part.
 //
 // `callback` is called on every part with two params:
@@ -16,15 +56,3 @@ export function transformAddresses(str, callback) {
       callback(part, ETH_ADDRESS_TEST_REGEX.test(part), index)
     )
 }
-
-/**
- * Check address equality without checksums
- * @param {string} first First address
- * @param {string} second Second address
- * @returns {boolean} Address equality
- */
-export function addressesEqual(first, second) {
-  first = first && first.toLowerCase()
-  second = second && second.toLowerCase()
-  return first === second
-}