From 8dee7d8243f30e3fca7f085429936243fa08c6df Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Mon, 2 Jan 2023 20:15:01 +0100
Subject: [PATCH] feat: show error if the alias deployment fails (#2499)

* feat: show error if the alias deployment fails

* chore: remove log and update translation
---
 .../UseAsAliasModal/UseAsAliasModal.container.ts       |  3 ++-
 .../Modals/UseAsAliasModal/UseAsAliasModal.tsx         | 10 ++++++----
 .../Modals/UseAsAliasModal/UseAsAliasModal.types.ts    |  3 ++-
 src/modules/translation/languages/en.json              |  3 ++-
 src/modules/translation/languages/es.json              |  9 +++++----
 src/modules/translation/languages/zh.json              |  3 ++-
 6 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/Modals/UseAsAliasModal/UseAsAliasModal.container.ts b/src/components/Modals/UseAsAliasModal/UseAsAliasModal.container.ts
index 15256e699..d62e54ab4 100644
--- a/src/components/Modals/UseAsAliasModal/UseAsAliasModal.container.ts
+++ b/src/components/Modals/UseAsAliasModal/UseAsAliasModal.container.ts
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
-import { isLoadingSetProfileAvatarAlias } from 'decentraland-dapps/dist/modules/profile/selectors'
+import { isLoadingSetProfileAvatarAlias, getError } from 'decentraland-dapps/dist/modules/profile/selectors'
 import { setProfileAvatarAliasRequest } from 'decentraland-dapps/dist/modules/profile/actions'
 import { RootState } from 'modules/common/types'
 import { getAliases } from 'modules/ens/selectors'
@@ -10,6 +10,7 @@ import UseAsAliasModal from './UseAsAliasModal'
 
 const mapState = (state: RootState): MapStateProps => ({
   isLoading: isLoadingSetProfileAvatarAlias(state),
+  error: getError(state),
   aliases: getAliases(state),
   hasClaimedName: getHasClaimedName(state),
   name: getName(state) || '',
diff --git a/src/components/Modals/UseAsAliasModal/UseAsAliasModal.tsx b/src/components/Modals/UseAsAliasModal/UseAsAliasModal.tsx
index f863bb00e..9a86c7aea 100644
--- a/src/components/Modals/UseAsAliasModal/UseAsAliasModal.tsx
+++ b/src/components/Modals/UseAsAliasModal/UseAsAliasModal.tsx
@@ -14,7 +14,7 @@ export default class UseAsAliasModal extends React.PureComponent<Props> {
   }
 
   render() {
-    const { onClose, isLoading, aliases, name: oldName, hasClaimedName } = this.props
+    const { onClose, isLoading, aliases, name: oldName, hasClaimedName, error } = this.props
     const { newName } = this.props.metadata
     const aliasName = aliases.length > 0 ? aliases[0].name : ''
     const successOnSetAlias = newName === aliasName && hasClaimedName && !isLoading
@@ -24,7 +24,9 @@ export default class UseAsAliasModal extends React.PureComponent<Props> {
         <ModalNavigation title={t('use_as_alias_modal.title')} subtitle={t('use_as_alias_modal.subtitle')} onClose={onClose} />
         <ModalContent>
           <p>
-            {successOnSetAlias ? (
+            {error ? (
+              <T id="use_as_alias_modal.error" />
+            ) : successOnSetAlias ? (
               <T id="use_as_alias_modal.success" values={{ name: <b>{newName}</b> }} />
             ) : (
               <T id="use_as_alias_modal.body" values={{ newName: <b>{newName}</b>, oldName: <b>{oldName}</b> }} />
@@ -32,9 +34,9 @@ export default class UseAsAliasModal extends React.PureComponent<Props> {
           </p>
         </ModalContent>
         <ModalActions>
-          {successOnSetAlias ? (
+          {successOnSetAlias || error ? (
             <Button primary onClick={onClose}>
-              {t('global.done')}
+              {error ? t('global.close') : t('global.done')}
             </Button>
           ) : (
             <Button primary loading={isLoading} onClick={this.handleSubmit}>
diff --git a/src/components/Modals/UseAsAliasModal/UseAsAliasModal.types.ts b/src/components/Modals/UseAsAliasModal/UseAsAliasModal.types.ts
index b5c2ba2d6..d608e30e4 100644
--- a/src/components/Modals/UseAsAliasModal/UseAsAliasModal.types.ts
+++ b/src/components/Modals/UseAsAliasModal/UseAsAliasModal.types.ts
@@ -9,12 +9,13 @@ export type Props = Omit<ModalProps, 'metadata'> & {
   aliases: ENS[]
   hasClaimedName: boolean
   name: string
+  error: string | null
   metadata: {
     newName: string
   }
   onSubmit: typeof setProfileAvatarAliasRequest
 }
 
-export type MapStateProps = Pick<Props, 'isLoading' | 'address' | 'aliases' | 'hasClaimedName' | 'name'>
+export type MapStateProps = Pick<Props, 'isLoading' | 'address' | 'aliases' | 'hasClaimedName' | 'name' | 'error'>
 export type MapDispatchProps = Pick<Props, 'onSubmit'>
 export type MapDispatch = Dispatch
diff --git a/src/modules/translation/languages/en.json b/src/modules/translation/languages/en.json
index 10a4d3b70..7360a61e0 100644
--- a/src/modules/translation/languages/en.json
+++ b/src/modules/translation/languages/en.json
@@ -413,7 +413,8 @@
     "title": "Use as Alias",
     "subtitle": "This will be your name in the Metaverse",
     "body": "Use {newName} as your avatar’s new alias. Unique names are a great way to help your friends find you in the Metaverse! This will replace {oldName}.",
-    "success": "{name} is your new alias in the Metaverse! Let other people see your new name when visiting the world."
+    "success": "{name} is your new alias in the Metaverse! Let other people see your new name when visiting the world.",
+    "error": "Something went wrong... Please try again later."
   },
   "deployment_contest_modal": {
     "action": "Join the Contest",
diff --git a/src/modules/translation/languages/es.json b/src/modules/translation/languages/es.json
index 8042c0ede..d9732cafb 100644
--- a/src/modules/translation/languages/es.json
+++ b/src/modules/translation/languages/es.json
@@ -319,7 +319,7 @@
     "clear": {
       "confirmation": {
         "action": "Despublicar",
-        "description": "Estás a punto de despublicar \"{project}\" del Metaverse",
+        "description": "Estás a punto de despublicar \"{project}\" del Metaverso",
         "title": "Despublicar Escena"
       },
       "connect": {
@@ -367,7 +367,7 @@
         },
         "uploading_assets": {
           "description": "Por favor espera mientras tu Escena es subida.",
-          "title": "Subiendo Escena al Metaverse"
+          "title": "Subiendo Escena al Metaverso"
         },
         "uploading_recording": {
           "description": "Por favor espera mientras la previsualización de tu Escena es subida.",
@@ -415,8 +415,9 @@
   "use_as_alias_modal": {
     "title": "Establece un nombre a tu avatar",
     "subtitle": "Establece un nuevo alias para tu avatar",
-    "body": "Usa {newName} como el nuevo alias de tu avatar. ¡Los nombres únicos son una excelente manera de ayudar a tus amigos a encontrarte en Metaverse! Esto reemplazará a {oldName}.",
-    "success": "{name} es tu nuevo alias en el Metaverse! Deja que otras personas vean tu nuevo nombre cuando visiten el mundo."
+    "body": "Usa {newName} como el nuevo alias de tu avatar. ¡Los nombres únicos son una excelente manera de ayudar a tus amigos a encontrarte en Metaverso! Esto reemplazará a {oldName}.",
+    "success": "{name} es tu nuevo alias en el Metaverso! Deja que otras personas vean tu nuevo nombre cuando visiten el mundo.",
+    "error": "Algo salió mal... Vuelve a intentarlo más tarde."
   },
   "deployment_contest_modal": {
     "action": "Únete al Contest",
diff --git a/src/modules/translation/languages/zh.json b/src/modules/translation/languages/zh.json
index 8a451350d..6aa19e7da 100644
--- a/src/modules/translation/languages/zh.json
+++ b/src/modules/translation/languages/zh.json
@@ -409,7 +409,8 @@
     "title": "为头像分配名称",
     "subtitle": "为您的头像分配新的别名",
     "body": "使用{newName}作为头像的新别名。 唯一名称是帮助您的朋友在Metaverse中找到您的好方法！ 这将替换{oldName}。",
-    "success": "{name}是您在Metaverse中的新别名！ 环游世界时，让其他人看到您的新名字。"
+    "success": "{name}是您在Metaverse中的新别名！ 环游世界时，让其他人看到您的新名字。",
+    "error": "发生错误。请稍后再试。"
   },
   "deployment_contest_modal": {
     "action": "参加比赛",