frontend/formatting: move eslint formatting rules to prettier

Eslint formatting rules are deprecated (see
https://eslint.org/blog/2023/10/deprecating-formatting-rules/ ).

This commit configures the prettier plugin and moves the formatting
rules in the new .prettierrc file.

Author: Beerosagos

frontends/web/.eslintrc.json

@@ -12,28 +12,12 @@
     }
   },
   "rules": {
-    "brace-style": ["error", "1tbs"],
-    "comma-spacing": ["error", { "before": false, "after": true }],
+    "prettier/prettier": "error",
     "curly": "error",
-    "indent": ["error", 2, { "SwitchCase": 0 }],
     "jsx-a11y/anchor-is-valid": 0,
-    "jsx-a11y/alt-text" : 0,
-    "jsx-quotes": ["error", "prefer-double"],
-    "keyword-spacing": "error",
+    "jsx-a11y/alt-text": 0,
     "eqeqeq": "error",
-    "no-multi-spaces": "error",
-    "no-trailing-spaces": "error",
-    "object-curly-spacing": ["error", "always"],
-    "quotes": ["error", "single"],
-    "semi": "error",
-    "space-before-blocks": ["error", "always"],
-    "space-in-parens": ["error", "never"],
-    "no-extra-semi": "error",
-    "@typescript-eslint/type-annotation-spacing": "error",
-    "arrow-spacing": "error",
-    "space-infix-ops": "error",
     "react/no-unused-prop-types": "error",
-    "react/jsx-equals-spacing": ["error", "never"],
     "react/react-in-jsx-scope": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "no-case-declarations": "off",
@@ -48,14 +32,9 @@
     "react/display-name": "off",
     "react-hooks/exhaustive-deps": "error",
     "@typescript-eslint/ban-ts-comment": "off",
-    "no-async-promise-executor": "off",
-    "react/jsx-wrap-multilines": ["error", {
-      "arrow": "parens-new-line",
-      "assignment": "parens-new-line",
-      "condition": "parens-new-line",
-      "logical": "parens-new-line"
-    }]
+    "no-async-promise-executor": "off"
   },
+  "plugins": ["prettier"],
   "overrides": [
     {
       "files": ["**/*.ts?(x)"],
@@ -74,7 +53,7 @@
     {
       "files": ["**/*.test.ts?(x)"],
       "rules": {
-        "import/first": 0
+        "import/first": "off"
       }
     }
   ]

frontends/web/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "auto",
+  "quoteProps": "as-needed"
+}

frontends/web/package-lock.json

@@ -13,6 +13,7 @@
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
@@ -26,9 +27,9 @@
     "vitest": "^2.1.4"
   },
   "dependencies": {
+    "@reown/walletkit": "1.2.0",
     "@walletconnect/jsonrpc-types": "1.0.4",
     "@walletconnect/types": "2.17.2",
-    "@reown/walletkit": "1.2.0",
     "flag-icons": "7.2.3",
     "i18next": "23.11.5",
     "lightweight-charts": "4.1.4",