RunOnFlux · TheTrunk · Jul 31, 2024 · Jul 31, 2024
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,31 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+export default [
+  eslintPluginPrettierRecommended,
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2020,
+      },
+    },
+    plugins: {
+      reactRefresh,
+      reactHooks,
+    },
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+    },
+  },
+];
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/package.json b/package.json
@@ -7,21 +7,23 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint ./src ./public",
+    "lint:fix": "eslint ./src ./public --fix",
+    "type-check": "tsc",
     "preview": "vite preview",
     "postinstall": "patch-package"
   },
   "dependencies": {
     "@alchemy/aa-core": "~3.18.2",
     "@metamask/browser-passworder": "~5.0.1",
     "@noble/hashes": "~1.4.0",
-    "@reduxjs/toolkit": "~2.2.6",
+    "@reduxjs/toolkit": "~2.2.7",
     "@runonflux/aa-schnorr-multisig-sdk": "~1.0.3",
     "@runonflux/flux-sdk": "~1.0.2",
     "@runonflux/utxo-lib": "~1.0.0",
     "@scure/bip32": "~1.4.0",
     "@scure/bip39": "~1.3.0",
-    "antd": "~5.19.3",
+    "antd": "~5.19.4",
     "assert": "~2.1.0",
     "axios": "~1.7.2",
     "bchaddrjs": "~0.5.2",
@@ -39,34 +41,39 @@
     "react": "~18.3.1",
     "react-countdown-circle-timer": "~3.2.1",
     "react-dom": "~18.3.1",
-    "react-i18next": "~14.1.2",
+    "react-i18next": "~15.0.0",
     "react-redux": "~9.1.2",
     "react-router-dom": "~6.25.1",
     "react-secure-storage": "~1.3.2",
     "socket.io-client": "~4.7.5",
     "stream-browserify": "~3.0.0",
     "util": "~0.12.5",
-    "viem": "~2.17.3"
+    "viem": "~2.18.6"
   },
   "devDependencies": {
+    "@eslint/js": "~9.8.0",
     "@types/bchaddrjs": "~0.4.3",
     "@types/chrome": "~0.0.269",
-    "@types/node": "~20.14.12",
+    "@types/node": "~22.0.0",
     "@types/react": "~18.3.3",
     "@types/react-dom": "~18.3.0",
     "@types/react-redux": "~7.1.33",
     "@types/react-router-dom": "~5.3.3",
-    "@typescript-eslint/eslint-plugin": "~7.17.0",
-    "@typescript-eslint/parser": "~7.17.0",
+    "@typescript-eslint/eslint-plugin": "~7.18.0",
+    "@typescript-eslint/parser": "~7.18.0",
     "@vitejs/plugin-react-swc": "~3.7.0",
-    "eslint": "~8.57.0",
+    "eslint": "~9.8.0",
+    "eslint-config-prettier": "~9.1.0",
+    "eslint-plugin-prettier": "~5.2.1",
     "eslint-plugin-react": "~7.35.0",
     "eslint-plugin-react-hooks": "~4.6.2",
     "eslint-plugin-react-refresh": "~0.4.9",
+    "globals": "~15.8.0",
     "prettier": "~3.3.3",
-    "tsx": "~4.16.2",
+    "tsx": "~4.16.3",
     "typescript": "~5.5.4",
-    "vite": "~5.3.4"
+    "typescript-eslint": "~7.18.0",
+    "vite": "~5.3.5"
   },
   "engines": {
     "node": ">=20"

diff --git a/public/scripts/background.js b/public/scripts/background.js
@@ -1,3 +1,4 @@
+/*global chrome*/
 // https://github.com/MetaMask/metamask-extension/blob/develop/app/scripts/app-init.js
 
 /*
@@ -11,7 +12,6 @@ let popupId;
 
 const registerInPageContentScript = async () => {
   try {
-    // eslint-disable-next-line no-undef
     await chrome.scripting.registerContentScripts([
       {
         id: 'sspinpage',
@@ -29,10 +29,7 @@ const registerInPageContentScript = async () => {
      * 2. await chrome.scripting.getRegisteredContentScripts() to check for an existing
      *    inpage script before registering - The provider is not loaded on time.
      */
-    console.warn(
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `Dropped attempt to register inpage content script. ${err}`,
-    );
+    console.warn(`Dropped attempt to register inpage content script. ${err}`);
   }
 };
 
