moved brightId verified tag to contacts (#388)

* moved brightId verified tag to contacts

* empty commit

packages/design-system/src/index.ts

@@ -30,6 +30,7 @@ export {
   Spinner,
   Stack,
   Text,
+  Tooltip,
   Wrap,
   WrapItem,
   HStack,

packages/design-system/src/theme/colors.ts

@@ -1,4 +1,9 @@
-import { Theme as ChakraTheme, theme as baseTheme } from '@chakra-ui/react';
+import {
+  Theme as ChakraTheme,
+  theme as baseTheme,
+} from '@chakra-ui/react';
+
+type ColorHues = typeof baseTheme.colors.red;
 
 export type MetaColors = ChakraTheme['colors'] & {
   offwhite: string;
@@ -17,12 +22,11 @@ export type MetaColors = ChakraTheme['colors'] & {
   discordDark: string;
   bronze: string;
   purple80: string;
-  brightId: string;
+  brightIdOrange: ColorHues;
 };
 
 export const colors: MetaColors = {
   ...baseTheme.colors,
-  brightId: '#fb8a61',
   diamond: '#40e8ec',
   platinum: '#81b6e3',
   gold: '#d0a757',
@@ -63,4 +67,16 @@ export const colors: MetaColors = {
     800: '#150747',
     900: '#07021d',
   },
+  brightIdOrange: {
+    50: '#ffffff',
+    100: '#ffffff',
+    200: '#ffebdf',
+    300: '#ffc7b1',
+    400: '#fda382',
+    500: '#fb8a61',
+    600: '#f85a20',
+    700: '#ae3204',
+    800: '#4d1300',
+    900: '#1f0400',
+  },
 };

packages/web/components/Player/PlayerContacts.tsx

@@ -1,15 +1,18 @@
-import { Button, Wrap, WrapItem } from '@metafam/ds';
+import { BrightIdIcon, Button, Tooltip, Wrap, WrapItem } from '@metafam/ds';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import { useBrightIdStatus } from 'lib/hooks/brightId';
+import { useCopyToClipboard } from 'lib/hooks/useCopyToClipboard';
 import React from 'react';
 import { FaEthereum, FaGithub, FaTwitter } from 'react-icons/fa';
-
-import { formatAddress } from '../../utils/playerHelpers';
+import { formatAddress } from 'utils/playerHelpers';
 
 type Props = {
   player: PlayerFragmentFragment;
 };
 
 export const PlayerContacts: React.FC<Props> = ({ player }) => {
+  const { verified } = useBrightIdStatus({ player });
+  const [copied, handleCopy] = useCopyToClipboard();
   return (
     <Wrap>
       {player.Accounts.map((acc) => {
@@ -54,17 +57,37 @@ export const PlayerContacts: React.FC<Props> = ({ player }) => {
       })}
       {player.ethereum_address ? (
         <WrapItem>
-          <Button
-            as="a"
-            href={`https://etherscan.com/address/${player.ethereum_address}`}
-            target="_blank"
-            rel="noreferrer noopener"
-            size="xs"
-            colorScheme="blackAlpha"
-            leftIcon={<FaEthereum />}
+          <Tooltip
+            label={copied ? 'Copied!' : 'Copy to clipboard'}
+            closeOnClick={false}
+            hasArrow
           >
-            {formatAddress(player.ethereum_address)}
-          </Button>
+            <Button
+              onClick={() =>
+                player.ethereum_address
+                  ? handleCopy(player.ethereum_address.toLowerCase())
+                  : undefined
+              }
+              size="xs"
+              colorScheme="blackAlpha"
+              leftIcon={<FaEthereum />}
+            >
+              {formatAddress(player.ethereum_address)}
+            </Button>
+          </Tooltip>
+        </WrapItem>
+      ) : null}
+      {verified ? (
+        <WrapItem>
+          <Tooltip label="Verified on BrightID" closeOnClick={false} hasArrow>
+            <Button
+              size="xs"
+              colorScheme="brightIdOrange"
+              leftIcon={<BrightIdIcon />}
+            >
+              Verified
+            </Button>
+          </Tooltip>
         </WrapItem>
       ) : null}
     </Wrap>

packages/web/components/Player/PlayerTile.tsx

@@ -1,7 +1,6 @@
 import {
   Avatar,
   Box,
-  BrightIdIcon,
   Flex,
   Heading,
   HStack,
@@ -15,7 +14,6 @@ import { MetaLink } from 'components/Link';
 import { PlayerContacts } from 'components/Player/PlayerContacts';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import { SkillColors } from 'graphql/types';
-import { useBrightIdStatus } from 'lib/hooks/brightId';
 import React from 'react';
 import {
   getPlayerCoverImage,
@@ -31,7 +29,6 @@ const SHOW_MEMBERSHIPS = 4;
 const SHOW_SKILLS = 4;
 
 export const PlayerTile: React.FC<Props> = ({ player }) => {
-  const { verified } = useBrightIdStatus({ player });
   return (
     <Flex
       direction="column"
@@ -69,14 +66,9 @@ export const PlayerTile: React.FC<Props> = ({ player }) => {
               src={getPlayerImage(player)}
               name={getPlayerName(player)}
             />
-            <Flex>
               <Heading size="xs" color="white">
                 {getPlayerName(player)}
               </Heading>
-              {verified && (
-                <BrightIdIcon w="1rem" h="1rem" ml="1rem" color="brightId" />
-              )}
-            </Flex>
           </VStack>
         </MetaLink>
         <Wrap w="100%" justify="center">

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

@@ -9,7 +9,6 @@ import {
   ModalCloseButton,
   ModalContent,
   ModalOverlay,
-  Spinner,
   Text,
   useDisclosure,
   VStack,
@@ -33,7 +32,9 @@ export const PlayerBrightId: React.FC<Props> = ({ player }) => {
   const [isLoggedInUser, setIsLoggedInUser] = useState(false);
 
   useEffect(() => {
-    setIsLoggedInUser(isConnected && !fetching && user?.id === player.id);
+    if (isConnected && !fetching && user?.id === player.id) {
+      setIsLoggedInUser(true);
+    }
   }, [user, fetching, isConnected, player.id]);
 
   useBrightIdUpdated({ player, poll: !verified && isOpen && isLoggedInUser });
@@ -47,51 +48,18 @@ export const PlayerBrightId: React.FC<Props> = ({ player }) => {
         backgroundColor: 'rgba(7, 2, 29, 0.91)',
       };
 
+  if (verified || !isLoggedInUser) return null;
+
   return (
     <Flex align="center" justify="center">
-      {fetching ? (
-        <Spinner size="sm" color="brightId" />
-      ) : (
-        <>
-          <BrightIdIcon w="1rem" h="1rem" mr="0.5rem" color="brightId" />
-          {verified && (
-            <Text
-              as="span"
-              fontFamily="body"
-              fontSize="xs"
-              color="brightId"
-              fontWeight="600"
-              py={1}
-            >
-              Verified
-            </Text>
-          )}
-          {!verified &&
-            (isLoggedInUser ? (
-              <Button
-                variant="ghost"
-                fontFamily="body"
-                fontSize="xs"
-                size="xs"
-                color="brightId"
-                onClick={onOpen}
-              >
-                Verify
-              </Button>
-            ) : (
-              <Text
-                as="span"
-                fontFamily="body"
-                fontSize="xs"
-                color="brightId"
-                fontWeight="600"
-                py={1}
-              >
-                Unverified
-              </Text>
-            ))}
-        </>
-      )}
+      <Button
+        size="xs"
+        colorScheme="brightIdOrange"
+        leftIcon={<BrightIdIcon />}
+        onClick={onOpen}
+      >
+        Verify on BrightID
+      </Button>
       <Modal
         isOpen={isOpen}
         onClose={onClose}

packages/web/lib/hooks/useCopyToClipboard.ts

@@ -0,0 +1,29 @@
+import copyToClipboard from 'copy-to-clipboard';
+import { useCallback,useEffect, useState } from 'react';
+
+const DEFAULT_DELAY = 3000;
+
+export const useCopyToClipboard = (
+  delay = DEFAULT_DELAY,
+): [boolean, (text: string) => void] => {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return () => undefined;
+
+    const id = setTimeout(() => {
+      setCopied(false);
+    }, delay);
+
+    return () => {
+      clearTimeout(id);
+    };
+  }, [delay, copied]);
+
+  const handleCopy = useCallback((text: string) => {
+    setCopied(true);
+    copyToClipboard(text);
+  }, []);
+
+  return [copied, handleCopy];
+};

packages/web/package.json

@@ -16,6 +16,7 @@
     "@metafam/ds": "0.1.0",
     "@metafam/utils": "1.0.0",
     "@walletconnect/web3-provider": "1.3.1",
+    "copy-to-clipboard": "^3.3.1",
     "ethers": "5.0.17",
     "fake-tag": "2.0.0",
     "framer-motion": "3.1.1",