feat: changes to the mint page, test claim

web/components/Navigation/Header.component.tsx

@@ -1,9 +1,12 @@
 import { FC } from "react";
 
-import { Box, Text, Flex, Link } from "@chakra-ui/react";
-import type { headerProps } from "../../@types/types";
+import { Box, Text, Link } from "@chakra-ui/react";
 
-const Header: FC<headerProps> = onHomePage => {
+import { useRouter } from "next/router";
+
+const Header: FC = () => {
+  const router = useRouter()
+
   return (
     <>
       <Box
@@ -37,11 +40,13 @@ const Header: FC<headerProps> = onHomePage => {
         >
           <Link href="https://scam.com">github.</Link>
 
-          {onHomePage ? (
-            <Link href="/mint">early access.</Link>
-          ) : (
-            <Link href="/">home.</Link>
-          )}
+          {
+            router.pathname === "/" ? (
+              <Link href="/mint">early access.</Link>
+            ) : (
+              <Link href="/">home.</Link>
+            )
+          }
         </Box>
       </Box>
     </>

web/components/index.ts

@@ -1,4 +1,3 @@
 export { default as Header } from "./Navigation/Header.component";
 export { default as Hero } from "./Sections/Hero.section";
-export { default as Working } from "./Sections/Working"; 
-export { default as ChangeNetwork } from "./Modals/ChangeNetwork.modal"
+export { default as Working } from "./Sections/Working"; 

web/lib/config.ts

@@ -1,5 +1,5 @@
 export default {
-  supportedChainIds: [80001],
+  supportedChainIds: [1, 3, 4, 5, 137, 80001],
   connectors: {
     injected: {},
   },

web/package.json

@@ -9,14 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@3rdweb/hooks": "^1.9.2",
     "@chakra-ui/react": "^1.8.6",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@fontsource/jost": "^4.5.4",
     "@fontsource/sen": "^4.5.3",
     "@fontsource/syncopate": "^4.5.3",
     "@supabase/supabase-js": "^1.31.1",
+    "@thirdweb-dev/react": "^2.0.1",
+    "@thirdweb-dev/sdk": "^2.0.14",
+    "ethers": "^5.6.1",
     "framer-motion": "^6",
     "next": "12.1.0",
     "next-seo": "^5.1.0",

web/pages/_app.tsx

@@ -1,7 +1,6 @@
 import type { AppProps } from "next/app";
 
 import { ChakraProvider } from "@chakra-ui/react";
-import { ThirdwebWeb3Provider } from "@3rdweb/hooks";
 import "regenerator-runtime/runtime";
 import theme from "../styles/theme";
 
@@ -16,13 +15,17 @@ import "@fontsource/syncopate/700.css";
 import "@fontsource/sen/400.css";
 import "@fontsource/sen/700.css";
 
+import { ThirdwebProvider } from "@thirdweb-dev/react";
+
 import { NextSeo } from "next-seo";
 
 function MyApp({ Component, pageProps }: AppProps) {
+
+   const desiredChainId = 80001;
+
   return (
-    <ThirdwebWeb3Provider
-      connectors={config.connectors}
-      supportedChainIds={config.supportedChainIds}
+    <ThirdwebProvider
+    desiredChainId={desiredChainId}
     >
       <ChakraProvider theme={theme}>
         <NextSeo
@@ -45,7 +48,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         />
         <Component {...pageProps} />
       </ChakraProvider>
-    </ThirdwebWeb3Provider>
+    </ThirdwebProvider>
   );
 }
 

web/pages/index.tsx

@@ -14,7 +14,7 @@ const Home: NextPage = () => {
         bgImage="https://res.cloudinary.com/didkcszrq/image/upload/v1647222804/background_gradient_mwbieb.svg"
         backgroundSize="cover"
       >
-        <Header onHomePage={true} />
+        <Header />
         <Hero />
         <Working />
       </Box>

web/pages/mint/index.tsx

@@ -1,58 +1,31 @@
 import type { NextPage } from "next";
-import { useEffect, useState } from "react";
 
-import { Box, Text, Button, Badge, useDisclosure } from "@chakra-ui/react";
-import type { modes } from "../../@types/types";
+import { Box, Text, Button, Badge } from "@chakra-ui/react";
 
-import { Header, ChangeNetwork } from "../../components";
-import { useWeb3 } from "@3rdweb/hooks";
-import { supabase } from "../../utils/supabaseClient";
+import { Header } from "../../components";
 
-const MintPage: NextPage = () => {
-  const { address, connectWallet, error } = useWeb3();
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const [env, setEnv] = useState<modes>();
-
-  useEffect(() => {
-    process.env.NODE_ENV === "development"
-      ? setEnv("development")
-      : process.env.NODE_ENV === "production"
-      ? setEnv("production")
-      : setEnv("test");
-  }, [env, setEnv]);
+import {
+  useAddress,
+  useMetamask,
+  useNFTDrop,
+} from "@thirdweb-dev/react";
 
-  useEffect(() => {
-    error?.name === "UnsupportedChainIdError" ? onOpen() : onClose();
-  }, [error, onOpen, onClose]);
-
-  const loginWithGithub = async () => {
-    const { user, session, error } = await supabase.auth.signIn(
-      {
-        provider: "github",
-      },
-      {
-        redirectTo:
-          env === "development"
-            ? "https://3000-kranurag-thirdwebsnippet-rf24ngqle54.ws-us38.gitpod.io/mint"
-            : "https://www.thirdsnips.live/mint",
-      }
-    );
-  };
+const MintPage: NextPage = () => {
+  const connectWithMetamask = useMetamask()
+  const address = useAddress()
 
-  const user = supabase.auth.user();
+  const nftDrop = useNFTDrop("0x968fAE78A3FdF1C3DBfb86F00Ab9590b4B145b8e");
 
   return (
     <>
-      <ChangeNetwork isOpen={isOpen} onOpen={onOpen} onClose={onClose} />
       <Box
         h="100vh"
         w="100vw"
         overflowX="hidden"
         bgImage="https://res.cloudinary.com/didkcszrq/image/upload/v1647222804/background_gradient_mwbieb.svg"
         backgroundSize="cover"
       >
-        <Header onHomePage={false} />
+        <Header />
 
         <Box
           display="flex"
@@ -65,7 +38,7 @@ const MintPage: NextPage = () => {
           textColor="gray.700"
           mt="16"
         >
-          <Text>cliam your early access NFT</Text>
+          <Text>claim your early access NFT</Text>
 
           {address ? (
             <Text
@@ -112,33 +85,16 @@ const MintPage: NextPage = () => {
           >
             {address ? (
               <>
-                <Button colorScheme="messenger">claim NFT</Button>
+                <Button colorScheme="messenger" onClick={()=>nftDrop?.claim(0)}>claim NFT</Button>
               </>
             ) : (
               <Button
-                onClick={() => connectWallet("injected")}
+                onClick={() => connectWithMetamask()}
                 colorScheme="messenger"
               >
                 connect wallet
               </Button>
             )}
-
-            {user ? (
-              <Text
-                fontSize="xl"
-                display="flex"
-                flexDir="row"
-                gap="1"
-                alignItems="center"
-              >
-                hello,
-                <Text color="gray.800">{user.user_metadata.full_name}</Text>
-              </Text>
-            ) : (
-              <Button onClick={loginWithGithub} colorScheme="messenger">
-                login with github
-              </Button>
-            )}
           </Box>
         </Box>
       </Box>