Merge branch '442-revise-the-global-eslint-configuration-rules-and-ad…

…just-the-code-to-comply-with-the-updated' into 'dev'

Resolve "Revise the global ESLint configuration rules and adjust the code to comply with the updated standards"

Closes #442

See merge request ergo/rosen-bridge/ui!372

.changeset/dirty-peaches-beam.md

@@ -0,0 +1,17 @@
+---
+'@rosen-bridge/shared-contexts': patch
+'@rosen-ui/metamask-wallet': patch
+'@rosen-ui/nautilus-wallet': patch
+'@rosen-ui/eternl-wallet': patch
+'@rosen-ui/flint-wallet': patch
+'@rosen-ui/vespr-wallet': patch
+'@rosen-ui/xdefi-wallet': patch
+'@rosen-ui/lace-wallet': patch
+'@rosen-ui/nami-wallet': patch
+'@rosen-ui/swr-mock': patch
+'@rosen-network/cardano': patch
+'@rosen-bridge/ui-kit': patch
+'@rosen-ui/types': patch
+---
+
+Update the source code to address the issues identified by the new ESLint rules configuration

eslint.config.mjs

@@ -7,52 +7,49 @@ import reactRefresh from 'eslint-plugin-react-refresh';
 import globals from 'globals';
 
 export default [
+  // General Ignore Patterns
   {
     ignores: ['**/dist/*'],
   },
+
+  // Base Configuration for JS/TS Files
   {
-    files: [
-      'networks/**/*.{js,jsx,ts,tsx}',
-      'packages/**/*.{js,jsx,ts,tsx}',
-      'wallets/**/*.{js,jsx,ts,tsx}',
-    ],
-    rules: {
-      ...pluginJs.configs.recommended.rules,
-      ...typescriptEslint.configs.recommended.rules,
-    },
-    plugins: {
-      '@typescript-eslint': typescriptEslint,
-    },
+    files: ['{networks,packages,wallets}/**/*.{js,jsx,ts,tsx}'],
     languageOptions: {
       parser: typescriptParser,
       ecmaVersion: 'latest',
       sourceType: 'module',
     },
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+    },
+    rules: {
+      ...pluginJs.configs.recommended.rules,
+      ...typescriptEslint.configs.recommended.rules,
+    },
   },
+
+  // Browser-Specific Globals
   {
-    files: [
-      'networks/**/*.{js,jsx,ts,tsx}',
-      'packages/asset-calculator/**/*.{js,jsx,ts,tsx}',
-    ],
+    files: ['{packages,wallets}/**/*.{js,jsx,ts,tsx}'],
+    ignores: ['packages/asset-calculator/**/*.{js,jsx,ts,tsx}'],
     languageOptions: {
-      globals: globals.node,
+      globals: globals.browser,
     },
   },
+
+  // Node-Specific Globals
   {
     files: [
-      'packages/common-hooks/**/*.{js,jsx,ts,tsx}',
-      'packages/constants/**/*.{js,jsx,ts,tsx}',
-      'packages/icons/**/*.{js,jsx,ts,tsx}',
-      'packages/swr-helpers/**/*.{js,jsx,ts,tsx}',
-      'packages/swr-mock/**/*.{js,jsx,ts,tsx}',
-      'packages/types/**/*.{js,jsx,ts,tsx}',
-      'packages/utils/**/*.{js,jsx,ts,tsx}',
-      'wallets/**/*.{js,jsx,ts,tsx}',
+      'networks/**/*.{js,jsx,ts,tsx}',
+      'packages/asset-calculator/**/*.{js,jsx,ts,tsx}',
     ],
     languageOptions: {
-      globals: globals.browser,
+      globals: globals.node,
     },
   },
+
+  // React-Specific Rules and Plugins
   {
     files: [
       'packages/shared-contexts/**/*.{js,jsx,ts,tsx}',
@@ -67,15 +64,17 @@ export default [
       ...reactHooks.configs.recommended.rules,
     },
   },
-  /**
-   * TODO: revise the global ESLint configuration rules
-   * local:ergo/rosen-bridge/ui#442
-   */
+
+  // Additional Global Rules
   {
     rules: {
-      'no-undef': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        { allowShortCircuit: true },
+      ],
     },
   },
+
+  // Integrate Prettier for Formatting
   prettier,
 ];

networks/cardano/src/types.ts

