Merge pull request #16 from reef-chain/react-v18-update

chore: react v17 to v18
reef-chain · Dec 13, 2023 · a51ae96 · a51ae96
2 parents 7441af7 + 86c16e1
commit a51ae96
Show file tree

Hide file tree

Showing 6 changed files with 295 additions and 212 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,26 +1,23 @@
 {
   "env": {
-      "browser": true,
-      "es2021": true
+    "browser": true,
+    "es2021": true
   },
   "extends": [
-      "plugin:react/recommended",
-      "airbnb",
-      "plugin:@typescript-eslint/recommended"
+    "plugin:react/recommended",
+    "airbnb",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-      "ecmaFeatures": {
-          "jsx": true
-      },
-      "ecmaVersion": 12,
-      "sourceType": "module"
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
   },
-  "plugins": [
-      "react",
-      "@typescript-eslint",
-      "react-hooks"
-  ],
+  "plugins": ["react", "@typescript-eslint", "react-hooks", "jsx-a11y"],
   "rules": {
     "no-use-before-define": "off",
     "camelcase": "off",
@@ -34,7 +31,7 @@
     "@typescript-eslint/no-empty-function": "warn",
     "@typescript-eslint/no-use-before-define": ["error"],
     "@typescript-eslint/explicit-module-boundary-types": ["error"],
-    "react/jsx-filename-extension": [ "warn", {"extensions": [".tsx"]} ],
+    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
     "import/extensions": [
       "error",
       "ignorePackages",
@@ -57,7 +54,10 @@
     "import/prefer-default-export": "off",
     "react/prop-types": "off",
     "react/require-default-props": "off",
-    "import/no-extraneous-dependencies": ["warn", {"devDependencies": ["**/*.test.ts", "**/*.test.tsx"]}],
+    "import/no-extraneous-dependencies": [
+      "warn",
+      { "devDependencies": ["**/*.test.ts", "**/*.test.tsx"] }
+    ],
     "jsx-a11y/click-events-have-key-events": "off",
     "no-restricted-syntax": "off",
     "@typescript-eslint/no-explicit-any": ["off"]

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@fortawesome/free-regular-svg-icons": "^6.1.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@polkadot/extension-dapp": "^0.40.4",
     "@polkadot/react-identicon": "^0.86.4",
     "@reef-chain/evm-provider": "^2.0.0",
@@ -39,6 +40,7 @@
     "axios": "^0.21.4",
     "bignumber.js": "^9.0.2",
     "bootstrap": "^5.1.1",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "ethers": "^5.7.0",
     "process": "^0.11.10",
@@ -82,8 +84,8 @@
     "microbundle": "^0.14.2",
     "npm-run-all": "^4.1.5",
     "prettier": "2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "5.0.0",
     "tslib": "^2.4.0",
     "typescript": "^5.2.2",

diff --git a/src/components/AccountSelector/AccountSelector.tsx b/src/components/AccountSelector/AccountSelector.tsx
@@ -1,14 +1,14 @@
-import React, { useState, useMemo } from 'react';
-import Uik from '@reef-chain/ui-kit';
-import './AccountSelector.css';
-import { faGear } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Account } from '@reef-chain/ui-kit/dist/ui-kit/components/organisms/AccountSelector/AccountSelector';
-import { ReefSigner } from '../../state';
-import { toReefBalanceDisplay, trim } from '../../utils';
+import React, { useState, useMemo } from "react";
+import Uik from "@reef-chain/ui-kit";
+import "./AccountSelector.css";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Account } from "@reef-chain/ui-kit/dist/ui-kit/components/organisms/AccountSelector/AccountSelector";
+import { ReefSigner } from "../../state";
+import { toReefBalanceDisplay, trim } from "../../utils";
 
-export type Network = 'mainnet' | 'testnet';
-export type Language = 'en' | 'hi';
+export type Network = "mainnet" | "testnet";
+export type Language = "en" | "hi";
 
 interface AccountSelector {
   accounts: ReefSigner[];
@@ -33,20 +33,22 @@ export const AccountSelector = ({
   showBalance,
   availableNetworks,
 }: AccountSelector): JSX.Element => {
-  const name = selectedSigner ? selectedSigner.name : '';
+  const name = selectedSigner ? selectedSigner.name : "";
   const balance = toReefBalanceDisplay(selectedSigner?.balance);
 
   const [isOpen, setOpen] = useState(false);
 
   const getAccounts = useMemo(() => {
     const allAccounts: Account[] = [];
     accounts.map(async (acc) => {
-      const {
-        name, address, evmAddress, source,
-      } = acc;
+      const { name, address, evmAddress, source } = acc;
       const isEvmClaimed = await acc.signer.isClaimed();
       allAccounts.push({
-        name, address, evmAddress, source, isEvmClaimed,
+        name,
+        address,
+        evmAddress,
+        source,
+        isEvmClaimed,
       } as Account);
     });
     return allAccounts;
@@ -63,7 +65,9 @@ export const AccountSelector = ({
   }, [selectedSigner]);
 
   const select = (account): void => {
-    const acc = accounts.find((acc: ReefSigner) => acc.address === account.address);
+    const acc = accounts.find(
+      (acc: ReefSigner) => acc.address === account.address
+    );
     if (!acc) return;
 
     const index = accounts.indexOf(acc);
@@ -73,29 +77,34 @@ export const AccountSelector = ({
 
   return (
     <div className="account-selector-box--nav">
+      <div
+        className={`${
+          !balance.startsWith("-") ? "nav-account border-rad" : ""
+        } `}
+      >
+        {!balance.startsWith("-") ? (
+          <div className="my-auto mx-2 fs-6">
+            {isBalanceHidden ? (
+              <button
+                type="button"
+                aria-label="Hidden balance button"
+                className="nav-account__hidden-balance"
+                onClick={showBalance}
+              >
+                <div />
+                <div />
+                <div />
+                <div />
+                <div />
+              </button>
+            ) : (
+              <span className="nav-account__balance">{balance}</span>
+            )}
+          </div>
+        ) : (
+          <div />
+        )}
 
-      <div className={`${!balance.startsWith("-")?'nav-account border-rad':''} `}>
-        {!balance.startsWith("-")?<div className="my-auto mx-2 fs-6">
-          {
-          isBalanceHidden ? (
-            <button
-              type="button"
-              aria-label="Hidden balance button"
-              className="nav-account__hidden-balance"
-              onClick={showBalance}
-            >
-              <div />
-              <div />
-              <div />
-              <div />
-              <div />
-            </button>
-          ) : (
-            <span className="nav-account__balance">{ balance }</span>
-          )
-        }
-        </div>:<div></div>}
-
         <button
           type="button"
           className="nav-account__account"
@@ -124,7 +133,6 @@ export const AccountSelector = ({
       >
         <FontAwesomeIcon icon={faGear} />
       </button>
-
     </div>
   );
 };