mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
minor style improvements, code refactor, remove PerksGrid file
This commit is contained in:
Konrad Gnat
committed by
Alec LaLonde
Alec LaLonde
parent
97abe2d7e3
commit
5e9c0ecdf5
Binary file not shown.
|
Before Width: | Height: | Size: 425 B |
33
packages/web/components/Patron/Join/PerksCard.tsx
Normal file
33
packages/web/components/Patron/Join/PerksCard.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { Box, Flex } from '@metafam/ds';
|
||||
import { LeagueCardItem } from 'components/Patron/Join/LeagueCardItem';
|
||||
import { PerksHeader } from 'components/Patron/Join/PerksHeader';
|
||||
|
||||
export const PerksCard: React.FC<any> = ({
|
||||
title,
|
||||
list,
|
||||
count,
|
||||
pSeeds,
|
||||
amountUsd,
|
||||
}) => (
|
||||
<Flex
|
||||
direction="column"
|
||||
className={'mg-patron-join-card-bg'}
|
||||
borderRadius={8}
|
||||
maxW="lg"
|
||||
m={4}
|
||||
>
|
||||
<PerksHeader
|
||||
title={title}
|
||||
count={count}
|
||||
pSeeds={pSeeds}
|
||||
amountUsd={amountUsd}
|
||||
/>
|
||||
<Box p={4} width="100%" color="white">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{list.map((text: string, index: number) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
@@ -1,553 +0,0 @@
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Flex,
|
||||
Heading,
|
||||
List,
|
||||
Text,
|
||||
Tooltip,
|
||||
VStack,
|
||||
} from '@metafam/ds';
|
||||
import { Maybe } from '@metafam/utils';
|
||||
import BlueArrow from 'assets/patron/blue-arrow.png';
|
||||
import { PlayerRank_Enum, TokenBalancesFragment } from 'graphql/autogen/types';
|
||||
import {
|
||||
getLeagueCount,
|
||||
getLeagueCutoff,
|
||||
getPatronPSeedHoldings,
|
||||
MIN_PATRON_PSEEDS,
|
||||
NUM_PATRONS,
|
||||
PATRON_RANKS,
|
||||
} from 'utils/patronHelpers';
|
||||
|
||||
import { LeagueCardItem } from './LeagueCardItem';
|
||||
|
||||
const AllPatronsList = [
|
||||
'Membership & a vote in MetaGame',
|
||||
'Access to everything players can access',
|
||||
'A member of The 300 of MetaGame',
|
||||
'Achievement NFT',
|
||||
'Appearance on the leaderboard',
|
||||
'A you.metafam.eth address',
|
||||
'Patrons-only chat',
|
||||
'Automatically whitelisted for any drop',
|
||||
'Monthly Q&A with the Champions',
|
||||
'Guaranteed entry to MetaFest IRL 2023 (Q3 2023)',
|
||||
];
|
||||
const BronzeLeagueList = [
|
||||
'Ranked league achievement NFT',
|
||||
'Octo wearable for the metaverse',
|
||||
'Lifetime membership with all premium features',
|
||||
'Shill package',
|
||||
'Qualify for Elders Ring (advisory circle)',
|
||||
'Early access to limited edition drops',
|
||||
'Genesis MetaManisfesto NFT',
|
||||
];
|
||||
const SilverLeagueList = [
|
||||
'Free pass to any MetaGame event',
|
||||
'Higher weight votes',
|
||||
'Achievement defined & named by you',
|
||||
'Access to the ancient MG Notion archive',
|
||||
'A digitphysical MetaGame shirt',
|
||||
];
|
||||
const GoldLeagueList = [
|
||||
'You as an NPC in MetaGame',
|
||||
'Hall of fame in all MG metaverse embassies',
|
||||
'Access to the ancient MetaGame Roam archive',
|
||||
'Forever renewing the shirt',
|
||||
];
|
||||
const PlatinumLeagueList = [
|
||||
'Private AMA with any Champion or Diamond player',
|
||||
'Priority access to MetaGame investment deals',
|
||||
'NFT achievement named after you',
|
||||
'Part of the lore',
|
||||
];
|
||||
const DiamondLeagueList = [
|
||||
'Talk access at Champions Ring calls',
|
||||
'Genesis Epic MetaManifesto (on sale for 1eth)',
|
||||
'MetaFest 2023 free accommondation',
|
||||
'Diamond league merch',
|
||||
'A part of the last Seed supper photo ',
|
||||
];
|
||||
const No1PatronList = [
|
||||
'Top spot on the patrons leaderboard',
|
||||
'Unique achievement NFT',
|
||||
'You become the patron saint of MetaGame with a holiday in your name',
|
||||
'The original MetaGame sketch along with an NFT, signed by peth & given in-person',
|
||||
];
|
||||
const RightArrowStyle = {
|
||||
content: '""',
|
||||
background: `url(${BlueArrow})`,
|
||||
height: '1.75em',
|
||||
width: '1.625em',
|
||||
display: 'block',
|
||||
float: { base: 'none', md: 'left' },
|
||||
marginTop: { base: '0', md: '0.75em' }, // Lines the arrow up with the heading, em units required to match the padding on the heading
|
||||
mx: { base: 'auto', md: '0.25em' },
|
||||
transform: { base: 'rotate(90deg)', md: 'rotate(0deg)' },
|
||||
};
|
||||
const LeftArrowStyle = {
|
||||
content: '""',
|
||||
background: `url(${BlueArrow})`,
|
||||
height: '1.75em',
|
||||
width: '1.625em',
|
||||
display: 'block',
|
||||
float: { base: 'none', md: 'right' },
|
||||
marginTop: { base: '0', md: '0.5em' }, // Lines the arrow up with the heading, em units required to match the padding on the heading
|
||||
mx: { base: 'auto', md: '-1.25em' },
|
||||
transform: { base: 'rotate(90deg)', md: 'rotate(180deg)' },
|
||||
position: 'relative',
|
||||
left: '0.6em',
|
||||
};
|
||||
|
||||
const PerksList = [
|
||||
{
|
||||
title: 'Bronze League',
|
||||
list: BronzeLeagueList,
|
||||
rank: PlayerRank_Enum.Bronze,
|
||||
},
|
||||
{
|
||||
title: 'Silver League',
|
||||
list: SilverLeagueList,
|
||||
rank: PlayerRank_Enum.Silver,
|
||||
},
|
||||
{
|
||||
title: 'Gold League',
|
||||
list: GoldLeagueList,
|
||||
rank: PlayerRank_Enum.Gold,
|
||||
},
|
||||
{
|
||||
title: 'Platinum League',
|
||||
list: PlatinumLeagueList,
|
||||
rank: PlayerRank_Enum.Platinum,
|
||||
},
|
||||
{
|
||||
title: 'Diamond League',
|
||||
list: DiamondLeagueList,
|
||||
rank: PlayerRank_Enum.Diamond,
|
||||
},
|
||||
];
|
||||
|
||||
type PerksProps = {
|
||||
title: string;
|
||||
count: number | string;
|
||||
pSeeds: number;
|
||||
amountUsd: Maybe<number>;
|
||||
};
|
||||
|
||||
const PerksHeader = ({ title, count, pSeeds, amountUsd }: PerksProps) => {
|
||||
const pSeedLabel = `${pSeeds.toLocaleString(undefined, {
|
||||
maximumFractionDigits: 1,
|
||||
})} pSEED`;
|
||||
const amountLabel = amountUsd
|
||||
? `$${Number(amountUsd).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}`
|
||||
: pSeedLabel;
|
||||
let amountDisplay = (
|
||||
<Text color="white" fontSize="md">
|
||||
{amountLabel}
|
||||
</Text>
|
||||
);
|
||||
if (amountUsd != null) {
|
||||
amountDisplay = <Tooltip label={pSeedLabel}>{amountDisplay}</Tooltip>;
|
||||
}
|
||||
return (
|
||||
<Flex
|
||||
direction="row"
|
||||
justify="space-between"
|
||||
p="4"
|
||||
roundedTop="lg"
|
||||
width="100%"
|
||||
>
|
||||
<Flex align="center">
|
||||
<Text color="white" fontWeight="bold" mr={8}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text color="landing450" fontSize="sm" fontWeight="bold">
|
||||
{typeof count === 'number'
|
||||
? `(total of ${count.toLocaleString()})`
|
||||
: `(${count})`}
|
||||
</Text>
|
||||
</Flex>
|
||||
{amountDisplay}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
type Props = {
|
||||
pSeedPrice: Maybe<number>;
|
||||
pSeedHolders: TokenBalancesFragment[];
|
||||
};
|
||||
|
||||
const PerksCard: React.FC<any> = ({
|
||||
title,
|
||||
list,
|
||||
count,
|
||||
pSeeds,
|
||||
amountUsd,
|
||||
}) => (
|
||||
<Box bg={'purpleTag'} borderRadius={8} maxW="lg" my={6}>
|
||||
<PerksHeader
|
||||
title={title}
|
||||
count={count}
|
||||
pSeeds={pSeeds}
|
||||
amountUsd={amountUsd}
|
||||
/>
|
||||
<Box p={4} width="100%" color="white">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{list.map((text: string, index: number) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const PerksGrid: React.FC<Props> = ({ pSeedPrice, pSeedHolders }) => {
|
||||
const leaguePSeedsByRank: { [rank: string]: number } = {};
|
||||
PATRON_RANKS.forEach((rankEnum) => {
|
||||
leaguePSeedsByRank[rankEnum] = getLeagueCutoff(rankEnum, pSeedHolders);
|
||||
});
|
||||
const topHodlerPSeeds = getPatronPSeedHoldings(pSeedHolders[0]);
|
||||
|
||||
return (
|
||||
<Container w="100%" maxW="6xl" my={12}>
|
||||
<Heading
|
||||
as="h2"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
>
|
||||
Ranked Leagues & Perks
|
||||
</Heading>
|
||||
|
||||
<VStack>
|
||||
<Flex justify="center">
|
||||
<Box p="4" maxW="45rem" className="mg-patron-join-card-bg">
|
||||
<Text>
|
||||
The total number of Patrons in Phase I is limited to 150. The rank
|
||||
requirements are subject to change based on top 150 pSeed hodlors
|
||||
& most perks (besides seasonal) will only be unlocked in the
|
||||
transition to Phase II — set for Q3 2023.
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Text fontSize={'xl'} m={'6'}>
|
||||
👇
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<VStack m={'6'}>
|
||||
{/* count={NUM_PATRONS}
|
||||
pSeeds={MIN_PATRON_PSEEDS}
|
||||
amountUsd={pSeedPrice ? MIN_PATRON_PSEEDS * pSeedPrice : null} */}
|
||||
|
||||
<PerksCard
|
||||
title={'All Patrons'}
|
||||
list={AllPatronsList}
|
||||
count={NUM_PATRONS}
|
||||
pSeeds={MIN_PATRON_PSEEDS}
|
||||
amountUsd={pSeedPrice ? MIN_PATRON_PSEEDS * pSeedPrice : null}
|
||||
/>
|
||||
{PerksList.map((perk: any) => (
|
||||
<PerksCard
|
||||
{...perk}
|
||||
count={getLeagueCount(perk.rank)}
|
||||
pSeeds={leaguePSeedsByRank[perk.rank]}
|
||||
amountUsd={
|
||||
pSeedPrice ? leaguePSeedsByRank[perk.rank] * pSeedPrice : null
|
||||
}
|
||||
/>
|
||||
))}
|
||||
<Box bg={'purpleTag'} borderRadius={8} maxW="lg" my={6} p={4}>
|
||||
<Text fontWeight="bold" fontSize="lg" textAlign="center">
|
||||
...aaand for the one & only 👇
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box bg={'purpleTag'} borderRadius={8} maxW="2xl" my={6}>
|
||||
<PerksHeader
|
||||
title={'No. 1 Patron of MetaGame’s Seed Phase'}
|
||||
count={'unique'}
|
||||
pSeeds={topHodlerPSeeds}
|
||||
amountUsd={pSeedPrice != null ? topHodlerPSeeds * pSeedPrice : null}
|
||||
/>
|
||||
<Box p={4} width="100%" color="white">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{No1PatronList.map((text: string, index: number) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box bg={'purpleTag'} borderRadius={8} maxW="2xl" my={6} p={4}>
|
||||
<Text fontWeight="light" fontSize="lg" textAlign="center">
|
||||
Note: Yes, you get what the previous league gets + your own league
|
||||
perks!
|
||||
</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
|
||||
<Box
|
||||
width={{ base: '100%', md: '50%' }}
|
||||
float={{ base: 'none', md: 'right' }}
|
||||
_before={RightArrowStyle}
|
||||
mt={{ base: 0, md: '4.5em' }}
|
||||
>
|
||||
<VStack
|
||||
spacing={0}
|
||||
borderRadius={8}
|
||||
minH="12rem"
|
||||
bg="whiteAlpha.200"
|
||||
mb={{ base: 0, md: '1em' }} // the arrow on the next Box arrow makes the margin at base breakpoint
|
||||
>
|
||||
<PerksHeader
|
||||
title={'All Patrons'}
|
||||
count={NUM_PATRONS}
|
||||
pSeeds={MIN_PATRON_PSEEDS}
|
||||
amountUsd={pSeedPrice ? MIN_PATRON_PSEEDS * pSeedPrice : null}
|
||||
/>
|
||||
|
||||
<Flex p={8} width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{AllPatronsList.map((text: string, index) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
width={{ base: '100%', md: '50%' }}
|
||||
float={{ base: 'none', md: 'left' }}
|
||||
_before={LeftArrowStyle}
|
||||
>
|
||||
<VStack
|
||||
bg="whiteAlpha.200"
|
||||
spacing={0}
|
||||
borderRadius={8}
|
||||
minH="10rem"
|
||||
mb={{ base: 0, md: '1em' }} // the arrow on the next Box arrow makes the margin at base breakpoint
|
||||
>
|
||||
<PerksHeader
|
||||
title={'Bronze League'}
|
||||
count={getLeagueCount(PlayerRank_Enum.Bronze)}
|
||||
pSeeds={leaguePSeedsByRank[PlayerRank_Enum.Bronze]}
|
||||
amountUsd={
|
||||
pSeedPrice
|
||||
? leaguePSeedsByRank[PlayerRank_Enum.Bronze] * pSeedPrice
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Box p={8} width="100%" color="white">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{BronzeLeagueList.map((text: string, index) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
width={{ base: '100%', md: '50%' }}
|
||||
float={{ base: 'none', md: 'right' }}
|
||||
_before={RightArrowStyle}
|
||||
>
|
||||
<VStack
|
||||
spacing={0}
|
||||
borderRadius={8}
|
||||
minH="8rem"
|
||||
bg="whiteAlpha.200"
|
||||
mb={{ base: 0, md: '1em' }} // the arrow on the next Box arrow makes the margin at base breakpoint
|
||||
>
|
||||
<PerksHeader
|
||||
title={'Silver League'}
|
||||
count={getLeagueCount(PlayerRank_Enum.Silver)}
|
||||
pSeeds={leaguePSeedsByRank[PlayerRank_Enum.Silver]}
|
||||
amountUsd={
|
||||
pSeedPrice
|
||||
? leaguePSeedsByRank[PlayerRank_Enum.Silver] * pSeedPrice
|
||||
: null
|
||||
}
|
||||
/>
|
||||
|
||||
<Box p={8} width="100%" color="white">
|
||||
<List textAlign="left">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{SilverLeagueList.map((text: string, index) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</List>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
width={{ base: '100%', md: '50%' }}
|
||||
float={{ base: 'none', md: 'left' }}
|
||||
_before={LeftArrowStyle}
|
||||
>
|
||||
<VStack
|
||||
spacing={0}
|
||||
borderRadius={8}
|
||||
minH="8rem"
|
||||
bg="whiteAlpha.200"
|
||||
mb={{ base: 0, md: '1em' }} // the arrow on the next Box arrow makes the margin at base breakpoint
|
||||
>
|
||||
<PerksHeader
|
||||
title={'Gold League'}
|
||||
count={getLeagueCount(PlayerRank_Enum.Gold)}
|
||||
pSeeds={leaguePSeedsByRank[PlayerRank_Enum.Gold]}
|
||||
amountUsd={
|
||||
pSeedPrice
|
||||
? leaguePSeedsByRank[PlayerRank_Enum.Gold] * pSeedPrice
|
||||
: null
|
||||
}
|
||||
/>
|
||||
|
||||
<Box p={8} width="100%" color="white">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{GoldLeagueList.map((text: string, index) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
width={{ base: '100%', md: '50%' }}
|
||||
float={{ base: 'none', md: 'right' }}
|
||||
_before={RightArrowStyle}
|
||||
>
|
||||
<VStack
|
||||
spacing={0}
|
||||
borderRadius={8}
|
||||
minH="5rem"
|
||||
bg="whiteAlpha.200"
|
||||
mb={{ base: 0, md: '1em' }} // the arrow on the next Box arrow makes the margin at base breakpoint
|
||||
>
|
||||
<PerksHeader
|
||||
title={'Platinum League'}
|
||||
count={getLeagueCount(PlayerRank_Enum.Platinum)}
|
||||
pSeeds={leaguePSeedsByRank[PlayerRank_Enum.Platinum]}
|
||||
amountUsd={
|
||||
pSeedPrice
|
||||
? leaguePSeedsByRank[PlayerRank_Enum.Platinum] * pSeedPrice
|
||||
: null
|
||||
}
|
||||
/>
|
||||
|
||||
<Box p={8} width="100%" color="white">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{PlatinumLeagueList.map((text: string, index) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
width={{ base: '100%', md: '50%' }}
|
||||
float={{ base: 'none', md: 'left' }}
|
||||
_before={LeftArrowStyle}
|
||||
>
|
||||
<VStack
|
||||
spacing={0}
|
||||
borderRadius={8}
|
||||
minH="6rem"
|
||||
bg="whiteAlpha.200"
|
||||
mb={{ base: 0, md: '1em' }} // the arrow on the next Box arrow makes the margin at base breakpoint
|
||||
>
|
||||
<PerksHeader
|
||||
title={'Diamond League'}
|
||||
count={getLeagueCount(PlayerRank_Enum.Diamond)}
|
||||
pSeeds={leaguePSeedsByRank[PlayerRank_Enum.Diamond]}
|
||||
amountUsd={
|
||||
pSeedPrice
|
||||
? leaguePSeedsByRank[PlayerRank_Enum.Diamond] * pSeedPrice
|
||||
: null
|
||||
}
|
||||
/>
|
||||
|
||||
<Box p={8} width="100%" color="white">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{DiamondLeagueList.map((text: string, index) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
width={{ base: '100%', md: '50%' }}
|
||||
float={{ base: 'none', md: 'right' }}
|
||||
_before={RightArrowStyle}
|
||||
_after={{
|
||||
content: '""',
|
||||
background: `url(${BlueArrow})`,
|
||||
height: '1.75em',
|
||||
width: '1.625em',
|
||||
transform: 'rotate(90deg)',
|
||||
display: 'block',
|
||||
left: { base: 'calc(50% - 0.8125em)', md: '10.625em' },
|
||||
top: 0,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<VStack spacing={0} minH="1rem" align="left" isInline>
|
||||
<Box
|
||||
mx={{ base: 'auto', md: '0' }}
|
||||
bg="whiteAlpha.200"
|
||||
borderRadius={8}
|
||||
>
|
||||
<Text
|
||||
as="p"
|
||||
textAlign="center"
|
||||
fontWeight="700"
|
||||
color="white"
|
||||
borderRadius={8}
|
||||
px={12}
|
||||
py={4}
|
||||
>
|
||||
…aaaand for the one & only 👇
|
||||
</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
minH="5rem"
|
||||
width={{ base: '100%', md: '50%' }}
|
||||
mx={{ base: 0, md: 'auto' }}
|
||||
sx={{ clear: 'both' }}
|
||||
>
|
||||
<VStack spacing={0} borderRadius={8} minH="6rem" bg="whiteAlpha.200">
|
||||
<PerksHeader
|
||||
title={'No. 1 Patron of MetaGame’s Seed Phase'}
|
||||
count={'unique'}
|
||||
pSeeds={topHodlerPSeeds}
|
||||
amountUsd={pSeedPrice != null ? topHodlerPSeeds * pSeedPrice : null}
|
||||
/>
|
||||
|
||||
<Box p={8} width="100%" color="white">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{No1PatronList.map((text: string, index) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default PerksGrid;
|
||||
55
packages/web/components/Patron/Join/PerksHeader.tsx
Normal file
55
packages/web/components/Patron/Join/PerksHeader.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { Flex, Text, Tooltip } from '@metafam/ds';
|
||||
import { Maybe } from '@metafam/utils';
|
||||
|
||||
type PerksProps = {
|
||||
title: string;
|
||||
count: number | string;
|
||||
pSeeds: number;
|
||||
amountUsd: Maybe<number>;
|
||||
};
|
||||
|
||||
export const PerksHeader = ({
|
||||
title,
|
||||
count,
|
||||
pSeeds,
|
||||
amountUsd,
|
||||
}: PerksProps) => {
|
||||
const pSeedLabel = `${pSeeds.toLocaleString(undefined, {
|
||||
maximumFractionDigits: 1,
|
||||
})} pSEED`;
|
||||
const amountLabel = amountUsd
|
||||
? `$${Number(amountUsd).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}`
|
||||
: pSeedLabel;
|
||||
let amountDisplay = (
|
||||
<Text color="white" fontSize="md">
|
||||
{amountLabel}
|
||||
</Text>
|
||||
);
|
||||
if (amountUsd != null) {
|
||||
amountDisplay = <Tooltip label={pSeedLabel}>{amountDisplay}</Tooltip>;
|
||||
}
|
||||
return (
|
||||
<Flex
|
||||
direction="row"
|
||||
justify="space-between"
|
||||
p="4"
|
||||
roundedTop="lg"
|
||||
width="100%"
|
||||
>
|
||||
<Flex align="center">
|
||||
<Text color="white" fontWeight="bold" mr={8}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text color="landing450" fontSize="sm" fontWeight="bold">
|
||||
{typeof count === 'number'
|
||||
? `(total of ${count.toLocaleString()})`
|
||||
: `(${count})`}
|
||||
</Text>
|
||||
</Flex>
|
||||
{amountDisplay}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -1,8 +1,99 @@
|
||||
import { Container } from '@metafam/ds';
|
||||
import { Box, Container, Flex, Heading, Text, VStack } from '@metafam/ds';
|
||||
import { Maybe } from '@metafam/utils';
|
||||
import { TokenBalancesFragment } from 'graphql/autogen/types';
|
||||
import { LeagueCardItem } from 'components/Patron/Join/LeagueCardItem';
|
||||
import { PerksCard } from 'components/Patron/Join/PerksCard';
|
||||
import { PerksHeader } from 'components/Patron/Join/PerksHeader';
|
||||
import { PlayerRank_Enum, TokenBalancesFragment } from 'graphql/autogen/types';
|
||||
import {
|
||||
getLeagueCount,
|
||||
getLeagueCutoff,
|
||||
getPatronPSeedHoldings,
|
||||
MIN_PATRON_PSEEDS,
|
||||
NUM_PATRONS,
|
||||
PATRON_RANKS,
|
||||
} from 'utils/patronHelpers';
|
||||
|
||||
import PerksGrid from './PerksGrid';
|
||||
const AllPatronsList = [
|
||||
'Membership & a vote in MetaGame',
|
||||
'Access to everything players can access',
|
||||
'A member of The 300 of MetaGame',
|
||||
'Achievement NFT',
|
||||
'Appearance on the leaderboard',
|
||||
'A you.metafam.eth address',
|
||||
'Patrons-only chat',
|
||||
'Automatically whitelisted for any drop',
|
||||
'Monthly Q&A with the Champions',
|
||||
'Guaranteed entry to MetaFest IRL 2023 (Q3 2023)',
|
||||
];
|
||||
const BronzeLeagueList = [
|
||||
'Ranked league achievement NFT',
|
||||
'Octo wearable for the metaverse',
|
||||
'Lifetime membership with all premium features',
|
||||
'Shill package',
|
||||
'Qualify for Elders Ring (advisory circle)',
|
||||
'Early access to limited edition drops',
|
||||
'Genesis MetaManisfesto NFT',
|
||||
];
|
||||
const SilverLeagueList = [
|
||||
'Free pass to any MetaGame event',
|
||||
'Higher weight votes',
|
||||
'Achievement defined & named by you',
|
||||
'Access to the ancient MG Notion archive',
|
||||
'A digitphysical MetaGame shirt',
|
||||
];
|
||||
const GoldLeagueList = [
|
||||
'You as an NPC in MetaGame',
|
||||
'Hall of fame in all MG metaverse embassies',
|
||||
'Access to the ancient MetaGame Roam archive',
|
||||
'Forever renewing the shirt',
|
||||
];
|
||||
const PlatinumLeagueList = [
|
||||
'Private AMA with any Champion or Diamond player',
|
||||
'Priority access to MetaGame investment deals',
|
||||
'NFT achievement named after you',
|
||||
'Part of the lore',
|
||||
];
|
||||
const DiamondLeagueList = [
|
||||
'Talk access at Champions Ring calls',
|
||||
'Genesis Epic MetaManifesto (on sale for 1eth)',
|
||||
'MetaFest 2023 free accommondation',
|
||||
'Diamond league merch',
|
||||
'A part of the last Seed supper photo ',
|
||||
];
|
||||
const No1PatronList = [
|
||||
'Top spot on the patrons leaderboard',
|
||||
'Unique achievement NFT',
|
||||
'You become the patron saint of MetaGame with a holiday in your name',
|
||||
'The original MetaGame sketch along with an NFT, signed by peth & given in-person',
|
||||
];
|
||||
|
||||
const PerksList = [
|
||||
{
|
||||
title: 'Bronze League',
|
||||
list: BronzeLeagueList,
|
||||
rank: PlayerRank_Enum.Bronze,
|
||||
},
|
||||
{
|
||||
title: 'Silver League',
|
||||
list: SilverLeagueList,
|
||||
rank: PlayerRank_Enum.Silver,
|
||||
},
|
||||
{
|
||||
title: 'Gold League',
|
||||
list: GoldLeagueList,
|
||||
rank: PlayerRank_Enum.Gold,
|
||||
},
|
||||
{
|
||||
title: 'Platinum League',
|
||||
list: PlatinumLeagueList,
|
||||
rank: PlayerRank_Enum.Platinum,
|
||||
},
|
||||
{
|
||||
title: 'Diamond League',
|
||||
list: DiamondLeagueList,
|
||||
rank: PlayerRank_Enum.Diamond,
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
pSeedPrice: Maybe<number>;
|
||||
@@ -12,8 +103,108 @@ type Props = {
|
||||
export const RankedLeagues: React.FC<Props> = ({
|
||||
pSeedPrice,
|
||||
pSeedHolders,
|
||||
}) => (
|
||||
<Container as="section" className="mg-patron-join-section" my={[8, 8, 8, 12]}>
|
||||
<PerksGrid {...{ pSeedPrice, pSeedHolders }} />
|
||||
</Container>
|
||||
);
|
||||
}) => {
|
||||
const leaguePSeedsByRank: { [rank: string]: number } = {};
|
||||
PATRON_RANKS.forEach((rankEnum) => {
|
||||
leaguePSeedsByRank[rankEnum] = getLeagueCutoff(rankEnum, pSeedHolders);
|
||||
});
|
||||
const topHodlerPSeeds = getPatronPSeedHoldings(pSeedHolders[0]);
|
||||
return (
|
||||
<Container
|
||||
as="section"
|
||||
className="mg-patron-join-section"
|
||||
my={[8, 8, 8, 12]}
|
||||
>
|
||||
<Heading
|
||||
as="h2"
|
||||
color="white"
|
||||
fontFamily="mono"
|
||||
fontWeight={700}
|
||||
mb={[4, 4, 4, 12]}
|
||||
>
|
||||
Ranked Leagues & Perks
|
||||
</Heading>
|
||||
|
||||
<VStack>
|
||||
<Flex justify="center">
|
||||
<Box p="4" maxW="45rem" className="mg-patron-join-card-bg">
|
||||
<Text>
|
||||
The total number of Patrons in Phase I is limited to 150. The rank
|
||||
requirements are subject to change based on top 150 pSeed hodlors
|
||||
& most perks (besides seasonal) will only be unlocked in the
|
||||
transition to Phase II — set for Q3 2023.
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Text fontSize={'xl'} mt={'6'}>
|
||||
👇
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<Flex mb={'6'} direction={'column'} align={'center'}>
|
||||
<PerksCard
|
||||
title={'All Patrons'}
|
||||
list={AllPatronsList}
|
||||
count={NUM_PATRONS}
|
||||
pSeeds={MIN_PATRON_PSEEDS}
|
||||
amountUsd={pSeedPrice ? MIN_PATRON_PSEEDS * pSeedPrice : null}
|
||||
/>
|
||||
{PerksList.map((perk: any) => (
|
||||
<PerksCard
|
||||
{...perk}
|
||||
count={getLeagueCount(perk.rank)}
|
||||
pSeeds={leaguePSeedsByRank[perk.rank]}
|
||||
amountUsd={
|
||||
pSeedPrice ? leaguePSeedsByRank[perk.rank] * pSeedPrice : null
|
||||
}
|
||||
/>
|
||||
))}
|
||||
<Box
|
||||
className={'mg-patron-join-card-bg'}
|
||||
borderRadius={8}
|
||||
maxW="lg"
|
||||
my={6}
|
||||
p={4}
|
||||
>
|
||||
<Text fontWeight="bold" fontSize="lg" textAlign="center">
|
||||
...aaand for the one & only 👇
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
className={'mg-patron-join-card-bg'}
|
||||
borderRadius={8}
|
||||
maxW="2xl"
|
||||
my={6}
|
||||
>
|
||||
<PerksHeader
|
||||
title={'No. 1 Patron of MetaGame’s Seed Phase'}
|
||||
count={'unique'}
|
||||
pSeeds={topHodlerPSeeds}
|
||||
amountUsd={pSeedPrice != null ? topHodlerPSeeds * pSeedPrice : null}
|
||||
/>
|
||||
<Box p={4} width="100%" color="white">
|
||||
<Flex width="100%" flexDirection="row" flexWrap="wrap">
|
||||
{No1PatronList.map((text: string, index: number) => (
|
||||
<LeagueCardItem key={index} text={text} />
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
className={'mg-patron-join-card-bg'}
|
||||
borderRadius={8}
|
||||
maxW="2xl"
|
||||
my={6}
|
||||
p={4}
|
||||
>
|
||||
<Text fontWeight="light" fontSize="lg" textAlign="center">
|
||||
Note: Yes, you get what the previous league gets + your own league
|
||||
perks!
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user