feat: Add new rarity (#2211)

* feat: Add new exotic rarity * fix: Casting * feat: Add new rarity badge component * fix: Update UI and dapps
decentraland · Apr 8, 2024 · d9f3434 · d9f3434
1 parent b20d17b
commit d9f3434
Show file tree

Hide file tree

Showing 22 changed files with 71 additions and 222 deletions.
diff --git a/indexer/schema.graphql b/indexer/schema.graphql
@@ -249,6 +249,7 @@ enum WearableRarity @entity {
   legendary
   mythic
   unique
+  exotic
 }
 
 enum WearableBodyShape @entity {

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.1.0",
+    "@dcl/schemas": "^11.4.0",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",
     "@ethersproject/providers": "^5.6.2",
@@ -20,11 +20,11 @@
     "date-fns": "^2.23.0",
     "dcl-catalyst-client": "^21.6.0",
     "dcl-catalyst-commons": "^9.0.1",
-    "decentraland-connect": "^6.2.0",
+    "decentraland-connect": "^6.3.1",
     "decentraland-crypto-fetch": "^1.0.3",
-    "decentraland-dapps": "^19.3.2",
+    "decentraland-dapps": "^19.5.2",
     "decentraland-transactions": "^2.3.2",
-    "decentraland-ui": "^5.13.2",
+    "decentraland-ui": "^5.17.1",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",
     "history": "^4.10.1",

diff --git a/webapp/src/components/AssetCard/EmoteTags/EmoteTags.tsx b/webapp/src/components/AssetCard/EmoteTags/EmoteTags.tsx
@@ -1,10 +1,8 @@
 import classNames from 'classnames'
-import { NFTCategory } from '@dcl/schemas'
+import { RarityBadge } from 'decentraland-dapps/dist/containers/RarityBadge'
 import { T } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Popup } from 'decentraland-ui'
 import soundSrc from '../../../images/emotes/sound.svg'
-import { AssetType } from '../../../modules/asset/types'
-import RarityBadge from '../../RarityBadge'
 import { Props } from './EmoteTags.types'
 import styles from './EmoteTags.module.css'
 
@@ -15,9 +13,7 @@ const EmoteTags = (props: Props) => {
   return (
     <div className={classNames([styles.EmoteTags, 'tags'])}>
       <div className={styles.badges}>
-        {rarity ? (
-          <RarityBadge size="small" rarity={rarity} assetType={AssetType.NFT} category={NFTCategory.EMOTE} withTooltip={false} />
-        ) : null}
+        {rarity ? <RarityBadge size="small" rarity={rarity} withTooltip={false} /> : null}
         {loop !== undefined ? (
           <Popup
             position="top center"

diff --git a/webapp/src/components/AssetCard/WearableTags/WearableTags.tsx b/webapp/src/components/AssetCard/WearableTags/WearableTags.tsx
@@ -1,11 +1,10 @@
-import { NFTCategory } from '@dcl/schemas'
+import { RarityBadge } from 'decentraland-dapps/dist/containers/RarityBadge'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { AssetType } from '../../../modules/asset/types'
 import { isCatalogItem, isNFT } from '../../../modules/asset/utils'
 import { Section } from '../../../modules/vendor/decentraland'
 import SmartBadge from '../../AssetPage/SmartBadge'
 import GenderBadge from '../../GenderBadge/GenderBadge'
-import RarityBadge from '../../RarityBadge'
 import { Props } from './WearableTags.types'
 import './WearableTags.css'
 
@@ -15,7 +14,7 @@ const WearableTags = (props: Props) => {
 
   return (
     <div className="WearableTags tags">
-      <RarityBadge size="small" rarity={rarity} assetType={AssetType.NFT} category={NFTCategory.EMOTE} withTooltip={false} />
+      <RarityBadge size="small" rarity={rarity} withTooltip={false} />
       {!isCatalogItem(asset) && <div className={'icon ' + category} title={t(`wearable.category.${category}`)} />}
       {!isCatalogItem(asset) && (
         <GenderBadge bodyShapes={bodyShapes} assetType={AssetType.NFT} withText={false} section={Section.WEARABLES} />

diff --git a/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx b/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx
@@ -1,12 +1,12 @@
 import React, { useMemo, useState } from 'react'
-import { EmotePlayMode, NFTCategory, OrderSortBy } from '@dcl/schemas'
+import { EmotePlayMode, OrderSortBy } from '@dcl/schemas'
+import { RarityBadge } from 'decentraland-dapps/dist/containers/RarityBadge'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { AssetType } from '../../../modules/asset/types'
 import { locations } from '../../../modules/routing/locations'
 import { Section } from '../../../modules/vendor/decentraland'
 import { AssetImage } from '../../AssetImage'
 import CampaignBadge from '../../Campaign/CampaignBadge'
-import RarityBadge from '../../RarityBadge'
 import TableContainer from '../../Table/TableContainer'
 import { BidsTable } from '../BidsTable'
 import { BuyNFTBox } from '../BuyNFTBox'
@@ -90,7 +90,7 @@ const EmoteDetail = ({ nft }: Props) => {
           <div>
             <Title asset={nft} />
             <div className={styles.badges}>
-              <RarityBadge rarity={emote.rarity} assetType={AssetType.NFT} category={NFTCategory.EMOTE} />
+              <RarityBadge rarity={emote.rarity} size="medium" withTooltip />
               <IconBadge
                 icon={loop ? 'play-loop' : 'play-once'}
                 text={t(`emote.play_mode.${loop ? 'loop' : 'simple'}`)}

diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx
@@ -2,6 +2,7 @@ import React, { useMemo, useRef } from 'react'
 import { useSelector } from 'react-redux'
 import classNames from 'classnames'
 import { BodyShape, EmotePlayMode, NFTCategory, Network } from '@dcl/schemas'
+import { RarityBadge } from 'decentraland-dapps/dist/containers/RarityBadge'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getRequiredPermissions } from '../../../modules/asset/selectors'
 import { AssetType } from '../../../modules/asset/types'
@@ -11,7 +12,6 @@ import { Section } from '../../../modules/vendor/decentraland'
 import { AssetImage } from '../../AssetImage'
 import CampaignBadge from '../../Campaign/CampaignBadge'
 import GenderBadge from '../../GenderBadge'
-import RarityBadge from '../../RarityBadge'
 import { BestBuyingOption } from '../BestBuyingOption'
 import CategoryBadge from '../CategoryBadge'
 import Collection from '../Collection'
@@ -93,7 +93,7 @@ const ItemDetail = ({ item }: Props) => {
           <div>
             <Title asset={item} />
             <div className={styles.badges}>
-              <RarityBadge rarity={item.rarity} assetType={AssetType.ITEM} category={NFTCategory.WEARABLE} size="small" />
+              <RarityBadge rarity={item.rarity} size="small" withTooltip />
               {category && (
                 <CategoryBadge
                   category={item.data.emote ? item.data.emote.category : item.data.wearable!.category}

diff --git a/webapp/src/components/AssetPage/WearableDetail/WearableDetail.tsx b/webapp/src/components/AssetPage/WearableDetail/WearableDetail.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
-import { NFTCategory, OrderSortBy } from '@dcl/schemas'
+import { OrderSortBy } from '@dcl/schemas'
+import { RarityBadge } from 'decentraland-dapps/dist/containers/RarityBadge'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { AssetType } from '../../../modules/asset/types'
 import { Section } from '../../../modules/vendor/decentraland'
 import { AssetImage } from '../../AssetImage'
 import CampaignBadge from '../../Campaign/CampaignBadge'
 import GenderBadge from '../../GenderBadge'
-import RarityBadge from '../../RarityBadge'
 import TableContainer from '../../Table/TableContainer'
 import { BidsTable } from '../BidsTable'
 import { BuyNFTBox } from '../BuyNFTBox'
@@ -69,7 +69,7 @@ const WearableDetail = ({ nft }: Props) => {
           <div className={styles.wearableBadgesContainer}>
             <Title asset={nft} />
             <div className={styles.badges}>
-              <RarityBadge rarity={wearable.rarity} assetType={AssetType.NFT} category={NFTCategory.WEARABLE} />
+              <RarityBadge rarity={wearable.rarity} withTooltip size="medium" />
               <CategoryBadge category={wearable.category} assetType={AssetType.NFT} />
               <GenderBadge bodyShapes={wearable.bodyShapes} assetType={AssetType.NFT} section={Section.WEARABLES} />
               {wearable.isSmart ? <SmartBadge assetType={AssetType.NFT} /> : null}

diff --git a/webapp/src/components/RankingsTable/RankingItemRow/RankingItemRow.tsx b/webapp/src/components/RankingsTable/RankingItemRow/RankingItemRow.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Item, NFTCategory } from '@dcl/schemas'
+import { Item } from '@dcl/schemas'
+import { RarityBadge } from 'decentraland-dapps/dist/containers/RarityBadge'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Loader, Mana, Mobile, NotMobile, Table } from 'decentraland-ui'
@@ -14,7 +15,6 @@ import { AssetImage } from '../../AssetImage'
 import { AssetProvider } from '../../AssetProvider'
 import { LinkedProfile } from '../../LinkedProfile'
 import { ManaToFiat } from '../../ManaToFiat'
-import RarityBadge from '../../RarityBadge'
 import { Props } from './RankingItemRow.types'
 import './RankingItemRow.css'
 
@@ -58,13 +58,7 @@ const RankingItemRow = ({ entity }: Props) => {
                   </span>
                   {item ? (
                     <div className="rankings-item-badge-container">
-                      <RarityBadge
-                        size="small"
-                        rarity={item.rarity}
-                        assetType={AssetType.NFT}
-                        category={NFTCategory.WEARABLE}
-                        withTooltip={false}
-                      />
+                      <RarityBadge size="small" rarity={item.rarity} withTooltip={false} />
                     </div>
                   ) : null}
                 </div>
@@ -151,11 +145,7 @@ const RankingItemRow = ({ entity }: Props) => {
             : t(`emote.category.${item.data.emote!.category}`)
           : null}
       </Table.Cell>
-      <Table.Cell width={2}>
-        {item ? (
-          <RarityBadge size="small" rarity={item.rarity} assetType={AssetType.NFT} category={NFTCategory.WEARABLE} withTooltip={false} />
-        ) : null}
-      </Table.Cell>
+      <Table.Cell width={2}>{item ? <RarityBadge size="small" rarity={item.rarity} withTooltip={false} /> : null}</Table.Cell>
       <Table.Cell width={2}>{item ? entity.sales : null}</Table.Cell>
       <Table.Cell>
         {item ? (

diff --git a/webapp/src/components/RankingsTable/RankingsTable.container.ts b/webapp/src/components/RankingsTable/RankingsTable.container.ts
@@ -2,6 +2,7 @@ import { connect } from 'react-redux'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { fetchRankingsRequest, FETCH_RANKINGS_REQUEST } from '../../modules/analytics/actions'
 import { getRankingsData, getLoading } from '../../modules/analytics/selectors'
+import { getIsExoticRarityEnabled } from '../../modules/features/selectors'
 import { RootState } from '../../modules/reducer'
 import RankingsTable from './RankingsTable'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './RankingsTable.types'
@@ -10,6 +11,7 @@ const mapState = (state: RootState): MapStateProps => {
   const data = getRankingsData(state)
   return {
     data,
+    isExoticRarityEnabled: getIsExoticRarityEnabled(state),
     isLoading: isLoadingType(getLoading(state), FETCH_RANKINGS_REQUEST)
   }
 }