fix: add missing tag in emote detail (decentraland#2022)

siengvantran · Sep 20, 2023 · 7af0270 · 7af0270
1 parent 28223bd
commit 7af0270
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 30 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -15,9 +15,9 @@
     "dcl-catalyst-client": "^21.2.0",
     "dcl-catalyst-commons": "^9.0.1",
     "decentraland-crypto-fetch": "^1.0.3",
-    "decentraland-dapps": "^16.8.1",
+    "decentraland-dapps": "^16.10.0",
     "decentraland-transactions": "^1.47.0",
-    "decentraland-ui": "^4.12.0",
+    "decentraland-ui": "^4.15.0",
     "dotenv": "^10.0.0",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",

diff --git a/webapp/src/components/AssetImage/AssetImage.tsx b/webapp/src/components/AssetImage/AssetImage.tsx
@@ -180,13 +180,13 @@ const AssetImage = (props: Props) => {
       asset.category === NFTCategory.EMOTE &&
       wearableController &&
       isDraggable &&
-      hasSound === undefined
+      !isLoadingWearablePreview
     ) {
       wearableController.emote?.hasSound().then(sound => {
         setHasSound(sound)
       })
     }
-  }, [wearableController, asset.category, isDraggable, hasSound])
+  }, [wearableController, asset.category, isDraggable, hasSound, isLoadingWearablePreview])
 
   const estateSelection = useMemo(() => (estate ? getSelection(estate) : []), [
     estate

diff --git a/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.module.css b/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.module.css
@@ -23,6 +23,7 @@
 
 .EmoteDetail .badges {
   margin-top: 8px;
+  margin-bottom: 15px;
   display: flex;
   gap: 8px;
   flex-wrap: wrap;

diff --git a/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx b/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx
@@ -67,6 +67,18 @@ const EmoteDetail = ({ nft }: Props) => {
     [loop]
   )
 
+  const emoteSoundHref = locations.browse({
+    assetType: AssetType.ITEM,
+    section: Section.EMOTES,
+    emoteHasSound: true
+  })
+
+  const emoteGeometryHref = locations.browse({
+    assetType: AssetType.ITEM,
+    section: Section.EMOTES,
+    emoteHasGeometry: true
+  })
+
   return (
     <div className={styles.EmoteDetail}>
       <OnBack asset={nft} />
@@ -89,6 +101,20 @@ const EmoteDetail = ({ nft }: Props) => {
                 href={emoteBadgeHref}
               />
               <CampaignBadge contract={nft.contractAddress} />
+              {emote.hasSound && (
+                <IconBadge
+                  icon="sound"
+                  text={t('emote.sound')}
+                  href={emoteSoundHref}
+                />
+              )}
+              {emote.hasGeometry && (
+                <IconBadge
+                  icon="props"
+                  text={t('emote.props')}
+                  href={emoteGeometryHref}
+                />
+              )}
             </div>
           </div>
           <Description text={emote.description} />

diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json
@@ -377,7 +377,7 @@
     "gender": "Gender",
     "smart_wearables": "Smart Wearables",
     "emote_attributes": {
-      "title": "Emote attributes",
+      "title": "Emote features",
       "play_mode": "Play Mode",
       "all_play_modes": "All Play Modes",
       "all_items": "All emotes",

diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json
@@ -370,7 +370,7 @@
     "gender": "Género",
     "smart_wearables": "Vestimentas Interactivas",
     "emote_attributes": {
-      "title": "Emote attributes",
+      "title": "Atributos de Emotes",
       "play_mode": "Modo de reproducción",
       "all_play_modes": "Todos",
       "all_items": "Todos los emotes",