diff --git a/apps/agent/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/agent/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
index 2f8cd3b4f3..60cfc6f346 100644
--- a/apps/agent/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
+++ b/apps/agent/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -1,60 +1,35 @@
import React from 'react'
import PropTypes from 'prop-types'
-import styled from 'styled-components'
import { useNetwork } from '@aragon/api-react'
-import { Badge, IdentityBadge, font } from '@aragon/ui'
+import { IdentityBadge } from '@aragon/ui'
import { useIdentity } from '../IdentityManager/IdentityManager'
+import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
+import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
-const LocalIdentityBadge = ({ entity, ...props }) => {
+const LocalIdentityBadge = ({ defaultLabel, entity, ...props }) => {
const network = useNetwork()
const [label, showLocalIdentityModal] = useIdentity(entity)
const handleClick = () => showLocalIdentityModal(entity)
return (
,
onClick: handleClick,
}}
popoverTitle={
- label ? (
-
-
- Custom label
-
- ) : (
- 'Address'
- )
+ label ? : undefined
}
+ {...props}
/>
)
}
LocalIdentityBadge.propTypes = {
- entity: PropTypes.string.isRequired,
+ defaultLabel: PropTypes.string,
+ ...IdentityBadge.propTypes,
}
-const Wrap = styled.div`
- display: grid;
- align-items: center;
- grid-template-columns: auto 1fr;
- padding-right: 24px;
-`
-
-const Label = 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 LocalIdentityBadge
diff --git a/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverActionLabel.js b/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverActionLabel.js
new file mode 100644
index 0000000000..c6ee0d8ec6
--- /dev/null
+++ b/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverActionLabel.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { IconLabel, GU } from '@aragon/ui'
+
+function LocalLabelPopoverActionLabel({ hasLabel }) {
+ return (
+
+
+ {hasLabel ? 'Edit' : 'Add'} custom label
+
+ )
+}
+LocalLabelPopoverActionLabel.propTypes = {
+ hasLabel: PropTypes.bool,
+}
+
+export default LocalLabelPopoverActionLabel
diff --git a/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverTitle.js b/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverTitle.js
new file mode 100644
index 0000000000..dafa2af621
--- /dev/null
+++ b/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverTitle.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Tag, GU } from '@aragon/ui'
+
+function LocalLabelPopoverTitle({ label }) {
+ return (
+
+
+ {label}
+
+
+ Custom label
+
+
+ )
+}
+LocalLabelPopoverTitle.propTypes = {
+ label: PropTypes.string.isRequired,
+}
+
+export default LocalLabelPopoverTitle
diff --git a/apps/agent/app/src/script.js b/apps/agent/app/src/script.js
index c37261584d..23226a0835 100644
--- a/apps/agent/app/src/script.js
+++ b/apps/agent/app/src/script.js
@@ -4,7 +4,6 @@ import { getTestTokenAddresses } from './testnet'
import * as transactionTypes from './transaction-types'
import {
ETHER_TOKEN_FAKE_ADDRESS,
- findTargetFromReceipt,
findTransfersFromReceipt,
getPresetTokens,
getTokenSymbol,
diff --git a/apps/finance/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/finance/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
index c151279e6e..60cfc6f346 100644
--- a/apps/finance/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
+++ b/apps/finance/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -1,17 +1,18 @@
import React from 'react'
+import PropTypes from 'prop-types'
import { useNetwork } from '@aragon/api-react'
import { IdentityBadge } from '@aragon/ui'
import { useIdentity } from '../IdentityManager/IdentityManager'
import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
-const LocalIdentityBadge = ({ entity, ...props }) => {
+const LocalIdentityBadge = ({ defaultLabel, entity, ...props }) => {
const network = useNetwork()
const [label, showLocalIdentityModal] = useIdentity(entity)
const handleClick = () => showLocalIdentityModal(entity)
return (
{
}
LocalIdentityBadge.propTypes = {
+ defaultLabel: PropTypes.string,
...IdentityBadge.propTypes,
}
diff --git a/apps/token-manager/app/src/components/InfoBoxes.js b/apps/token-manager/app/src/components/InfoBoxes.js
index 083c893b69..935052fdc7 100644
--- a/apps/token-manager/app/src/components/InfoBoxes.js
+++ b/apps/token-manager/app/src/components/InfoBoxes.js
@@ -5,6 +5,7 @@ import { formatBalance, stakesPercentages } from '../utils'
import { addressesEqual } from '../web3-utils'
import LocalIdentityBadge from './LocalIdentityBadge/LocalIdentityBadge'
import You from './You'
+import { useIdentity } from './IdentityManager/IdentityManager'
const DISTRIBUTION_ITEMS_MAX = 7
@@ -110,13 +111,28 @@ function InfoBoxes({
items={stakes}
renderLegendItem={({ item: account }) => {
const isCurrentUser = addressesEqual(account, connectedAccount)
+ const [label] = useIdentity(account)
+
return (
-
+
- {isCurrentUser && }
+ {isCurrentUser && Boolean(label) && (
+
+ )}
)
}}
diff --git a/apps/token-manager/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/token-manager/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
index c151279e6e..60cfc6f346 100644
--- a/apps/token-manager/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
+++ b/apps/token-manager/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -1,17 +1,18 @@
import React from 'react'
+import PropTypes from 'prop-types'
import { useNetwork } from '@aragon/api-react'
import { IdentityBadge } from '@aragon/ui'
import { useIdentity } from '../IdentityManager/IdentityManager'
import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
-const LocalIdentityBadge = ({ entity, ...props }) => {
+const LocalIdentityBadge = ({ defaultLabel, entity, ...props }) => {
const network = useNetwork()
const [label, showLocalIdentityModal] = useIdentity(entity)
const handleClick = () => showLocalIdentityModal(entity)
return (
{
}
LocalIdentityBadge.propTypes = {
+ defaultLabel: PropTypes.string,
...IdentityBadge.propTypes,
}
diff --git a/apps/token-manager/app/src/components/You.js b/apps/token-manager/app/src/components/You.js
index 947b1ed78d..7f71aecd30 100644
--- a/apps/token-manager/app/src/components/You.js
+++ b/apps/token-manager/app/src/components/You.js
@@ -1,12 +1,13 @@
import React from 'react'
import { Tag, GU } from '@aragon/ui'
-const You = () => (
+const You = props => (
you
diff --git a/apps/token-manager/app/src/screens/Holders.js b/apps/token-manager/app/src/screens/Holders.js
index b3f0509c06..80fd2e7738 100644
--- a/apps/token-manager/app/src/screens/Holders.js
+++ b/apps/token-manager/app/src/screens/Holders.js
@@ -57,14 +57,17 @@ function Holders({
css={`
display: flex;
align-items: center;
- max-width: ${compact ? '50vw' : 'unset'};
+ /* On compact views, leave space for the rest of the data view */
+ max-width: ${compact
+ ? `calc(100vw - ${20 * GU}px)`
+ : 'unset'};
`}
>
- {isCurrentUser && }
+ {isCurrentUser && }
,
]
diff --git a/apps/voting/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/voting/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
index d16a6ad434..60cfc6f346 100644
--- a/apps/voting/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
+++ b/apps/voting/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -1,17 +1,18 @@
import React from 'react'
+import PropTypes from 'prop-types'
import { useNetwork } from '@aragon/api-react'
import { IdentityBadge } from '@aragon/ui'
-import { useIdentity } from '../../identity-manager'
+import { useIdentity } from '../IdentityManager/IdentityManager'
import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
-const LocalIdentityBadge = ({ entity, ...props }) => {
+const LocalIdentityBadge = ({ defaultLabel, entity, ...props }) => {
const network = useNetwork()
const [label, showLocalIdentityModal] = useIdentity(entity)
const handleClick = () => showLocalIdentityModal(entity)
return (
{
}
LocalIdentityBadge.propTypes = {
+ defaultLabel: PropTypes.string,
...IdentityBadge.propTypes,
}