@@ -46,9 +43,9 @@ async function getAllWindows() {
 function getPopupIn(windows) {
   return windows
     ? windows.find((win) => {
-      // Returns notification popup
-      return win && win.type === 'popup' && win.id === popupId;
-    })
+        // Returns notification popup
+        return win && win.type === 'popup' && win.id === popupId;
+      })
     : null;
 }
 
@@ -58,7 +55,6 @@ async function getPopup() {
 }
 
 async function focusWindow(windowId, options = { focused: true }) {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   await chrome.windows.update(windowId, options);
 }
 
@@ -89,10 +85,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     const lastFocused = await chrome.windows.getLastFocused();
     if (lastFocused) {
       top = lastFocused.top + 80;
-      left = Math.max(
-        lastFocused.left + (lastFocused.width - 420 - 10),
-        10,
-      );
+      left = Math.max(lastFocused.left + (lastFocused.width - 420 - 10), 10);
     }
     const popup = await getPopup(popupId);
     let timeout = 1000;
@@ -112,12 +105,12 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         width: 420,
         height: 620,
       };
-      const newPopup = await chrome.windows
-        .create(options)
+      const newPopup = await chrome.windows.create(options);
       popupId = newPopup.id;
     }
     setTimeout(() => {
-      void chrome.runtime.sendMessage({ // send new message to poup. We do not await a response. Instead we listen for a new message from popup
+      void chrome.runtime.sendMessage({
+        // send new message to poup. We do not await a response. Instead we listen for a new message from popup
         origin: 'ssp-background',
         data: request,
         // data: {

diff --git a/public/scripts/contentscript.js b/public/scripts/contentscript.js
@@ -10,10 +10,14 @@ async function request(details) {
   }
 }
 
-window.addEventListener('fromPageEvent', async function (event) {
-  // console.log(event)
-  const result = await request(event.detail);
-  // console.log(result);
-  const eventB = new CustomEvent('fromContentScript', { detail: result });
-  window.dispatchEvent(eventB);
-}, false);
+window.addEventListener(
+  'fromPageEvent',
+  async function (event) {
+    // console.log(event)
+    const result = await request(event.detail);
+    // console.log(result);
+    const eventB = new CustomEvent('fromContentScript', { detail: result });
+    window.dispatchEvent(eventB);
+  },
+  false,
+);
diff --git a/public/scripts/inpage.js b/public/scripts/inpage.js
@@ -5,6 +5,7 @@ async function request(method, params) {
   };
   const event = new CustomEvent('fromPageEvent', { detail: message });
   window.dispatchEvent(event);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const response = await new Promise((resolve, reject) => {
     window.addEventListener(
       'fromContentScript',

diff --git a/src/components/AddressContainer/AddressContainer.tsx b/src/components/AddressContainer/AddressContainer.tsx
@@ -4,13 +4,21 @@ const { Paragraph, Text } = Typography;
 
 function AddressContainer() {
   const { activeChain } = useAppSelector((state) => state.sspState);
-  const { wallets, walletInUse } = useAppSelector((state) => state[activeChain]);
+  const { wallets, walletInUse } = useAppSelector(
+    (state) => state[activeChain],
+  );
 
   return (
     <>
-      <Paragraph copyable={{ text: wallets[walletInUse].address }} className="copyableAddress">
+      <Paragraph
+        copyable={{ text: wallets[walletInUse].address }}
+        className="copyableAddress"
+      >
         <Text>
-          {wallets[walletInUse].address.substring(0, 7)}...{wallets[walletInUse].address.substring(wallets[walletInUse].address.length - 6)}
+          {wallets[walletInUse].address.substring(0, 7)}...
+          {wallets[walletInUse].address.substring(
+            wallets[walletInUse].address.length - 6,
+          )}
         </Text>
       </Paragraph>
     </>

diff --git a/src/components/Contacts/ContactsTable.tsx b/src/components/Contacts/ContactsTable.tsx
@@ -65,7 +65,7 @@ function ContactsTable() {
   // on chain change and on load, sort contacts and set it
   useEffect(() => {
     console.log(contacts[activeChain]);
-    const contactsCopy = [...contacts[activeChain]] || [];
+    const contactsCopy = [...contacts[activeChain]];
     const sortedContacts = contactsCopy.sort((a, b) => {
       if (a.name > b.name) return 1;
       else if (a.name < b.name) return -1;

diff --git a/src/components/Contacts/ManageContact.tsx b/src/components/Contacts/ManageContact.tsx
@@ -92,7 +92,11 @@ function ManageContact(props: {
     <>
       {contextHolder}
       <Modal
-        title={editedContact.id > -1 ? t('home:contacts.edit_contact') : t('home:contacts.add_contact')}
+        title={
+          editedContact.id > -1
+            ? t('home:contacts.edit_contact')
+            : t('home:contacts.add_contact')
+        }
         open={true}
         onCancel={handleNotOk}
         style={{ textAlign: 'center', top: 60, width: 200 }}

diff --git a/src/components/Headerbar/Headerbar.tsx b/src/components/Headerbar/Headerbar.tsx
@@ -23,7 +23,10 @@ function Headerbar({ headerTitle, navigateTo }: Props) {
               style={{ cursor: 'pointer' }}
             />
           </Col>
-          <Col span={16} style={{ fontSize: '16px', lineHeight: '36px', fontWeight: 'bold' }}>
+          <Col
+            span={16}
+            style={{ fontSize: '16px', lineHeight: '36px', fontWeight: 'bold' }}
+          >
             {headerTitle}
           </Col>
           <Col span={4} />

diff --git a/src/components/Key/Key.tsx b/src/components/Key/Key.tsx
@@ -222,7 +222,8 @@ function Key(props: { synchronised: (status: boolean) => void }) {
         void (async function () {
           await localForage.setItem('activeChain', identityChain);
         })();
-        setTimeout(() => { // timeout as we need to wait for activeChain to be switched back
+        setTimeout(() => {
+          // timeout as we need to wait for activeChain to be switched back
           setIsModalKeyOpen(false);
           synchronised(true);
         }, 100);

diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-misused-promises */
 import { Select } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useState } from 'react';

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -24,7 +24,12 @@ function Navigation() {
           shape="round"
           icon={<ArrowUpOutlined />}
           size={'large'}
-          onClick={() => navigate(blockchainConfig.chainType === 'evm' ? '/sendevm' : '/send', { state: { receiver: '' } })}
+          onClick={() =>
+            navigate(
+              blockchainConfig.chainType === 'evm' ? '/sendevm' : '/send',
+              { state: { receiver: '' } },
+            )
+          }
         >
           {t('home:navigation.send')}
         </Button>

diff --git a/src/components/NetworkFeeController/NetworkFeeController.tsx b/src/components/NetworkFeeController/NetworkFeeController.tsx
@@ -16,12 +16,9 @@ function NetworkFee() {
     if (globalThis.refreshIntervalNetworkFee) {
       clearInterval(globalThis.refreshIntervalNetworkFee);
     }
-    globalThis.refreshIntervalNetworkFee = setInterval(
-      () => {
-        obtainNetworkFees();
-      },
-      15 * 1000,
-    );
+    globalThis.refreshIntervalNetworkFee = setInterval(() => {
+      obtainNetworkFees();
+    }, 15 * 1000);
     return () => {
       if (globalThis.refreshIntervalNetworkFee) {
         clearInterval(globalThis.refreshIntervalNetworkFee);

diff --git a/src/components/Nodes/Nodes.tsx b/src/components/Nodes/Nodes.tsx
@@ -42,7 +42,7 @@ function Nodes() {
   const myNodes = wallets[walletInUse].nodes ?? [];
   const [nodeIdentityPK, setNodeIdentityPK] = useState('');
   const [collateralPrivKey, setCollateralPrivKey] = useState('');
-  const [collateralPublicKey, setCollateralPublicKey] = useState('')
+  const [collateralPublicKey, setCollateralPublicKey] = useState('');
   const [messageApi, contextHolder] = message.useMessage();
   const displayMessage = (type: NoticeType, content: string) => {
     void messageApi.open({
@@ -240,7 +240,12 @@ function Nodes() {
   return (
     <div>
       {contextHolder}
-      <PArewards redeemScript={redeemScript} collateralPrivKey={collateralPrivKey} collateralPubKey={collateralPublicKey} sspwid={sspwid} />
+      <PArewards
+        redeemScript={redeemScript}
+        collateralPrivKey={collateralPrivKey}
+        collateralPubKey={collateralPublicKey}
+        sspwid={sspwid}
+      />
       <NodesTable
         nodes={myNodes}
         chain={activeChain}