move explorers modal to separate component

Author: maxaleks

src/components/tabs/TasksTab.tsx

@@ -2,16 +2,8 @@ import {
   Flex,
   Link,
   Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalCloseButton,
   useDisclosure,
   Text,
-  Image,
-  Box,
   Alert,
   AlertIcon,
 } from "@chakra-ui/react";
@@ -22,19 +14,18 @@ import DashboardCard from "~/components/dashboard/DashboardCard";
 import DashboardCardValue from "~/components/dashboard/DashboardCardValue";
 import Markdown from "~/components/shared/Markdown";
 import TasksFaq from "~/components/tasks/TasksFaq";
+import ExplorersModal from "~/components/tasks/ExplorersModal";
 import { apos } from "~/lib/htmlEntities";
 
 import { useAppContext } from "~/contexts/app";
 import useActivityQuery from "~/hooks/useActivityQuery";
 import useInstancesQuery from "~/hooks/useInstancesQuery";
-import useIsMobile from "~/hooks/useIsMobile";
 
 export default function TasksTab() {
   const { apiToken } = useAppContext();
   const activityQuery = useActivityQuery();
   const instancesQuery = useInstancesQuery();
   const explorersModal = useDisclosure();
-  const isMobile = useIsMobile();
 
   const isLoading = activityQuery.isPlaceholderData && Boolean(apiToken);
 
@@ -176,65 +167,11 @@ export default function TasksTab() {
         ))}
       </Flex>
       <TasksFaq />
-      <Modal
+      <ExplorersModal
         isOpen={explorersModal.isOpen}
         onClose={explorersModal.onClose}
-        size={isMobile ? "full" : "md"}
-        isCentered
-        autoFocus={false}
-      >
-        <ModalOverlay />
-        <ModalContent width="400px" p={6}>
-          <ModalHeader fontWeight="500" textStyle="h3" mb={4} pr={12}>
-            Choose explorer
-          </ModalHeader>
-          <ModalCloseButton top={6} right={6} />
-          <ModalBody mb={0}>
-            <Flex flexDir="column" gap={6}>
-              <Text>
-                Choose Blockscout explorer that you want to interact with and
-                earn Merits
-              </Text>
-              <Flex flexWrap="wrap" gap={2}>
-                {instancesQuery.data?.items.map((instance) => (
-                  <Link
-                    key={instance.chain_id}
-                    href={instance.domain}
-                    isExternal
-                    _hover={{ textDecoration: "none" }}
-                  >
-                    <Flex
-                      gap={2}
-                      alignItems="center"
-                      p={2}
-                      bgColor="blue.50"
-                      borderRadius="base"
-                    >
-                      <Image
-                        src={instance.details.icon_url}
-                        alt={instance.name}
-                        boxSize={5}
-                        flexShrink={0}
-                        fallback={
-                          <Box
-                            boxSize={5}
-                            borderRadius="full"
-                            bg="gray.200"
-                            flexShrink={0}
-                          />
-                        }
-                      />
-                      <Text fontSize="sm" fontWeight="500">
-                        {instance.name}
-                      </Text>
-                    </Flex>
-                  </Link>
-                ))}
-              </Flex>
-            </Flex>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+        items={instancesQuery.data?.items}
+      />
     </>
   );
 }

src/components/tasks/ExplorersModal.tsx

@@ -0,0 +1,89 @@
+import {
+  Flex,
+  Link,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  Text,
+  Image,
+  Box,
+} from "@chakra-ui/react";
+
+import type { Instance } from "~/types/api/instances";
+
+import useIsMobile from "~/hooks/useIsMobile";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  items: Instance[] | undefined;
+};
+
+export default function ExplorersModal({ isOpen, onClose, items }: Props) {
+  const isMobile = useIsMobile();
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size={isMobile ? "full" : "md"}
+      isCentered
+      autoFocus={false}
+    >
+      <ModalOverlay />
+      <ModalContent width="400px" p={6}>
+        <ModalHeader fontWeight="500" textStyle="h3" mb={4} pr={12}>
+          Choose explorer
+        </ModalHeader>
+        <ModalCloseButton top={6} right={6} />
+        <ModalBody mb={0}>
+          <Flex flexDir="column" gap={6}>
+            <Text>
+              Choose Blockscout explorer that you want to interact with and earn
+              Merits
+            </Text>
+            <Flex flexWrap="wrap" gap={2}>
+              {items?.map((instance) => (
+                <Link
+                  key={instance.chain_id}
+                  href={instance.domain}
+                  isExternal
+                  _hover={{ textDecoration: "none" }}
+                >
+                  <Flex
+                    gap={2}
+                    alignItems="center"
+                    p={2}
+                    bgColor="blue.50"
+                    borderRadius="base"
+                  >
+                    <Image
+                      src={instance.details.icon_url}
+                      alt={instance.name}
+                      boxSize={5}
+                      flexShrink={0}
+                      fallback={
+                        <Box
+                          boxSize={5}
+                          borderRadius="full"
+                          bg="gray.200"
+                          flexShrink={0}
+                        />
+                      }
+                    />
+                    <Text fontSize="sm" fontWeight="500">
+                      {instance.name}
+                    </Text>
+                  </Flex>
+                </Link>
+              ))}
+            </Flex>
+          </Flex>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}