feat: Add Asset Utility (#2243)

* feat: Add Wearable Utility

* fix: Rename WearableUtility to AssetUtility

* fix: CategoryBadge types

webapp/package.json

@@ -7,7 +7,7 @@
     "@0xsquid/squid-types": "^0.1.29",
     "@covalenthq/client-sdk": "^0.6.4",
     "@dcl/crypto": "^3.0.0",
-    "@dcl/schemas": "^11.4.0",
+    "@dcl/schemas": "^11.7.0",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",
     "@ethersproject/providers": "^5.6.2",
@@ -24,7 +24,7 @@
     "decentraland-crypto-fetch": "^1.0.3",
     "decentraland-dapps": "^19.5.3",
     "decentraland-transactions": "^2.6.0",
-    "decentraland-ui": "^5.17.1",
+    "decentraland-ui": "^5.21.0",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",
     "history": "^4.10.1",

webapp/src/components/AssetPage/AssetUtility/AssetUtility.module.css

@@ -0,0 +1,9 @@
+.main :global(.ui.sub.header) {
+  font-weight: 600;
+}
+
+.main .content {
+  font-size: 14px;
+  line-height: 26px;
+  letter-spacing: 0.2px;
+}

webapp/src/components/AssetPage/AssetUtility/AssetUtility.spec.tsx

@@ -0,0 +1,22 @@
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import { renderWithProviders } from '../../../utils/test'
+import { ASSET_UTILITY_CONTENT_DATA_TEST_ID, ASSET_UTILITY_HEADER_DATA_TEST_ID, AssetUtility } from './AssetUtility'
+import { Props } from './AssetUtility.types'
+
+const renderWearableUtility = (props: Partial<Props>) => renderWithProviders(<AssetUtility utility="someUtility" {...props} />)
+
+describe('when rendering the wearable utility component', () => {
+  let renderedComponent: ReturnType<typeof renderWearableUtility>
+  let utility: string
+
+  beforeEach(() => {
+    utility = 'This is some utility!'
+    renderedComponent = renderWearableUtility({ utility })
+  })
+
+  it('should render the utility header and the wearable utility', () => {
+    const { getByTestId } = renderedComponent
+    expect(getByTestId(ASSET_UTILITY_HEADER_DATA_TEST_ID).textContent).toEqual(t('global.utility'))
+    expect(getByTestId(ASSET_UTILITY_CONTENT_DATA_TEST_ID).textContent).toEqual(utility)
+  })
+})

webapp/src/components/AssetPage/AssetUtility/AssetUtility.tsx

@@ -0,0 +1,20 @@
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import { Header } from 'decentraland-ui/dist/components/Header/Header'
+import { Props } from './AssetUtility.types'
+import styles from './AssetUtility.module.css'
+
+export const ASSET_UTILITY_HEADER_DATA_TEST_ID = 'asset-utility-header'
+export const ASSET_UTILITY_CONTENT_DATA_TEST_ID = 'asset-utility-content'
+
+export const AssetUtility = ({ utility }: Props) => {
+  return (
+    <div className={styles.main}>
+      <Header sub data-testid={ASSET_UTILITY_HEADER_DATA_TEST_ID}>
+        {t('global.utility')}
+      </Header>
+      <span data-testid={ASSET_UTILITY_CONTENT_DATA_TEST_ID} className={styles.content}>
+        {utility}
+      </span>
+    </div>
+  )
+}

webapp/src/components/AssetPage/AssetUtility/AssetUtility.types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+  utility: string
+}

webapp/src/components/AssetPage/AssetUtility/index.ts

@@ -0,0 +1,2 @@
+export * from './AssetUtility'
+export * from './AssetUtility.types'

webapp/src/components/AssetPage/CategoryBadge/CategoryBadge.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo, useEffect } from 'react'
-import { EmoteCategory } from '@dcl/schemas'
+import { EmoteCategory, WearableCategory } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { locations } from '../../../modules/routing/locations'
 import { getSearchSection } from '../../../modules/routing/search'
 import { BrowseOptions } from '../../../modules/routing/types'
-import IconBadge from '../IconBadge'
+import IconBadge from '../LinkedIconBadge'
 import { Props } from './CategoryBadge.types'
 
 const CategoryBadge = ({ category, assetType }: Props) => {
@@ -27,7 +27,13 @@ const CategoryBadge = ({ category, assetType }: Props) => {
     }
   }, [section, category, isEmote])
 
-  return <IconBadge icon={isEmote ? undefined : category} text={t(`${isEmote ? 'emote' : 'wearable'}.category.${category}`)} href={href} />
+  return (
+    <IconBadge
+      icon={isEmote ? undefined : (category as WearableCategory)}
+      text={t(`${isEmote ? 'emote' : 'wearable'}.category.${category}`)}
+      href={href}
+    />
+  )
 }
 
 export default React.memo(CategoryBadge)

webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.module.css

@@ -48,7 +48,23 @@
   color: var(--secondary-text);
 }
 
+.EmoteDetail .attributesRow {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.EmoteDetail .attributesColumn {
+  flex-basis: 100%;
+}
+
 @media (max-width: 768px) {
+  .EmoteDetail .attributesRow {
+    flex-direction: column;
+  }
+
   .EmoteDetail .wearableInformationContainer {
     flex-direction: column;
   }

webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx

@@ -8,16 +8,18 @@ import { Section } from '../../../modules/vendor/decentraland'
 import { AssetImage } from '../../AssetImage'
 import CampaignBadge from '../../Campaign/CampaignBadge'
 import TableContainer from '../../Table/TableContainer'
+import { AssetUtility } from '../AssetUtility'
 import { BidsTable } from '../BidsTable'
 import { BuyNFTBox } from '../BuyNFTBox'
 import Collection from '../Collection'
 import { Description } from '../Description'
-import IconBadge from '../IconBadge'
+import IconBadge from '../LinkedIconBadge'
 import { ListingsTable } from '../ListingsTable'
 import OnBack from '../OnBack'
 import { Owner } from '../Owner'
 import Title from '../Title'
 import { TransactionHistory } from '../TransactionHistory'
+import { UtilityBadge } from '../UtilityBadge'
 import { YourOffer } from '../YourOffer'
 import { Props } from './EmoteDetail.types'
 import styles from './EmoteDetail.module.css'
@@ -96,12 +98,22 @@ const EmoteDetail = ({ nft }: Props) => {
                 text={t(`emote.play_mode.${loop ? 'loop' : 'simple'}`)}
                 href={emoteBadgeHref}
               />
+              {nft.utility ? <UtilityBadge /> : null}
               <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} />
+          <div className={styles.attributesRow}>
+            <div className={styles.attributesColumn}>
+              <Description text={emote.description} />
+            </div>
+            {nft.utility ? (
+              <div className={styles.attributesColumn}>
+                <AssetUtility utility={nft.utility} />
+              </div>
+            ) : null}
+          </div>
           <div className={styles.emoteOwnerAndCollectionContainer}>
             <Owner asset={nft} />
             <Collection asset={nft} />