wip

webapp/src/components/AssetBrowse/AssetBrowse.tsx

@@ -257,7 +257,6 @@ const AssetBrowse = (props: Props) => {
     Sections.decentraland.LAND,
     Sections.decentraland.WEARABLES,
     Sections.decentraland.EMOTES,
-    Sections.decentraland.ENS,
     Sections.decentraland.ON_SALE,
     Sections.decentraland.ON_RENT,
     Sections.decentraland.SALES,

webapp/src/components/BrowsePage/BrowsePage.tsx

@@ -29,7 +29,7 @@ const BrowsePage = (props: Props) => {
         isFullscreen={Boolean(isFullscreen)}
         view={View.MARKET}
         section={section}
-        sections={[Section.WEARABLES, Section.EMOTES, Section.ENS]}
+        sections={[Section.WEARABLES, Section.EMOTES]}
         contracts={contracts}
       />
       <Footer isFullscreen={isFullscreen} />

webapp/src/components/ClaimYourName/ClaimYourName.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import { Button } from 'decentraland-ui'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import claimYourOwnNameImg from '../../images/claim-your-own-name.svg'
-import { builderUrl } from '../../lib/environment'
 import * as events from '../../utils/events'
+import { locations } from '../../modules/routing/locations'
 import { Mana } from '../Mana'
 import styles from './ClaimYourName.module.css'
 
@@ -37,9 +38,8 @@ const ClaimYourName = () => {
         <Button
           className={styles.btn}
           primary
-          fluid
-          as={'a'}
-          href={`${builderUrl}/claim-name`}
+          as={Link}
+          to={locations.mintName()}
           onClick={trackClick}
           // If the user does right click and opens in new tab, the onClick handler is not triggered.
           // By using onContextMenu, the event will be tracked this way too.

webapp/src/components/NamesPage/MintName/MintNamePage.container.tsx

@@ -0,0 +1,23 @@
+import { connect } from 'react-redux'
+import { push } from 'connected-react-router'
+import { Network } from '@dcl/schemas'
+import { getMana } from '../../../modules/wallet/selectors'
+import { locations } from '../../../modules/routing/locations'
+import { Section } from '../../../modules/vendor/decentraland'
+import {
+  MapDispatch,
+  MapDispatchProps,
+  MapStateProps
+} from './MintNamePage.types'
+import { RootState } from '../../../modules/reducer'
+import MintNamePage from './MintNamePage'
+
+const mapState = (state: RootState): MapStateProps => ({
+  currentMana: getMana(state, Network.ETHEREUM)
+})
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onBrowse: () => dispatch(push(locations.names({ section: Section.ENS })))
+})
+
+export default connect(mapState, mapDispatch)(MintNamePage)

webapp/src/components/NamesPage/MintName/MintNamePage.module.css

@@ -0,0 +1,26 @@
+.mintNamePageContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.mintNamePage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.mintNamePage .buttons {
+  display: flex;
+  flex-direction: column;
+  margin-top: 12px;
+}
+
+.mintNamePage .buttons :global(.button) {
+  margin-bottom: 12px;
+}
+
+.mintNamePage .buttons :global(.ui.button + .ui.button) {
+  margin-left: 0;
+}

webapp/src/components/NamesPage/MintName/MintNamePage.tsx

@@ -0,0 +1,186 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { Button, Field, Form, Popup, Row, Section } from 'decentraland-ui'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import NetworkButton from 'decentraland-dapps/dist/containers/NetworkButton'
+import { NavigationTab } from '../../Navigation/Navigation.types'
+import { builderUrl } from '../../../lib/environment'
+import { Navbar } from '../../Navbar'
+import { Footer } from '../../Footer'
+import { Navigation } from '../../Navigation'
+import { Props } from './MintNamePage.types'
+import styles from './MintNamePage.module.css'
+import {
+  MAX_NAME_SIZE,
+  PRICE,
+  hasNameMinLength,
+  isEnoughClaimMana,
+  isNameAvailable,
+  isNameValid
+} from '../../../modules/ens/utils'
+import { Mana } from '../../Mana'
+import { useInput } from '../../../lib/input'
+import { Network } from '@dcl/schemas'
+
+const MintNamePage = (props: Props) => {
+  const { onBrowse, currentMana } = props
+  const [showMintFlow, setShowMintFlow] = useState(false)
+  const [isError, setIsError] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleNameChange = useCallback(async text => {
+    try {
+      console.log('checking if available')
+      console.log('text: ', text)
+      const isAvailable = await isNameAvailable(text)
+      console.log('isAvailable result: ', isAvailable)
+      setIsAvailable(isAvailable)
+    } catch (error) {
+      console.log('error: ', error)
+      setIsError(true)
+    }
+  }, [])
+
+  const [name, setName] = useInput('', handleNameChange, 1000)
+  console.log('name: ', name)
+
+  const [isAvailable, setIsAvailable] = useState(false)
+  console.log('isAvailable: ', isAvailable)
+
+  useEffect(() => {
+    ;(async () => {})()
+  }, [name])
+
+  const handleClaim = useCallback(() => {
+    setIsLoading(true)
+  }, [])
+
+  const isEnoughMana = useMemo(() => {
+    return currentMana && isEnoughClaimMana(currentMana)
+  }, [currentMana])
+  console.log('isEnoughMana: ', isEnoughMana)
+
+  const isValid = useMemo(() => {
+    return isNameValid(name)
+  }, [name])
+
+  const isDisabled = !isValid || !isAvailable || !isEnoughMana
+
+  const renderMintFlow = useCallback(() => {
+    let message = ''
+    if (isError) {
+      message = t('names_page.error_message')
+    } else if (!isAvailable) {
+      message = t('names_page.repeated_message')
+    } else if (name.length <= 2) {
+      message = ''
+    } else if (!isValid) {
+      message = t('names_page.name_message')
+    }
+
+    return (
+      <Form onSubmit={handleClaim}>
+        <Section className={name.length === MAX_NAME_SIZE ? 'red' : ''}>
+          <Field
+            label={t('names_page.name_label')}
+            value={name}
+            message={message}
+            placeholder={t('names_page.name_placeholder')}
+            action={`${name.length}/${MAX_NAME_SIZE}`}
+            error={
+              isError || (hasNameMinLength(name) && !isValid) || !isAvailable
+            }
+            onChange={(_event: React.ChangeEvent<HTMLInputElement>) =>
+              setName(_event)
+            }
+          />
+        </Section>
+        <Row className="actions">
+          <Button
+            className="cancel"
+            onClick={() => setShowMintFlow(false)}
+            type="button"
+          >
+            {t('global.cancel')}
+          </Button>
+          {!isLoading && !isEnoughMana ? (
+            <Popup
+              className="modal-tooltip"
+              content={t('claim_ens_page.not_enough_mana')}
+              position="top center"
+              trigger={
+                <div className="popup-button">
+                  <NetworkButton
+                    type="submit"
+                    primary
+                    disabled={isDisabled}
+                    loading={isLoading}
+                    network={Network.ETHEREUM}
+                  >
+                    {t('names_page.claim_button')}{' '}
+                    <Mana inline>{PRICE.toLocaleString()}</Mana>
+                  </NetworkButton>
+                </div>
+              }
+              hideOnScroll={true}
+              on="hover"
+              inverted
+            />
+          ) : (
+            <NetworkButton
+              type="submit"
+              primary
+              disabled={isDisabled}
+              loading={isLoading}
+              network={Network.ETHEREUM}
+            >
+              {t('claim_ens_page.claim_button')}{' '}
+              <Mana inline>{PRICE.toLocaleString()}</Mana>
+            </NetworkButton>
+          )}
+        </Row>
+      </Form>
+    )
+  }, [
+    handleClaim,
+    isAvailable,
+    isDisabled,
+    isEnoughMana,
+    isError,
+    isLoading,
+    isValid,
+    name,
+    setName
+  ])
+
+  return (
+    <div className={styles.mintNamePageContainer}>
+      <Navbar isFullscreen />
+      <Navigation activeTab={NavigationTab.NAMES} />
+      <div className={styles.mintNamePage}>
+        {showMintFlow ? (
+          renderMintFlow()
+        ) : (
+          <>
+            <h2>{t('names_page.title')}</h2>
+            <span>{t('names_page.subtitle')}</span>
+            <div className={styles.buttons}>
+              <Button primary onClick={() => setShowMintFlow(true)}>
+                {t('names_page.claim_a_name')}
+              </Button>
+              <Button onClick={() => onBrowse()}>
+                {t('names_page.browse_names_being_resold')}
+              </Button>
+              <Button inverted as={'a'} href={`${builderUrl}/claim-name`}>
+                {t('names_page.manage_your_names')}
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+
+      <Footer isFullscreen />
+    </div>
+  )
+}
+
+export default React.memo(MintNamePage)

webapp/src/components/NamesPage/MintName/MintNamePage.types.ts

@@ -0,0 +1,13 @@
+import { Dispatch } from 'react'
+import { CallHistoryMethodAction } from 'connected-react-router'
+
+export type Props = {
+  currentMana: number | undefined
+  onBrowse: () => void
+}
+
+export type MapStateProps = Pick<Props, 'currentMana'>
+
+export type MapDispatchProps = Pick<Props, 'onBrowse'>
+
+export type MapDispatch = Dispatch<CallHistoryMethodAction>

webapp/src/components/NamesPage/MintName/index.ts

@@ -0,0 +1,2 @@
+import MintNamePage from './MintNamePage.container'
+export { MintNamePage }

webapp/src/components/NamesPage/NamesPage.module.css

@@ -0,0 +1,3 @@
+.namesPageContainer {
+  display: flex;
+}

webapp/src/components/NamesPage/NamesPage.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { VendorName } from '../../modules/vendor/types'
+import { View } from '../../modules/ui/types'
+import { NavigationTab } from '../Navigation/Navigation.types'
+import { Section } from '../../modules/vendor/decentraland'
+import { Navbar } from '../Navbar'
+import { Footer } from '../Footer'
+import { Navigation } from '../Navigation'
+import { AssetBrowse } from '../AssetBrowse'
+import { Props } from './NamesPage.types'
+import styles from './NamesPage.module.css'
+
+const NamesPage = (props: Props) => {
+  const { isFullscreen } = props
+  return (
+    <div className={styles.namesPageContainer}>
+      <Navbar isFullscreen />
+      <Navigation activeTab={NavigationTab.NAMES} />
+      <AssetBrowse
+        vendor={VendorName.DECENTRALAND}
+        view={View.MARKET}
+        section={Section.ENS}
+        sections={[Section.ENS]}
+      />
+      <Footer isFullscreen={isFullscreen} />
+    </div>
+  )
+}
+
+export default React.memo(NamesPage)

webapp/src/components/NamesPage/NamesPage.types.ts

@@ -0,0 +1,7 @@
+export type Props = {
+  isFullscreen: boolean
+  isMap: boolean
+  onBrowse: () => void
+}
+
+export type MapStateProps = Pick<Props, 'isMap' | 'isFullscreen'>

webapp/src/components/NamesPage/index.ts

@@ -0,0 +1,2 @@
+import NamesPage from './NamesPage'
+export { NamesPage }

webapp/src/components/Navigation/Navigation.tsx

@@ -83,6 +83,11 @@ const Navigation = (props: Props) => {
               {t('navigation.land')}
             </Tabs.Tab>
           </Link>
+          <Link to={locations.mintName()}>
+            <Tabs.Tab active={activeTab === NavigationTab.NAMES}>
+              {t('navigation.names')}
+            </Tabs.Tab>
+          </Link>
           <Link to={locations.defaultCurrentAccount()}>
             <Tabs.Tab active={activeTab === NavigationTab.MY_STORE}>
               {t('navigation.my_assets')}

webapp/src/components/Navigation/Navigation.types.ts

@@ -9,6 +9,7 @@ export enum NavigationTab {
   OVERVIEW = 'overview',
   CAMPAIGN_BROWSER = 'campaign-browser',
   LANDS = 'lands',
+  NAMES = 'names',
   BROWSE = 'browse',
   COLLECTIBLES = 'collectibles',
   MY_STORE = 'my_store',

webapp/src/components/Routes/Routes.tsx

@@ -21,6 +21,7 @@ import { ActivityPage } from '../ActivityPage'
 import { HomePage } from '../HomePage'
 import { LegacyNFTPage } from '../LegacyNFTPage'
 import { LandsPage } from '../LandsPage'
+import { NamesPage } from '../NamesPage'
 import { CollectionPage } from '../CollectionPage'
 import { Navbar } from '../Navbar'
 import { ManageAssetPage } from '../ManageAssetPage'
@@ -31,6 +32,7 @@ import { StatusPage } from '../BuyPage/StatusPage'
 import { ListPage } from '../ListPage'
 import { ProtectedRoute } from '../ProtectedRoute'
 import { ListsPage } from '../ListsPage'
+import { MintNamePage } from '../NamesPage/MintName'
 import { Props } from './Routes.types'
 
 const Routes = ({ inMaintenance }: Props) => {
@@ -61,6 +63,8 @@ const Routes = ({ inMaintenance }: Props) => {
     <>
       <Switch>
         <Route exact path={locations.lands()} component={LandsPage} />
+        <Route exact path={locations.mintName()} component={MintNamePage} />
+        <Route exact path={locations.names()} component={NamesPage} />
         <Route exact path={locations.browse()} component={BrowsePage} />
         <Route path={locations.campaign()} component={CampaignBrowserPage} />
         <Route