fix: Typescript and ESLint fixes

app/components/AccountDrawer/AccountDrawer.tsx

@@ -39,7 +39,9 @@ type DrawerLinkProps = NavLinkProps &
 const DrawerLink = ({ setIsDrawerOpen, external, ...props }: DrawerLinkProps) => {
   const externalProps = external ? { rel: "noreferrer", target: "_blank" } : {}
   return (
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
     <NavLink
+      aria-label={props.label as string}
       component={Link}
       label={props.label}
       p={8}

app/components/BarChart/BarChart.tsx

@@ -96,7 +96,7 @@ const BarChart = ({ data, xAxisDataKey, yAxisDataKey }: BarChartProps) => {
             <Cell
               key={`${entry.val}-${index}`}
               fill={focusedBar === index ? theme.colors.blue[7] : "none"}
-              // fillOpacity={focusedBar === index || mouseLeave ? 1 : 0.2}
+              fillOpacity={focusedBar === index || mouseLeave ? 1 : 0.2}
             />
           ))}
         </Bar>

app/components/DataTable/DataTable.tsx

@@ -1,5 +1,4 @@
-import { createStyles } from "@mantine/core"
-import { Table, Box, LoadingOverlay } from "@mantine/core"
+import { createStyles, Table, Box, LoadingOverlay } from "@mantine/core"
 import React from "react"
 import { DataTableBody } from "./DataTableBody"
 import { DataTablePagination } from "./DataTablePagination"

app/components/Identicon/Identicon.tsx

@@ -1,5 +1,4 @@
-import { MantineNumberSize } from "@mantine/core"
-import { Avatar, MantineTheme } from "@mantine/core"
+import { MantineNumberSize, Avatar, MantineTheme } from "@mantine/core"
 import React, { useMemo } from "react"
 import { minidenticon, picasso } from "~/utils/identicons"
 

app/components/RootAppShell/RootAppShell.tsx

@@ -1,5 +1,5 @@
-import { showNotification } from "@mantine/notifications"
 import { AppShell, Container } from "@mantine/core"
+import { showNotification } from "@mantine/notifications"
 import { Link, useLocation } from "@remix-run/react"
 import React, { ReactNode, useEffect, useMemo, useState } from "react"
 import { LuShapes } from "react-icons/lu/index.js"

app/components/Sidebar/components/SidebarNavLinks.tsx

