chore: use node-next for module-resolution

.prettierrc

@@ -1,16 +1,15 @@
 {
-    "semi": true,
-    "printWidth": 80,
-    "trailingComma": "all",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "endOfLine": "lf",
-    "plugins": [
-      "@trivago/prettier-plugin-sort-imports",
-      "prettier-plugin-tailwindcss"
-    ],
-    "importOrder": ["^[.{1,2}/]"],
-    "importOrderSeparation": true,
-    "importOrderSortSpecifiers": true
-  }
-
+  "semi": true,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "endOfLine": "lf",
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "importOrder": ["^[.{1,2}/]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

README.md

@@ -1,2 +1,3 @@
 # network-portal
+
 Application for interacting with the ar.io network.

package.json

@@ -15,11 +15,10 @@
     "test:updateSnapshot": "NODE_ENV=test jest --updateSnapshot",
     "test:coverage": "NODE_ENV=test jest --coverage",
     "prepare": "husky || true",
-    "pre-commit": "lint-staged",
-    "vis": "yarn vite-bundle-visualizer"
+    "pre-commit": "lint-staged"
   },
   "dependencies": {
-    "@ar.io/sdk": "^1.0.1",
+    "@ar.io/sdk": "1.0.2-alpha.1",
     "@fontsource/rubik": "^5.0.19",
     "@sentry/browser": "^7.101.1",
     "@sentry/react": "^7.101.1",
@@ -29,14 +28,15 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",
     "tailwindcss-animate": "^1.0.7",
-    "winston": "^3.11.0",
     "zustand": "^4.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
+    "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@babel/traverse": "^7.24.1",
+    "@babel/types": "^7.24.0",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
     "@sentry/vite-plugin": "^0.7.2",
@@ -87,7 +87,6 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "vite": "^5.1.0",
-    "vite-bundle-visualizer": "^1.0.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0"
   },

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);
 
@@ -32,31 +32,35 @@ function App() {
               <Dashboard />
             </Suspense>
           }
-        />,
+        />
+        ,
         <Route
           path="gateways"
           element={
             <Suspense fallback={<Loading />}>
               <Gateways />
             </Suspense>
           }
-        />,
+        />
+        ,
         <Route
           path="staking"
           element={
             <Suspense fallback={<Loading />}>
               <Staking />
             </Suspense>
           }
-        />,
+        />
+        ,
         <Route
           path="observers"
           element={
             <Suspense fallback={<Loading />}>
               <Observers />
             </Suspense>
           }
-        />,
+        />
+        ,
         <Route path="*" element={<Navigate to="/" />} />
       </Route>,
     ),

src/components/Button.tsx