@@ -40,5 +40,7 @@ export interface ConnectorAPI {
  * global type augmentation for wallets
  */
 declare global {
-  let cardano: { [key: string]: ConnectorAPI };
+  interface Window {
+    cardano: { [key: string]: ConnectorAPI };
+  }
 }

packages/shared-contexts/src/contexts/apiKeyContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useReducer, useMemo } from 'react';
+import React, { createContext, useReducer, useMemo } from 'react';
 
 type Action =
   | {

packages/swr-mock/src/SWRConfig.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { SWRConfig as SWRConfigBase } from 'swr';
 
 import { mockMiddlewareFactory } from './mockMiddlewareFactory';

packages/swr-mock/src/mockMiddlewareFactory.ts

@@ -2,6 +2,7 @@
  * TODO: remove the inline ESLint comment
  * local:ergo/rosen-bridge/ui#441
  */
+
 /* eslint-disable */
 import { Key, Middleware, SWRHook } from 'swr';
 

packages/types/src/next.ts

@@ -1 +1,3 @@
+import React from 'react';
+
 export type LayoutProps = Record<string, React.ReactNode>;

packages/ui-kit/src/Providers/ThemeProvider.tsx

@@ -1,17 +1,16 @@
-import { createContext, useState } from 'react';
+import React, { createContext, useState } from 'react';
 
 import { Theme, useMediaQuery } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import { useLocalStorageManager } from '@rosen-ui/common-hooks';
 
 export const ThemeTogglerContext = createContext({
   mode: 'light',
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   toggle: () => {},
 });
 
 export interface ThemeProviderProps {
-  children: JSX.Element;
+  children: React.ReactNode;
   theme:
     | Theme
     | {

packages/ui-kit/src/components/common/ApiKeyModal.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useState } from 'react';
+import React, { FormEvent, useEffect, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
 import { KeySkeleton, Eye, EyeSlash, Times } from '@rosen-bridge/icons';

packages/ui-kit/src/components/common/EnhancedDialogTitle.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { styled } from '@mui/material';
 import { Times } from '@rosen-bridge/icons';
 
@@ -11,7 +13,7 @@ const IconContainer = styled('div')(({ theme }) => ({
 }));
 
 export type EnhancedDialogTitleProps = {
-  icon?: JSX.Element;
+  icon?: React.ReactNode;
   onClose?: React.MouseEventHandler<HTMLButtonElement>;
 } & DialogTitleProps;
 

packages/ui-kit/src/components/common/SuccessfulCopySnackbar.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Alert, Snackbar } from '../base';
 
 interface SuccessfulCopySnackbarProps {

packages/ui-kit/src/components/common/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React from 'react';
 
 import { isLegacyTheme, useTheme } from '../../hooks/useTheme';
 import { styled } from '../../styling';
@@ -22,7 +22,7 @@ export interface ToolbarProps {
   title: string;
   description?: string;
   isCentered?: boolean;
-  toolbarActions?: ReactNode;
+  toolbarActions?: React.ReactNode;
 }
 
 /**

packages/ui-kit/src/contexts/snackbarContext.tsx

@@ -1,4 +1,4 @@
-import { useReducer, createContext } from 'react';
+import React, { useReducer, createContext } from 'react';
 
 import { SnackbarOrigin } from '@mui/material';
 

wallets/eternl-wallet/src/connectWallet.ts

@@ -3,7 +3,7 @@
  */
 
 export const connectWallet = async (): Promise<boolean> => {
-  const granted = await cardano.eternl?.enable();
+  const granted = await window.cardano.eternl?.enable();
 
   if (!granted) {
     console.error('Failed to connect!');

wallets/eternl-wallet/src/getEternlWallet.ts

@@ -13,6 +13,6 @@ export const getEternlWallet = () => {
       ...eternlWalletInfo,
       connectWallet,
     },
-    () => cardano.eternl,
+    () => window.cardano.eternl,
   );
 };

wallets/eternl-wallet/src/isEternlAvailable.ts

@@ -1,3 +1,3 @@
 export const isEternlAvailable = (): boolean => {
-  return typeof cardano !== 'undefined' && !!cardano?.eternl;
+  return typeof window.cardano !== 'undefined' && !!window.cardano?.eternl;
 };

wallets/flint-wallet/src/connectWallet.ts

@@ -3,7 +3,7 @@
  */
 
 export const connectWallet = async () => {
-  const granted = await cardano.flint?.enable();
+  const granted = await window.cardano.flint?.enable();
 
   if (!granted) {
     console.error('Failed to connect!');

wallets/flint-wallet/src/getFlintWallet.ts

@@ -13,5 +13,5 @@ export const getFlintWallet = () =>
       ...flintWalletInfo,
       connectWallet,
     },
-    () => cardano.flint,
+    () => window.cardano.flint,
   );

wallets/flint-wallet/src/isFlintAvailable.ts

@@ -1,3 +1,3 @@
 export const isFlintAvailable = (): boolean => {
-  return typeof cardano !== 'undefined' && !!cardano?.flint;
+  return typeof window.cardano !== 'undefined' && !!window.cardano?.flint;
 };

wallets/lace-wallet/src/connectWallet.ts

@@ -3,7 +3,7 @@
  */
 
 export const connectWallet = async () => {
-  const granted = await cardano.lace?.enable();
+  const granted = await window.cardano.lace?.enable();
 
   if (!granted) {
     console.error('Failed to connect!');

wallets/lace-wallet/src/getLaceWallet.ts

@@ -13,6 +13,6 @@ export const getLaceWallet = () => {
       ...laceWalletInfo,
       connectWallet,
     },
-    () => cardano.lace,
+    () => window.cardano.lace,
   );
 };

wallets/lace-wallet/src/isLaceAvailable.ts

@@ -1,3 +1,3 @@
 export const isLaceAvailable = () => {
-  return typeof cardano !== 'undefined' && !!cardano?.lace;
+  return typeof window.cardano !== 'undefined' && !!window.cardano?.lace;
 };

wallets/metamask-wallet/src/global.d.ts

@@ -0,0 +1,11 @@
+/**
+ * global type augmentation for the wallet
+ */
+declare global {
+  interface Window {
+    ethereum: {
+      isMetaMask: boolean;
+      _metamask: unknown;
+    };
+  }
+}

wallets/metamask-wallet/src/isMetaMaskAvailable.ts

@@ -1,17 +1,7 @@
-/**
- * global type augmentation for the wallet
- */
-declare global {
-  let ethereum: {
-    isMetaMask: boolean;
-    _metamask: unknown;
-  };
-}
-
 export const isMetaMaskAvailable = (): boolean => {
   return (
-    typeof ethereum !== 'undefined' &&
-    ethereum.isMetaMask &&
-    !!ethereum._metamask
+    typeof window.ethereum !== 'undefined' &&
+    window.ethereum.isMetaMask &&
+    !!window.ethereum._metamask
   );
 };

wallets/nami-wallet/src/connectWallet.ts

@@ -3,7 +3,7 @@
  */
 
 export const connectWallet = async () => {
-  const granted = await cardano.nami?.enable();
+  const granted = await window.cardano.nami?.enable();
 
   if (!granted) {
     console.error('Failed to connect!');

wallets/nami-wallet/src/getNamiWallet.ts

@@ -13,6 +13,6 @@ export const getNamiWallet = () => {
       ...namiWalletInfo,
       connectWallet,
     },
-    () => cardano.nami,
+    () => window.cardano.nami,
   );
 };

wallets/nami-wallet/src/isNamiAvailable.ts

@@ -1,3 +1,3 @@
 export const isNamiAvailable = () => {
-  return typeof cardano !== 'undefined' && !!cardano?.nami;
+  return typeof window.cardano !== 'undefined' && !!window.cardano?.nami;
 };

wallets/nautilus-wallet/src/connectWallet.ts

@@ -2,14 +2,14 @@
  * handles the nautilus wallet connection
  */
 export const connectWallet = async () => {
-  if (!ergoConnector?.nautilus) {
+  if (!window.ergoConnector?.nautilus) {
     throw new Error('EXTENSION_NOT_FOUND');
   }
 
-  if (!ergoConnector.nautilus?.getContext) {
+  if (!window.ergoConnector.nautilus?.getContext) {
     return 'Wallet API has changed. Be sure to update your wallet to continue using it';
   }
 
-  const nautilus = ergoConnector.nautilus;
+  const nautilus = window.ergoConnector.nautilus;
   return await nautilus.connect({ createErgoObject: false });
 };

wallets/nautilus-wallet/src/getNautilusWallet.ts

@@ -14,6 +14,6 @@ export const getNautilusWallet = () => {
       ...nautilusWalletInfo,
       connectWallet,
     },
-    () => ergoConnector.nautilus,
+    () => window.ergoConnector.nautilus,
   );
 };

wallets/nautilus-wallet/src/global.d.ts

@@ -4,12 +4,14 @@ import { EipWalletApi } from '@rosen-ui/wallet-api';
  * global type augmentation for nautilus wallet
  */
 declare global {
-  let ergoConnector: {
-    nautilus: {
-      connect: (params: { createErgoObject: boolean }) => Promise<boolean>;
-      getContext: () => Promise<EipWalletApi>;
+  interface Window {
+    ergoConnector: {
+      nautilus: {
+        connect: (params: { createErgoObject: boolean }) => Promise<boolean>;
+        getContext: () => Promise<EipWalletApi>;
+      };
     };
-  };
+  }
 }
 
 export {};

wallets/nautilus-wallet/src/isNautilusAvailable.ts

@@ -1,3 +1,6 @@
 export const isNautilusAvailable = (): boolean => {
-  return typeof ergoConnector !== 'undefined' && !!ergoConnector.nautilus;
+  return (
+    typeof window.ergoConnector !== 'undefined' &&
+    !!window.ergoConnector.nautilus
+  );
 };