From d9f3434d30f9aad7f645340f07839fc760c140b6 Mon Sep 17 00:00:00 2001 From: Lautaro Petaccio <1120791+LautaroPetaccio@users.noreply.github.com> Date: Mon, 8 Apr 2024 14:47:58 -0300 Subject: [PATCH] feat: Add new rarity (#2211) * feat: Add new exotic rarity * fix: Casting * feat: Add new rarity badge component * fix: Update UI and dapps --- indexer/schema.graphql | 1 + webapp/package-lock.json | 81 ++++++------------- webapp/package.json | 8 +- .../AssetCard/EmoteTags/EmoteTags.tsx | 8 +- .../AssetCard/WearableTags/WearableTags.tsx | 5 +- .../AssetPage/EmoteDetail/EmoteDetail.tsx | 6 +- .../AssetPage/ItemDetail/ItemDetail.tsx | 4 +- .../WearableDetail/WearableDetail.tsx | 6 +- .../RankingItemRow/RankingItemRow.tsx | 18 +---- .../RankingsTable/RankingsTable.container.ts | 2 + .../RankingsTable/RankingsTable.tsx | 15 ++-- .../RankingsTable/RankingsTable.types.ts | 3 +- .../RarityBadge/RarityBadge.container.ts | 22 ----- .../RarityBadge/RarityBadge.module.css | 26 ------ .../components/RarityBadge/RarityBadge.tsx | 31 ------- .../RarityBadge/RarityBadge.types.ts | 14 ---- webapp/src/components/RarityBadge/index.ts | 3 - webapp/src/modules/features/selectors.ts | 7 ++ webapp/src/modules/features/types.ts | 3 +- .../src/modules/translation/locales/en.json | 10 +-- .../src/modules/translation/locales/es.json | 10 +-- .../src/modules/translation/locales/zh.json | 10 +-- 22 files changed, 71 insertions(+), 222 deletions(-) delete mode 100644 webapp/src/components/RarityBadge/RarityBadge.container.ts delete mode 100644 webapp/src/components/RarityBadge/RarityBadge.module.css delete mode 100644 webapp/src/components/RarityBadge/RarityBadge.tsx delete mode 100644 webapp/src/components/RarityBadge/RarityBadge.types.ts delete mode 100644 webapp/src/components/RarityBadge/index.ts diff --git a/indexer/schema.graphql b/indexer/schema.graphql index 8811a55795..8b331abd24 100644 --- 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 index f5896b81ba..3fa5a5c313 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -12,7 +12,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", @@ -25,11 +25,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", @@ -1731,9 +1731,9 @@ "integrity": "sha512-Cg+MoIOn+BYmQV2q8zSFnNYY+GldlnUazwBnfgrq3i66ZxOaZ65h01btd8OUtSAlfWG4VTNIOHDjtKqmuwJNBg==" }, "node_modules/@dcl/schemas": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-11.1.0.tgz", - "integrity": "sha512-qDEqUW2+RBxPOQaqd/8LtFL/2Rtifpve1aAEMmYsq5z0JdAXEX+S6vCyx+pp1kkskNqnVm1+s9iYKy+M8qoQsQ==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-11.4.0.tgz", + "integrity": "sha512-pCMENllY9vcl4HS1ta/TpVqjWUov/oa9xab+Ki1iMur48nE5+xXfa7+laCPhWLOKSZEkC59i5S6zQGTSWFPYew==", "dependencies": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", @@ -7016,9 +7016,9 @@ } }, "node_modules/@wert-io/widget-initializer": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@wert-io/widget-initializer/-/widget-initializer-5.2.0.tgz", - "integrity": "sha512-Rs9XLeFtvWtZGg9kOVvMZ+PpRxFconMFox6fGQO9psET1B29bBNO6sifOeNzxQ5pMVVbLiK2ZQD5w194sqrB3A==" + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@wert-io/widget-initializer/-/widget-initializer-6.1.1.tgz", + "integrity": "sha512-QSiW/jvnFTaTOSAFzFVp1wBjgkKBCulvQS5a4u8OAo1F2tIq7A8Xzue/I7t+73I7EGauIN06crtevX5Gz3BJJw==" }, "node_modules/abab": { "version": "2.0.6", @@ -9112,11 +9112,11 @@ } }, "node_modules/decentraland-connect": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/decentraland-connect/-/decentraland-connect-6.2.0.tgz", - "integrity": "sha512-+YEIPbz8+9DzhjvXlvSqW9eGULept0S06GZA10+vWnLMk1X02qrSYA09d8am8NxsEEoqJ4bZx4Jdsq8lJYPj1g==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/decentraland-connect/-/decentraland-connect-6.3.1.tgz", + "integrity": "sha512-RMlUkAOZvLo4Glb9kGPHp1bT4jOH2hO0YrzAt/Lz9ekkdj6m9gwAZKz7oM6cLCRgsGYK/DbQjp+SuLaOLw+H2A==", "dependencies": { - "@dcl/schemas": "^10.2.0", + "@dcl/schemas": "^11.4.0", "@dcl/single-sign-on-client": "^0.1.0", "@magic-ext/oauth": "^15.5.0", "@walletconnect/ethereum-provider": "^2.9.2", @@ -9136,16 +9136,6 @@ "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz", "integrity": "sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw==" }, - "node_modules/decentraland-connect/node_modules/@dcl/schemas": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-10.4.0.tgz", - "integrity": "sha512-gd69ProYNRxU4YqY7hruLlWdtfHfAuBdn10LIg0kPayvIraBX78emulVFy47r7qDRiqscRn6+1KLyIfMkXEBdA==", - "dependencies": { - "ajv": "^8.11.0", - "ajv-errors": "^3.0.0", - "ajv-keywords": "^5.1.0" - } - }, "node_modules/decentraland-connect/node_modules/@noble/curves": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.2.0.tgz", @@ -9244,28 +9234,28 @@ } }, "node_modules/decentraland-dapps": { - "version": "19.3.2", - "resolved": "https://registry.npmjs.org/decentraland-dapps/-/decentraland-dapps-19.3.2.tgz", - "integrity": "sha512-0F1e6iuKDO4Jkw7zsLKaKGmkucsr9onnlRmFYBb3tNBD9KlQtyugGr+cVuv2gH2k/n38HRTGl+aoiXj9/7mhwA==", + "version": "19.5.2", + "resolved": "https://registry.npmjs.org/decentraland-dapps/-/decentraland-dapps-19.5.2.tgz", + "integrity": "sha512-CuMRtUgtc/LaZVtOAXFkIuRIeBx6IeBuCRSN/LOQdNT2A2MT9fZELu54Fx8T3RGc4al6HHiKqyYlXUoshuitAQ==", "dependencies": { "@0xsequence/multicall": "^0.25.1", "@0xsequence/relayer": "^0.25.1", "@dcl/crypto": "^3.3.1", - "@dcl/schemas": "^10.2.0", + "@dcl/schemas": "^11.4.0", "@dcl/single-sign-on-client": "^0.1.0", "@dcl/ui-env": "^1.5.0", "@transak/transak-sdk": "^1.0.31", "@types/flat": "0.0.28", "@types/segment-analytics": "^0.0.38", "@well-known-components/fetch-component": "^2.0.1", - "@wert-io/widget-initializer": "^5.2.0", + "@wert-io/widget-initializer": "^6.1.1", "axios": "^0.21.1", "date-fns": "^1.29.0", "dcl-catalyst-client": "^21.1.0", - "decentraland-connect": "^6.2.0", + "decentraland-connect": "^6.3.1", "decentraland-crypto-fetch": "^2.0.1", "decentraland-transactions": "^2.3.2", - "decentraland-ui": "^5.14.0", + "decentraland-ui": "^5.17.1", "ethers": "^5.6.8", "events": "^3.3.0", "flat": "^5.0.2", @@ -9290,16 +9280,6 @@ "redux-saga": "^1.1.3" } }, - "node_modules/decentraland-dapps/node_modules/@dcl/schemas": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-10.4.0.tgz", - "integrity": "sha512-gd69ProYNRxU4YqY7hruLlWdtfHfAuBdn10LIg0kPayvIraBX78emulVFy47r7qDRiqscRn6+1KLyIfMkXEBdA==", - "dependencies": { - "ajv": "^8.11.0", - "ajv-errors": "^3.0.0", - "ajv-keywords": "^5.1.0" - } - }, "node_modules/decentraland-dapps/node_modules/@formatjs/intl": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz", @@ -9411,11 +9391,11 @@ } }, "node_modules/decentraland-ui": { - "version": "5.14.0", - "resolved": "https://registry.npmjs.org/decentraland-ui/-/decentraland-ui-5.14.0.tgz", - "integrity": "sha512-+8UVamZOPteLe4BfharVecb48IrWAH4ff/PPm6dlmv7rcQqWFx7ALm1kcNrwWxE1Skeg2uUxWz8o0UsOLRePhg==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/decentraland-ui/-/decentraland-ui-5.17.1.tgz", + "integrity": "sha512-AnRW5wU2z4f2bkHOnHiT1yDurHn8oLOkSLw/Do+hFu0SKpJG7ZyfZCW5QHYquBq65nLwCRStC0CyN9N3CncmiQ==", "dependencies": { - "@dcl/schemas": "^10.2.0", + "@dcl/schemas": "^11.4.0", "@dcl/ui-env": "^1.4.0", "balloon-css": "^0.5.0", "classnames": "^2.3.2", @@ -9424,6 +9404,7 @@ "ethereum-blockies": "^0.1.1", "events": "^3.3.0", "fp-future": "^1.0.1", + "mitt": "^3.0.1", "parallax-js": "^3.1.0", "react": "^16.8.0 || ^17.0.0", "react-dom": "^16.8.0 || ^17.0.0", @@ -9451,16 +9432,6 @@ } } }, - "node_modules/decentraland-ui/node_modules/@dcl/schemas": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-10.4.0.tgz", - "integrity": "sha512-gd69ProYNRxU4YqY7hruLlWdtfHfAuBdn10LIg0kPayvIraBX78emulVFy47r7qDRiqscRn6+1KLyIfMkXEBdA==", - "dependencies": { - "ajv": "^8.11.0", - "ajv-errors": "^3.0.0", - "ajv-keywords": "^5.1.0" - } - }, "node_modules/decimal.js": { "version": "10.4.3", "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz", diff --git a/webapp/package.json b/webapp/package.json index cfdf454bd4..b52b82cdfd 100644 --- 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 index 739f05997a..a658977db8 100644 --- 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 (
- {rarity ? ( - - ) : null} + {rarity ? : null} {loop !== undefined ? ( { return (
- + {!isCatalogItem(asset) &&
} {!isCatalogItem(asset) && ( diff --git a/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx b/webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx index cca4356046..8e5b02d1b8 100644 --- 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 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 index f60661907d..887680c0a6 100644 --- 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 index 0095d2ad21..7cf03021e7 100644 --- 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 index 86c16b23ab..8a4d82f309 100644 --- 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 index d02ea7dfce..ed5f554f6f 100644 --- 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) } } diff --git a/webapp/src/components/RankingsTable/RankingsTable.tsx b/webapp/src/components/RankingsTable/RankingsTable.tsx index e1a1e81e16..0b420fcecb 100644 --- a/webapp/src/components/RankingsTable/RankingsTable.tsx +++ b/webapp/src/components/RankingsTable/RankingsTable.tsx @@ -30,7 +30,7 @@ const INITIAL_FILTERS = { const TABS_PREFIX = '#rankings-' const RankingsTable = (props: Props) => { - const { isLoading, onFetchRankings, data } = props + const { isLoading, isExoticRarityEnabled, onFetchRankings, data } = props const history = useHistory() const location = useLocation() @@ -94,7 +94,6 @@ const RankingsTable = (props: Props) => { {(currentEntity === RankingEntities.WEARABLES || currentEntity === RankingEntities.EMOTES) && ( <> <Dropdown - defaultValue={ALL_FILTER} value={currentFilters.category || ALL_FILTER} direction="right" options={[ @@ -111,14 +110,16 @@ const RankingsTable = (props: Props) => { onChange={registerHandleFilterChange('category')} /> <Dropdown - defaultValue={ALL_FILTER} value={currentFilters.rarity || ALL_FILTER} direction="right" // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - options={[ALL_FILTER, ...Object.values(Rarity.schema.enum)].map(rarity => ({ - value: rarity as string, - text: rarity === ALL_FILTER ? t('home_page.analytics.rankings.all_rarities') : t(`rarity.${convertToOutputString(rarity)}`) - }))} + options={[ALL_FILTER, ...Rarity.getRarities()] + .filter(rarity => isExoticRarityEnabled || (rarity as Rarity) !== Rarity.EXOTIC) + .map(rarity => ({ + value: rarity, + text: + rarity === ALL_FILTER ? t('home_page.analytics.rankings.all_rarities') : t(`rarity.${convertToOutputString(rarity)}`) + }))} onChange={registerHandleFilterChange('rarity')} /> </> diff --git a/webapp/src/components/RankingsTable/RankingsTable.types.ts b/webapp/src/components/RankingsTable/RankingsTable.types.ts index f0211cd67d..64702b1345 100644 --- a/webapp/src/components/RankingsTable/RankingsTable.types.ts +++ b/webapp/src/components/RankingsTable/RankingsTable.types.ts @@ -5,9 +5,10 @@ import { RankingEntity } from '../../modules/analytics/types' export type Props = { data: RankingEntity[] | null isLoading: boolean + isExoticRarityEnabled: boolean onFetchRankings: typeof fetchRankingsRequest } -export type MapStateProps = Pick<Props, 'data' | 'isLoading'> +export type MapStateProps = Pick<Props, 'data' | 'isLoading' | 'isExoticRarityEnabled'> export type MapDispatchProps = Pick<Props, 'onFetchRankings'> export type MapDispatch = Dispatch<FetchRankingsRequestAction> diff --git a/webapp/src/components/RarityBadge/RarityBadge.container.ts b/webapp/src/components/RarityBadge/RarityBadge.container.ts deleted file mode 100644 index db55c6ab19..0000000000 --- a/webapp/src/components/RarityBadge/RarityBadge.container.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { connect } from 'react-redux' -import { push } from 'connected-react-router' -import { Dispatch } from 'redux' -import { locations } from '../../modules/routing/locations' -import { getSectionFromCategory } from '../../modules/routing/search' -import RarityBadge from './RarityBadge' -import { MapDispatchProps, OwnProps } from './RarityBadge.types' - -const mapDispatch = (dispatch: Dispatch, { rarity, category, assetType }: OwnProps): MapDispatchProps => ({ - onClick: () => - dispatch( - push( - locations.browse({ - assetType: assetType, - section: getSectionFromCategory(category), - rarities: [rarity] - }) - ) - ) -}) - -export default connect(null, mapDispatch)(RarityBadge) diff --git a/webapp/src/components/RarityBadge/RarityBadge.module.css b/webapp/src/components/RarityBadge/RarityBadge.module.css deleted file mode 100644 index d0eecff0a0..0000000000 --- a/webapp/src/components/RarityBadge/RarityBadge.module.css +++ /dev/null @@ -1,26 +0,0 @@ -.badge { - display: inline-flex; - align-items: center; - text-transform: uppercase; - border-radius: 5px; - cursor: pointer; -} - -.medium { - padding: 4px 12px; -} -.medium .text { - font-size: 15px; -} - -.small { - padding: 3px 6px; - height: 24px; -} -.small .text { - font-size: 13px; -} - -.text { - color: var(--text); -} diff --git a/webapp/src/components/RarityBadge/RarityBadge.tsx b/webapp/src/components/RarityBadge/RarityBadge.tsx deleted file mode 100644 index 65239f702f..0000000000 --- a/webapp/src/components/RarityBadge/RarityBadge.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import classnames from 'classnames' -import { Rarity } from '@dcl/schemas' -import { t } from 'decentraland-dapps/dist/modules/translation/utils' -import { Popup } from 'decentraland-ui' -import { Props } from './RarityBadge.types' -import styles from './RarityBadge.module.css' - -const RarityBadge = ({ rarity, size, withTooltip, onClick }: Props) => { - const trigger = ( - <div - className={classnames([styles.badge, styles[size]])} - style={{ - backgroundColor: Rarity.getColor(rarity) - }} - title={!withTooltip ? t(`rarity_description.${rarity}`) : ''} - onClick={onClick} - > - <span className={styles.text}>{t(`rarity.${rarity}`)}</span> - </div> - ) - - return withTooltip ? <Popup position="top center" content={t(`rarity_description.${rarity}`)} trigger={trigger} /> : trigger -} - -RarityBadge.defaultProps = { - size: 'medium', - withTooltip: true -} - -export default React.memo(RarityBadge) diff --git a/webapp/src/components/RarityBadge/RarityBadge.types.ts b/webapp/src/components/RarityBadge/RarityBadge.types.ts deleted file mode 100644 index ddfe3fc032..0000000000 --- a/webapp/src/components/RarityBadge/RarityBadge.types.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NFTCategory, Rarity } from '@dcl/schemas' -import { AssetType } from '../../modules/asset/types' - -export type Props = { - rarity: Rarity - assetType: AssetType - category: NFTCategory - size: 'medium' | 'small' - withTooltip: boolean - onClick: () => void -} - -export type MapDispatchProps = Pick<Props, 'onClick'> -export type OwnProps = Pick<Props, 'rarity' | 'category' | 'assetType'> diff --git a/webapp/src/components/RarityBadge/index.ts b/webapp/src/components/RarityBadge/index.ts deleted file mode 100644 index cd9ca9bbf9..0000000000 --- a/webapp/src/components/RarityBadge/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import RarityBadge from './RarityBadge.container' - -export default RarityBadge diff --git a/webapp/src/modules/features/selectors.ts b/webapp/src/modules/features/selectors.ts index 1938a122c9..0b3e5a2e19 100644 --- a/webapp/src/modules/features/selectors.ts +++ b/webapp/src/modules/features/selectors.ts @@ -76,3 +76,10 @@ export const getIsLandCrossChainEnabled = (state: RootState) => { } return false } + +export const getIsExoticRarityEnabled = (state: RootState) => { + if (hasLoadedInitialFlags(state)) { + return getIsFeatureEnabled(state, ApplicationName.DAPPS, FeatureName.EXOTIC_RARITY) + } + return false +} diff --git a/webapp/src/modules/features/types.ts b/webapp/src/modules/features/types.ts index 295d94bbe5..6bdf0c1106 100644 --- a/webapp/src/modules/features/types.ts +++ b/webapp/src/modules/features/types.ts @@ -7,5 +7,6 @@ export enum FeatureName { SMART_WEARABLES_FTU = 'smart-wearables-ftu', MARKETPLACE_SERVER = 'marketplace-server', CHAIN_SELECTOR = 'chain-selector', - CROSS_CHAIN_LANDS = 'cross-chain-lands' + CROSS_CHAIN_LANDS = 'cross-chain-lands', + EXOTIC_RARITY = 'exotic-rarity' } diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json index 834ddc1a0c..145a6b5712 100644 --- a/webapp/src/modules/translation/locales/en.json +++ b/webapp/src/modules/translation/locales/en.json @@ -692,21 +692,13 @@ "rarity": { "unique": "Unique", "mythic": "Mythic", + "exotic": "Exotic", "legendary": "Legendary", "epic": "Epic", "rare": "Rare", "uncommon": "Uncommon", "common": "Common" }, - "rarity_description": { - "unique": "Grail-like: One-of-a-kind", - "mythic": "For the lucky few: max 10", - "legendary": "Limited supply: max 100", - "epic": "Max supply: 1000", - "rare": "Max supply: 5000", - "uncommon": "Max supply: 10,000", - "common": "Max supply: 100,000" - }, "wearable": { "category": { "body_shape": "Body Shape", diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json index d8c0407441..a7dc02db88 100644 --- a/webapp/src/modules/translation/locales/es.json +++ b/webapp/src/modules/translation/locales/es.json @@ -680,21 +680,13 @@ "rarity": { "unique": "Único", "mythic": "Mítico", + "exotic": "Exótico", "legendary": "Legendario", "epic": "Épico", "rare": "Raro", "uncommon": "Poco común", "common": "Común" }, - "rarity_tooltip": { - "unique": "Único en su tipo: uno solo en existencia", - "mythic": "Para algunos pocos: máximo 10", - "legendary": "Edición limitada: máximo 100", - "epic": "Suministro máximo: 1000", - "rare": "Suministro máximo: 5000", - "uncommon": "Suministro máximo: 10.000", - "common": "Suministro máximo: 100.000" - }, "wearable": { "category": { "body_shape": "Cuerpo", diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json index 68c58fbaf1..493fc00031 100644 --- a/webapp/src/modules/translation/locales/zh.json +++ b/webapp/src/modules/translation/locales/zh.json @@ -683,21 +683,13 @@ "rarity": { "unique": "独特", "mythic": "神话", + "exotic": "异国情调", "legendary": "传奇", "epic": "史诗", "rare": "稀有", "uncommon": "罕见", "common": "常见" }, - "rarity_tooltip": { - "unique": "像圣杯一样：独一无二", - "mythic": "给幸运的人：最多10个", - "legendary": "限量供应：最多100个", - "epic": "最大供应量：1000个", - "rare": "最大供应量：5000个", - "uncommon": "最大供应量：10,000个", - "common": "最大供应量：100,000个" - }, "wearable": { "category": { "body_shape": "身材",