Sero/wc v2

.github/workflows/gcp-deploy-frontend.yaml

@@ -154,6 +154,7 @@ jobs:
             ALCHEMY_MAINNET=${{secrets.ALCHEMY_MAINNET}}
             ALCHEMY_OPTIMISM=${{secrets.ALCHEMY_OPTIMISM}}
             ALCHEMY_POLYGON=${{secrets.ALCHEMY_POLYGON}}
+            WALLET_CONNECT_V2_KEY=${{secrets.WALLET_CONNECT_V2_KEY}}
           push: true
 
   deploy-frontend:
@@ -193,6 +194,7 @@ jobs:
             --set-env-vars NEXT_PUBLIC_ALCHEMY_MAINNET="${{secrets.ALCHEMY_MAINNET}}" \
             --set-env-vars NEXT_PUBLIC_ALCHEMY_OPTIMISM="${{secrets.ALCHEMY_OPTIMISM}}" \
             --set-env-vars NEXT_PUBLIC_ALCHEMY_POLYGON="${{secrets.ALCHEMY_POLYGON}}" \
+            --set-env-vars NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="${{secrets.WALLET_CONNECT_V2_KEY}}" \
 
 
   finish-deployment:

.github/workflows/gcp-deploy-pr.yaml

@@ -487,6 +487,7 @@ jobs:
             ALCHEMY_MAINNET=${{secrets.ALCHEMY_MAINNET}}
             ALCHEMY_OPTIMISM=${{secrets.ALCHEMY_OPTIMISM}}
             ALCHEMY_POLYGON=${{secrets.ALCHEMY_POLYGON}}
+            WALLET_CONNECT_V2_KEY=${{secrets.WALLET_CONNECT_V2_KEY}}
           push: true
 
   deploy-frontend:
@@ -532,6 +533,7 @@ jobs:
             --set-env-vars NEXT_PUBLIC_ALCHEMY_MAINNET="${{secrets.ALCHEMY_MAINNET}}" \
             --set-env-vars NEXT_PUBLIC_ALCHEMY_OPTIMISM="${{secrets.ALCHEMY_OPTIMISM}}" \
             --set-env-vars NEXT_PUBLIC_ALCHEMY_POLYGON="${{secrets.ALCHEMY_POLYGON}}" \
+            --set-env-vars NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="${{secrets.WALLET_CONNECT_V2_KEY}}"
 
 
   seed-db:

packages/utils/src/did/index.ts

