Custom labels all around

src/apps/Permissions/AppPermissions.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Button, Table, TableRow, Text, Viewport } from '@aragon/ui'
-import IdentityBadge from '../../components/IdentityBadge'
+import CustomLabelIdentityBadge from '../../components/CustomLabelIdentityBadge/CustomLabelIdentityBadge'
 import { TableHeader, TableCell, FirstTableCell, LastTableCell } from './Table'
 import { PermissionsConsumer } from '../../contexts/PermissionsContext'
 import { AppType, EthereumAddressType } from '../../prop-types'
@@ -107,9 +107,11 @@ class Row extends React.Component {
     if (entity.type === 'app') {
       return <AppInstanceLabel app={entity.app} proxyAddress={entity.address} />
     }
+
     return (
-      <IdentityBadge
+      <CustomLabelIdentityBadge
         entity={entity.type === 'any' ? 'Any account' : entity.address}
+        address={entity.address}
       />
     )
   }

src/apps/Permissions/AppRoles.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Button, Table, TableRow, Text, Viewport } from '@aragon/ui'
 import { AppType, EthereumAddressType } from '../../prop-types'
 import { TableHeader, TableCell, FirstTableCell, LastTableCell } from './Table'
-import IdentityBadge from '../../components/IdentityBadge'
+import CustomLabelIdentityBadge from '../../components/CustomLabelIdentityBadge/CustomLabelIdentityBadge'
 import { PermissionsConsumer } from '../../contexts/PermissionsContext'
 import Section from './Section'
 import EmptyBlock from './EmptyBlock'
@@ -98,10 +98,12 @@ class RoleRow extends React.Component {
         <AppInstanceLabel app={manager.app} proxyAddress={manager.address} />
       )
     }
