fix: resolve ESLint and TypeScript type declaration issues in multiple files

src/AgreementHtml.tsx

@@ -7,7 +7,7 @@ function AgreementHtml({
   loading,
   isModal,
 }: {
-  loading: any;
+  loading: boolean;
   isModal?: boolean;
 }) {
   const agreementHtml = useAppStore((state) => state.agreementHtml);

src/App.tsx

@@ -42,14 +42,19 @@ const App = () => {
 
   useEffect(() => {
     const initializeApp = async () => {
+      try{
       await init();
       const compressedData = searchParams.get("data");
       if (compressedData) {
         await loadFromLink(compressedData);
       }
+    } catch(error){
+      console.error(error);
+    } finally {
       setLoading(false);
-    };
-    initializeApp();
+    }
+      };
+    void initializeApp();
 
     // DarkMode Styles
     const style = document.createElement("style");
@@ -72,10 +77,18 @@ const App = () => {
   }, [init, loadFromLink, searchParams, textColor, backgroundColor]);
 
   useEffect(() => {
+    const startTour = async () => {
+      try {
+        await tour.start();
+      } catch (error) {
+        console.error("Tour failed to start:", error);
+      }
+    };
+
     const showTour = searchParams.get("showTour") === "true";
 
     if (showTour || !localStorage.getItem("hasVisited")) {
-      tour.start();
+      void startTour();
       localStorage.setItem("hasVisited", "true");
     }
   }, [searchParams]);

src/components/FullScreenModal.tsx

@@ -5,7 +5,7 @@ import { FullscreenOutlined } from "@ant-design/icons";
 import useAppStore from "../store/store";
 
 const FullScreenModal: React.FC = () => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState<boolean>(false);
   const textColor = useAppStore((state) => state.textColor);
   const backgroundColor = useAppStore((state) => state.backgroundColor);
 

src/components/Navbar.tsx

@@ -14,7 +14,11 @@ import ToggleDarkMode from "./ToggleDarkMode";
 
 const { useBreakpoint } = Grid;
 
-function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
+interface NavbarProps {
+  scrollToFooter: () => void;
+}
+
+function Navbar({ scrollToFooter }: NavbarProps) {
   const [hovered, setHovered] = useState<
     null | "home" | "explore" | "help" | "github" | "join"
   >(null);
@@ -33,7 +37,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
 
   const helpMenu = (
     <Menu>
-      <Menu.ItemGroup title="Info">
+      <Menu.ItemGroup key="info" title="Info">
         <Menu.Item key="about">
           <a
             href="https://github.com/accordproject/template-playground/blob/main/README.md"

src/components/Sidebar.tsx

@@ -13,9 +13,10 @@ import {
 } from "../styles/components/Sidebar";
 import { BulbOutlined } from "@ant-design/icons";
 
-const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({
-  steps,
-}) => {
+interface SidebarProps {
+  steps: { title: string; link: string }[];
+}
+const Sidebar: React.FC<SidebarProps> = ({ steps }) => {
   return (
     <SidebarContainer>
       <SidebarTitle>Learning Pathway</SidebarTitle>
@@ -24,7 +25,7 @@ const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({
           <SidebarListItem key={index}>
             <SidebarLink
               to={step.link}
-              className={({ isActive }) => (isActive ? "active" : undefined)}
+              className={({ isActive }) => (isActive ? "active" : "")}
             >
               {step.title}
             </SidebarLink>
@@ -38,7 +39,7 @@ const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({
         </HelperIcon>
         <HelperText>
           Welcome to the Learning Pathway! Use the sidebar to follow the guide.
-          Open the{" "}
+          Open the {" "}
           <Link to="/" target="_blank" rel="noopener noreferrer">
             Template Playground
           </Link>{" "}

src/editors/ConcertoEditor.tsx

@@ -1,6 +1,6 @@
 import { useMonaco } from "@monaco-editor/react";
 import { lazy, Suspense, useCallback, useEffect, useMemo } from "react";
-import { editor, MarkerSeverity } from "monaco-editor";
+import * as monaco from "monaco-editor";
 import useAppStore from "../store/store";
 
 const MonacoEditor = lazy(() =>
@@ -40,15 +40,15 @@ const concertoTypes = [
   "Boolean",
 ];
 
-const handleEditorWillMount = (monaco: any) => {
-  monaco.languages.register({
+const handleEditorWillMount = (monacoInstance: typeof monaco) => {
+  monacoInstance.languages.register({
     id: "concerto",
     extensions: [".cto"],
     aliases: ["Concerto", "concerto"],
     mimetypes: ["application/vnd.accordproject.concerto"],
   });
 
-  monaco.languages.setMonarchTokensProvider("concerto", {
+  monacoInstance.languages.setMonarchTokensProvider("concerto", {
     keywords: concertoKeywords,
     typeKeywords: concertoTypes,
     operators: ["=", "{", "}", "@", '"'],
@@ -83,7 +83,7 @@ const handleEditorWillMount = (monaco: any) => {
     },
   });
 
-  monaco.editor.defineTheme("concertoTheme", {
+  monacoInstance.editor.defineTheme("concertoTheme", {
     base: "vs",
     inherit: true,
     rules: [
@@ -98,7 +98,7 @@ const handleEditorWillMount = (monaco: any) => {
     colors: {},
   });
 
-  monaco.editor.setTheme("concertoTheme");
+  monacoInstance.editor.setTheme("concertoTheme");
 };
 
 interface ConcertoEditorProps {
@@ -120,7 +120,7 @@ export default function ConcertoEditor({
     [backgroundColor]
   );
 
-  const options: editor.IStandaloneEditorConstructionOptions = {
+  const options: monaco.editor.IStandaloneEditorConstructionOptions = {
     minimap: { enabled: false },
     wordWrap: "on",
     automaticLayout: true,
@@ -137,7 +137,7 @@ export default function ConcertoEditor({
   useEffect(() => {
     if (!monacoInstance) return;
 
-    const model = monacoInstance.editor.getModels()[0];
+    const model = monacoInstance.editor.getModels()?.[0];
     if (!model) return;
 
     if (ctoErr) {
@@ -152,7 +152,7 @@ export default function ConcertoEditor({
             endLineNumber: lineNumber,
             endColumn: columnNumber + 1,
             message: ctoErr,
-            severity: MarkerSeverity.Error,
+            severity: monaco.MarkerSeverity.Error,
           },
         ]);
       }

src/editors/MarkdownEditor.tsx

@@ -51,8 +51,6 @@ export default function MarkdownEditor({
     scrollBeyondLastLine: false,
   };
 
-  const options = useMemo(() => editorOptions, []);
-
   const handleChange = useCallback(
     (val: string | undefined) => {
       if (onChange) onChange(val);
@@ -64,7 +62,7 @@ export default function MarkdownEditor({
     <div className="editorwrapper">
       <Suspense fallback={<div>Loading Editor...</div>}>
         <MonacoEditor
-          options={options}
+          options={editorOptions}
           language="markdown"
           height="60vh"
           value={value}