@@ -21,8 +21,10 @@ export const Button = ({
 }) => {
   if (buttonType === ButtonType.PRIMARY) {
     return (
-      <div className="rounded-md bg-gradient-to-b from-btn-primary-outer-gradient-start
-       to-btn-primary-outer-gradient-end p-[1px]">
+      <div
+        className="rounded-md bg-gradient-to-b from-btn-primary-outer-gradient-start
+       to-btn-primary-outer-gradient-end p-px"
+      >
         <button
           title={title}
           className="inline-flex items-center justify-start 
@@ -33,8 +35,10 @@ export const Button = ({
         >
           {icon}
           {text && (
-            <div className="bg-gradient-to-r from-gradient-primary-start to-gradient-primary-end 
-              bg-clip-text text-sm leading-tight text-transparent">
+            <div
+              className="bg-gradient-to-r from-gradient-primary-start to-gradient-primary-end 
+              bg-clip-text text-sm leading-tight text-transparent"
+            >
               {text}
             </div>
           )}

src/components/Header.tsx

@@ -1,9 +1,9 @@
-import Button, { ButtonType } from './Button';
-import { ConnectIcon } from './icons';
+import Button, { ButtonType } from './Button.js';
+import { ConnectIcon } from './icons/index.js';
 
 const Header = () => {
   return (
-    <header className="mt-[24px] flex h-[72px] rounded-[12px] border-[1px] py-[16px] pl-[24px] pr-[16px] leading-[1.4] dark:border-transparent-100-8 dark:bg-grey-1000 dark:text-grey-300">
+    <header className="mt-[24px] flex h-[72px] rounded-[12px] border-DEFAULT py-[16px] pl-[24px] pr-[16px] leading-[1.4] dark:border-transparent-100-8 dark:bg-grey-1000 dark:text-grey-300">
       <div className="inline-flex h-[38px] flex-col items-start justify-start gap-1 border-r pr-6 dark:border-transparent-100-8">
         <div className="text-[12px] text-textHigh">15</div>
         <div className="pt-[4px] text-[12px] leading-none text-textLow">
@@ -18,7 +18,13 @@ const Header = () => {
       </div>
       <div className="grow" />
       <div className="content-center">
-        <Button buttonType={ButtonType.PRIMARY} icon={<ConnectIcon />} title="Connect" text="Connect" onClick={() => {}} />
+        <Button
+          buttonType={ButtonType.PRIMARY}
+          icon={<ConnectIcon />}
+          title="Connect"
+          text="Connect"
+          onClick={() => {}}
+        />
       </div>
     </header>
   );

src/constants.ts

@@ -1,15 +1,13 @@
 // import { createLogger, format, transports } from 'winston';
+import { ARNS_TESTNET_REGISTRY_TX } from '@ar.io/sdk/web';
 
-import { ARNS_TESTNET_REGISTRY_TX } from '@ar.io/sdk';
-import { ArweaveTransactionID } from './utils/ArweaveTransactionId';
+import { ArweaveTransactionID } from './utils/ArweaveTransactionId.js';
 
 export const ARIO_DOCS_URL = 'https://docs.ar.io';
 export const ARNS_REGISTRY_ADDRESS = new ArweaveTransactionID(
-  process.env.VITE_ARNS_REGISTRY_ADDRESS ??
-  ARNS_TESTNET_REGISTRY_TX,
+  process.env.VITE_ARNS_REGISTRY_ADDRESS ?? ARNS_TESTNET_REGISTRY_TX,
 );
-export const GATEWAY_CONTRACT_URL =
-  `https://viewblock.io/arweave/contract/${ARNS_REGISTRY_ADDRESS.toString()}`;
+export const GATEWAY_CONTRACT_URL = `https://viewblock.io/arweave/contract/${ARNS_REGISTRY_ADDRESS.toString()}`;
 
 export const THEME_TYPES = {
   LIGHT: 'light',

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/Loading.tsx

@@ -1,5 +1,9 @@
 const Loading = () => {
-  return <div className="flex size-full items-center justify-center dark:text-grey-500">Loading</div>;
+  return (
+    <div className="flex size-full items-center justify-center dark:text-grey-500">
+      Loading
+    </div>
+  );
 };
 
-export default Loading;
+export default Loading;

src/pages/NotFound.tsx

@@ -1,7 +1,7 @@
 function NotFound() {
   return (
     <div className="flex size-full items-center justify-center">
-        <p>Page Not Found</p>
+      <p>Page Not Found</p>
     </div>
   );
 }

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

@@ -8,10 +8,9 @@ import axios, {
 import axiosRetry, { IAxiosRetryConfig } from 'axios-retry';
 import { Readable } from 'stream';
 import { ReadableStream } from 'stream/web';
+import { Logger } from 'winston';
 
-import { FailedRequestError, HTTPClient } from '../../types';
-import { Logger } from 'winston'
-
+import { FailedRequestError, HTTPClient } from '../../types/index.js'
 
 export class AxiosHTTPService implements HTTPClient {
   private axios: AxiosInstance;
@@ -111,7 +110,9 @@ export const createAxiosInstance = ({
     },
     onRetry: (retryCount, error) => {
       // logger.debug(`Request failed, ${error}. Retry attempt #${retryCount}...`);
-      logger?.debug(`Request failed, ${error}. Retry attempt #${retryCount}...`);
+      logger?.debug(
+        `Request failed, ${error}. Retry attempt #${retryCount}...`,
+      );
     },
   },
 }: AxiosInstanceParameters = {}): 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];

src/utils.ts

@@ -1,4 +1,5 @@
-import { THEME_TYPES } from './constants';
+
+import { THEME_TYPES } from './constants.js';
 
 // for tailwind css, need the change the root
 export const applyThemePreference = (theme: string) => {

src/utils/ArweaveTransactionId.ts

@@ -1,5 +1,6 @@
-import { ARWEAVE_TX_REGEX } from '@ar.io/sdk';
-import { Equatable } from '../types';
+import { ARWEAVE_TX_REGEX } from '@ar.io/sdk/web';
+
+import { Equatable } from '../types.js';
 
 export class ArweaveTransactionID implements Equatable<ArweaveTransactionID> {
   constructor(private readonly transactionId?: string) {

tailwind.config.js

@@ -20,15 +20,15 @@ export default {
       transparent: 'transparent',
       'gradient-primary-start': '#F7C3A1',
       'gradient-primary-end': '#DF9BE8',
-      'btn-primary-base': '#0e0e0f', 
-      'btn-primary-gradient-start': 'rgba(102, 102, 102, 0.06)', 
-      'btn-primary-gradient-end': 'rgba(0, 0, 0 0.06)', 
+      'btn-primary-base': '#0e0e0f',
+      'btn-primary-gradient-start': 'rgba(102, 102, 102, 0.06)',
+      'btn-primary-gradient-end': 'rgba(0, 0, 0 0.06)',
       'btn-primary-outer-gradient-start': '#EEB3BFA3',
       'btn-primary-outer-gradient-end': '#DF9BE808',
       // using camel case here to make thing like text-textHigh less strange
-      'textHigh': '#CACAD6',
-      'textMid' : '#A3A3AD',
-      'textLow' : '#7F7F87'
+      textHigh: '#CACAD6',
+      textMid: '#A3A3AD',
+      textLow: '#7F7F87',
     },
   },
   plugins: [require('tailwindcss-animate')],

tsconfig.json

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

types/index.ts

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