github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-02-08 13:05:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

Remove unused pages / components and fix usage of Wrap with WrapItem (#284)

Browse Source 
* Remove unused pages / components

* Add WrapItem around components inside Wrap component

New version of Chakra requires WrapItem around any components that have Wrap

* Update LoginButton to link to own profile and show Avatar (#285)

* Update LoginButton to link to own profile and show Avatar

* Change SetupUsername to explicitly mention "username"
This commit is contained in:
Hammad Jutt
2021-01-18 11:44:52 -07:00
committed by GitHub
parent 7298a3c5ed
commit 7492ae5bd6
16 changed files with 194 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/design-system/src/index.ts
View File

@@ -31,6 +31,7 @@ export {
Stack,
Text,
Wrap,
WrapItem,
HStack,
VStack,
useTheme,

48
packages/web/components/Guild/GuildLinks.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Wrap } from '@metafam/ds';
import { Button, Wrap, WrapItem } from '@metafam/ds';
import { GuildFragmentFragment } from 'graphql/autogen/types';
import React from 'react';
import { FaDiscord, FaGlobe } from 'react-icons/fa';
@@ -11,29 +11,33 @@ export const GuildLinks: React.FC<Props> = ({ guild }) => {
return (
<Wrap>
{guild.website_url ? (
<Button
as="a"
href={guild.website_url}
target="_blank"
size="xs"
colorScheme="blackAlpha"
leftIcon={<FaGlobe />}
>
Website
</Button>
<WrapItem>
<Button
as="a"
href={guild.website_url}
target="_blank"
size="xs"
colorScheme="blackAlpha"
leftIcon={<FaGlobe />}
>
Website
</Button>
</WrapItem>
) : null}
{guild.discord_invite_url ? (
<Button
as="a"
href={guild.discord_invite_url}
target="_blank"
size="xs"
bgColor="discord"
_hover={{ bgColor: 'discordDark' }}
leftIcon={<FaDiscord />}
>
Discord
</Button>
<WrapItem>
<Button
as="a"
href={guild.discord_invite_url}
target="_blank"
size="xs"
bgColor="discord"
_hover={{ bgColor: 'discordDark' }}
leftIcon={<FaDiscord />}
>
Discord
</Button>
</WrapItem>
) : null}
</Wrap>
);

10
packages/web/components/Guild/GuildTile.tsx
View File

@@ -1,5 +1,6 @@
import {
Avatar,
Box,
Flex,
Heading,
HStack,
@@ -7,7 +8,6 @@ import {
MetaTag,
Text,
VStack,
Wrap,
} from '@metafam/ds';
import { GuildLinks } from 'components/Guild/GuildLinks';
import { GuildFragmentFragment } from 'graphql/autogen/types';
@@ -42,9 +42,11 @@ export const GuildTile: React.FC<Props> = ({ guild }) => (
{guild.name}
</Heading>
</VStack>
<Wrap w="100%" justify="center">
{guild.type ? <MetaTag size="md">{guild.type} GUILD</MetaTag> : null}
</Wrap>
{guild.type ? (
<Box align="center">
<MetaTag size="md">{guild.type} GUILD</MetaTag>
</Box>
) : null}
{guild.description ? (
<VStack spacing={2} align="stretch">
<Text fontFamily="mono" fontSize="sm" color="blueLight">

4
packages/web/components/Link.tsx
View File

@@ -10,9 +10,8 @@ export const MetaLink: React.FC<Props> = ({
href,
as,
passHref,
prefetch,
replace,
scroll,
scroll = true,
shallow,
isExternal,
...props
@@ -30,7 +29,6 @@ export const MetaLink: React.FC<Props> = ({
href={href}
as={as}
passHref={passHref || true}
prefetch={prefetch}
replace={replace}
scroll={scroll}
shallow={shallow}

69
packages/web/components/LoginButton.tsx
View File

@@ -1,44 +1,69 @@
import { Box, Button, HStack, MetaButton, Text } from '@metafam/ds';
import {
Avatar,
Box,
Button,
HStack,
MetaButton,
Spinner,
Text,
} from '@metafam/ds';
import { MetaLink } from 'components/Link';
import { Web3Context } from 'contexts/Web3Context';
import React, { useCallback, useContext } from 'react';
import { formatAddress } from '../utils/playerHelpers';
import { useUser } from '../lib/hooks';
import { getPlayerImage, getPlayerName } from '../utils/playerHelpers';
export const LoginButton: React.FC = () => {
const { connectWeb3, disconnect, isConnected, address } = useContext(
Web3Context,
);
const { connectWeb3, disconnect, isConnected } = useContext(Web3Context);
const { user, fetching } = useUser();
const handleLoginClick = useCallback(async () => {
await connectWeb3();
}, [connectWeb3]);
if (isConnected) {
if (fetching) {
return <Spinner color="purple.500" size="sm" />;
}
if (!user?.player) return null;
return (
<Box>
<Text fontFamily="body" color="whiteAlpha.700">
{formatAddress(address)}
</Text>
<HStack spacing={2}>
<MetaLink href="/profile/setup">Setup profile</MetaLink>
<Text color="cyan.400">|</Text>
<Button
onClick={disconnect}
<HStack>
<Avatar
src={getPlayerImage(user.player)}
name={getPlayerName(user.player)}
as={MetaLink}
href={`/player/${user.username}`}
/>
<Box>
<MetaLink
href={`/player/${user.username}`}
fontFamily="body"
color="cyan.400"
variant="link"
fontWeight="normal"
color="whiteAlpha.700"
>
Disconnect
</Button>
</HStack>
</Box>
{user.player ? getPlayerName(user.player) : 'Unknown'}
</MetaLink>
<HStack spacing={2}>
<MetaLink href="/profile/setup">Setup profile</MetaLink>
<Text color="cyan.400">|</Text>
<Button
onClick={disconnect}
fontFamily="body"
color="cyan.400"
variant="link"
fontWeight="normal"
>
Disconnect
</Button>
</HStack>
</Box>
</HStack>
);
}
return (
<MetaButton size="md" px={8} onClick={handleLoginClick}>
Connect wallet
Connect
</MetaButton>
);
};

78
packages/web/components/Player/PlayerContacts.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Wrap } from '@metafam/ds';
import { Button, Wrap, WrapItem } from '@metafam/ds';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import React from 'react';
import { FaEthereum, FaGithub, FaTwitter } from 'react-icons/fa';
@@ -16,52 +16,56 @@ export const PlayerContacts: React.FC<Props> = ({ player }) => {
if (acc.type === 'TWITTER') {
const link = `https://twitter.com/${acc.identifier}`;
return (
<Button
as="a"
href={link}
target="_blank"
rel="noreferrer noopener"
key={link}
size="xs"
colorScheme="twitter"
leftIcon={<FaTwitter />}
>
{acc.identifier}
</Button>
<WrapItem key={link}>
<Button
as="a"
href={link}
target="_blank"
rel="noreferrer noopener"
size="xs"
colorScheme="twitter"
leftIcon={<FaTwitter />}
>
{acc.identifier}
</Button>
</WrapItem>
);
}
if (acc.type === 'GITHUB') {
const link = `https://github.com/${acc.identifier}`;
return (
<Button
as="a"
href={link}
target="_blank"
rel="noreferrer noopener"
key={link}
size="xs"
colorScheme="blackAlpha"
backgroundColor="black"
leftIcon={<FaGithub />}
>
{acc.identifier}
</Button>
<WrapItem key={link}>
<Button
as="a"
href={link}
target="_blank"
rel="noreferrer noopener"
size="xs"
colorScheme="blackAlpha"
backgroundColor="black"
leftIcon={<FaGithub />}
>
{acc.identifier}
</Button>
</WrapItem>
);
}
return null;
})}
{player.ethereum_address ? (
<Button
as="a"
href={`https://etherscan.com/address/${player.ethereum_address}`}
target="_blank"
rel="noreferrer noopener"
size="xs"
colorScheme="blackAlpha"
leftIcon={<FaEthereum />}
>
{formatAddress(player.ethereum_address)}
</Button>
<WrapItem>
<Button
as="a"
href={`https://etherscan.com/address/${player.ethereum_address}`}
target="_blank"
rel="noreferrer noopener"
size="xs"
colorScheme="blackAlpha"
leftIcon={<FaEthereum />}
>
{formatAddress(player.ethereum_address)}
</Button>
</WrapItem>
) : null}
</Wrap>
);

68
packages/web/components/Player/PlayerTile.tsx
View File

@@ -8,6 +8,7 @@ import {
Text,
VStack,
Wrap,
WrapItem,
} from '@metafam/ds';
import { MetaLink } from 'components/Link';
import { PlayerContacts } from 'components/Player/PlayerContacts';
@@ -71,18 +72,26 @@ export const PlayerTile: React.FC<Props> = ({ player }) => (
</MetaLink>
<Wrap w="100%" justify="center">
{player.playerType?.title ? (
<MetaTag size="md">{player.playerType?.title.toUpperCase()}</MetaTag>
<WrapItem>
<MetaTag size="md">
{player.playerType?.title.toUpperCase()}
</MetaTag>
</WrapItem>
) : null}
{player.rank && (
<MetaTag
backgroundColor={player.rank?.toLowerCase()}
size="md"
color="blackAlpha.600"
>
{player.rank}
</MetaTag>
<WrapItem>
<MetaTag
backgroundColor={player.rank?.toLowerCase()}
size="md"
color="blackAlpha.600"
>
{player.rank}
</MetaTag>
</WrapItem>
)}
<MetaTag size="md">XP: {Math.floor(player.total_xp)}</MetaTag>
<WrapItem>
<MetaTag size="md">XP: {Math.floor(player.total_xp)}</MetaTag>
</WrapItem>
</Wrap>
{player.box_profile?.description ? (
<VStack spacing={2} align="stretch">
@@ -101,19 +110,22 @@ export const PlayerTile: React.FC<Props> = ({ player }) => (
</Text>
<Wrap>
{player.Player_Skills.slice(0, SHOW_SKILLS).map(({ Skill }) => (
<MetaTag
key={Skill.id}
size="md"
fontWeight="normal"
backgroundColor={SkillColors[Skill.category]}
>
{Skill.name}
</MetaTag>
<WrapItem key={Skill.id}>
<MetaTag
size="md"
fontWeight="normal"
backgroundColor={SkillColors[Skill.category]}
>
{Skill.name}
</MetaTag>
</WrapItem>
))}
{player.Player_Skills.length > SHOW_SKILLS && (
<MetaTag size="md" fontWeight="normal">
{`+${player.Player_Skills.length - SHOW_SKILLS}`}
</MetaTag>
<WrapItem>
<MetaTag size="md" fontWeight="normal">
{`+${player.Player_Skills.length - SHOW_SKILLS}`}
</MetaTag>
</WrapItem>
)}
</Wrap>
</VStack>
@@ -128,14 +140,18 @@ export const PlayerTile: React.FC<Props> = ({ player }) => (
{player.daohausMemberships
.slice(0, SHOW_MEMBERSHIPS)
.map((member) => (
<MetaTag key={member.id} size="md" fontWeight="normal">
{member.moloch.title}
</MetaTag>
<WrapItem key={member.id}>
<MetaTag size="md" fontWeight="normal">
{member.moloch.title}
</MetaTag>
</WrapItem>
))}
{player.daohausMemberships.length > SHOW_MEMBERSHIPS && (
<MetaTag size="md" fontWeight="normal">
{`+${player.daohausMemberships.length - SHOW_MEMBERSHIPS}`}
</MetaTag>
<WrapItem>
<MetaTag size="md" fontWeight="normal">
{`+${player.daohausMemberships.length - SHOW_MEMBERSHIPS}`}
</MetaTag>
</WrapItem>
)}
</Wrap>
</VStack>

23
packages/web/components/Player/Section/PlayerSkills.tsx
View File

@@ -1,4 +1,4 @@
import { MetaTag, Wrap } from '@metafam/ds';
import { MetaTag, Wrap, WrapItem } from '@metafam/ds';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import { SkillColors } from 'graphql/types';
import React from 'react';
@@ -14,18 +14,15 @@ export const PlayerSkills: React.FC<Props> = ({ player, onRemoveClick }) => {
<ProfileSection title="Skills" onRemoveClick={onRemoveClick}>
<Wrap>
{(player.Player_Skills || []).map(({ Skill }) => (
<MetaTag
key={Skill.id}
size="md"
fontWeight="normal"
backgroundColor={SkillColors[Skill.category]}
pt={2}
pb={2}
pl={4}
pr={4}
>
{Skill.name}
</MetaTag>
<WrapItem key={Skill.id}>
<MetaTag
size="md"
fontWeight="normal"
backgroundColor={SkillColors[Skill.category]}
>
{Skill.name}
</MetaTag>
</WrapItem>
))}
</Wrap>
</ProfileSection>

17
packages/web/components/Setup/SetupMemberships.tsx
View File

@@ -1,4 +1,11 @@
import { MetaButton, MetaHeading, MetaTag, Text, Wrap } from '@metafam/ds';
import {
MetaButton,
MetaHeading,
MetaTag,
Text,
Wrap,
WrapItem,
} from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { useSetupFlow } from 'contexts/SetupContext';
import { getMemberships } from 'graphql/getMemberships';
@@ -44,9 +51,11 @@ export const SetupMemberships: React.FC = () => {
</Text>
<Wrap justify="center" mb={10} spacing={4} maxW="50rem">
{memberships.map((member) => (
<MetaTag key={member.id} size="lg" fontWeight="normal">
{member.moloch.title}
</MetaTag>
<WrapItem key={member.id}>
<MetaTag size="lg" fontWeight="normal">
{member.moloch.title}
</MetaTag>
</WrapItem>
))}
</Wrap>
</>

2
packages/web/components/Setup/SetupUsername.tsx
View File

@@ -52,7 +52,7 @@ export const SetupUsername: React.FC = () => {
return (
<FlexContainer>
<MetaHeading mb={10} textAlign="center">
What do we call you?
What username would you like?
</MetaHeading>
<Input
background="dark"

40
packages/web/components/Welcome/RegisterPlayer.tsx
View File

@@ -1,40 +0,0 @@
import { Button, ButtonGroup, MetaHeading } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { useRouter } from 'next/router';
import React from 'react';
import { useWeb3 } from '../../lib/hooks';
export const RegisterPlayer: React.FC = () => {
return (
<FlexContainer flex={1}>
<MetaHeading m={5}>Register your Player account</MetaHeading>
<ButtonGroup spacing={5} mt={20}>
<RegisterButton>Connect Wallet</RegisterButton>
</ButtonGroup>
</FlexContainer>
);
};
type ButtonProps = React.ComponentProps<typeof Button>;
const RegisterButton: React.FC<ButtonProps> = ({ children, ...props }) => {
const { connectWeb3 } = useWeb3();
const router = useRouter();
const login = async () => {
await connectWeb3();
router.push('/profile/success');
};
return (
<Button
onClick={login}
variant="outline"
size="lg"
p={8}
alignItems="center"
{...props}
>
{children}
</Button>
);
};

20
packages/web/components/Welcome/WelcomeHeader.tsx
View File

@@ -1,20 +0,0 @@
import { Flex, Image, SimpleGrid, Text } from '@metafam/ds';
import MetaGameImage from 'assets/metagame.png';
import { MetaLink } from 'components/Link';
import React from 'react';
export const WelcomeHeader: React.FC = () => {
return (
<SimpleGrid columns={3} alignItems="center" width="100%" fontFamily="mono">
<MetaLink href="">How to play MetaGame</MetaLink>
<Flex justify="center" align="center">
<Image src={MetaGameImage} alt="MetaGame" mt={-2} w="9rem" />
</Flex>
<Flex align="center" justify="flex-end">
<Text color="offwhite">
Already a Player? <MetaLink href="">Sign in</MetaLink>
</Text>
</Flex>
</SimpleGrid>
);
};

23
packages/web/components/Welcome/WelcomePlayer.tsx
View File

@@ -1,23 +0,0 @@
import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
import PlayersImage from 'assets/players.png';
import { FlexContainer } from 'components/Container';
import { MetaLink } from 'components/Link';
import React from 'react';
export const WelcomePlayer: React.FC = () => {
return (
<FlexContainer flex={1} maxWidth="45rem">
<Image src={PlayersImage} alt="Player" w="12.5rem" />
<MetaHeading m={5}>Become a Player</MetaHeading>
<Text fontSize="lg" textAlign="center">
MetaGame is an idea we can build a new world, a layer atop of the old
one. A more collaborative, transparent & caring world. A world in which
self-interest is better aligned with the common good & the ones creating
value are more directly rewarded.
</Text>
<MetaLink href="/register" _hover={{ textDecoration: 'none' }}>
<MetaButton mt={10}>Register</MetaButton>
</MetaLink>
</FlexContainer>
);
};

24
packages/web/pages/register.tsx
View File

@@ -1,24 +0,0 @@
import BackgroundImage from 'assets/login-background.jpg';
import { PageContainer } from 'components/Container';
import { RegisterPlayer } from 'components/Welcome/RegisterPlayer';
import { WelcomeHeader } from 'components/Welcome/WelcomeHeader';
import React from 'react';
export const getStaticProps = async () => {
return {
props: {
hideAppDrawer: true,
},
};
};
const Register: React.FC = () => {
return (
<PageContainer backgroundImage={`url(${BackgroundImage})`}>
<WelcomeHeader />
<RegisterPlayer />
</PageContainer>
);
};
export default Register;

24
packages/web/pages/welcome.tsx
View File

@@ -1,24 +0,0 @@
import BackgroundImage from 'assets/login-background.jpg';
import { PageContainer } from 'components/Container';
import { WelcomeHeader } from 'components/Welcome/WelcomeHeader';
import { WelcomePlayer } from 'components/Welcome/WelcomePlayer';
import React from 'react';
export const getStaticProps = async () => {
return {
props: {
hideAppDrawer: true,
},
};
};
const Welcome: React.FC = () => {
return (
<PageContainer backgroundImage={`url(${BackgroundImage})`}>
<WelcomeHeader />
<WelcomePlayer />
</PageContainer>
);
};
export default Welcome;

8
packages/web/utils/playerHelpers.ts
View File

@@ -1,4 +1,5 @@
import BackgroundImage from 'assets/tile-background.jpg';
import { ethers } from 'ethers';
import { PlayerFragmentFragment } from '../graphql/autogen/types';
@@ -10,10 +11,13 @@ export const getPlayerCoverImage = (player: PlayerFragmentFragment): string =>
player.box_profile?.coverImageUrl || BackgroundImage;
export const getPlayerName = (player: PlayerFragmentFragment): string =>
player.box_profile?.name || player.username;
player.box_profile?.name || formatUsernameIfAddress(player.username);
export const getPlayerDescription = (player: PlayerFragmentFragment): string =>
player.box_profile?.description || '';
export const formatAddress = (address = '') =>
export const formatAddress = (address = ''): string =>
`${address.slice(0, 6)}...${address.slice(-4)}`;
export const formatUsernameIfAddress = (username = ''): string =>
ethers.utils.isAddress(username) ? formatAddress(username) : username;