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

* 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"

packages/web/components/Guild/GuildLinks.tsx

@@ -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>
   );

packages/web/components/Guild/GuildTile.tsx

@@ -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">

packages/web/components/Link.tsx

@@ -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}

packages/web/components/LoginButton.tsx

@@ -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>
   );
 };

packages/web/components/Player/PlayerContacts.tsx

@@ -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>
   );

packages/web/components/Player/PlayerTile.tsx

@@ -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>

packages/web/components/Player/Section/PlayerSkills.tsx

@@ -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>

packages/web/components/Setup/SetupMemberships.tsx

@@ -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>
           </>

packages/web/components/Setup/SetupUsername.tsx

@@ -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"

packages/web/components/Welcome/RegisterPlayer.tsx

@@ -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>
-  );
-};

packages/web/components/Welcome/WelcomeHeader.tsx

@@ -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>
-  );
-};

packages/web/components/Welcome/WelcomePlayer.tsx

@@ -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>
-  );
-};

packages/web/pages/register.tsx

@@ -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;

packages/web/pages/welcome.tsx

@@ -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;

packages/web/utils/playerHelpers.ts

@@ -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;