chore: configure prettier and eslint for react app

web3 · Oct 28, 2024 · f006531 · f006531
1 parent a1290bc
commit f006531
Show file tree

Hide file tree

Showing 31 changed files with 331 additions and 348 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,3 +1,9 @@
 {
-  "trailingComma": "all"
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 90,
+  "tabWidth": 2,
+  "endOfLine": "auto",
+  "bracketSpacing": true
 }
diff --git a/packages/example-react-app/.eslintrc.js b/packages/example-react-app/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: '@chainsafe/eslint-config/frontend-react',
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': 'off',
+  },
+};
diff --git a/packages/example-react-app/package.json b/packages/example-react-app/package.json
@@ -8,27 +8,25 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@types/node": "^16.18.108",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
-    "@types/uuid": "^10.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-scripts": "5.0.1",
-    "typescript": "5.3.x",
     "uuid": "^10.0.0",
     "web3": "^4.14.0",
-    "web3-eth": "^4.9.0",
     "web3-plugin-wallet-rpc": "*"
   },
+  "devDependencies": {
+    "@chainsafe/eslint-config": "^2.0.0",
+    "@types/node": "^16.18.108",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
+    "eslint": "8",
+    "react-scripts": "5.0.1",
+    "typescript": "5.3.x"
+  },
   "scripts": {
     "start": "react-scripts start",
-    "lint": "eslint 'src/**/*.{ts,tsx}'"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
+    "lint": "eslint src/**/*.{ts,tsx}"
   },
   "browserslist": {
     "production": [

diff --git a/packages/example-react-app/public/index.html b/packages/example-react-app/public/index.html
@@ -1,14 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web3.js Wallet RPC Methods Demonstration dApp"
-    />
+    <meta name="description" content="Web3.js Wallet RPC Methods Demonstration dApp" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/packages/example-react-app/src/Accounts.tsx b/packages/example-react-app/src/Accounts.tsx
diff --git a/packages/example-react-app/src/App.tsx b/packages/example-react-app/src/App.tsx
@@ -1,12 +1,11 @@
-import { useContext, useEffect, useState } from "react";
-import type { ProviderChainId, providers } from "web3";
+import { useContext, useEffect, useState } from 'react';
+import type { ProviderChainId, providers } from 'web3';
 
-import { AccountProvider } from "./web3/AccountContext";
-import { type IWeb3Context, Web3Context } from "./web3/Web3Context";
-
-import Accounts from "./Accounts";
-import ProviderButton from "./ProviderButton";
-import WalletRpcPlugComponent from "./WalletRpcPlugComponent";
+import { Accounts } from './components/Accounts';
+import { ProviderButton } from './components/ProviderButton';
+import { SwitchEthereumChain } from './wallet-components/SwitchEthereumChain';
+import { AccountProvider } from './web3/AccountContext';
+import { type IWeb3Context, Web3Context } from './web3/Web3Context';
 
 function App() {
   const web3Context: IWeb3Context = useContext(Web3Context);
@@ -36,70 +35,63 @@ function App() {
 
     web3Context.web3.eth.getChainId().then(updateChainId);
     web3Context.web3.eth.net.getId().then(setNetworkId);
-    provider.on("chainChanged", updateProviderIds);
-    return () => provider.removeListener("chainChanged", updateProviderIds);
+    provider.on('chainChanged', updateProviderIds);
+    return () => provider.removeListener('chainChanged', updateProviderIds);
   }, [web3Context.currentProvider, web3Context.web3.eth]);
 
   return (
     <main>
       <h1>Web3.js Wallet RPC Methods Demonstration dApp</h1>
-      <div>
-        This is a sample project that demonstrates using web3-plugin-wallet-rpc.
-      </div>
+      <div>This is a sample project that demonstrates using web3-plugin-wallet-rpc.</div>
       {!hasProviders ? (
         <h2>Install a Wallet</h2>
       ) : web3Context.currentProvider === undefined ? (
         <>
           <h2>Select a Provider</h2>
-          {web3Context.providers.map(
-            (provider: providers.EIP6963ProviderDetail) => {
-              return (
-                <div key={provider.info.uuid}>
-                  <ProviderButton provider={provider}></ProviderButton>
-                </div>
-              );
-            }
-          )}
+          {web3Context.providers.map((provider: providers.EIP6963ProviderDetail) => {
+            return (
+              <div key={provider.info.uuid}>
+                <ProviderButton provider={provider}></ProviderButton>
+              </div>
+            );
+          })}
         </>
       ) : (
         <>
           {web3Context.providers.length > 1 ? (
             <>
               <h2>Switch Provider</h2>
-              {web3Context.providers.map(
-                (provider: providers.EIP6963ProviderDetail) => {
-                  if (
-                    provider.info.uuid ===
-                    web3Context.currentProvider?.info.uuid
-                  ) {
-                    return null;
-                  }
-                  return (
-                    <div key={provider.info.uuid}>
-                      <ProviderButton provider={provider}></ProviderButton>
-                    </div>
-                  );
+              {web3Context.providers.map((provider: providers.EIP6963ProviderDetail) => {
+                if (provider.info.uuid === web3Context.currentProvider?.info.uuid) {
+                  return null;
                 }
-              )}
+                return (
+                  <div key={provider.info.uuid}>
+                    <ProviderButton provider={provider}></ProviderButton>
+                  </div>
+                );
+              })}
             </>
           ) : null}
+
           <h2>Network Details</h2>
           <div>Chain ID: {`${chainId}`}</div>
           <div>Network ID: {`${networkId}`}</div>
+
           <AccountProvider>
-            <Accounts></Accounts>
+            <Accounts />
           </AccountProvider>
 
-          <WalletRpcPlugComponent></WalletRpcPlugComponent>
+          <h2>Wallet RPC Methods</h2>
+          <div>
+            <SwitchEthereumChain />
+          </div>
         </>
       )}
       <br />
       <i>
-        This project was bootstrapped with{" "}
-        <a href="https://github.com/facebook/create-react-app">
-          Create React App
-        </a>
-        .
+        This project was bootstrapped with{' '}
+        <a href="https://github.com/facebook/create-react-app">Create React App</a>.
       </i>
     </main>
   );

diff --git a/packages/example-react-app/src/ProviderButton.tsx b/packages/example-react-app/src/ProviderButton.tsx
diff --git a/packages/example-react-app/src/WalletRpcPlugComponent.tsx b/packages/example-react-app/src/WalletRpcPlugComponent.tsx
diff --git a/...s/example-react-app/src/AccountDetail.tsx → ...eact-app/src/components/AccountDetail.tsx b/...s/example-react-app/src/AccountDetail.tsx → ...eact-app/src/components/AccountDetail.tsx
@@ -1,19 +1,12 @@
-import {
-  type MutableRefObject,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { type MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
 
-import { type IWeb3Context, Web3Context } from "./web3/Web3Context";
+import { type IWeb3Context, Web3Context } from '../web3/Web3Context';
 
-function AccountDetail({ address }: { address: string }) {
+export function AccountDetail({ address }: { address: string }) {
   const web3Context: IWeb3Context = useContext(Web3Context);
 
   const [balance, setBalance] = useState<number>(NaN);
-  const subscriptionId: MutableRefObject<string | undefined> =
-    useRef(undefined);
+  const subscriptionId: MutableRefObject<string | undefined> = useRef(undefined);
 
   // update balance
   useEffect(() => {
@@ -23,25 +16,24 @@ function AccountDetail({ address }: { address: string }) {
       return;
     }
 
-    web3Context.web3.eth
-      .subscribe("newBlockHeaders")
-      .then((newBlockSubscription) => {
-        subscriptionId.current = newBlockSubscription.id;
-        newBlockSubscription.on("data", () => {
-          updateBalance();
-        });
+    web3Context.web3.eth.subscribe('newBlockHeaders').then((newBlockSubscription) => {
+      subscriptionId.current = newBlockSubscription.id;
+
+      newBlockSubscription.on('data', () => {
+        updateBalance();
       });
+    });
 
     return () => {
       web3Context.web3.eth.subscriptionManager.unsubscribe(
-        ({ id }) => subscriptionId.current === id
+        ({ id }) => subscriptionId.current === id,
       );
     };
   });
 
   function updateBalance(): void {
     web3Context.web3.eth.getBalance(address).then((balance: bigint) => {
-      setBalance(parseFloat(web3Context.web3.utils.fromWei(balance, "ether")));
+      setBalance(parseFloat(web3Context.web3.utils.fromWei(balance, 'ether')));
     });
   }
 
@@ -52,5 +44,3 @@ function AccountDetail({ address }: { address: string }) {
     </>
   );
 }
-
-export default AccountDetail;
diff --git a/packages/example-react-app/src/components/Accounts.tsx b/packages/example-react-app/src/components/Accounts.tsx
@@ -0,0 +1,33 @@
+import { useContext } from 'react';
+
+import { AccountContext, type IAccountContext } from '../web3/AccountContext';
+
+import { AccountDetail } from './AccountDetail';
+
+export function Accounts() {
+  const accountContext: IAccountContext = useContext(AccountContext);
+
+  return (
+    <>
+      <h2>Accounts</h2>
+      <div>
+        {accountContext.selectedAccount === undefined ? (
+          <button onClick={accountContext.requestAccounts}>Connect Accounts</button>
+        ) : (
+          <>
+            <h3>Selected Account</h3>
+            <AccountDetail address={accountContext.selectedAccount} />
+            {accountContext.accounts.length > 1 ? (
+              <>
+                <h3>Other Accounts</h3>
+                {accountContext.accounts.slice(1).map((account: string) => (
+                  <AccountDetail address={account} key={account} />
+                ))}
+              </>
+            ) : null}
+          </>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/.../example-react-app/src/ProviderButton.css → ...act-app/src/components/ProviderButton.css b/.../example-react-app/src/ProviderButton.css → ...act-app/src/components/ProviderButton.css
diff --git a/packages/example-react-app/src/components/ProviderButton.tsx b/packages/example-react-app/src/components/ProviderButton.tsx
@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import type { EIP6963ProviderDetail } from 'web3';
+
+import type { IWeb3Context } from '../web3/Web3Context';
+import { Web3Context } from '../web3/Web3Context';
+
+import './ProviderButton.css';
+
+export function ProviderButton({ provider }: { provider: EIP6963ProviderDetail }) {
+  const web3Context: IWeb3Context = useContext(Web3Context);
+
+  return (
+    <button onClick={() => web3Context.setCurrentProvider(provider)}>
+      <img src={provider.info.icon} alt={provider.info.name} width="35" />
+      <span> {provider.info.name}</span>
+    </button>
+  );
+}