@@ -19,15 +19,14 @@ type Claim = {
 
 export async function createToken(
   provider: providers.Web3Provider,
+  userAddress: string,
 ): Promise<string> {
-  const signer = provider.getSigner();
-  const address = await signer.getAddress();
   const iat = +new Date();
 
   const claim = {
     iat,
     exp: iat + tokenDuration,
-    iss: address,
+    iss: userAddress,
     aud: 'the-game',
     tid: uuidv4(),
   };

packages/web/components/ConnectToProgress.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   Collapse,
   Flex,
   Image,
@@ -11,7 +10,9 @@ import {
 } from '@metafam/ds';
 import LogoImage from 'assets/new_logo_svg.svg';
 import { SwitchNetworkButton } from 'components/SwitchNetworkButton';
-import { useUser, useWeb3 } from 'lib/hooks';
+import { ConnectKitButton } from 'connectkit';
+import { useUser } from 'lib/hooks';
+import { useAccount } from 'wagmi';
 
 import { MetaLink } from './Link';
 
@@ -30,12 +31,13 @@ export const ConnectToProgress: React.FC<{
   showSwitchButton = true,
   header = 'Welcome to MetaGame!',
 }) => {
-  const { connect, connecting, connected, chainId } = useWeb3();
+
+  const { isConnected, chainId } = useAccount();
   const [open, { toggle }] = useBoolean();
   const { fetching } = useUser();
 
-  if (connected && !fetching) {
-    if (chainId !== '0x1' && showSwitchButton) {
+  if (isConnected && !fetching) {
+    if (chainId !== 10 && showSwitchButton) {
       return (
         <Stack w="100%" align="center">
           <Stack color="white" spacing={8} w="100%" maxW="30rem">
@@ -65,18 +67,7 @@ export const ConnectToProgress: React.FC<{
           </Stack>
         )}
         <Stack w="100%" spacing={4} pt={2}>
-          <Button
-            w="100%"
-            size="lg"
-            textTransform="uppercase"
-            fontWeight="600"
-            onClick={connect}
-            isLoading={connecting || fetching}
-            colorScheme="pink"
-            fontSize="1.25rem"
-          >
-            {showNote ? 'Connect Wallet' : 'Connect to continue'}
-          </Button>
+          <ConnectKitButton />
         </Stack>
         {showNote && (
           <>

packages/web/components/ConnectedPage.tsx

@@ -1,43 +1,58 @@
-import { Center, Link, MetaButton, Spinner, Stack, Text } from '@metafam/ds';
+import { Center, Link, Spinner, Stack, Text } from '@metafam/ds';
 import { Maybe } from '@metafam/utils';
+import { ConnectKitButton } from 'connectkit';
 import { Player } from 'graphql/autogen/types';
-import { useMounted, useUser, useWeb3 } from 'lib/hooks';
+import { getPlayer } from 'graphql/getPlayer';
+import { useMounted, useUser } from 'lib/hooks';
+import { useEffect, useState } from 'react';
 import { errorHandler } from 'utils/errorHandler';
+import { useAccount } from 'wagmi';
 
 type PlayerPageType = React.FC<{ player: Maybe<Player> }>;
 
 export const ConnectedPage: React.FC<{
   page: PlayerPageType;
   pageLabel?: string;
 }> = ({ page: Page, pageLabel = 'this page' }) => {
-  const { connect, connecting, connected } = useWeb3();
+  const { address, isConnected, isConnecting } = useAccount();
+  const [player, setPlayer] = useState<Maybe<Player>>(null);
   const { user, fetching, error } = useUser();
   const mounted = useMounted();
-
-  if (!mounted || (!connecting && !connected)) {
+
+  useEffect(() => {
+    if (!address) return;
+    function getPeople() {
+      if (address) {
+       return getPlayer(address);
+      }
+      throw new Error('No address');
+    }
+    getPeople().then(setPlayer)
+  }, [address]);
+  if (!mounted || (!isConnecting && !isConnected)) {
     return (
       <Text textAlign="center" mt="25vh">
-        Please <MetaButton onClick={connect}>connect</MetaButton> to access{' '}
+        Please <ConnectKitButton /> to access{' '}
         {pageLabel}.
       </Text>
     );
   }
 
-  if (connecting || fetching) {
+  if (isConnecting || fetching) {
     return (
       <Center h="100vh">
         <Stack align="center">
           <Text fontSize="xl">
-            {connecting ? 'Connecting…' : 'Fetching User…'}
+            {isConnecting ? 'Connecting…' : 'Fetching User…'}
           </Text>
           <Spinner thickness="6px" color="whiteAlpha" size="xl" />
         </Stack>
       </Center>
     );
   }
 
-  if (user) {
-    return <Page player={user} />;
+  if (address && player) {
+    return <Page player={player} />;
   }
 
   if (error) {
@@ -48,7 +63,7 @@ export const ConnectedPage: React.FC<{
           <Text>
             Error Loading User: <q>{error.message}</q>
           </Text>
-          <MetaButton onClick={connect}>Try Again</MetaButton>
+          <ConnectKitButton />
         </Stack>
       </Center>
     );

packages/web/components/Dashboard/QuestChainsPinned.tsx

@@ -1,14 +1,16 @@
 import { Flex, HStack, MetaButton, Spinner, Stack, Text } from '@metafam/ds';
 import { MetaLink } from 'components/Link';
+import { ConnectKitButton } from 'connectkit';
 import { getPlayerPinnedQuestchains } from 'graphql/queries/player';
-import { useMounted, useUser, useWeb3 } from 'lib/hooks';
+import { useMounted, useUser } from 'lib/hooks';
 import React, { useEffect, useState } from 'react';
 import { GoLinkExternal } from 'react-icons/go';
+import { useAccount } from 'wagmi';
 
 export const QuestChainsPinned: React.FC = () => {
   const { user } = useUser();
   const mounted = useMounted();
-  const { connect, connecting, connected } = useWeb3();
+  const { isConnected, isConnecting } = useAccount();
   const [isLoading, setIsLoading] = useState(true);
 
   const [pinnedQuestChains, setPinnedQuestChains] = useState<
@@ -44,11 +46,11 @@ export const QuestChainsPinned: React.FC = () => {
       .trim()
       .replace(/\s+/g, '-');
 
-  if (!mounted || (!connecting && !connected)) {
+  if (!mounted || (!isConnecting && !isConnected)) {
     return (
       <Flex direction="column" align="center" justify="center" h="17rem">
         <Text textAlign="center">
-          <MetaButton onClick={connect}>Connect</MetaButton>
+          <ConnectKitButton />
           <Text>to see your pinned Playbooks</Text>
         </Text>
       </Flex>

packages/web/components/Landing/LandingConnectButton.tsx

@@ -1,79 +1,7 @@
-import {
-  Button,
-  MetaButton,
-  Spinner,
-  Tooltip,
-  useBreakpointValue,
-  useToast,
-} from '@metafam/ds';
-import { useWeb3 } from 'lib/hooks';
-import React from 'react';
 
-export const LandingConnectButton = ({ isIconStyle = false, ...props }) => {
-  const {
-    connect,
-    disconnect,
-    connected,
-    connecting,
-    address,
-  } = useWeb3();
-  const spinnerSize = useBreakpointValue({ base: 'sm', '2xl': 'md' });
-  const toast = useToast();
+import { ConnectKitButton } from "connectkit";
+import React from 'react';
 
-  return (
-    <Tooltip
-      label={
-        connected
-          ? 'Change to Polygon network 👆'
-          : `${connected ? 'Disconnect' : 'Connect'} wallet`
-      }
-      hasArrow
-      placement="bottom"
-    >
-      {!isIconStyle ? (
-        <Button
-          onClick={connected ? disconnect : connect}
-          variant="ghost"
-          aria-label="Connect to Web3 wallet"
-          isDisabled={connecting}
-          size={'xl'}
-        >
-          {connecting && <Spinner size="sm" />}
-          {!connecting && connected ? 'Connected' : 'Connect'}
-        </Button>
-      ) : (
-        <Button
-          onClick={connected ? disconnect : connect}
-          variant="ghost"
-          display="inline-flex"
-          alignItems="center"
-          fontWeight="normal"
-          borderRadius="inherit inherit 0 0"
-          opacity={0.3}
-          px={{ base: 1, xl: 2 }}
-          sx={{
-            '&:hover': {
-              backgroundColor: 'transparent',
-              color: 'var(--chakra-colors-landing300)',
-              opacity: 1,
-              svg: {
-                filter: 'drop-shadow(0 0 10px var(--chakra-colors-landing300))',
-              },
-            },
-          }}
-          {...props}
-        >
-          {connecting ? (
-            <Spinner size={spinnerSize} />
-          ) : (
-            <MetaButton backgroundColor={'#0000000'}>
-              {
-                address ? `${address.slice(0, 4)}...${address.slice(address.length - 4, address.length)}` : "connect"
-              }
-            </MetaButton>
-          )}
-        </Button>
-      )}
-    </Tooltip>
+export const LandingConnectButton = ({ isIconStyle = false, ...props }) => (
+    <ConnectKitButton />
   );
-};

packages/web/components/Landing/LandingHeader.tsx

@@ -35,6 +35,7 @@ import { AnimatedWaves, upDownAnimation } from './animations';
 import { LandingConnectButton } from './LandingConnectButton';
 import { sections } from './landingSection';
 
+
 export const LandingHeader: React.FC = () => {
   const [menuToggle, setMenuToggle] = useState(false);
   const prefersReducedMotion = usePrefersReducedMotion();

packages/web/components/Landing/OnboardingGame/gameTypes.ts

@@ -22,7 +22,6 @@ export interface IGameContext {
   resetGame: () => boolean;
   visitedElements: (increment?: boolean) => string;
   mintChiev: (tokenId: bigint) => Promise<any>;
-  connect: Web3ContextType['connect'];
   disconnect: Web3ContextType['disconnect'];
   txLoading: boolean;
   account: string;

packages/web/components/MegaMenu/MegaMenuFooter.tsx

@@ -7,23 +7,24 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
-  MetaButton,
   Profile,
   Stack,
   Text,
 } from '@metafam/ds';
 import { MetaLink } from 'components/Link';
 import { PlayerAvatar } from 'components/Player/PlayerAvatar';
+import { ConnectKitButton } from 'connectkit';
 import { usePlayerHydrationContext } from 'contexts/PlayerHydrationContext';
 import { useMounted, useUser, useWeb3 } from 'lib/hooks';
 import { usePlayerName } from 'lib/hooks/player/usePlayerName';
 import { usePlayerURL } from 'lib/hooks/player/usePlayerURL';
+import { useAccount } from 'wagmi';
 
 import { XPSeedsBalance } from './XPSeedsBalance';
 
 // Display player XP and Seed
 export const MegaMenuFooter = () => {
-  const { connecting, connected, connect, disconnect } = useWeb3();
+  const { isConnected, isConnecting } = useAccount();
   const { fetching, user } = useUser();
   const name = usePlayerName(user);
   const linkURL = usePlayerURL(user);
@@ -45,7 +46,7 @@ export const MegaMenuFooter = () => {
       px={4}
       backdropFilter="blur(10px)"
     >
-      {connected && !!user && !fetching && !connecting ? (
+      {isConnected && !!user && !fetching && !isConnecting ? (
         <>
           <Menu>
             <MenuButton
@@ -138,7 +139,7 @@ export const MegaMenuFooter = () => {
                   Dashboard
                 </MenuItem>
               </MetaLink>
-              <MenuItem
+              {/* <MenuItem
                 onClick={disconnect}
                 sx={{
                   '&:hover, &:active, &:focus': {
@@ -150,23 +151,15 @@ export const MegaMenuFooter = () => {
               >
                 <LogOut w={4} h={4} mr={4} fill="white" />
                 Disconnect
-              </MenuItem>
+              </MenuItem> */}
             </MenuList>
           </Menu>
           <HStack justify="flex-end">
             <XPSeedsBalance totalXP={user.totalXP} mobile />
           </HStack>
         </>
       ) : (
-        <MetaButton
-          mx={4}
-          my={3.5}
-          px={8}
-          onClick={connect}
-          isLoading={!mounted || connecting || fetching}
-        >
-          Connect Wallet
-        </MetaButton>
+        <ConnectKitButton />
       )}
     </Flex>
   );