Tokens: Fix hidden you pill on sidebar (#1124)

aragon · Jun 15, 2020 · e05ebf3 · e05ebf3
1 parent 5027f95
commit e05ebf3
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 49 deletions.
diff --git 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 (
     <IdentityBadge
-      {...props}
-      networkType={network && network.type}
-      customLabel={label || ''}
+      label={label || defaultLabel}
       entity={entity}
+      networkType={network && network.type}
       popoverAction={{
-        label: `${label ? 'Edit' : 'Add'} custom label`,
+        label: <LocalLabelPopoverActionLabel hasLabel={Boolean(label)} />,
         onClick: handleClick,
       }}
       popoverTitle={
-        label ? (
-          <Wrap>
-            <Label>{label}</Label>
-            <StyledBadge>Custom label</StyledBadge>
-          </Wrap>
-        ) : (
-          'Address'
-        )
+        label ? <LocalLabelPopoverTitle label={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
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { IconLabel, GU } from '@aragon/ui'
+
+function LocalLabelPopoverActionLabel({ hasLabel }) {
+  return (
+    <div
+      css={`
+        display: flex;
+        align-items: center;
+      `}
+    >
+      <IconLabel
+        css={`
+          margin-right: ${1 * GU}px;
+        `}
+      />
+      {hasLabel ? 'Edit' : 'Add'} custom label
+    </div>
+  )
+}
+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
@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Tag, GU } from '@aragon/ui'
+
+function LocalLabelPopoverTitle({ label }) {
+  return (
+    <div
+      css={`
+        display: grid;
+        align-items: center;
+        grid-template-columns: auto 1fr;
+      `}
+    >
+      <span
+        css={`
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        `}
+      >
+        {label}
+      </span>
+      <Tag
+        mode="identifier"
+        css={`
+          margin-left: ${2 * GU}px;
+        `}
+      >
+        Custom label
+      </Tag>
+    </div>
+  )
+}
+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
@@ -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
@@ -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 (
     <IdentityBadge
-      label={label || ''}
+      label={label || defaultLabel}
       entity={entity}
       networkType={network && network.type}
       popoverAction={{
@@ -27,6 +28,7 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
 }
 
 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
@@ -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 (
-              <div>
+              <div
+                css={`
+                  display: flex;
+                  align-items: center;
+                `}
+              >
                 <LocalIdentityBadge
                   entity={account}
                   connectedAccount={isCurrentUser}
+                  defaultLabel={isCurrentUser ? 'YOU' : undefined}
+                  labelStyle={
+                    isCurrentUser && !label
+                      ? `color: ${theme.tagIndicatorContent};`
+                      : ''
+                  }
                 />
-                {isCurrentUser && <You />}
+                {isCurrentUser && Boolean(label) && (
+                  <You css="flex-shrink: 0;" />
+                )}
               </div>
             )
           }}

diff --git 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 (
     <IdentityBadge
-      label={label || ''}
+      label={label || defaultLabel}
       entity={entity}
       networkType={network && network.type}
       popoverAction={{
@@ -27,6 +28,7 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
 }
 
 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
@@ -1,12 +1,13 @@
 import React from 'react'
 import { Tag, GU } from '@aragon/ui'
 
-const You = () => (
+const You = props => (
   <Tag
     css={`
       margin-left: ${0.5 * GU}px;
     `}
     size="small"
+    {...props}
   >
     you
   </Tag>

diff --git 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'};
                 `}
               >
                 <LocalIdentityBadge
                   entity={address}
                   connectedAccount={isCurrentUser}
                 />
-                {isCurrentUser && <You />}
+                {isCurrentUser && <You css="flex-shrink: 0" />}
               </div>,
             ]
 

diff --git 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 (
     <IdentityBadge
-      label={label || ''}
+      label={label || defaultLabel}
       entity={entity}
       networkType={network && network.type}
       popoverAction={{
@@ -27,6 +28,7 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
 }
 
 LocalIdentityBadge.propTypes = {
+  defaultLabel: PropTypes.string,
   ...IdentityBadge.propTypes,
 }