Chore: bumping packages and setting up React-Testing-Library correctl…

…y for Namadillo (#1067)

* feat(namadillo): setting up tests correctly

* feat: adding rank with tests

* chore: bumping react version

* chore: removing namadillo webpack config

* chore: bumping vite version

* chore: bumping eslint version

* chore: bumping prettier eslint version

* chore: bumping react version

* chore: configuring jest with react-testing-library for Namadillo

* feat(namadillo): writing some tests for ValidatorCard

* chore: adding @typescript-eslint/no-require-imports rule

* fix: fixing references to theme.ts

* fix: fixing linting errors

* fix: fixing eslintrc project config

* fix: fixing build errors for namadillo / extension

* chore: keeping some types on root package.json

* chore: moving dev dependencies used in many packages / apps to project root

* feat: upgrading prettier

* refactor: removing empty arguments from catch

.prettierrc

@@ -4,5 +4,5 @@
   "semi": true,
   "singleQuote": false,
   "plugins": ["prettier-plugin-organize-imports"],
-  "experimentalTernaries": true,
+  "experimentalTernaries": true
 }

apps/extension/.eslintignore

@@ -1,3 +1,5 @@
 *.css
 *.svg
 webpack.config.js
+.eslintrc.js
+tsconfig.json

apps/extension/.eslintrc.js

@@ -3,7 +3,8 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 12,
     sourceType: "module",
-    project: [`${__dirname}/tsconfig.json`],
+    tsconfigRootDir: __dirname,
+    project: [`./tsconfig.json`],
   },
   overrides: [
     {

apps/extension/package.json

@@ -45,14 +45,13 @@
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
     "dompurify": "^3.0.2",
-    "framer-motion": "6.2.4",
+    "framer-motion": "^11.3.28",
     "io-ts": "^2.2.21",
     "js-sha256": "^0.10.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.0.0",
-    "typescript": "^5.1.3",
     "uuid": "^9.0.0",
     "webextension-polyfill": "^0.10.0",
     "zxcvbn": "^4.4.2"
@@ -61,46 +60,33 @@
     "@babel/plugin-transform-modules-commonjs": "^7.20.11",
     "@svgr/webpack": "^6.3.1",
     "@types/chrome": "^0.0.237",
-    "@types/dompurify": "^3.0.2",
     "@types/firefox-webext-browser": "^94.0.1",
-    "@types/jest": "^29.0.0",
-    "@types/node": "^18.7.14",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
     "@types/uuid": "^8.3.4",
     "@types/webextension-polyfill": "^0.10.6",
     "@types/zxcvbn": "^4.4.1",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "dotenv": "^16.0.3",
-    "eslint": "^8.49.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-import-resolver-typescript": "^3.5.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-react": "^7.33.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "fake-indexeddb": "^4.0.1",
     "file-loader": "^6.2.0",
-    "jest": "^29.0.1",
-    "jest-create-mock-instance": "^2.0.0",
-    "jest-environment-jsdom": "^29.3.1",
     "leb128": "^0.0.5",
     "merge-jsons-webpack-plugin": "^2.0.1",
-    "mockzilla": "^0.14.0",
-    "postcss": "^8.4.32",
     "postcss-loader": "^7.3.3",
     "postcss-preset-env": "^9.3.0",
     "remove-files-webpack-plugin": "^1.5.0",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.3",
     "tailwindcss": "^3.3.6",
-    "ts-jest": "^29.0.3",
     "ts-loader": "^9.3.1",
-    "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "web-ext": "^7.8.0",
+    "webpack": "^5.9.4",
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^4.10.0",
     "webpack-extension-reloader": "^1.1.4"
+  },
+  "peerDependencies": {
+    "postcss": "^8.4.32",
+    "typescript": "^5.5.4"
   }
 }

apps/extension/src/Approvals/ApproveSignArbitrary.tsx

