From d51fa3ca4ed504a218c86822bcc9a656e503cb9a Mon Sep 17 00:00:00 2001 From: Melisa Anabella Rossi Date: Wed, 24 Jan 2024 10:30:04 -0300 Subject: [PATCH] feat: add empty state names (#3021) --- src/components/ENSListPage/ENSListPage.css | 32 ++++++++++++++++++++++ src/components/ENSListPage/ENSListPage.tsx | 32 +++++++++++++++++++--- src/modules/translation/languages/en.json | 8 +++++- src/modules/translation/languages/es.json | 8 +++++- src/modules/translation/languages/zh.json | 8 +++++- 5 files changed, 81 insertions(+), 7 deletions(-) diff --git a/src/components/ENSListPage/ENSListPage.css b/src/components/ENSListPage/ENSListPage.css index 1df4fbce6..3dbd8f7ed 100644 --- a/src/components/ENSListPage/ENSListPage.css +++ b/src/components/ENSListPage/ENSListPage.css @@ -346,3 +346,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 index e0255335b..b3dce89d6 100644 --- 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,6 +391,26 @@ export default class ENSListPage extends React.PureComponent { })) } + renderEmptyEnsList() { + return ( +
+
+ empty names +
+

{t('ens_list_page.empty_state.title')}

+ {t('ens_list_page.empty_state.subtitle')} +
+ + +
+
+ ) + } + renderNewEnsList() { const { ensList } = this.props const { page } = this.state @@ -397,6 +418,7 @@ export default class ENSListPage extends React.PureComponent { const total = ensList.length const totalPages = Math.ceil(total / PAGE_SIZE) const paginatedItems = this.paginate() + return (
@@ -405,9 +427,11 @@ export default class ENSListPage extends React.PureComponent { {t('ens_list_page.result', { count: ensList.length })}
-
- {t('ens_list_page.sort_by')} {ensList.length > 1 ? this.renderSortDropdown() : null} -
+ {ensList.length > 1 ? ( +
+ {t('ens_list_page.sort_by')} {this.renderSortDropdown()} +
+ ) : null} @@ -421,7 +445,7 @@ export default class ENSListPage extends React.PureComponent { 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 index 1a926e6d4..d714aca14 100644 --- 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 index fecbec09b..4cff567d8 100644 --- 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 index 77b1d069b..2e078a99c 100644 --- 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": "姓名",