feat: add address field

package.json

@@ -36,11 +36,11 @@
     "decentraland": "^3.3.0",
     "decentraland-builder-scripts": "^0.24.0",
     "decentraland-crypto-fetch": "^2.0.1",
-    "decentraland-dapps": "^17.0.0",
+    "decentraland-dapps": "^17.4.0",
     "decentraland-ecs": "^6.6.1-20201020183014.commit-bdc29ef-hotfix",
     "decentraland-experiments": "^1.0.2",
     "decentraland-transactions": "^1.47.0",
-    "decentraland-ui": "^5.4.0",
+    "decentraland-ui": "^5.4.6",
     "ethers": "^5.6.8",
     "file-saver": "^2.0.1",
     "graphql": "^15.8.0",

src/components/ENSListPage/ENSListPage.css

@@ -126,7 +126,7 @@
   background: #393640;
   width: fit-content;
   padding: 5px;
-  border-radius: 16px;
+  border-radius: 32px;
   font-weight: bold;
   padding-right: 10px;
 }
@@ -139,7 +139,7 @@
 
 .ENSListPage .ens-list-land-coord {
   display: flex;
-  height: 34px;
+  height: 40px;
   align-items: center;
   padding: 0 10px;
   background: #393640;
@@ -153,7 +153,7 @@
 .ENSListPage .ens-list-land-redirect {
   width: fit-content;
   min-width: unset;
-  height: 34px;
+  height: 40px;
   padding: 0 6px;
   display: flex;
   align-items: center;
@@ -167,11 +167,11 @@
   background: #393640;
   width: fit-content;
   padding: 5px;
-  border-radius: 16px;
+  border-radius: 32px;
 }
 
 .ENSListPage .ens-list-address-icon {
-  width: 25px;
+  width: 32px;
 }
 
 .ENSListPage .ens-page-content {
@@ -217,6 +217,15 @@
   padding-left: 10px;
   padding-right: 10px;
   text-transform: none;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.ENSListPage .ens-list-edit-btn.ui.button i,
+.ENSListPage .ens-list-transfer-btn.ui.button i {
+  font-size: 13px;
+  line-height: 13px;
 }
 
 .ENSListPage .ens-list-transfer-btn.ui.button {
@@ -229,15 +238,15 @@
 }
 
 .ENSListPage .ens-list-name-icon {
-  width: 30px;
-  height: 30px;
+  width: 32px;
+  height: 32px;
   border-radius: 5px;
   margin-right: 5px;
 }
 
 .ENSListPage .ens-list-avatar-img {
-  width: 25px;
-  height: 25px;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
   background: #43404a;
 }
@@ -324,15 +333,15 @@
 }
 
 .ENSListPage .ens-list-name-icon {
-  width: 30px;
-  height: 30px;
+  width: 40px;
+  height: 40px;
   border-radius: 5px;
   margin-right: 5px;
 }
 
 .ENSListPage .ens-list-avatar-img {
-  width: 30px;
-  height: 30px;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
   background: #43404a;
 }

src/components/ENSSelectLandPage/ENSSelectLandPage.tsx

@@ -23,10 +23,6 @@ export default class ENSSelectLandPage extends React.PureComponent<Props, State>
     }
   }
 
