Renaming from CustomLabel to LocalIdetity

src/App.js

@@ -17,8 +17,8 @@ import { FavoriteDaosProvider } from './contexts/FavoriteDaosContext'
 import { ModalProvider } from './components/ModalManager/ModalManager'
 import DeprecatedBanner from './components/DeprecatedBanner/DeprecatedBanner'
 import { IdentityProvider } from './components/IdentityManager/IdentityManager'
-import { CustomLabelModalProvider } from './components/CustomLabelModal/CustomLabelModalManager'
-import CustomLabelModal from './components/CustomLabelModal/CustomLabelModal'
+import { LocalIdentityModalProvider } from './components/LocalIdentityModal/LocalIdentityModalManager'
+import LocalIdentityModal from './components/LocalIdentityModal/LocalIdentityModal'
 import { EventEmitterProvider } from './components/EventEmitterManager/EventEmitterManager'
 import {
   APPS_STATUS_ERROR,
@@ -317,7 +317,7 @@ class App extends React.Component {
   handleOpenOrganization = address => {
     this.historyPush(`/${address}`)
   }
-  handleOpenCustomLabelModal = address => {
+  handleOpenLocalIdentityModal = address => {
     return this.state.wrapper.requestAddressIdentityModification(address)
   }
 
@@ -362,10 +362,10 @@ class App extends React.Component {
       <EventEmitterProvider>
         <IdentityProvider onResolve={this.handleIdentityResolve}>
           <ModalProvider>
-            <CustomLabelModalProvider
-              onShowCustomLabelModal={this.handleOpenCustomLabelModal}
+            <LocalIdentityModalProvider
+              onShowLocalIdentityModal={this.handleOpenLocalIdentityModal}
             >
-              <CustomLabelModal
+              <LocalIdentityModal
                 address={identityAddress}
                 label={identityLabel}
                 opened={identityIntent !== null}
@@ -421,7 +421,7 @@ class App extends React.Component {
                   selectorNetworks={selectorNetworks}
                 />
               </FavoriteDaosProvider>
-            </CustomLabelModalProvider>
+            </LocalIdentityModalProvider>
           </ModalProvider>
         </IdentityProvider>
       </EventEmitterProvider>

src/components/LocalIdentityBadge/LocalIdentityBadge.js

@@ -2,13 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Badge, IdentityBadge, font } from '@aragon/ui'
-import { CustomLabelModalContext } from '../CustomLabelModal/CustomLabelModalManager'
+import { LocalIdentityModalContext } from '../LocalIdentityModal/LocalIdentityModalManager'
 import { IdentityContext } from '../IdentityManager/IdentityManager'
 import { EventEmitterContext } from '../EventEmitterManager/EventEmitterManager'
 
 const LocalIdentityBadge = ({ address, ...props }) => {
   const { resolve } = React.useContext(IdentityContext)
-  const { showCustomLabelModal } = React.useContext(CustomLabelModalContext)
+  const { showLocalIdentityModal } = React.useContext(LocalIdentityModalContext)
   const { eventEmitter } = React.useContext(EventEmitterContext)
   const [label, setLabel] = React.useState()
   const handleResolve = async () => {
@@ -20,14 +20,14 @@ const LocalIdentityBadge = ({ address, ...props }) => {
     }
   }
   const handleClick = () => {
-    showCustomLabelModal(address)
+    showLocalIdentityModal(address)
       .then(handleResolve)
       .catch(e => {
         /* user cancelled modify intent */
       })
   }
-  const handleEvent = addr => {
-    if (addr === address) {
+  const handleEvent = updatedAddress => {
+    if (updatedAddress === address) {
       handleResolve()
     }
   }

src/components/CustomLabelModal/CustomLabelModal.js → src/components/LocalIdentityModal/LocalIdentityModal.js

@@ -12,7 +12,7 @@ import {
 import { ModalContext } from '../ModalManager/ModalManager'
 import EscapeOutside from '../EscapeOutside/EscapeOutside'
 
-const CustomLabelModal = ({ opened, ...props }) => {
+const LocalIdentityModal = ({ opened, ...props }) => {
   const { showModal, hideModal } = React.useContext(ModalContext)
   React.useEffect(() => {
     opened ? showModal(Modal, props) : hideModal()
@@ -21,7 +21,7 @@ const CustomLabelModal = ({ opened, ...props }) => {
   return null
 }
 
-CustomLabelModal.propTypes = {
+LocalIdentityModal.propTypes = {
   opened: PropTypes.bool.isRequired,
 }
 
@@ -157,4 +157,4 @@ const StyledSaveButton = styled(Button)`
   )}
 `
 
-export default CustomLabelModal
+export default LocalIdentityModal

src/components/LocalIdentityModal/LocalIdentityModalManager.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const LocalIdentityModalContext = React.createContext({})
+
+const LocalIdentityModalProvider = ({ onShowLocalIdentityModal, children }) => {
+  return (
+    <LocalIdentityModalContext.Provider
+      value={{ showLocalIdentityModal: onShowLocalIdentityModal }}
+    >
+      {children}
+    </LocalIdentityModalContext.Provider>
+  )
+}
+
+LocalIdentityModalProvider.propTypes = {
+  onShowLocalIdentityModal: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+}
+
+const LocalIdentityModalConsumer = LocalIdentityModalContext.Consumer
+
+export {
+  LocalIdentityModalProvider,
+  LocalIdentityModalConsumer,
+  LocalIdentityModalContext,
+}

src/components/Preferences/EmptyCustomLabels.js → src/components/Preferences/EmptyLocalIdentities.js

@@ -5,7 +5,7 @@ import { EthIdenticon, IdentityBadge, breakpoint } from '@aragon/ui'
 import { getEmptyAddress } from '../../web3-utils'
 import Import from './Import'
 
-const EmptyCustomLabels = ({ onImport }) => (
+const EmptyLocalIdentities = ({ onImport }) => (
   <Wrap>
     <Title>Start adding labels</Title>
     <Paragraph>
@@ -35,7 +35,7 @@ const EmptyCustomLabels = ({ onImport }) => (
   </Wrap>
 )
 
-EmptyCustomLabels.propTypes = {
+EmptyLocalIdentities.propTypes = {
   onImport: PropTypes.func.isRequired,
 }
 
@@ -74,4 +74,4 @@ const Title = styled.h2`
   margin: 8px 0;
 `
 
-export default EmptyCustomLabels
+export default EmptyLocalIdentities

src/components/Preferences/Import.js

@@ -8,7 +8,7 @@ import { isAddress } from '../../web3-utils'
 // What is the answer to the ultimate question of Life, the Universe, and Everything?
 const MAX_LENGTH = 42
 
-const verifyCustomLabelObject = obj => {
+const verifyLocalIdentityObject = obj => {
   return (
     Array.isArray(obj) &&
     obj.every(
@@ -32,7 +32,7 @@ const fileImport = cb => files => {
   reader.onload = event => {
     try {
       const list = JSON.parse(event.target.result)
-      if (verifyCustomLabelObject(list)) {
+      if (verifyLocalIdentityObject(list)) {
         cb(list)
       } else {
         throw new Error('There was an error reading from the file')

src/components/Preferences/CustomLabels.js → src/components/Preferences/LocalIdentities.js

@@ -12,47 +12,25 @@ import {
   font,
   theme,
 } from '@aragon/ui'
-import { CustomLabelModalContext } from '../CustomLabelModal/CustomLabelModalManager'
+import { LocalIdentityModalContext } from '../LocalIdentityModal/LocalIdentityModalManager'
 import { EventEmitterContext } from '../EventEmitterManager/EventEmitterManager'
-import EmptyCustomLabels from './EmptyCustomLabels'
+import EmptyLocalIdentities from './EmptyLocalIdentities'
 import Import from './Import'
 
-const CustomLabels = ({
+const LocalIdentities = ({
   onClearAll,
   onImport,
   onModify,
   onModifyHook,
   localIdentities,
 }) => {
-  // transform localIdentities from object into sorted array
+  // transform localIdentities from object into array
   const identities = Object.keys(localIdentities).map(address => {
     return Object.assign({}, localIdentities[address], { address })
   })
 
-  return (
-    <React.Fragment>
-      <Labels
-        identities={identities}
-        clearAll={onClearAll}
-        onImport={onImport}
-        onModifyHook={onModifyHook}
-      />
-      <Warning />
-    </React.Fragment>
-  )
-}
-
-CustomLabels.propTypes = {
-  localIdentities: PropTypes.object,
-  onClearAll: PropTypes.func.isRequired,
-  onImport: PropTypes.func.isRequired,
-  onModify: PropTypes.func.isRequired,
-  onModifyHook: PropTypes.func,
-}
-
-const Labels = ({ clearAll, identities, onImport, onModifyHook }) => {
   if (!identities.length) {
-    return <EmptyCustomLabels onImport={onImport} />
+    return <EmptyLocalIdentities onImport={onImport} />
   }
   const { eventEmitter } = React.useContext(EventEmitterContext)
   const updateLabel = (fn, address) => async () => {
@@ -71,7 +49,7 @@ const Labels = ({ clearAll, identities, onImport, onModifyHook }) => {
   )
   // Mar 01 2019
   const today = format(Date.now(), 'MMM dd yyyy')
-  const { showCustomLabelModal } = React.useContext(CustomLabelModalContext)
+  const { showLocalIdentityModal } = React.useContext(LocalIdentityModalContext)
 
   return (
     <React.Fragment>
@@ -88,7 +66,7 @@ const Labels = ({ clearAll, identities, onImport, onModifyHook }) => {
                 entity={address}
                 popoverAction={{
                   label: 'Edit custom label',
-                  onClick: updateLabel(showCustomLabelModal, address),
+                  onClick: updateLabel(showLocalIdentityModal, address),
                 }}
                 popoverTitle={
                   <PopoverActionTitle address={address} name={name} />
@@ -108,26 +86,28 @@ const Labels = ({ clearAll, identities, onImport, onModifyHook }) => {
         >
           Export
         </StyledExport>
-        <Button label="Remove labels" mode="outline" onClick={clearAll}>
+        <Button label="Remove labels" mode="outline" onClick={onClearAll}>
           <IconCross /> Remove all labels
         </Button>
       </Controls>
+      <Warning />
     </React.Fragment>
   )
 }
 
-Labels.defaultProps = {
-  identities: [],
-  onModifyHook: () => null,
-}
-
-Labels.propTypes = {
-  identities: PropTypes.array,
-  clearAll: PropTypes.func.isRequired,
+LocalIdentities.propTypes = {
+  localIdentities: PropTypes.object,
+  onClearAll: PropTypes.func.isRequired,
   onImport: PropTypes.func.isRequired,
+  onModify: PropTypes.func.isRequired,
   onModifyHook: PropTypes.func,
 }
 
+LocalIdentities.defaultProps = {
+  localIdentities: {},
+  onModifyHook: () => null,
+}
+
 const PopoverActionTitle = ({ address, name }) => {
   return (
     <WrapTitle>
@@ -264,4 +244,4 @@ const List = styled.ul`
   )}
 `
 
-export default CustomLabels
+export default LocalIdentities

src/components/Preferences/Preferences.js

@@ -14,7 +14,7 @@ import {
   font,
   springs,
 } from '@aragon/ui'
-import CustomLabels from './CustomLabels'
+import LocalIdentitiesComponent from './LocalIdentities'
 import { AragonType } from '../../prop-types'
 import { EventEmitterContext } from '../EventEmitterManager/EventEmitterManager'
 
@@ -77,7 +77,7 @@ const Preferences = ({ onClose, smallView, wrapper }) => {
         <Content>
           {selectedTab === 0 && <ComingSoon />}
           {selectedTab === 1 && (
-            <CustomLabels
+            <LocalIdentitiesComponent
               onImport={handleImport}
               onClearAll={handleClearAll}
               onModify={handleModify}