Finance, Tokens, Voting: update badges (#971)

aragon · Sep 4, 2019 · a81b015 · a81b015
1 parent d937d4c
commit a81b015
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 49 deletions.
diff --git a/apps/finance/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/finance/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { useNetwork } from '@aragon/api-react'
-import { IdentityBadge, Tag, GU } from '@aragon/ui'
+import { IconLabel, IdentityBadge, Tag, GU } from '@aragon/ui'
 import { useIdentity } from '../IdentityManager/IdentityManager'
 
 const LocalIdentityBadge = ({ entity, ...props }) => {
@@ -11,18 +11,33 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
   const handleClick = () => showLocalIdentityModal(entity)
   return (
     <IdentityBadge
-      customLabel={label || ''}
+      label={label || ''}
       entity={entity}
       networkType={network && network.type}
       popoverAction={{
-        label: `${label ? 'Edit' : 'Add'} custom label`,
+        label: (
+          <div
+            css={`
+              display: flex;
+              align-content: center;
+            `}
+          >
+            <IconLabel
+              css={`
+                margin-right: ${1 * GU}px;
+              `}
+            />
+            {label ? 'Edit' : 'Add'} custom label
+          </div>
+        ),
         onClick: handleClick,
       }}
       popoverTitle={
         label ? (
           <Wrap>
             <Label>{label}</Label>
             <Tag
+              mode="identifier"
               css={`
                 margin-left: ${2 * GU}px;
               `}
@@ -47,7 +62,6 @@ const Wrap = styled.div`
   display: grid;
   align-items: center;
   grid-template-columns: auto 1fr;
-  padding-right: ${3 * GU}px;
 `
 
 const Label = styled.span`

diff --git a/apps/finance/app/src/components/NewTransfer/Deposit.js b/apps/finance/app/src/components/NewTransfer/Deposit.js
@@ -346,7 +346,9 @@ class Deposit extends React.Component {
               <VSpace size={1} />
               <IdentityBadge
                 entity={proxyAddress}
-                fontSize="small"
+                labelStyle={`
+                  ${textStyle('body3')}
+                `}
                 networkType={network.type}
                 shorten={false}
               />

diff --git a/apps/finance/app/src/components/Transfers.js b/apps/finance/app/src/components/Transfers.js
@@ -21,7 +21,7 @@ import {
   useLayout,
   useTheme,
 } from '@aragon/ui'
-import { useNetwork } from '@aragon/api-react'
+import { useConnectedAccount, useNetwork } from '@aragon/api-react'
 import { saveAs } from 'file-saver'
 import * as TransferTypes from '../transfer-types'
 import { addressesEqual, toChecksumAddress } from '../lib/web3-utils'
@@ -115,6 +115,7 @@ const getDownloadFilename = (proxyAddress, { start, end }) => {
 }
 
 const Transfers = React.memo(({ proxyAddress, tokens, transactions }) => {
+  const connectedAccount = useConnectedAccount()
   const network = useNetwork()
   const theme = useTheme()
   const { layoutName } = useLayout()
@@ -284,7 +285,10 @@ const Transfers = React.memo(({ proxyAddress, tokens, transactions }) => {
                 : ''}
             `}
           >
-            <LocalIdentityBadge entity={entity} address={entity} />
+            <LocalIdentityBadge
+              connectedAccount={addressesEqual(entity, connectedAccount)}
+              entity={entity}
+            />
           </div>,
           <div
             css={`

diff --git a/apps/finance/app/src/lib/web3-utils.js b/apps/finance/app/src/lib/web3-utils.js
@@ -1,6 +1,6 @@
 import { toChecksumAddress } from 'web3-utils'
 
-// Check address equality without checksums
+// Check address equality with checksums
 export function addressesEqual(first, second) {
   first = first && toChecksumAddress(first)
   second = second && toChecksumAddress(second)

diff --git a/apps/token-manager/app/src/App.js b/apps/token-manager/app/src/App.js
@@ -34,7 +34,6 @@ class App extends React.PureComponent {
     appStateReady: false,
     isSyncing: true,
     holders: [],
-    connectedAccount: '',
     groupMode: false,
   }
   state = {
@@ -95,7 +94,6 @@ class App extends React.PureComponent {
   render() {
     const {
       appStateReady,
-      connectedAccount,
       groupMode,
       holders,
       isSyncing,
@@ -167,7 +165,6 @@ class App extends React.PureComponent {
               tokenSupply={tokenSupply}
               tokenSymbol={tokenSymbol}
               tokenTransfersEnabled={tokenTransfersEnabled}
-              userAccount={connectedAccount}
               onAssignTokens={this.handleLaunchAssignTokens}
               onRemoveTokens={this.handleLaunchRemoveTokens}
             />
@@ -202,17 +199,9 @@ class App extends React.PureComponent {
 }
 
 export default () => {
-  const { api, appState, connectedAccount } = useAragonApi()
+  const { api, appState } = useAragonApi()
   const theme = useTheme()
   const { layoutName } = useLayout()
 
-  return (
-    <App
-      api={api}
-      connectedAccount={connectedAccount}
-      layoutName={layoutName}
-      theme={theme}
-      {...appState}
-    />
-  )
+  return <App api={api} layoutName={layoutName} theme={theme} {...appState} />
 }
diff --git a/apps/token-manager/app/src/components/InfoBoxes.js b/apps/token-manager/app/src/components/InfoBoxes.js
@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react'
-import { useNetwork } from '@aragon/api-react'
+import { useConnectedAccount, useNetwork } from '@aragon/api-react'
 import { Box, Distribution, GU, TokenBadge, useTheme } from '@aragon/ui'
 import { formatBalance, stakesPercentages } from '../utils'
+import { addressesEqual } from '../web3-utils'
 import LocalIdentityBadge from './LocalIdentityBadge/LocalIdentityBadge'
 import You from './You'
 
@@ -31,11 +32,11 @@ function InfoBoxes({
   tokenName,
   tokenSupply,
   tokenSymbol,
-  userAccount,
   tokenTransfersEnabled,
 }) {
-  const network = useNetwork()
   const theme = useTheme()
+  const connectedAccount = useConnectedAccount()
+  const network = useNetwork()
 
   const stakes = useMemo(() => displayedStakes(holders, tokenSupply), [
     holders,
@@ -104,15 +105,18 @@ function InfoBoxes({
         <Distribution
           heading="Token holder stakes"
           items={stakes}
-          renderLegendItem={({ item: account }) => (
-            <div>
-              <LocalIdentityBadge
-                entity={account}
-                connectedAccount={account === userAccount}
-              />
-              {account === userAccount && <You />}
-            </div>
-          )}
+          renderLegendItem={({ item: account }) => {
+            const isCurrentUser = addressesEqual(account, connectedAccount)
+            return (
+              <div>
+                <LocalIdentityBadge
+                  entity={account}
+                  connectedAccount={isCurrentUser}
+                />
+                {isCurrentUser && <You />}
+              </div>
+            )
+          }}
         />
       </Box>
     </React.Fragment>

diff --git a/apps/token-manager/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/token-manager/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { useNetwork } from '@aragon/api-react'
-import { IdentityBadge, Tag, GU } from '@aragon/ui'
+import { IconLabel, IdentityBadge, Tag, GU } from '@aragon/ui'
 import { useIdentity } from '../IdentityManager/IdentityManager'
 
 const LocalIdentityBadge = ({ entity, ...props }) => {
@@ -11,18 +11,33 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
   const handleClick = () => showLocalIdentityModal(entity)
   return (
     <IdentityBadge
-      customLabel={label || ''}
+      label={label || ''}
       entity={entity}
       networkType={network && network.type}
       popoverAction={{
-        label: `${label ? 'Edit' : 'Add'} custom label`,
+        label: (
+          <div
+            css={`
+              display: flex;
+              align-content: center;
+            `}
+          >
+            <IconLabel
+              css={`
+                margin-right: ${1 * GU}px;
+              `}
+            />
+            {label ? 'Edit' : 'Add'} custom label
+          </div>
+        ),
         onClick: handleClick,
       }}
       popoverTitle={
         label ? (
           <Wrap>
             <Label>{label}</Label>
             <Tag
+              mode="identifier"
               css={`
                 margin-left: ${2 * GU}px;
               `}
@@ -47,7 +62,6 @@ const Wrap = styled.div`
   display: grid;
   align-items: center;
   grid-template-columns: auto 1fr;
-  padding-right: ${3 * GU}px;
 `
 
 const Label = styled.span`

diff --git a/apps/token-manager/app/src/screens/Holders.js b/apps/token-manager/app/src/screens/Holders.js
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import BN from 'bn.js'
+import { useConnectedAccount } from '@aragon/api-react'
 import {
   ContextMenu,
   ContextMenuItem,
@@ -13,6 +14,7 @@ import {
   useTheme,
 } from '@aragon/ui'
 import { formatBalance } from '../utils'
+import { addressesEqual } from '../web3-utils'
 import InfoBoxes from '../components/InfoBoxes'
 import LocalIdentityBadge from '../components/LocalIdentityBadge/LocalIdentityBadge'
 import { useIdentity } from '../components/IdentityManager/IdentityManager'
@@ -30,8 +32,8 @@ function Holders({
   tokenSupply,
   tokenSymbol,
   tokenTransfersEnabled,
-  userAccount,
 }) {
+  const connectedAccount = useConnectedAccount()
   return (
     <Split
       primary={
@@ -40,9 +42,7 @@ function Holders({
           fields={groupMode ? ['Owner'] : ['Holder', 'Balance']}
           entries={holders.map(({ address, balance }) => [address, balance])}
           renderEntry={([address, balance]) => {
-            const isCurrentUser = Boolean(
-              userAccount && userAccount === address
-            )
+            const isCurrentUser = addressesEqual(address, connectedAccount)
 
             const values = [
               <div
@@ -85,7 +85,6 @@ function Holders({
           tokenSupply={tokenSupply}
           tokenSymbol={tokenSymbol}
           tokenTransfersEnabled={tokenTransfersEnabled}
-          userAccount={userAccount}
         />
       }
     />
@@ -104,7 +103,6 @@ Holders.propTypes = {
   tokenSupply: PropTypes.instanceOf(BN),
   tokenSymbol: PropTypes.string,
   tokenTransfersEnabled: PropTypes.bool,
-  userAccount: PropTypes.string,
 }
 
 Holders.defaultProps = {

diff --git a/apps/voting/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/voting/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { useNetwork } from '@aragon/api-react'
-import { IdentityBadge, Tag, GU } from '@aragon/ui'
+import { IconLabel, IdentityBadge, Tag, GU } from '@aragon/ui'
 import { useIdentity } from '../../identity-manager'
 
 const LocalIdentityBadge = ({ entity, ...props }) => {
@@ -11,18 +11,33 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
   const handleClick = () => showLocalIdentityModal(entity)
   return (
     <IdentityBadge
-      customLabel={label || ''}
+      label={label || ''}
       entity={entity}
       networkType={network && network.type}
       popoverAction={{
-        label: `${label ? 'Edit' : 'Add'} custom label`,
+        label: (
+          <div
+            css={`
+              display: flex;
+              align-content: center;
+            `}
+          >
+            <IconLabel
+              css={`
+                margin-right: ${1 * GU}px;
+              `}
+            />
+            {label ? 'Edit' : 'Add'} custom label
+          </div>
+        ),
         onClick: handleClick,
       }}
       popoverTitle={
         label ? (
           <Wrap>
             <Label>{label}</Label>
             <Tag
+              mode="identifier"
               css={`
                 margin-left: ${2 * GU}px;
               `}
@@ -47,7 +62,6 @@ const Wrap = styled.div`
   display: grid;
   align-items: center;
   grid-template-columns: auto 1fr;
-  padding-right: ${3 * GU}px;
 `
 
 const Label = styled.span`

diff --git a/apps/voting/app/src/screens/VoteDetail.js b/apps/voting/app/src/screens/VoteDetail.js
@@ -14,7 +14,7 @@ import {
   useLayout,
   useTheme,
 } from '@aragon/ui'
-import { useAppState, useNetwork } from '@aragon/api-react'
+import { useAppState, useConnectedAccount, useNetwork } from '@aragon/api-react'
 import { format } from 'date-fns'
 import AppBadge from '../components/AppBadge'
 import LocalIdentityBadge from '../components/LocalIdentityBadge/LocalIdentityBadge'
@@ -27,6 +27,7 @@ import VoteCasted from '../components/VoteCasted'
 import { percentageList, round, safeDiv } from '../math-utils'
 import { getQuorumProgress } from '../vote-utils'
 import { VOTE_NAY, VOTE_YEA } from '../vote-types'
+import { addressesEqual } from '../web3-utils'
 
 const formatDate = date => `${format(date, 'do MMM yy, HH:mm')} UTC`
 
@@ -37,6 +38,7 @@ function VoteDetail({ vote, onBack, onVote, onExecute }) {
   const theme = useTheme()
   const { layoutName } = useLayout()
   const { tokenSymbol } = useAppState()
+  const connectedAccount = useConnectedAccount()
 
   const { data, numData, voteId, connectedAccountVote } = vote
   const { minAcceptQuorum, supportRequired, yea, nay } = numData
@@ -143,7 +145,13 @@ function VoteDetail({ vote, onBack, onVote, onExecute }) {
                       align-items: flex-start;
                     `}
                   >
-                    <LocalIdentityBadge entity={creator} />
+                    <LocalIdentityBadge
+                      connectedAccount={addressesEqual(
+                        creator,
+                        connectedAccount
+                      )}
+                      entity={creator}
+                    />
                   </div>
                 </div>
               </div>