fix(imports): update all imports

src/App.tsx

@@ -9,14 +9,14 @@ import {
   createRoutesFromElements,
 } from 'react-router-dom';
 
-import AppRouterLayout from './layout/AppRouterLayout';
-import Loading from './pages/Loading';
-import NotFound from './pages/NotFound';
+import AppRouterLayout from './layout/AppRouterLayout.js';
+import Loading from './pages/Loading.js';
+import NotFound from './pages/NotFound.js';
 
-const Dashboard = React.lazy(() => import('./pages/Dashboard'));
-const Gateways = React.lazy(() => import('./pages/Gateways'));
-const Staking = React.lazy(() => import('./pages/Staking'));
-const Observers = React.lazy(() => import('./pages/Observers'));
+const Dashboard = React.lazy(() => import('./pages/Dashboard.js'));
+const Gateways = React.lazy(() => import('./pages/Gateways.js'));
+const Staking = React.lazy(() => import('./pages/Staking.js'));
+const Observers = React.lazy(() => import('./pages/Observers.js'));
 
 const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createBrowserRouter);
 

src/components/Header.tsx

@@ -1,5 +1,5 @@
-import Button, { ButtonType } from './Button';
-import { ConnectIcon } from './icons';
+import Button, { ButtonType } from './Button.js';
+import { ConnectIcon } from './icons/index.js';
 
 const Header = () => {
   return (

src/layout/AppRouterLayout.tsx

@@ -1,7 +1,7 @@
 import { Outlet } from 'react-router-dom';
 
-import Notifications from './Notifications';
-import Sidebar from './Sidebar';
+import Notifications from './Notifications.js';
+import Sidebar from './Sidebar.js';
 
 function AppRouterLayout() {
   return (

src/layout/Notifications.tsx

@@ -1,5 +1,5 @@
 import { captureException } from '@sentry/browser';
-import { errorEmitter, notificationEmitter } from '@src/services/events';
+import { errorEmitter, notificationEmitter } from '@src/services/events.js';
 import { useEffect } from 'react';
 
 function Notifications() {

src/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { ARIO_DOCS_URL, GATEWAY_CONTRACT_URL } from '@src/constants';
+import { ARIO_DOCS_URL, GATEWAY_CONTRACT_URL } from '@src/constants.js';
 import { MouseEventHandler, ReactElement, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -13,7 +13,7 @@ import {
   LinkArrowIcon,
   OpenDrawerIcon,
   StakingIcon,
-} from '../components/icons';
+} from '../components/icons/index.js';
 
 const SideBarButton = ({
   icon,

src/pages/Dashboard.tsx

@@ -1,4 +1,4 @@
-import Header from '@src/components/Header';
+import Header from '@src/components/Header.js';
 
 function Dashboard() {
   return (

src/pages/Gateways.tsx

@@ -1,4 +1,4 @@
-import Header from '@src/components/Header';
+import Header from '@src/components/Header.js';
 
 function Gateways() {
   return (

src/pages/Observers.tsx

@@ -1,4 +1,4 @@
-import Header from '@src/components/Header';
+import Header from '@src/components/Header.js';
 
 function Observers() {
   return (

src/pages/Staking.tsx

@@ -1,4 +1,4 @@
-import Header from '@src/components/Header';
+import Header from '@src/components/Header.js';
 
 function Staking() {
   return (

src/services/events.ts

@@ -1,4 +1,4 @@
-import EventEmitter from 'eventemitter3';
+import {EventEmitter} from 'eventemitter3';
 
 // error emitter captures errors and sends them to sentry. Can be coupled with a notification API.
 export const errorEmitter = new EventEmitter();

src/services/http.ts

@@ -10,7 +10,7 @@ import { Readable } from 'stream';
 import { ReadableStream } from 'stream/web';
 import { Logger } from 'winston';
 
-import { FailedRequestError, HTTPClient } from '../../types';
+import { FailedRequestError, HTTPClient } from '../../types/index.js'
 
 export class AxiosHTTPService implements HTTPClient {
   private axios: AxiosInstance;

src/store/index.tsx

@@ -1,5 +1,5 @@
-import { THEME_TYPES } from '@src/constants';
-import { applyThemePreference } from '@src/utils';
+import { THEME_TYPES } from '@src/constants.js';
+import { applyThemePreference } from '@src/utils.js';
 import { create } from 'zustand';
 
 export type ThemeType = (typeof THEME_TYPES)[keyof typeof THEME_TYPES];

tsconfig.json

@@ -9,7 +9,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
+    "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,

types/index.ts

@@ -1,2 +1,2 @@
-export * from './common';
-export * from './error';
+export * from './common.js';
+export * from './error.js';