feat: wallet rpc examples

.github/workflows/ci.yaml

@@ -6,56 +6,56 @@ on:
       - main
   pull_request:
     branches:
-      - '**'
+      - "**"
 
 jobs:
-    build:
-        name: Build
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
-              with:
-                cache: yarn
-                node-version: '18'
-            - name: Install deps
-              run: yarn install --frozen-lockfile
-            - name: Build
-              run: yarn build
-            - name: Lint
-              run: yarn run lint
-            - name: Tests
-              run: yarn run test
-
-    maybe-release:
-        name: release
-        runs-on: ubuntu-latest
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-        steps:
-            - uses: google-github-actions/release-please-action@v3
-              id: release
-              with:
-                release-type: node
-                package-name: release-please-action
-                changelog-types: '[{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"chore","section":"Miscellaneous","hidden":true}]'
-            
-            - uses: actions/checkout@v3
-              if: ${{ steps.release.outputs.release_created }}
-            
-            - uses: actions/setup-node@v3
-              with:
-                cache: 'yarn'
-                node-version: 18
-                registry-url: 'https://registry.npmjs.org'
-              if: ${{ steps.release.outputs.release_created }}
-            
-            - run: yarn install --frozen-lockfile
-              if: ${{ steps.release.outputs.release_created }}
-            
-            - run: yarn build
-              if: ${{ steps.release.outputs.release_created }}
-
-            - run: yarn publish --access public
-              env:
-                NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-              if: ${{ steps.release.outputs.release_created }}
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: "18"
+      - name: Install deps
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn build
+      - name: Lint
+        run: yarn run lint
+      - name: Tests
+        run: yarn run test
+
+  maybe-release:
+    name: release
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        id: release
+        with:
+          release-type: node
+          package-name: release-please-action
+          changelog-types: '[{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"chore","section":"Miscellaneous","hidden":true}]'
+
+      - uses: actions/checkout@v3
+        if: ${{ steps.release.outputs.release_created }}
+
+      - uses: actions/setup-node@v3
+        with:
+          cache: "yarn"
+          node-version: 18
+          registry-url: "https://registry.npmjs.org"
+        if: ${{ steps.release.outputs.release_created }}
+
+      - run: yarn install --frozen-lockfile
+        if: ${{ steps.release.outputs.release_created }}
+
+      - run: yarn build
+        if: ${{ steps.release.outputs.release_created }}
+
+      - run: yarn publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.release.outputs.release_created }}

.github/workflows/docs.yml

@@ -43,7 +43,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload docs
-          path: 'packages/web3-plugin-wallet-rpc/docs'
+          path: "packages/web3-plugin-wallet-rpc/docs"
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

package.json

@@ -21,10 +21,11 @@
   ],
   "packageManager": "[email protected]",
   "scripts": {
-    "lint": "cd packages/web3-plugin-wallet-rpc && yarn lint",
     "build": "cd packages/web3-plugin-wallet-rpc && yarn build",
     "build:docs": "cd packages/web3-plugin-wallet-rpc && yarn build:docs",
     "test": "cd packages/web3-plugin-wallet-rpc && yarn test",
+    "lint": "yarn lint:plugin && yarn lint:example",
+    "lint:plugin": "cd packages/web3-plugin-wallet-rpc && yarn lint",
     "lint:example": "cd packages/example-react-app && yarn lint",
     "start:example": "cd packages/example-react-app && yarn start"
   }

packages/example-react-app/package.json

@@ -8,22 +8,24 @@
   ],
   "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": {
+    "@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}'"
+    "lint": "eslint 'src/**/*.{js,ts,tsx}'"
   },
   "eslintConfig": {
     "extends": [

packages/example-react-app/public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

packages/example-react-app/src/App.tsx

@@ -1,13 +1,12 @@
 import { useContext, useEffect, useState } from "react";
 import type { ProviderChainId, providers } from "web3";
 
+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";
 
-import Accounts from "./Accounts";
-import ProviderButton from "./ProviderButton";
-import WalletRpcPlugComponent from "./WalletRpcPlugComponent";
-
 function App() {
   const web3Context: IWeb3Context = useContext(Web3Context);
 
@@ -58,7 +57,7 @@ function App() {
                   <ProviderButton provider={provider}></ProviderButton>
                 </div>
               );
-            }
+            },
           )}
         </>
       ) : (
@@ -79,18 +78,23 @@ function App() {
                       <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 />

packages/example-react-app/src/components/AccountDetail.tsx

@@ -0,0 +1,51 @@
+import {
+  type MutableRefObject,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import { type IWeb3Context, Web3Context } from "../web3/Web3Context";
+
+export function AccountDetail({ address }: { address: string }) {
+  const web3Context: IWeb3Context = useContext(Web3Context);
+
+  const [balance, setBalance] = useState<number>(NaN);
+  const subscriptionId: MutableRefObject<string | undefined> =
+    useRef(undefined);
+
+  async function updateBalance(): Promise<void> {
+    const newBalance = await web3Context.web3.eth.getBalance(address);
+
+    setBalance(parseFloat(web3Context.web3.utils.fromWei(newBalance, "ether")));
+  }
+
+  useEffect(() => {
+    async function subscribeToNewBlockHeaders() {
+      const newBlockSubscription =
+        await web3Context.web3.eth.subscribe("newBlockHeaders");
+
+      subscriptionId.current = newBlockSubscription.id;
+
+      newBlockSubscription.on("data", () => {
+        void updateBalance();
+      });
+    }
+
+    void subscribeToNewBlockHeaders();
+
+    return () => {
+      void web3Context.web3.eth.subscriptionManager.unsubscribe(
+        ({ id }) => subscriptionId.current === id,
+      );
+    };
+  }, []);
+
+  return (
+    <>
+      <div>{address}</div>
+      <div>Balance in native token: {`${balance}`}</div>
+    </>
+  );
+}