@@ -1,5 +1,5 @@
-import { CSSObject } from "@mantine/core"
 import {
+  CSSObject,
   Anchor,
   Box,
   Flex,

app/components/UptimeChart/UptimeChart.tsx

@@ -15,8 +15,8 @@ const getBarColor = ({
   theme: MantineTheme
   uptime: number | string
 }) => {
-  if (uptime >= 0.9) return theme.colors.green[5]
-  if (uptime >= 0.8) return theme.colors.yellow[7]
+  if (Number(uptime) >= 0.9) return theme.colors.green[5]
+  if (Number(uptime) >= 0.8) return theme.colors.yellow[7]
   return theme.colors.red[9]
 }
 

app/hooks/useActionNotification.tsx

@@ -3,7 +3,7 @@ import React, { useEffect } from "react"
 import { LuCheck, LuX } from "react-icons/lu/index.js"
 import { DataStruct } from "~/types/global"
 
-type ActionNotificationData = Pick<DataStruct<any>, "message" | "error">
+export type ActionNotificationData = Pick<DataStruct<any>, "message" | "error">
 
 const useActionNotification = (data: ActionNotificationData) => {
   useEffect(() => {

app/hooks/useModals.tsx

@@ -1,10 +1,10 @@
+import { useMantineTheme } from "@mantine/core"
 import {
   openConfirmModal,
   openModal,
   useModals as MantineUseModals,
 } from "@mantine/modals"
 import { ModalSettings, OpenConfirmModal } from "@mantine/modals/lib/context"
-import { useMantineTheme } from "@mantine/core"
 
 const useModals = () => {
   const theme = useMantineTheme()

app/models/dwh/dwh.server.ts

@@ -1,5 +1,4 @@
-import { Configuration, UserApi } from "./sdk"
-import { AnalyticsRelaysAggregated } from "~/models/dwh/sdk"
+import { Configuration, UserApi, AnalyticsRelaysAggregated } from "./sdk"
 import { dayjs } from "~/utils/dayjs"
 import { getRequiredServerEnvVar } from "~/utils/environment"
 

app/models/portal/portal.data.ts

@@ -9,7 +9,7 @@ import {
   User,
 } from "./sdk"
 
-const testEmail = "[email protected]"
+// const testEmail = "[email protected]"
 export const testPortalUserId = "userId_test"
 
 // @ts-ignore

app/root/components/RootProviders/RootProviders.tsx

@@ -1,6 +1,6 @@
+import { MantineProvider } from "@mantine/core"
 import { ModalsProvider } from "@mantine/modals"
 import { NotificationsProvider } from "@mantine/notifications"
-import { MantineProvider } from "@mantine/core"
 import React from "react"
 import { portalTheme } from "~/root/portalTheme"
 

app/routes/_login.email-verification/route.tsx

@@ -1,7 +1,8 @@
 import { Card, Title, Text, Box, Grid } from "@mantine/core"
-import { ActionFunction, LoaderFunction, redirect } from "@remix-run/node"
+import { ActionFunction, LoaderFunction, MetaFunction, redirect } from "@remix-run/node"
 import Rive from "@rive-app/react-canvas"
 import { authenticator } from "~/utils/auth.server"
+import { seo_title_append } from "~/utils/seo"
 
 export const meta: MetaFunction = () => {
   return [

app/routes/account.$accountId.$appId._index/components/AppEndpointsTable/AppEndpointsTable.tsx

@@ -8,7 +8,9 @@ import Chain from "~/components/Chain"
 import ContextMenuTarget from "~/components/ContextMenuTarget"
 import CopyTextButton from "~/components/CopyTextButton"
 import { DataTable } from "~/components/DataTable"
-import useActionNotification from "~/hooks/useActionNotification"
+import useActionNotification, {
+  ActionNotificationData,
+} from "~/hooks/useActionNotification"
 import { Blockchain, Maybe } from "~/models/portal/sdk"
 import { trackEvent, AnalyticCategories, AnalyticActions } from "~/utils/analytics"
 import { CHAIN_DOCS_URL } from "~/utils/chainUtils"
@@ -33,9 +35,9 @@ const AppEndpointsTable = ({
   const theme = useMantineTheme()
   const { appId } = useParams()
   const fetcher = useFetcher()
-
+  const fetcherData = fetcher.data as ActionNotificationData
   // handle notification for menu fetcher action
-  useActionNotification(fetcher.data)
+  useActionNotification(fetcherData)
 
   const chains = useMemo(() => {
     const fav = blockchains

app/routes/account.$accountId.$appId._index/route.tsx

@@ -1,6 +1,6 @@
 import { Affix, Divider, Transition, Box, Flex, Input, Button } from "@mantine/core"
 import { useDebouncedValue, useWindowScroll } from "@mantine/hooks"
-import { ActionFunction, json } from "@remix-run/node"
+import { ActionFunction, json, MetaFunction } from "@remix-run/node"
 import { useOutletContext } from "@remix-run/react"
 import { useState } from "react"
 import { LuArrowUp, LuSearch } from "react-icons/lu/index.js"

app/routes/account.$accountId.$appId.security/view.tsx

@@ -7,7 +7,9 @@ import PrivateSecretKey from "./components/PrivateSecretKey"
 import WhitelistOrigins from "./components/WhitelistOrigins"
 import WhitelistUserAgents from "./components/WhitelistUserAgents"
 import { DEFAULT_WHITELISTS, securityReducer } from "./utils/stateReducer"
-import useActionNotification from "~/hooks/useActionNotification"
+import useActionNotification, {
+  ActionNotificationData,
+} from "~/hooks/useActionNotification"
 import { type Blockchain, type RoleName } from "~/models/portal/sdk"
 import {
   BlockchainsQuery,
@@ -29,10 +31,11 @@ export const SecurityView = ({ app, blockchains, userRole }: SecurityViewProps)
     app.whitelists ?? DEFAULT_WHITELISTS,
   )
   const fetcher = useFetcher()
+  const fetcherData = fetcher.data as ActionNotificationData
   const isInitialRender = useRef(true)
   const isReadOnly = userRole === "MEMBER"
 
-  useActionNotification(fetcher.data)
+  useActionNotification(fetcherData)
 
   // ٍRun effect only when state changes excluding the first render
   useEffect(() => {
@@ -53,6 +56,7 @@ export const SecurityView = ({ app, blockchains, userRole }: SecurityViewProps)
         },
       )
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state, app.id])
 
   return (

app/routes/account.$accountId.$appId/components/DeleteApplication/DeleteApplication.tsx

@@ -1,5 +1,5 @@
-import { closeAllModals } from "@mantine/modals"
 import { Button, Group, Menu, Text, TextInput } from "@mantine/core"
+import { closeAllModals } from "@mantine/modals"
 import { Form } from "@remix-run/react"
 import { useState } from "react"
 import { LuTrash2 } from "react-icons/lu/index.js"

app/routes/account.$accountId.settings.members/hooks/useTeamModals.tsx

@@ -1,7 +1,9 @@
 import { Text } from "@mantine/core"
 import { useFetcher } from "@remix-run/react"
 import React from "react"
-import useActionNotification from "~/hooks/useActionNotification"
+import useActionNotification, {
+  ActionNotificationData,
+} from "~/hooks/useActionNotification"
 import useModals from "~/hooks/useModals"
 import { Account, RoleName } from "~/models/portal/sdk"
 import { AnalyticActions, AnalyticCategories, trackEvent } from "~/utils/analytics"
@@ -14,8 +16,9 @@ const useTeamModals = ({ account }: useTeamModalsProps) => {
   const fetcher = useFetcher()
   const { openConfirmationModal } = useModals()
   const { id: accountId } = account
+  const fetcherData = fetcher.data as ActionNotificationData
 
-  useActionNotification(fetcher.data)
+  useActionNotification(fetcherData)
 
   const removeTeamMember = (userId: string, email: string) => {
     trackEvent({

app/routes/account.$accountId.settings.notifications/view.tsx

@@ -1,7 +1,9 @@
 import { Text, Switch, Group, Stack, Divider } from "@mantine/core"
 import { useFetcher } from "@remix-run/react"
 import React, { useCallback } from "react"
-import useActionNotification from "~/hooks/useActionNotification"
+import useActionNotification, {
+  ActionNotificationData,
+} from "~/hooks/useActionNotification"
 import { Account, RoleName } from "~/models/portal/sdk"
 import { AnalyticActions, AnalyticCategories, trackEvent } from "~/utils/analytics"
 import { formatNumberToSICompact } from "~/utils/formattingUtils"
@@ -46,7 +48,8 @@ export default function AccountNotificationsView({
 }: NotificationsAlertFormProps) {
   const { notifications } = account
   const fetcher = useFetcher()
-  useActionNotification(fetcher.data)
+  const fetcherData = fetcher.data as ActionNotificationData
+  useActionNotification(fetcherData)
 
   const notificationEvents = notifications[0]?.notificationSettings?.events
 

app/routes/account.$accountId.settings/route.tsx

@@ -10,7 +10,7 @@ export default function AccountSettings() {
   const { data, error, message } = useRouteLoaderData(
     "routes/account.$accountId",
   ) as DataStruct<AccountIdLoaderData>
-  const actionData = useActionData()
+  const actionData = useActionData() as DataStruct<{ success: boolean }>
 
   // handle all notifications at the layout level
   useActionNotification(actionData)

app/routes/account.$accountId/route.tsx

@@ -4,7 +4,7 @@ import invariant from "tiny-invariant"
 import ErrorView from "~/components/ErrorView"
 import RootAppShell from "~/components/RootAppShell/RootAppShell"
 import { initPortalClient } from "~/models/portal/portal.server"
-import { Account, PortalApp, RoleName, User } from "~/models/portal/sdk"
+import { Account, RoleName, User } from "~/models/portal/sdk"
 import { DataStruct } from "~/types/global"
 import { getUserAccountRole } from "~/utils/accountUtils"
 import { getErrorMessage } from "~/utils/catchError"

app/routes/account_.$accountId.$appId.update/route.tsx

@@ -10,7 +10,9 @@ import { useFetcher, useLoaderData } from "@remix-run/react"
 import invariant from "tiny-invariant"
 import ErrorView from "~/components/ErrorView"
 import PortalLoader from "~/components/PortalLoader"
-import useActionNotification from "~/hooks/useActionNotification"
+import useActionNotification, {
+  ActionNotificationData,
+} from "~/hooks/useActionNotification"
 import { initPortalClient } from "~/models/portal/portal.server"
 import { PortalApp, RoleName, UpdatePortalApp } from "~/models/portal/sdk"
 import AppForm from "~/routes/account_.$accountId.create/components/AppForm"
@@ -139,8 +141,9 @@ export const action: ActionFunction = async ({ request, params }) => {
 export default function UpdateApp() {
   const fetcher = useFetcher()
   const { data, error, message } = useLoaderData() as DataStruct<UpdateAppLoaderData>
+  const fetcherData = fetcher.data as ActionNotificationData
 
-  useActionNotification(fetcher.data)
+  useActionNotification(fetcherData)
 
   if (error) {
     return <ErrorView message={message} />

app/routes/account_.$accountId.create/components/AppmojiPicker/AppmojiPicker.tsx

@@ -1,6 +1,5 @@
-import { ActionIcon } from "@mantine/core"
+import { ActionIcon, Box, createStyles } from "@mantine/core"
 import { useClickOutside } from "@mantine/hooks"
-import { Box, createStyles } from "@mantine/core"
 import EmojiPicker, { Emoji, Theme } from "emoji-picker-react"
 import { useState } from "react"
 

app/routes/account_.$accountId.create/route.tsx

@@ -13,7 +13,9 @@ import AccountPlansContainer from "./components/AccountPlansContainer"
 import AppForm from "./components/AppForm"
 import { DEFAULT_APPMOJI } from "./components/AppmojiPicker"
 import PortalLoader from "~/components/PortalLoader"
-import useActionNotification from "~/hooks/useActionNotification"
+import useActionNotification, {
+  ActionNotificationData,
+} from "~/hooks/useActionNotification"
 import { initPortalClient } from "~/models/portal/portal.server"
 import { PayPlanType, RoleName } from "~/models/portal/sdk"
 import { getUserAccountRole } from "~/utils/accountUtils"
@@ -152,8 +154,9 @@ export const action: ActionFunction = async ({ request, params }) => {
 export default function CreateApp() {
   const fetcher = useFetcher()
   const [appFromData, setAppFromData] = useState<FormData>()
+  const fetcherData = fetcher.data as ActionNotificationData
 
-  useActionNotification(fetcher.data)
+  useActionNotification(fetcherData)
 
   return fetcher.state === "idle" ? (
     <Box maw={860} mt={90} mx="auto">

app/routes/account_.$accountId.upgrade/route.tsx

@@ -8,7 +8,7 @@ import {
   Text,
   Tooltip,
 } from "@mantine/core"
-import { LoaderFunction, redirect } from "@remix-run/node"
+import { LoaderFunction, MetaFunction, redirect } from "@remix-run/node"
 import { NavLink, useNavigate, useParams } from "@remix-run/react"
 import React from "react"
 import invariant from "tiny-invariant"

app/routes/admin.users.pay-plan/route.tsx

@@ -1,7 +1,10 @@
 import { Button, Card, Container, Select, TextInput } from "@mantine/core"
+import { MetaFunction } from "@remix-run/node"
 import { useFetcher } from "@remix-run/react"
 import { useState } from "react"
-import useActionNotification from "~/hooks/useActionNotification"
+import useActionNotification, {
+  ActionNotificationData,
+} from "~/hooks/useActionNotification"
 import { PayPlanType } from "~/models/portal/sdk"
 
 export const meta: MetaFunction = () => {
@@ -18,7 +21,8 @@ export default function CustomPayPlan() {
 
   const plans = Object.values(PayPlanType)
 
-  useActionNotification(updatePlanFetcher.data)
+  const fetcherData = updatePlanFetcher.data as ActionNotificationData
+  useActionNotification(fetcherData)
 
   return (
     <Container size="lg">
@@ -50,7 +54,7 @@ export default function CustomPayPlan() {
             Submit
           </Button>
         </Form>
-        {updatePlanFetcher.data && updatePlanFetcher.data.error && (
+        {fetcherData && fetcherData.error && (
           <div>{JSON.stringify(updatePlanFetcher.data)}</div>
         )}
       </Card>

app/utils/auth.server.ts

@@ -11,7 +11,7 @@ import { initAdminPortal } from "~/utils/adminPortal"
 // strategies will return and will be stored in the session
 export const authenticator = new Authenticator<{
   accessToken: string
-  refreshToken: string
+  refreshToken: string | undefined
   extraParams: Auth0ExtraParams
   user: PortalUser & {
     auth0ID: string
@@ -21,7 +21,7 @@ export const authenticator = new Authenticator<{
 
 export type AuthUser = {
   accessToken: string
-  refreshToken: string
+  refreshToken: string | undefined
   extraParams: Auth0ExtraParams
   user: PortalUser & {
     auth0ID: string

app/utils/user.server.ts

@@ -10,7 +10,6 @@ export enum Permissions {
 }
 
 export const requireUser = async (request: Request, defaultRedirect = "/") => {
-  const url = new URL(request.url)
   const user = await authenticator.isAuthenticated(request)
 
   if (!user) {

cypress/tsconfig.json

@@ -19,8 +19,6 @@
     "strict": true,
     "skipLibCheck": true,
     "resolveJsonModule": true,
-    "typeRoots": ["../types", "../node_modules/@types"],
-
     "paths": {
       "~/*": ["../app/*"]
     }