feat: fixed some ts erros and the getCsrfToken fetch issue

Markkos89 · Markkos89 · commit 380f7b4bb213 · 2023-07-06T05:03:30.000-03:00
diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
@@ -1,27 +1,27 @@
-import { Button, useColorModeValue } from '@chakra-ui/react'
+import { Button, useColorModeValue } from "@chakra-ui/react";
 
 export const ActionButton = ({
   label,
   href,
 }: {
-  label: string
-  href: string
+  label: string;
+  href: string;
 }) => {
   return (
     <Button
-      bg={useColorModeValue('blackAlpha.100', 'whiteAlpha.100')}
+      bg={useColorModeValue("blackAlpha.100", "whiteAlpha.100")}
       border="0.5px solid gray"
-      cursor={'pointer'}
-      as={'a'}
+      cursor={"pointer"}
+      as={"a"}
       p="2"
       href={href}
-      display={'inline-flex'}
-      transition={'background 0.3s ease'}
+      display={"inline-flex"}
+      transition={"background 0.3s ease"}
       _hover={{
-        bg: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
+        bg: useColorModeValue("blackAlpha.200", "whiteAlpha.200"),
       }}
     >
       {label}
     </Button>
-  )
-}
+  );
+};
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
@@ -61,6 +61,8 @@ export default function WithSubnavigation() {
   const { disconnect } = useDisconnect();
   const { chain } = useNetwork();
 
+  console.log({ address, isConnected });
+
   // Functions
   /**
    * Attempts SIWE and establish session
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -5,31 +5,31 @@ import {
   Text,
   Link,
   useColorModeValue,
-} from '@chakra-ui/react'
-import NextLink from 'next/link'
-import { FaTwitter, FaGithub } from 'react-icons/fa'
-import { SocialButton } from '@components/footer/SocialButton'
+} from "@chakra-ui/react";
+import NextLink from "next/link";
+import { FaTwitter, FaGithub } from "react-icons/fa";
+import { SocialButton } from "@/components/footer/SocialButton";
 
 export default function Footer() {
   return (
     <Box
       // bg={useColorModeValue('#00000f', '#1d1e20')}
-      color={useColorModeValue('gray.700', 'gray.200')}
+      color={useColorModeValue("gray.700", "gray.200")}
     >
       <Container
         as={Stack}
-        maxW={'2xl'}
+        maxW={"2xl"}
         py={4}
-        direction={{ base: 'column', md: 'row' }}
+        direction={{ base: "column", md: "row" }}
         spacing={4}
-        justify={{ base: 'center', md: 'space-between' }}
-        align={{ base: 'center', md: 'center' }}
+        justify={{ base: "center", md: "space-between" }}
+        align={{ base: "center", md: "center" }}
       >
-        <Stack direction={'row'} spacing={3}>
+        <Stack direction={"row"} spacing={3}>
           <Link
             as={NextLink}
             href={
-              'https://github.com/Developer-DAO/academy/issues/new?assignees=&labels=needs+triage%2C+bug&template=bug_report.md&title='
+              "https://github.com/Developer-DAO/academy/issues/new?assignees=&labels=needs+triage%2C+bug&template=bug_report.md&title="
             }
             passHref
             isExternal
@@ -38,37 +38,37 @@ export default function Footer() {
             Feedback
           </Link>
           <Link
-            href={'/docs'}
+            href={"/docs"}
             passHref
             as={NextLink}
             textDecoration="underline"
           >
             Contribute
           </Link>
         </Stack>
-        <Stack direction={'row'} spacing={6}>
+        <Stack direction={"row"} spacing={6}>
           <SocialButton
-            label={'Twitter'}
-            href={'https://twitter.com/devdao_academy'}
+            label={"Twitter"}
+            href={"https://twitter.com/devdao_academy"}
           >
             <FaTwitter />
           </SocialButton>
           <SocialButton
-            label={'Github'}
-            href={'https://github.com/developer-dao/academy'}
+            label={"Github"}
+            href={"https://github.com/developer-dao/academy"}
           >
             <FaGithub />
           </SocialButton>
         </Stack>
       </Container>
 
-      <Container maxW={'6xl'} py={4} centerContent>
+      <Container maxW={"6xl"} py={4} centerContent>
         <Text>Developer DAO Foundation © {new Date().getFullYear()}</Text>
         <Text align="center">
-          Website content licensed under{' '}
+          Website content licensed under{" "}
           <Link
             as={NextLink}
-            href={'http://creativecommons.org/licenses/by-nc/4.0/'}
+            href={"http://creativecommons.org/licenses/by-nc/4.0/"}
             passHref
             isExternal
             textDecoration="underline"
@@ -78,10 +78,10 @@ export default function Footer() {
           .
         </Text>
         <Text>
-          Website code is licensed under{' '}
+          Website code is licensed under{" "}
           <Link
             as={NextLink}
-            href={'https://github.com/Developer-DAO/academy/blob/main/LICENSE'}
+            href={"https://github.com/Developer-DAO/academy/blob/main/LICENSE"}
             passHref
             isExternal
             textDecoration="underline"
@@ -93,7 +93,7 @@ export default function Footer() {
         <Text>
           <Link
             as={NextLink}
-            href={'https://www.developerdao.com/privacy-policy'}
+            href={"https://www.developerdao.com/privacy-policy"}
             passHref
             isExternal
             textDecoration="underline"
@@ -103,5 +103,5 @@ export default function Footer() {
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
diff --git a/src/components/footer/SocialButton.tsx b/src/components/footer/SocialButton.tsx
@@ -1,33 +1,33 @@
-import { ReactNode } from 'react'
-import { Button, VisuallyHidden, useColorModeValue } from '@chakra-ui/react'
+import { type ReactNode } from "react";
+import { Button, VisuallyHidden, useColorModeValue } from "@chakra-ui/react";
 
 export const SocialButton = ({
   children,
   label,
   href,
 }: {
-  children: ReactNode
-  label: string
-  href: string
+  children: ReactNode;
+  label: string;
+  href: string;
 }) => {
   return (
     <Button
-      bg={useColorModeValue('blackAlpha.100', 'whiteAlpha.100')}
-      rounded={'full'}
+      bg={useColorModeValue("blackAlpha.100", "whiteAlpha.100")}
+      rounded={"full"}
       border="0.5px solid gray"
-      cursor={'pointer'}
-      as={'a'}
+      cursor={"pointer"}
+      as={"a"}
       p="2"
       href={href}
-      display={'inline-flex'}
-      transition={'background 0.3s ease'}
+      display={"inline-flex"}
+      transition={"background 0.3s ease"}
       target="_blank"
       _hover={{
-        bg: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
+        bg: useColorModeValue("blackAlpha.200", "whiteAlpha.200"),
       }}
     >
       <VisuallyHidden>{label}</VisuallyHidden>
       {children}
     </Button>
-  )
-}
+  );
+};
diff --git a/src/components/mdx/Callout.tsx b/src/components/mdx/Callout.tsx
@@ -1,5 +1,5 @@
 import { Box, HStack, useStyleConfig } from "@chakra-ui/react";
-import React, { type FC } from "react";
+import React from "react";
 
 interface CalloutProps {
   size?: string;
diff --git a/src/components/mdx/ContributorFooter.tsx b/src/components/mdx/ContributorFooter.tsx
@@ -1,10 +1,10 @@
-import { Box, Text, VStack } from '@chakra-ui/react'
-import { Contributor } from '@/components/mdx/Contributor'
+import { Box, Text, VStack } from "@chakra-ui/react";
+import { Contributor } from "@/components/mdx/Contributor";
 
 interface ContributorFooterProps {
-  authors?: string[]
-  reviewers?: string[]
-  contributors?: string[]
+  authors?: string[];
+  reviewers?: string[];
+  contributors?: string[];
 }
 
 export function ContributorFooter({
@@ -23,11 +23,13 @@ export function ContributorFooter({
       {authors && Array.isArray(authors) && authors.length > 0 && (
         <Box>
           <Text fontSize={26} marginTop={8} marginBottom={4}>
-            {authors.length > 1 ? 'Authors' : 'Author'}
+            {authors.length > 1 ? "Authors" : "Author"}
           </Text>
           <VStack spacing={4} alignItems="left">
-            {authors.map((contrib) => {
-              return <Contributor handle={contrib} avatarSize="2xl" />
+            {authors.map((contrib, idx) => {
+              return (
+                <Contributor key={idx} handle={contrib} avatarSize="2xl" />
+              );
             })}
           </VStack>
         </Box>
@@ -36,11 +38,11 @@ export function ContributorFooter({
       {reviewers && Array.isArray(reviewers) && reviewers.length > 0 && (
         <Box>
           <Text fontSize={20} marginTop={8} marginBottom={4}>
-            {reviewers.length > 1 ? 'Reviewers' : 'Reviewer'}
+            {reviewers.length > 1 ? "Reviewers" : "Reviewer"}
           </Text>
           <VStack spacing={4} alignItems="left">
-            {reviewers.map((contrib) => {
-              return <Contributor handle={contrib} avatarSize="lg" />
+            {reviewers.map((contrib, idx) => {
+              return <Contributor key={idx} handle={contrib} avatarSize="lg" />;
             })}
           </VStack>
         </Box>
@@ -52,16 +54,18 @@ export function ContributorFooter({
           <Box>
             <Text fontSize={20} marginTop={8} marginBottom={4}>
               {contributors.length > 1
-                ? 'Additional Contributors'
-                : 'Additional Contributor'}
+                ? "Additional Contributors"
+                : "Additional Contributor"}
             </Text>
             <VStack spacing={4} alignItems="left">
-              {contributors.map((contrib) => {
-                return <Contributor handle={contrib} avatarSize="lg" />
+              {contributors.map((contrib, idx) => {
+                return (
+                  <Contributor key={idx} handle={contrib} avatarSize="lg" />
+                );
               })}
             </VStack>
           </Box>
         )}
     </Box>
-  )
+  );
 }
diff --git a/src/components/mdx/LessonHeader.tsx b/src/components/mdx/LessonHeader.tsx
@@ -1,16 +1,16 @@
-import { Box, Text, Link, HStack } from '@chakra-ui/react'
-import NextLink from 'next/link'
-import { QuestionIcon } from '@chakra-ui/icons'
+import { Box, Text, Link, HStack } from "@chakra-ui/react";
+import NextLink from "next/link";
+import { QuestionIcon } from "@chakra-ui/icons";
 
 interface LessonHeaderProps {
-  title: string
-  discussionUrl?: string
+  title: string;
+  discussionUrl?: string;
 }
 
-const DEFAULT_DISCUSSION_URL = 'https://developerdao.peeranha.io/'
+const DEFAULT_DISCUSSION_URL = "https://developerdao.peeranha.io/";
 
 export function LessonHeader({ title, discussionUrl }: LessonHeaderProps) {
-  let forumLink = discussionUrl || DEFAULT_DISCUSSION_URL
+  const forumLink = discussionUrl || DEFAULT_DISCUSSION_URL;
 
   return (
     <Box>
@@ -31,7 +31,7 @@ export function LessonHeader({ title, discussionUrl }: LessonHeaderProps) {
             <QuestionIcon w={8} h={8} />
           </Box>
           <Box>
-            If you get stuck or have questions please visit our{' '}
+            If you get stuck or have questions please visit our{" "}
             <Link
               as={NextLink}
               href={forumLink}
@@ -46,5 +46,5 @@ export function LessonHeader({ title, discussionUrl }: LessonHeaderProps) {
         </HStack>
       )}
     </Box>
-  )
+  );
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -65,8 +65,8 @@ const MyApp: AppType<{ session: Session | null }> = ({
 }) => {
   return (
     <ChakraProvider theme={theme}>
-      <WagmiConfig config={config}>
-        <SessionProvider session={session} refetchInterval={0}>
+      <SessionProvider session={session} refetchInterval={0}>
+        <WagmiConfig config={config}>
           <RainbowKitSiweNextAuthProvider
             getSiweMessageOptions={getSiweMessageOptions}
           >
@@ -83,8 +83,8 @@ const MyApp: AppType<{ session: Session | null }> = ({
               </Box>
             </RainbowKitProvider>
           </RainbowKitSiweNextAuthProvider>
-        </SessionProvider>
-      </WagmiConfig>
+        </WagmiConfig>
+      </SessionProvider>
     </ChakraProvider>
   );
 };
diff --git a/src/pages/lessons/index.tsx b/src/pages/lessons/index.tsx
@@ -25,7 +25,8 @@ const Lessons: React.FC<LessonProps> = ({ lessons }: { lessons: Lesson[] }) => {
       // initial an array of lessons for a given track
       acc[curr.path] = [];
     }
-    acc[curr.path].push(curr);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    acc[curr.path]!.push(curr);
     return acc;
   }, {});
 
@@ -61,7 +62,7 @@ const Lessons: React.FC<LessonProps> = ({ lessons }: { lessons: Lesson[] }) => {
 
 export default Lessons;
 
-export const getStaticProps = async () => {
+export const getStaticProps = () => {
   const contentDir = path.join(CONTENT_PATH);
   const directories = fs.readdirSync(path.join(contentDir));
   const lessons: Lesson[] = [];
diff --git a/src/server/auth.ts b/src/server/auth.ts
@@ -160,7 +160,9 @@ export const authOptions: (ctxReq: CtxOrReq) => NextAuthOptions = ({
               (credentials?.message as string) ?? "{}"
             ) as Partial<SiweMessage>
           );
-          const nonce = await getCsrfToken({ req });
+
+          const nonce = await getCsrfToken({ req: { headers: req?.headers } });
+          // const nonce = await getCsrfToken({ req });
 
           const verified = await siwe.verify({
             signature: credentials?.signature || "",
