feat: add address field (#3020)

decentraland · Jan 25, 2024 · 1a4ae01 · 1a4ae01
1 parent d51fa3c
commit 1a4ae01
Show file tree

Hide file tree

Showing 25 changed files with 4,138 additions and 123 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",
@@ -136,7 +136,8 @@
       "^@babylonjs.*$": "identity-obj-proxy",
       "^.*/modules/curations/collectionCuration/toasts.*$": "identity-obj-proxy",
       "@dcl/ecs": "identity-obj-proxy",
-      "@dcl/single-sign-on-client": "identity-obj-proxy"
+      "@dcl/single-sign-on-client": "identity-obj-proxy",
+      "@0xsquid/sdk": "identity-obj-proxy"
     }
   },
   "engines": {

diff --git a/src/components/ENSListPage/ENSListPage.css b/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;
 }

diff --git a/src/components/ENSSelectLandPage/ENSSelectLandPage.tsx b/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>

diff --git a/src/components/LandOperatorPage/LandOperatorForm/LandOperatorForm.css b/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;
+}
diff --git a/src/components/LandOperatorPage/LandOperatorForm/LandOperatorForm.tsx b/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>

diff --git a/src/components/LandOperatorPage/LandOperatorForm/LandOperatorForm.types.ts b/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
 }
 

diff --git a/src/components/LandOperatorPage/LandOperatorPage.container.ts b/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)
diff --git a/src/components/LandOperatorPage/LandOperatorPage.tsx b/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>

diff --git a/src/components/LandOperatorPage/LandOperatorPage.types.ts b/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
diff --git a/src/components/LandTransferPage/LandTransferPage.container.ts b/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)
diff --git a/src/components/LandTransferPage/LandTransferPage.tsx b/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 /> }} />

diff --git a/src/components/LandTransferPage/LandTransferPage.types.ts b/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>