Merge branch 'feat/add-address-field' of github.com:decentraland/buil…

…der into feat/add-address-field
decentraland · Jan 24, 2024 · 3344ed0 · 3344ed0
2 parents b96b238 + d1864fb
commit 3344ed0
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 7 deletions.
diff --git a/src/components/ENSListPage/ENSListPage.css b/src/components/ENSListPage/ENSListPage.css
@@ -355,3 +355,35 @@
   display: flex;
   gap: 10px;
 }
+
+.ENSListPage .ens-list-page-empty {
+  height: 600px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--background);
+  gap: 32px;
+}
+
+.ENSListPage .ens-list-page-empty-title {
+  margin: 0;
+}
+
+.ENSListPage .ens-list-page-empty-subtitle {
+  color: var(--secondary-text);
+  text-align: center;
+  max-width: 480px;
+  font-size: 14px;
+}
+
+.ENSListPage .ens-list-page-empty-actions {
+  display: flex;
+  gap: 20px;
+}
+
+.ENSListPage .ens-list-page-empty-image {
+  padding: 30px;
+  border-radius: 50%;
+  background: var(--secondary);
+}
diff --git a/src/components/ENSListPage/ENSListPage.tsx b/src/components/ENSListPage/ENSListPage.tsx
@@ -28,6 +28,7 @@ import CopyToClipboard from 'components/CopyToClipboard/CopyToClipboard'
 import { NavigationTab } from 'components/Navigation/Navigation.types'
 import LoggedInDetailPage from 'components/LoggedInDetailPage'
 import ethereumImg from '../../icons/ethereum.svg'
+import namesImg from '../../images/empty-names.svg'
 import { Props, State, SortBy } from './ENSListPage.types'
 import './ENSListPage.css'
 
@@ -390,13 +391,34 @@ export default class ENSListPage extends React.PureComponent<Props, State> {
     }))
   }
 
+  renderEmptyEnsList() {
+    return (
+      <div className="ens-list-page-empty">
+        <div className="ens-list-page-empty-image">
+          <img src={namesImg} alt="empty names" />
+        </div>
+        <h3 className="ens-list-page-empty-title">{t('ens_list_page.empty_state.title')}</h3>
+        <span className="ens-list-page-empty-subtitle">{t('ens_list_page.empty_state.subtitle')}</span>
+        <div className="ens-list-page-empty-actions">
+          <Button primary href={`${MARKETPLACE_WEB_URL}/names/claim`} target="_blank">
+            {t('ens_list_page.empty_state.mint_name')}
+          </Button>
+          <Button secondary href={`${MARKETPLACE_WEB_URL}/names/browse?section=ens`} target="_blank">
+            {t('ens_list_page.empty_state.go_to_marketplace')}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
   renderNewEnsList() {
     const { ensList } = this.props
     const { page } = this.state
 
     const total = ensList.length
     const totalPages = Math.ceil(total / PAGE_SIZE)
     const paginatedItems = this.paginate()
+
     return (
       <div className="ens-page-content">
         <div className="ens-page-header">
@@ -405,9 +427,11 @@ export default class ENSListPage extends React.PureComponent<Props, State> {
             {t('ens_list_page.result', { count: ensList.length })}
           </div>
           <div className="ens-page-actions">
-            <div>
-              {t('ens_list_page.sort_by')} {ensList.length > 1 ? this.renderSortDropdown() : null}
-            </div>
+            {ensList.length > 1 ? (
+              <div>
+                {t('ens_list_page.sort_by')} {this.renderSortDropdown()}
+              </div>
+            ) : null}
             <Button compact href={`${MARKETPLACE_WEB_URL}/names/claim`} target="_blank" primary>
               {t('ens_list_page.mint_name')}
             </Button>
@@ -421,7 +445,7 @@ export default class ENSListPage extends React.PureComponent<Props, State> {
               activePage={page}
               setPage={page => this.setState({ page })}
               totalPages={totalPages}
-              empty={() => null}
+              empty={() => this.renderEmptyEnsList()}
               total={PAGE_SIZE}
               hasHeaders
               customHeaders={{

diff --git a/src/modules/translation/languages/en.json b/src/modules/translation/languages/en.json
@@ -606,7 +606,13 @@
     "empty_names": "It looks like you don't have any Names.{br} {link} to get started.",
     "items": "{count} {count, plural, one {result} other {results}}",
     "alias_popup": "This name is being used by your profile but it can still be assigned",
-    "not_profile_created": "You need to get into the world first to set an alias."
+    "not_profile_created": "You need to get into the world first to set an alias.",
+    "empty_state": {
+      "title": "Nothing here yet",
+      "subtitle": "Own your presence in the metaverse with a username free from numbers on the end (e.g. Genesis#1234).",
+      "mint_name": "Mint name",
+      "go_to_marketplace": "Visit marketplace"
+    }
   },
   "ens_detail_page": {
     "name": "Name",

diff --git a/src/modules/translation/languages/es.json b/src/modules/translation/languages/es.json
@@ -608,7 +608,13 @@
     "empty_names": "No tienes ningun nombre aún.{br} {link} para comenzar.",
     "items": "{count} {count, plural, one {resultado} other {resultados}}",
     "alias_popup": "Este nombre está siendo usado por tu perfil pero igual puede ser asignado",
-    "not_profile_created": "Primero necesitas entrar en el mundo antes de asignar un alias."
+    "not_profile_created": "Primero necesitas entrar en el mundo antes de asignar un alias.",
+    "empty_state": {
+      "title": "Nada aquí todavía",
+      "subtitle": "Tenga presencia en el Metaverso con un nombre de usuario libre de números al final (e.j. Genesis#1234).",
+      "mint_name": "Agregar nombre",
+      "go_to_marketplace": "Visitar el marketplace"
+    }
   },
   "ens_detail_page": {
     "name": "Nombre",

diff --git a/src/modules/translation/languages/zh.json b/src/modules/translation/languages/zh.json
@@ -610,7 +610,13 @@
     "empty_names": "看来您没有任何名称。{br} {link}开始使用。",
     "items": "{count}结果",
     "alias_popup": "您的个人资料正在使用此名称，但仍可以分配",
-    "not_profile_created": "您需要先进入世界才能设置别名。"
+    "not_profile_created": "您需要先进入世界才能设置别名。",
+    "empty_state": {
+      "title": "这里什么都没有",
+      "subtitle": "用用户名在元元中拥有无数数字 (例如。 Genesis#1234).",
+      "mint_name": "薄荷名称",
+      "go_to_marketplace": "访问市场"
+    }
   },
   "ens_detail_page": {
     "name": "姓名",