-  handleBack = () => {
-    this.props.onNavigate(locations.root())
-  }
-
   handleSelectLand = (x: number, y: number) => {
     const selectedLand = this.getOwnedLand(x, y)
     if (selectedLand) {
@@ -101,7 +97,7 @@ export default class ENSSelectLandPage extends React.PureComponent<Props, State>
           <NotFound />
         ) : (
           <>
-            <Back absolute onClick={this.handleBack} />
+            <Back absolute onClick={onBack} />
             <Narrow>
               <Row>
                 <Column>

src/components/LandOperatorPage/LandOperatorForm/LandOperatorForm.css

@@ -16,3 +16,8 @@
 .LandOperatorForm.ui.form .dcl.field .ui.input.is-revokable input {
   padding-right: 86px;
 }
+
+.LandOperatorForm .dui-address-field__address {
+  font-size: 16px;
+  bottom: 38px;
+}

src/components/LandOperatorPage/LandOperatorForm/LandOperatorForm.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { Network } from '@dcl/schemas'
-import { Form, Field, Row, Button, InputOnChangeData } from 'decentraland-ui'
+import { Form, Row, Button, InputOnChangeData, Field } from 'decentraland-ui'
 import { NetworkButton } from 'decentraland-dapps/dist/containers'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { AddressField } from 'decentraland-dapps/dist/components/AddressField'
 import { Link } from 'react-router-dom'
 import { getUpdateOperator, hasAnyRole } from 'modules/land/utils'
 import { locations } from 'routing/locations'
@@ -51,7 +52,7 @@ export default class LandOperatorForm extends React.PureComponent<Props, State>
   }
 
   render() {
-    const { land } = this.props
+    const { land, isEnsAddressEnabled } = this.props
     const { address, loading, dirty, revoked, editing, initial } = this.state
 
     const isRevokable = editing && isEqual(address, initial)
@@ -72,18 +73,34 @@ export default class LandOperatorForm extends React.PureComponent<Props, State>
 
     return (
       <Form className="LandOperatorForm">
-        <Field
-          placeholder="0x..."
-          label={t('operator_page.address')}
-          className={classes.join(' ')}
-          value={address}
-          onChange={this.handleChange}
-          loading={loading}
-          action={isRevokable ? (revoked ? t('operator_page.undo') : t('operator_page.revoke')) : undefined}
-          onAction={isRevokable ? (revoked ? this.handleUndo : this.handleRevoke) : undefined}
-          error={hasError}
-          message={hasError ? t('operator_page.invalid_address') : undefined}
-        />
+        {isEnsAddressEnabled ? (
+          <AddressField
+            placeholder="0x..."
+            label={t('operator_page.address')}
+            className={classes.join(' ')}
+            value={address}
+            onChange={this.handleChange}
+            loading={loading}
+            action={isRevokable ? (revoked ? t('operator_page.undo') : t('operator_page.revoke')) : undefined}
+            onAction={isRevokable ? (revoked ? this.handleUndo : this.handleRevoke) : undefined}
+            error={hasError}
+            message={hasError ? t('operator_page.invalid_address') : undefined}
+          />
+        ) : (
+          <Field
+            placeholder="0x..."
+            label={t('operator_page.address')}
+            className={classes.join(' ')}
+            value={address}
+            onChange={this.handleChange}
+            loading={loading}
+            action={isRevokable ? (revoked ? t('operator_page.undo') : t('operator_page.revoke')) : undefined}
+            onAction={isRevokable ? (revoked ? this.handleUndo : this.handleRevoke) : undefined}
+            error={hasError}
+            message={hasError ? t('operator_page.invalid_address') : undefined}
+          />
+        )}
+
         <Row>
           <Link className="cancel" to={locations.landDetail(land.id)}>
             <Button>{t('global.cancel')}</Button>

src/components/LandOperatorPage/LandOperatorForm/LandOperatorForm.types.ts

@@ -2,6 +2,7 @@ import { Land } from 'modules/land/types'
 
 export type Props = {
   land: Land
+  isEnsAddressEnabled: boolean
   onSetOperator: (land: Land, address: string | null) => void
 }
 

src/components/LandOperatorPage/LandOperatorPage.container.ts

@@ -1,10 +1,16 @@
 import { connect } from 'react-redux'
-import { MapDispatchProps, MapDispatch } from './LandOperatorPage.types'
 import { setOperatorRequest } from 'modules/land/actions'
+import { RootState } from 'modules/common/types'
+import { getIsEnsAddressEnabled } from 'modules/features/selectors'
 import LandOperatorPage from './LandOperatorPage'
+import { MapDispatchProps, MapDispatch, MapStateProps } from './LandOperatorPage.types'
+
+const mapState = (state: RootState): MapStateProps => ({
+  isEnsAddressEnabled: getIsEnsAddressEnabled(state)
+})
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onSetOperator: (land, address) => dispatch(setOperatorRequest(land, address))
 })
 
-export default connect(null, mapDispatch)(LandOperatorPage)
+export default connect(mapState, mapDispatch)(LandOperatorPage)

src/components/LandOperatorPage/LandOperatorPage.tsx

@@ -7,7 +7,7 @@ import { Props } from './LandOperatorPage.types'
 
 export default class LandOperatorPage extends React.PureComponent<Props> {
   render() {
-    const { onSetOperator } = this.props
+    const { isEnsAddressEnabled, onSetOperator } = this.props
     return (
       <LandProviderPage>
         {land => (
@@ -25,7 +25,7 @@ export default class LandOperatorPage extends React.PureComponent<Props> {
               />
             }
           >
-            <LandOperatorForm land={land} onSetOperator={onSetOperator} />
+            <LandOperatorForm land={land} onSetOperator={onSetOperator} isEnsAddressEnabled={isEnsAddressEnabled} />
           </LandAction>
         )}
       </LandProviderPage>

src/components/LandOperatorPage/LandOperatorPage.types.ts

@@ -2,8 +2,10 @@ import { Dispatch } from 'redux'
 import { setOperatorRequest } from 'modules/land/actions'
 
 export type Props = {
+  isEnsAddressEnabled: boolean
   onSetOperator: typeof setOperatorRequest
 }
 
+export type MapStateProps = Pick<Props, 'isEnsAddressEnabled'>
 export type MapDispatchProps = Pick<Props, 'onSetOperator'>
 export type MapDispatch = Dispatch

src/components/LandTransferPage/LandTransferPage.container.ts

@@ -1,10 +1,16 @@
 import { connect } from 'react-redux'
-import { MapDispatchProps, MapDispatch } from './LandTransferPage.types'
 import { transferLandRequest } from 'modules/land/actions'
+import { RootState } from 'modules/common/types'
+import { getIsEnsAddressEnabled } from 'modules/features/selectors'
+import { MapDispatchProps, MapDispatch, MapStateProps } from './LandTransferPage.types'
 import LandTransferPage from './LandTransferPage'
 
+const mapState = (state: RootState): MapStateProps => ({
+  isEnsAddressEnabled: getIsEnsAddressEnabled(state)
+})
+
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onTransfer: (land, address) => dispatch(transferLandRequest(land, address))
 })
 
-export default connect(null, mapDispatch)(LandTransferPage)
+export default connect(mapState, mapDispatch)(LandTransferPage)

src/components/LandTransferPage/LandTransferPage.tsx

@@ -4,6 +4,7 @@ import { Field, InputOnChangeData, Form, Row, Button, Section } from 'decentrala
 import { Network } from '@dcl/schemas'
 import { NetworkButton } from 'decentraland-dapps/dist/containers'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { AddressField } from 'decentraland-dapps/dist/components/AddressField'
 import LandAction from 'components/LandAction'
 import LandProviderPage from 'components/LandProviderPage'
 import { RoleType } from 'modules/land/types'
@@ -23,7 +24,7 @@ export default class LandTransferPage extends React.PureComponent<Props, State>
   }
 
   render() {
-    const { onTransfer } = this.props
+    const { onTransfer, isEnsAddressEnabled } = this.props
     const { address, isValid } = this.state
     return (
       <LandProviderPage className="LandTransferPage">
@@ -42,15 +43,26 @@ export default class LandTransferPage extends React.PureComponent<Props, State>
               subtitle={<T id="transfer_page.subtitle" values={{ name: <strong>{land.name}</strong> }} />}
             >
               <Form onSubmit={() => onTransfer(land, address)}>
-                <Field
-                  label="Address"
-                  type="address"
-                  value={address}
-                  onChange={this.handleChange}
-                  placeholder="0x..."
-                  error={!isValid || isOwner}
-                  message={message}
-                />
+                {isEnsAddressEnabled ? (
+                  <AddressField
+                    label="Address"
+                    value={address}
+                    onChange={this.handleChange}
+                    placeholder="0x..."
+                    error={!isValid || isOwner}
+                    message={message}
+                  />
+                ) : (
+                  <Field
+                    label="Address"
+                    type="address"
+                    value={address}
+                    onChange={this.handleChange}
+                    placeholder="0x..."
+                    error={!isValid || isOwner}
+                    message={message}
+                  />
+                )}
                 <Section className="disclaimer">
                   <p className="danger-text">
                     <T id="transfer_page.disclaimer" values={{ br: <br /> }} />

src/components/LandTransferPage/LandTransferPage.types.ts

@@ -2,6 +2,7 @@ import { transferLandRequest, TransferLandRequestAction } from 'modules/land/act
 import { Dispatch } from 'redux'
 
 export type Props = {
+  isEnsAddressEnabled: boolean
   onTransfer: typeof transferLandRequest
 }
 
@@ -10,5 +11,6 @@ export type State = {
   isValid: boolean
 }
 
+export type MapStateProps = Pick<Props, 'isEnsAddressEnabled'>
 export type MapDispatchProps = Pick<Props, 'onTransfer'>
 export type MapDispatch = Dispatch<TransferLandRequestAction>

src/components/Modals/ManageCollectionRoleModal/EmptyRole/EmptyRole.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
-import { Form, Field, Button } from 'decentraland-ui'
+import { Form, Field, Button, InputOnChangeData } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { AddressField } from 'decentraland-dapps/dist/components/AddressField'
 
 import { isValid } from 'lib/address'
 import { Props, State } from './EmptyRole.types'
@@ -22,24 +23,29 @@ export default class EmptyRole extends React.PureComponent<Props, State> {
     onCancel()
   }
 
-  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  handleChange = (_: React.ChangeEvent<HTMLInputElement>, { value }: InputOnChangeData) => {
     this.setState({
-      address: event.target.value
+      address: value
     })
   }
 
   render() {
+    const { isEnsAddressEnabled } = this.props
     const { address } = this.state
     return (
       <Form className="EmptyRole" onSubmit={this.handleAdd}>
-        <Field
-          className="rounded"
-          type="address"
-          value={address}
-          onChange={this.handleChange}
-          placeholder="0x..."
-          error={!!address && !isValid(address)}
-        />
+        {isEnsAddressEnabled ? (
+          <AddressField className="rounded-address" fieldClassName="rounded" onChange={this.handleChange} placeholder="0x..." />
+        ) : (
+          <Field
+            className="rounded"
+            type="address"
+            value={address}
+            onChange={this.handleChange}
+            placeholder="0x..."
+            error={!!address && !isValid(address)}
+          />
+        )}
         <Button basic className="action link">
           {t('global.add')}
         </Button>