@@ -84,7 +84,7 @@ export const ApproveSignArbitrary: React.FC<Props> = ({
     try {
       const parsed = JSON.parse(data);
       return JSON.stringify(parsed, null, 2);
-    } catch (_) {
+    } catch {
       // Not JSON, return raw data
       return data;
     }

apps/extension/src/Approvals/index.tsx

@@ -1,10 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { HashRouter } from "react-router-dom";
-
-import { getTheme } from "@namada/utils";
 import { RequesterProvider } from "services";
-import { ThemeProvider } from "styled-components";
 import { Approvals } from "./Approvals";
 
 import "@namada/components/src/base.css";
@@ -19,9 +16,7 @@ createRoot(container).render(
   <React.StrictMode>
     <HashRouter>
       <RequesterProvider>
-        <ThemeProvider theme={getTheme("dark")}>
-          <Approvals />
-        </ThemeProvider>
+        <Approvals />
       </RequesterProvider>
     </HashRouter>
   </React.StrictMode>

apps/extension/src/Setup/ImportAccount/SeedPhraseImport.tsx

@@ -68,7 +68,7 @@ export const SeedPhraseImport: React.FC<Props> = ({ onConfirm }) => {
   const isSubmitButtonDisabled =
     mnemonicType === MnemonicTypes.PrivateKey ?
       privateKey === "" || privateKeyError !== ""
-      : mnemonics.slice(0, mnemonicType).some((mnemonic) => !mnemonic);
+    : mnemonics.slice(0, mnemonicType).some((mnemonic) => !mnemonic);
 
   const onPaste = useCallback(
     (index: number, e: React.ClipboardEvent<HTMLInputElement>) => {
@@ -146,7 +146,7 @@ export const SeedPhraseImport: React.FC<Props> = ({ onConfirm }) => {
           setInvalidWordIndex(invalidWordIndex);
           typeof invalidWordIndex === "number" ?
             setMnemonicError(`Word #${invalidWordIndex + 1} is invalid!`)
-            : setMnemonicError(error);
+          : setMnemonicError(error);
         } else {
           setMnemonicError(error);
         }
@@ -162,7 +162,7 @@ export const SeedPhraseImport: React.FC<Props> = ({ onConfirm }) => {
   );
 
   const onShowPassphraseChange = useCallback(
-    (e) => {
+    (e: React.MouseEvent) => {
       e.preventDefault();
       if (!showPassphrase) {
         setPassphrase("");

apps/extension/src/services/requester.tsx

@@ -1,4 +1,10 @@
-import { createContext, useEffect, useState } from "react";
+import {
+  createContext,
+  FunctionComponent,
+  PropsWithChildren,
+  useEffect,
+  useState,
+} from "react";
 import browser from "webextension-polyfill";
 
 import { ExtensionKVStore } from "@namada/storage";
@@ -20,7 +26,9 @@ const messenger = new ExtensionMessenger();
 
 export const RequesterContext = createContext<ExtensionRequester | null>(null);
 
-export const RequesterProvider: React.FC = ({ children }) => {
+export const RequesterProvider: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
   const [requester, setRequester] = useState<ExtensionRequester>();
 
   useEffect(() => {
@@ -34,11 +42,11 @@ export const RequesterProvider: React.FC = ({ children }) => {
 
   return (
     <>
-      {requester ? (
+      {requester ?
         <RequesterContext.Provider value={requester}>
           {children}
         </RequesterContext.Provider>
-      ) : null}
+      : null}
     </>
   );
 };

apps/extension/src/storage/VaultStorage.ts

@@ -12,7 +12,7 @@ const Uint8ArrayCodec = new t.Type<Uint8Array, Uint8Array, unknown>(
     try {
       const a = Array.from(u as Uint8Array);
       return t.success(Uint8Array.from(a));
-    } catch (e) {
+    } catch {
       return t.failure(u, c);
     }
   },

apps/extension/tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
     "../../packages/components/src/**/*.{js,ts,jsx,tsx}",
   ],
-  presets: [require("@namada/components/src/theme.js")],
+  presets: [require("@namada/components/src/theme")],
   theme: {
     extend: {},
   },

apps/faucet/package.json

@@ -20,37 +20,30 @@
     "buffer": "^6.0.3",
     "dompurify": "^3.0.2",
     "node-forge": "^1.3.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-router-dom": "^6.0.0",
-    "styled-components": "^5.3.5",
-    "typescript": "^5.1.3"
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.20.11",
     "@svgr/webpack": "^6.3.1",
-    "@types/dompurify": "^3.0.2",
     "@types/node-forge": "^1.3.6",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.26",
     "dotenv": "^16.0.3",
-    "eslint": "^8.49.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-import-resolver-typescript": "^3.5.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-react": "^7.33.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "local-cors-proxy": "^1.1.0",
-    "postcss": "^8.4.33",
     "postcss-loader": "^8.1.0",
     "postcss-preset-env": "^9.3.0",
     "tailwindcss": "^3.4.1",
     "ts-loader": "^9.3.1",
-    "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript-plugin-styled-components": "^2.0.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
+  },
+  "peerDependencies": {
+    "postcss": "^8.4.32",
+    "typescript": "^5.5.4"
   }
 }

apps/faucet/src/App/Common/Faq.components.tsx

@@ -1,5 +1,5 @@
 import { Text } from "@namada/components";
-import React from "react";
+import React, { FunctionComponent, PropsWithChildren } from "react";
 import styled, { css, keyframes } from "styled-components";
 
 export const FaqContainer = styled.div`
@@ -42,17 +42,18 @@ export const FaqDropdownContent = styled.div<{ isOpen: boolean | null }>`
   overflow: hidden; /* Ensure content doesn't overflow during animation */
   margin-top: 8px;
   ${({ isOpen }) => {
-    const toggleAnimation = isOpen
-      ? css`
+    const toggleAnimation =
+      isOpen ?
+        css`
           max-height: 200px;
           animation: ${expand} 0.35s ease-out;
         `
       : css`
           max-height: 0px;
           animation: ${collapse} 0.35s ease-out;
         `;
-    return isOpen === null
-      ? css`
+    return isOpen === null ?
+        css`
           max-height: 0px;
         `
       : toggleAnimation;
@@ -66,7 +67,9 @@ export const DropDownTitle = styled.div`
   align-items: start;
 `;
 
-export const DropDownTitleText: React.FC = ({ children }) => {
+export const DropDownTitleText: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
   return (
     <div
       style={{
@@ -85,8 +88,9 @@ const FaqUrlStyle = styled.a`
   }
 `;
 
-interface FaqUrlProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {}
-export const FaqUrl: React.FC<FaqUrlProps> = ({ ...props }) => {
+export const FaqUrl: FunctionComponent<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+> = ({ ...props }) => {
   // prevent onClick from bubbling up to parent
   return <FaqUrlStyle onClick={(e) => e.stopPropagation()} {...props} />;
 };
@@ -109,8 +113,9 @@ const reverseRotateAnimation = keyframes`
 export const PlusIcon = styled.img<{ isOpen: boolean | null }>`
   width: 24px;
   ${({ isOpen }) => {
-    const rotateAnimationCss = isOpen
-      ? css`
+    const rotateAnimationCss =
+      isOpen ?
+        css`
           animation: ${rotateAnimation} 0.2s ease-in-out forwards;
         `
       : css`

apps/faucet/src/App/SettingsForm.tsx

@@ -24,7 +24,7 @@ export const SettingsForm: React.FC = () => {
     try {
       new URL(url);
       setIsFormValid(true);
-    } catch (_) {
+    } catch {
       setIsFormValid(false);
     }
   };

apps/faucet/src/styled.d.ts

@@ -1,10 +1,10 @@
-import "styled-components";
 import { DesignConfiguration } from "@namada/utils";
+import "styled-components";
 interface IPalette {
   main: string;
   contrastText: string;
 }
 declare module "styled-components" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  // eslint-disable-next-line
   export interface DefaultTheme extends DesignConfiguration {}
 }

apps/faucet/tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
     "../../packages/components/src/**/*.{js,ts,jsx,tsx}",
   ],
-  presets: [require("@namada/components/src/theme.js")],
+  presets: [require("@namada/components/src/theme")],
   theme: {
     extend: {},
   },

apps/faucet/webpack.config.js

@@ -139,6 +139,7 @@ module.exports = {
       crypto: require.resolve("crypto-browserify"),
       stream: require.resolve("stream-browserify"),
       path: require.resolve("path-browserify"),
+      vm: require.resolve("vm-browserify"),
     },
     plugins: [
       new TsconfigPathsPlugin({

apps/namadillo/jest.config.ts

@@ -1,10 +1,17 @@
-import type { Config } from "@jest/types";
-// Sync object
-const config: Config.InitialOptions = {
-  verbose: true,
-  transform: {
-    "^.+\\.tsx?$": "ts-jest",
-  },
+import { createDefaultPreset, pathsToModuleNameMapper } from "ts-jest";
+import { compilerOptions } from "../../tsconfig.base.json";
+
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  ...createDefaultPreset(),
+  roots: ["src"],
+  displayName: "Namadillo",
+  testEnvironment: "jsdom",
   modulePathIgnorePatterns: ["e2e-tests"],
+  moduleDirectories: ["src", "node_modules"],
+  verbose: true,
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
+    prefix: "<rootDir>/src/",
+  }),
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
 };
-export default config;