Consolidate contact UI with PlayerTile and Player page

packages/design-system/src/index.ts

@@ -4,6 +4,7 @@ export {
   Box,
   FlexProps,
   Button,
+  ButtonProps,
   ButtonGroup,
   CSSReset,
   ChakraProvider,

packages/web/components/LoginButton.tsx

@@ -3,8 +3,7 @@ import { MetaLink } from 'components/Link';
 import { Web3Context } from 'contexts/Web3Context';
 import React, { useCallback, useContext } from 'react';
 
-const formatAddress = (address = '') =>
-  `${address.slice(0, 6)}...${address.slice(-4)}`;
+import { formatAddress } from '../utils/playerHelpers';
 
 export const LoginButton: React.FC = () => {
   const { connectWeb3, disconnect, isConnected, address } = useContext(

packages/web/components/Player/PlayerContacts.tsx

@@ -1,7 +1,9 @@
-import { Button } from '@metafam/ds';
+import { Button, Wrap } from '@metafam/ds';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
-import { FaGithub, FaTwitter } from 'react-icons/fa';
+import { FaEthereum, FaGithub, FaTwitter } from 'react-icons/fa';
+
+import { formatAddress } from '../../utils/playerHelpers';
 
 type Props = {
   player: PlayerFragmentFragment;
@@ -9,7 +11,7 @@ type Props = {
 
 export const PlayerContacts: React.FC<Props> = ({ player }) => {
   return (
-    <>
+    <Wrap>
       {player.Accounts.map((acc) => {
         if (acc.type === 'TWITTER') {
           const link = `https://twitter.com/${acc.identifier}`;
@@ -46,6 +48,18 @@ export const PlayerContacts: React.FC<Props> = ({ player }) => {
         }
         return null;
       })}
-    </>
+      {player.ethereum_address ? (
+        <Button
+          as="a"
+          href={`https://etherscan.com/address/${player.ethereum_address}`}
+          target="_blank"
+          size="xs"
+          colorScheme="blackAlpha"
+          leftIcon={<FaEthereum />}
+        >
+          {formatAddress(player.ethereum_address)}
+        </Button>
+      ) : null}
+    </Wrap>
   );
 };

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

@@ -1,65 +0,0 @@
-import { Button, HStack } from '@metafam/ds';
-import { PlayerFragmentFragment } from 'graphql/autogen/types';
-import React from 'react';
-import { FaGithub, FaTwitter } from 'react-icons/fa';
-
-import { PlayerSection } from './PlayerSection';
-
-// TODO Maybe add more social platform
-type Props = { player: PlayerFragmentFragment; onRemoveClick: () => void };
-export const PlayerContactButtons: React.FC<Props> = ({
-  player,
-  onRemoveClick,
-}) => {
-  return (
-    <PlayerSection title="Contact" onRemoveClick={onRemoveClick}>
-      <HStack>
-        {player.Accounts.map((acc) => {
-          if (acc.type === 'TWITTER') {
-            const link = `https://twitter.com/${acc.identifier}`;
-            return (
-              <Button
-                as="a"
-                href={link}
-                target="_blank"
-                key={link}
-                size="xs"
-                colorScheme="twitter"
-                backgroundColor="platinum"
-                borderRadius="50%"
-                h={12}
-                w={12}
-                ml={0}
-                mr={8}
-              >
-                <FaTwitter size={24} color="#392373" />
-              </Button>
-            );
-          }
-          if (acc.type === 'GITHUB') {
-            const link = `https://github.com/${acc.identifier}`;
-            return (
-              <Button
-                as="a"
-                href={link}
-                target="_blank"
-                key={link}
-                size="xs"
-                colorScheme="blackAlpha"
-                backgroundColor="platinum"
-                borderRadius="50%"
-                h={12}
-                w={12}
-                ml={0}
-                mr={8}
-              >
-                <FaGithub size={24} color="#392373" />
-              </Button>
-            );
-          }
-          return null;
-        })}
-      </HStack>
-    </PlayerSection>
-  );
-};

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

@@ -1,4 +1,4 @@
-import { Avatar, Box, HStack, Image, MetaTag, Text, VStack } from '@metafam/ds';
+import { Avatar, Box, HStack, Image, Text, VStack } from '@metafam/ds';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
 import {
@@ -9,6 +9,7 @@ import {
 
 import { PersonalityTypes } from '../../../graphql/types';
 import { FlexContainer } from '../../Container';
+import { PlayerContacts } from '../PlayerContacts';
 import { PlayerCollab } from './PlayerCollab';
 import { PlayerSection } from './PlayerSection';
 
@@ -33,11 +34,10 @@ export const PlayerHero: React.FC<Props> = ({ player }) => {
           <Text fontSize="xl" fontFamily="heading" mb="1">
             {getPlayerName(player)}
           </Text>
-          {player.playerType?.title ? (
-            <MetaTag size="md">
-              {player.playerType?.title.toUpperCase()}
-            </MetaTag>
-          ) : null}
+
+          <HStack mt="2">
+            <PlayerContacts player={player} />
+          </HStack>
         </Box>
 
         <Box>
@@ -63,27 +63,31 @@ export const PlayerHero: React.FC<Props> = ({ player }) => {
         <Box w="100%">
           <PlayerCollab player={player} />
         </Box>
-        <Box>
-          {player.EnneagramType && (
-            <HStack spacing={4}>
-              <Image
-                w="100%"
-                maxW="4rem"
-                src={PersonalityTypes[player.EnneagramType.name].image}
-                alt={player.EnneagramType.name}
-                style={{ mixBlendMode: 'color-dodge' }}
-              />
-              <FlexContainer align="stretch">
-                <Text color="white" fontWeight="bold">
-                  {player.EnneagramType.name}
-                </Text>
-                <Text color="blueLight">
-                  {player.EnneagramType.description}
-                </Text>
-              </FlexContainer>
-            </HStack>
-          )}
-        </Box>
+        {player.EnneagramType && (
+          <HStack spacing={4}>
+            <Image
+              w="100%"
+              maxW="4rem"
+              src={PersonalityTypes[player.EnneagramType.name].image}
+              alt={player.EnneagramType.name}
+              style={{ mixBlendMode: 'color-dodge' }}
+            />
+            <FlexContainer align="stretch">
+              <Text color="white" fontWeight="bold">
+                {player.EnneagramType.name}
+              </Text>
+              <Text color="blueLight">{player.EnneagramType.description}</Text>
+            </FlexContainer>
+          </HStack>
+        )}
+        {player.playerType?.title ? (
+          <FlexContainer align="stretch">
+            <Text color="white" fontWeight="bold">
+              {player.playerType.title.toUpperCase()}
+            </Text>
+            <Text color="blueLight">{player.playerType.description}</Text>
+          </FlexContainer>
+        ) : null}
       </VStack>
     </PlayerSection>
   );

packages/web/pages/player/[username].tsx

@@ -14,7 +14,6 @@ import React from 'react';
 import { PageContainer } from '../../components/Container';
 import { PlayerAchievements } from '../../components/Player/Section/PlayerAchievements';
 import { PlayerAddSection } from '../../components/Player/Section/PlayerAddSection';
-import { PlayerContactButtons } from '../../components/Player/Section/PlayerContactButtons';
 import { PlayerGallery } from '../../components/Player/Section/PlayerGallery';
 import { PlayerMemberships } from '../../components/Player/Section/PlayerMemberships';
 import { PlayerSkills } from '../../components/Player/Section/PlayerSkills';
@@ -27,7 +26,6 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
   // TODO Fake data should be saved in back-end
   const BOX_TYPE = {
     PLAYER_SKILLS: 'Skills',
-    PLAYER_CONTACT_BUTTONS: 'Contact',
     PLAYER_GALLERY: 'Gallery',
     PLAYER_MEMBERSHIPS: 'Memberships',
     PLAYER_ACHIEVEMENTS: 'Achievements',
@@ -36,7 +34,7 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
   const [canEdit] = React.useState(false);
 
   const [fakeData, setFakeData] = React.useState([
-    [BOX_TYPE.PLAYER_CONTACT_BUTTONS],
+    [],
     [BOX_TYPE.PLAYER_MEMBERSHIPS, BOX_TYPE.PLAYER_SKILLS],
     [BOX_TYPE.PLAYER_GALLERY],
   ]);
@@ -74,13 +72,6 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
             onRemoveClick={() => removeBox(column, name)}
           />
         );
-      case BOX_TYPE.PLAYER_CONTACT_BUTTONS:
-        return (
-          <PlayerContactButtons
-            player={player}
-            onRemoveClick={() => removeBox(column, name)}
-          />
-        );
       case BOX_TYPE.PLAYER_GALLERY:
         return (
           <PlayerGallery

packages/web/utils/playerHelpers.ts

@@ -14,3 +14,6 @@ export const getPlayerName = (player: PlayerFragmentFragment): string =>
 
 export const getPlayerDescription = (player: PlayerFragmentFragment): string =>
   player.box_profile?.description || '';
+
+export const formatAddress = (address = '') =>
+  `${address.slice(0, 6)}...${address.slice(-4)}`;