feat: Add Wearable Utility

decentraland · May 6, 2024 · c9c4696 · c9c4696
1 parent eb46453
commit c9c4696
Show file tree

Hide file tree

Showing 31 changed files with 214 additions and 229 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/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",

diff --git a/webapp/src/components/AssetPage/CategoryBadge/CategoryBadge.tsx b/webapp/src/components/AssetPage/CategoryBadge/CategoryBadge.tsx
@@ -4,7 +4,7 @@ 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) => {

diff --git a/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.module.css b/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;
   }

diff --git a/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx b/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx
@@ -12,12 +12,14 @@ 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 { WearableUtility } from '../WearableUtility'
 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}>
+                <WearableUtility utility={nft.utility} />
+              </div>
+            ) : null}
+          </div>
           <div className={styles.emoteOwnerAndCollectionContainer}>
             <Owner asset={nft} />
             <Collection asset={nft} />

diff --git a/webapp/src/components/AssetPage/IconBadge/IconBadge.css b/webapp/src/components/AssetPage/IconBadge/IconBadge.css
diff --git a/webapp/src/components/AssetPage/IconBadge/IconBadge.tsx b/webapp/src/components/AssetPage/IconBadge/IconBadge.tsx
diff --git a/webapp/src/components/AssetPage/IconBadge/IconBadge.types.ts b/webapp/src/components/AssetPage/IconBadge/IconBadge.types.ts
diff --git a/webapp/src/components/AssetPage/IconBadge/index.ts b/webapp/src/components/AssetPage/IconBadge/index.ts
diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css
@@ -48,6 +48,18 @@
   gap: 30px;
 }
 
+.ItemDetail .attributesRow {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.ItemDetail .attributesColumn {
+  flex-basis: 100%;
+}
+
 .ItemDetail .basicRow {
   display: flex;
   flex-direction: row;
@@ -60,8 +72,8 @@
 }
 
 .ItemDetail .vrmBadge {
-  background: #FF743933;
-  color: #FF7439;
+  background: #ff743933;
+  color: #ff7439;
   padding: 3px 6px;
   height: 24px;
   font-size: 13px;
@@ -88,6 +100,11 @@
 }
 
 @media (max-width: 768px) {
+  .ItemDetail .attributesRow {
+    display: flex;
+    flex-direction: column;
+  }
+
   .ItemDetail .assetImageContainer {
     height: 400px;
   }
@@ -105,7 +122,7 @@
   .ItemDetail .basicRow :global(.dcl.stats) {
     width: 100%;
   }
-  
+
   .ItemDetail .basicRow {
     flex-direction: column;
   }