-    if (manager.type === 'burn') {
-      return <IdentityBadge entity={'Discarded'} />
-    }
-    return <IdentityBadge entity={manager.address} />
+    return (
+      <CustomLabelIdentityBadge
+        address={manager.address}
+        entity={manager.type === 'burn' ? 'Discarded' : manager.address}
+      />
+    )
   }
   render() {
     const { role, manager } = this.props

src/apps/Permissions/Home/EntityRow.js

@@ -10,7 +10,7 @@ import {
   breakpoint,
   theme,
 } from '@aragon/ui'
-import IdentityBadge from '../../../components/IdentityBadge'
+import CustomLabelIdentityBadge from '../../../components/CustomLabelIdentityBadge/CustomLabelIdentityBadge'
 import AppInstanceLabel from '../AppInstanceLabel'
 import ViewDetailsButton from './ViewDetailsButton'
 import { FirstTableCell, LastTableCell } from '../Table'
@@ -42,12 +42,17 @@ class EntityRow extends React.PureComponent {
   }
   renderEntity(entity) {
     if (entity.type === 'any') {
-      return <IdentityBadge entity="Any account" />
+      return <CustomLabelIdentityBadge entity="Any account" />
     }
     if (entity.type === 'app' && entity.app.name) {
       return <AppInstanceLabel app={entity.app} proxyAddress={entity.address} />
     }
-    return <IdentityBadge entity={entity.address} />
+    return (
+      <CustomLabelIdentityBadge
+        address={entity.address}
+        entity={entity.address}
+      />
+    )
   }
   roleTitle({ role, roleBytes, appEntity, proxyAddress }) {
     if (!appEntity || !appEntity.app) {

src/apps/Permissions/ManageRolePanel.js

@@ -9,7 +9,7 @@ import {
   Button,
   breakpoint,
 } from '@aragon/ui'
-import IdentityBadge from '../../components/IdentityBadge'
+import CustomLabelIdentityBadge from '../../components/CustomLabelIdentityBadge/CustomLabelIdentityBadge'
 import { PermissionsConsumer } from '../../contexts/PermissionsContext'
 import { isBurnEntity } from '../../permissions'
 import { AppType } from '../../prop-types'
@@ -246,10 +246,12 @@ class ManageRolePanel extends React.PureComponent {
         <AppInstanceLabel app={manager.app} proxyAddress={manager.address} />
       )
     }
-    if (manager.type === 'burn') {
-      return <IdentityBadge entity="Discarded" />
-    }
-    return <IdentityBadge entity={manager.address} />
+    return (
+      <CustomLabelIdentityBadge
+        address={manager.address}
+        entity={manager.type === 'burn' ? 'Discarded' : manager.address}
+      />
+    )
   }
 
   render() {

src/apps/Permissions/NavigationItem.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Badge, Viewport } from '@aragon/ui'
-import IdentityBadge from '../../components/IdentityBadge'
+import CustomLabelIdentityBadge from '../../components/CustomLabelIdentityBadge/CustomLabelIdentityBadge'
 import { EthereumAddressType } from '../../prop-types'
 
 const NavigationItem = ({ title, badge, address, entity }) => {
@@ -13,7 +13,8 @@ const NavigationItem = ({ title, badge, address, entity }) => {
         <Main>
           <Title>{title}</Title>
           {above('medium') && isEntity && (
-            <IdentityBadge
+            <CustomLabelIdentityBadge
+              address={address}
               entity={entity && entity.type === 'any' ? 'Any account' : address}
             />
           )}

src/apps/Settings/DaoSettings.js

@@ -1,17 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {
-  Badge,
-  Button,
-  IdentityBadge,
-  Text,
-  Viewport,
-  font,
-  theme,
-} from '@aragon/ui'
-import { CustomLabelModalConsumer } from '../../components/CustomLabelModal/CustomLabelModalManager'
-import { resolve } from '../../mockCustomLabelsManager'
+import { Button, Text, Viewport, theme } from '@aragon/ui'
+import CustomLabelIdentityBadge from '../../components/CustomLabelIdentityBadge/CustomLabelIdentityBadge'
 import { appIds, network } from '../../environment'
 import { sanitizeNetworkType } from '../../network-config'
 import { AppType, DaoAddressType, EthereumAddressType } from '../../prop-types'
@@ -75,53 +66,11 @@ class DaoSettings extends React.PureComponent {
           {checksummedDaoAddr ? (
             <Wrap>
               <Label>Address</Label>
-              <CustomLabelModalConsumer>
-                {({ showCustomLabelModal }) => (
-                  <IdentityBadge
-                    customLabel={resolve(checksummedDaoAddr) || ''}
-                    entity={checksummedDaoAddr}
-                    shorten={shortAddresses}
-                    popoverAction={{
-                      label: `${
-                        resolve(checksummedDaoAddr) ? 'Edit' : 'Add'
-                      } custom label`,
-                      onClick: () => showCustomLabelModal(checksummedDaoAddr),
-                      title: resolve(checksummedDaoAddr) ? (
-                        <div
-                          css={`
-                            display: grid;
-                            align-items: center;
-                            grid-template-columns: auto 1fr;
-                            padding-right: 24px;
-                          `}
-                        >
-                          <span
-                            css={`
-                              display: inline-block;
-                              overflow: hidden;
-                              text-overflow: ellipsis;
-                              white-space: nowrap;
-                            `}
-                          >
-                            {resolve(checksummedDaoAddr)}
-                          </span>
-                          <Badge
-                            css={`
-                              margin-left: 16px;
-                              text-transform: uppercase;
-                              ${font({ size: 'xxsmall' })};
-                            `}
-                          >
-                            Custom label
-                          </Badge>
-                        </div>
-                      ) : (
-                        ''
-                      ),
-                    }}
-                  />
-                )}
-              </CustomLabelModalConsumer>
+              <CustomLabelIdentityBadge
+                address={checksummedDaoAddr}
+                entity={checksummedDaoAddr}
+                shorten={shortAddresses}
+              />
             </Wrap>
           ) : (
             <p>Resolving DAO address…</p>
@@ -202,7 +151,8 @@ class DaoSettings extends React.PureComponent {
                         {name}
                         {tags.length > 0 ? ` (${tags.join(', ')})` : ''}
                       </Label>
-                      <IdentityBadge
+                      <CustomLabelIdentityBadge
+                        address={checksummedProxyAddress}
                         entity={checksummedProxyAddress}
                         shorten={shortAddresses}
                       />

src/components/CustomLabelIdentityBadge/CustomLabelIdentityBadge.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { Badge, IdentityBadge, font } from '@aragon/ui'
+import { CustomLabelModalConsumer } from '../../components/CustomLabelModal/CustomLabelModalManager'
+import { resolve } from '../../mockCustomLabelsManager'
+
+const CustomLabelIdentityBadge = ({ address, ...props }) => (
+  <CustomLabelModalConsumer>
+    {({ showCustomLabelModal }) => (
+      <IdentityBadge
+        {...props}
+        customLabel={resolve(address) || ''}
+        address={address}
+        popoverAction={{
+          label: `${resolve(address) ? 'Edit' : 'Add'} custom label`,
+          onClick: () => showCustomLabelModal(address),
+          title: resolve(address) ? (
+            <Wrap>
+              <Address>{resolve(address)}</Address>
+              <StyledBadge>Custom label</StyledBadge>
+            </Wrap>
+          ) : (
+            'Address'
+          ),
+        }}
+      />
+    )}
+  </CustomLabelModalConsumer>
+)
+
+CustomLabelIdentityBadge.propTypes = {
+  address: PropTypes.string,
+}
+
+const Wrap = styled.div`
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  padding-right: 24px;
+`
+
+const Address = styled.span`
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledBadge = styled(Badge)`
+  margin-left: 16px;
+  text-transform: uppercase;
+  ${font({ size: 'xxsmall' })};
+`
+
+export default CustomLabelIdentityBadge

src/components/SignerPanel/ActionPathsContent.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { Info, RadioList, SafeLink } from '@aragon/ui'
 import SignerButton from './SignerButton'
 import AddressLink from './AddressLink'
-import IdentityBadge from '../IdentityBadge'
+import CustomLabelIdentityBadge from '../CustomLabelIdentityBadge/CustomLabelIdentityBadge'
 import providerString from '../../provider-strings'
 
 const RADIO_ITEM_TITLE_LENGTH = 30
@@ -57,7 +57,8 @@ class ActionPathsContent extends React.Component {
                         margin-right: 4px;
                       `}
                     >
-                      <IdentityBadge
+                      <CustomLabelIdentityBadge
+                        address={value}
                         entity={type === 'any-account' ? 'Any account' : value}
                         fontSize="small"
                       />