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, }