diff --git a/frontend/src/common-components/TokenRarityDisplay.tsx b/frontend/src/common-components/TokenRarityDisplay.tsx index 3be53e73..35697605 100644 --- a/frontend/src/common-components/TokenRarityDisplay.tsx +++ b/frontend/src/common-components/TokenRarityDisplay.tsx @@ -1,5 +1,38 @@ import { Box, Flex, Text } from '@chakra-ui/react' -import { useConfigContext } from '../api/contexts/config/ConfigContext.tsx' + +const rarities = [ + { + rarity: 'COMMON', + color: '#b7bfc5', + background: '#40464d' + }, + { + rarity: 'UNCOMMON', + color: '#61bf00', + background: '#024f03' + }, + { + rarity: 'RARE', + color: '#00afff', + background: '#00458a' + }, + { + rarity: 'EPIC', + color: '#ce59ff', + background: '#4c197b' + }, + { + rarity: 'LEGENDARY', + color: '#ffe8cf', + background: '#de6e0e' + }, + { + rarity: 'RAINBOW', + color: '#000', + background: + 'linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080)' + } +] type TokenRarityChipProps = { count: number @@ -10,8 +43,7 @@ type TokenRarityChipProps = { } // based on https://fortnite.fandom.com/wiki/Rarity -const TokenRarityChip = ({ count, max, color, background, showMax }: TokenRarityChipProps) => { - const unique = max == 1 +const TokenRarityChip = ({ count, color, background }: TokenRarityChipProps) => { return ( - {unique ? 'LGBTQ' : count} + {count} - {showMax && max && !unique && ( - - /{max} - - )} ) } @@ -42,64 +69,12 @@ interface TokenRarityDisplayProps { } export const TokenRarityDisplay = ({ collected }: TokenRarityDisplayProps) => { - const showMaxCount = useConfigContext().components.leaderboard.showTokenMaxCountByRarity - - // TODO: get count by rarity from config - const maxByRarity: { [key: string]: number } = { - COMMON: 1500, - UNCOMMON: 500, - RARE: 250, - EPIC: 125, - LEGENDARY: 62, - RAINBOW: 1 - } - - const rarities = [ - { - rarity: 'COMMON', - color: '#b7bfc5', - background: '#40464d' - }, - { - rarity: 'UNCOMMON', - color: '#61bf00', - background: '#024f03' - }, - { - rarity: 'RARE', - color: '#00afff', - background: '#00458a' - }, - { - rarity: 'EPIC', - color: '#ce59ff', - background: '#4c197b' - }, - { - rarity: 'LEGENDARY', - color: '#ffe8cf', - background: '#de6e0e' - }, - { - rarity: 'RAINBOW', - color: '#000', - background: 'linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080)' - } - ] - return ( {rarities .filter((rarity) => collected[rarity.rarity] > 0) .map((rarity) => ( - + ))} )