From eda6dc429471a390cb863981b6db0b9df98a6424 Mon Sep 17 00:00:00 2001 From: Dan Forbes Date: Wed, 23 Oct 2024 14:46:00 -0700 Subject: [PATCH] feat: wallet rpc examples --- .github/workflows/ci.yaml | 102 +++++++++--------- .github/workflows/docs.yml | 2 +- package.json | 3 +- packages/example-react-app/package.json | 18 ++-- packages/example-react-app/public/index.html | 2 +- .../example-react-app/src/AccountDetail.tsx | 56 ---------- packages/example-react-app/src/App.tsx | 20 ++-- .../example-react-app/src/ProviderButton.tsx | 18 ---- .../src/WalletRpcPlugComponent.tsx | 19 ---- .../src/components/AccountDetail.tsx | 51 +++++++++ .../src/{ => components}/Accounts.tsx | 21 ++-- .../src/{ => components}/ProviderButton.css | 0 .../src/components/ProviderButton.tsx | 25 +++++ packages/example-react-app/src/index.tsx | 7 +- .../wallet-components/SwitchEthereumChain.tsx | 40 +++++++ .../src/web3/AccountContext.tsx | 43 +++++--- .../src/web3/Web3Context.tsx | 65 ++++++----- .../src/web3/useProviders.ts | 32 ++++-- packages/example-react-app/tsconfig.json | 10 +- packages/web3-plugin-wallet-rpc/tsconfig.json | 48 ++++----- 20 files changed, 319 insertions(+), 263 deletions(-) delete mode 100644 packages/example-react-app/src/AccountDetail.tsx delete mode 100644 packages/example-react-app/src/ProviderButton.tsx delete mode 100644 packages/example-react-app/src/WalletRpcPlugComponent.tsx create mode 100644 packages/example-react-app/src/components/AccountDetail.tsx rename packages/example-react-app/src/{ => components}/Accounts.tsx (56%) rename packages/example-react-app/src/{ => components}/ProviderButton.css (100%) create mode 100644 packages/example-react-app/src/components/ProviderButton.tsx create mode 100644 packages/example-react-app/src/wallet-components/SwitchEthereumChain.tsx diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index f77bc21..8109184 100644 --- a/.github/workflows/ci.yaml +++ b/.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 }} \ No newline at end of file + 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 }} diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 4c4cd73..56198b3 100644 --- a/.github/workflows/docs.yml +++ b/.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 diff --git a/package.json b/package.json index 0025e9c..3ac7a8a 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,11 @@ ], "packageManager": "yarn@1.22.15", "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" } diff --git a/packages/example-react-app/package.json b/packages/example-react-app/package.json index 0d814c7..f3374c6 100644 --- a/packages/example-react-app/package.json +++ b/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": [ diff --git a/packages/example-react-app/public/index.html b/packages/example-react-app/public/index.html index 2fd78ab..32db1f5 100644 --- a/packages/example-react-app/public/index.html +++ b/packages/example-react-app/public/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/example-react-app/src/AccountDetail.tsx b/packages/example-react-app/src/AccountDetail.tsx deleted file mode 100644 index 8bd1299..0000000 --- a/packages/example-react-app/src/AccountDetail.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { - type MutableRefObject, - useContext, - useEffect, - useRef, - useState, -} from "react"; - -import { type IWeb3Context, Web3Context } from "./web3/Web3Context"; - -function AccountDetail({ address }: { address: string }) { - const web3Context: IWeb3Context = useContext(Web3Context); - - const [balance, setBalance] = useState(NaN); - const subscriptionId: MutableRefObject = - useRef(undefined); - - // update balance - useEffect(() => { - updateBalance(); - - if (!web3Context.web3.subscriptionManager.supportsSubscriptions()) { - return; - } - - 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 - ); - }; - }); - - function updateBalance(): void { - web3Context.web3.eth.getBalance(address).then((balance: bigint) => { - setBalance(parseFloat(web3Context.web3.utils.fromWei(balance, "ether"))); - }); - } - - return ( - <> -
{address}
-
Balance in native token: {`${balance}`}
- - ); -} - -export default AccountDetail; diff --git a/packages/example-react-app/src/App.tsx b/packages/example-react-app/src/App.tsx index d024860..293ca1a 100644 --- a/packages/example-react-app/src/App.tsx +++ b/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() { ); - } + }, )} ) : ( @@ -79,18 +78,23 @@ function App() { ); - } + }, )} ) : null} +

Network Details

Chain ID: {`${chainId}`}
Network ID: {`${networkId}`}
+ - + - +

Wallet RPC Methods

+
+ +
)}
diff --git a/packages/example-react-app/src/ProviderButton.tsx b/packages/example-react-app/src/ProviderButton.tsx deleted file mode 100644 index e913ed0..0000000 --- a/packages/example-react-app/src/ProviderButton.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { useContext } from "react"; -import { EIP6963ProviderDetail } from "web3"; - -import "./ProviderButton.css"; -import { IWeb3Context, Web3Context } from "./web3/Web3Context"; - -function ProviderButton({ provider }: { provider: EIP6963ProviderDetail }) { - const web3Context: IWeb3Context = useContext(Web3Context); - - return ( - - ); -} - -export default ProviderButton; diff --git a/packages/example-react-app/src/WalletRpcPlugComponent.tsx b/packages/example-react-app/src/WalletRpcPlugComponent.tsx deleted file mode 100644 index 2b5cd07..0000000 --- a/packages/example-react-app/src/WalletRpcPlugComponent.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { useContext } from "react"; -import { Web3Context } from "./web3/Web3Context"; - -function WalletRpcPlugComponent() { - const { web3 } = useContext(Web3Context); - - return ( -
- - -
- ); -} - -export default WalletRpcPlugComponent; diff --git a/packages/example-react-app/src/components/AccountDetail.tsx b/packages/example-react-app/src/components/AccountDetail.tsx new file mode 100644 index 0000000..0a6ca8b --- /dev/null +++ b/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(NaN); + const subscriptionId: MutableRefObject = + useRef(undefined); + + async function updateBalance(): Promise { + 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 ( + <> +
{address}
+
Balance in native token: {`${balance}`}
+ + ); +} diff --git a/packages/example-react-app/src/Accounts.tsx b/packages/example-react-app/src/components/Accounts.tsx similarity index 56% rename from packages/example-react-app/src/Accounts.tsx rename to packages/example-react-app/src/components/Accounts.tsx index 39782c6..51e0eae 100644 --- a/packages/example-react-app/src/Accounts.tsx +++ b/packages/example-react-app/src/components/Accounts.tsx @@ -1,8 +1,10 @@ import { useContext } from "react"; -import { AccountContext, type IAccountContext } from "./web3/AccountContext"; -import AccountDetail from "./AccountDetail"; -function Accounts() { +import { AccountContext, type IAccountContext } from "../web3/AccountContext"; + +import { AccountDetail } from "./AccountDetail"; + +export function Accounts() { const accountContext: IAccountContext = useContext(AccountContext); return ( @@ -10,23 +12,18 @@ function Accounts() {

Accounts

{accountContext.selectedAccount === undefined ? ( - ) : ( <>

Selected Account

- + {accountContext.accounts.length > 1 ? ( <>

Other Accounts

{accountContext.accounts.slice(1).map((account: string) => ( - + ))} ) : null} @@ -36,5 +33,3 @@ function Accounts() { ); } - -export default Accounts; diff --git a/packages/example-react-app/src/ProviderButton.css b/packages/example-react-app/src/components/ProviderButton.css similarity index 100% rename from packages/example-react-app/src/ProviderButton.css rename to packages/example-react-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 new file mode 100644 index 0000000..a47e6d1 --- /dev/null +++ b/packages/example-react-app/src/components/ProviderButton.tsx @@ -0,0 +1,25 @@ +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 ( + + ); +} diff --git a/packages/example-react-app/src/index.tsx b/packages/example-react-app/src/index.tsx index 9fa0d3f..c2277bb 100644 --- a/packages/example-react-app/src/index.tsx +++ b/packages/example-react-app/src/index.tsx @@ -1,15 +1,16 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import App from "./App"; + import { Web3Provider } from "./web3/Web3Context"; +import App from "./App"; const root = ReactDOM.createRoot( - document.getElementById("root") as HTMLElement + document.getElementById("root") as HTMLElement, ); root.render( - + , ); diff --git a/packages/example-react-app/src/wallet-components/SwitchEthereumChain.tsx b/packages/example-react-app/src/wallet-components/SwitchEthereumChain.tsx new file mode 100644 index 0000000..b823069 --- /dev/null +++ b/packages/example-react-app/src/wallet-components/SwitchEthereumChain.tsx @@ -0,0 +1,40 @@ +import { useContext, useState } from "react"; + +import { Web3Context } from "../web3/Web3Context"; + +function SwitchChainButton({ chainId }: { chainId: number }) { + const { web3 } = useContext(Web3Context); + const [error, setError] = useState(undefined); + + const handleClick = () => { + try { + void web3.walletRpc.switchEthereumChain(chainId); + } catch (e) { + // eslint-disable-next-line no-console + console.error(e); + + if (e instanceof Error) { + setError(e); + } + } + }; + + return ( + <> + + {error &&
{error.message}
} + + ); +} + +export function SwitchEthereumChain() { + return ( +
+ + + +
+ ); +} diff --git a/packages/example-react-app/src/web3/AccountContext.tsx b/packages/example-react-app/src/web3/AccountContext.tsx index 6cceaf6..495b1e9 100644 --- a/packages/example-react-app/src/web3/AccountContext.tsx +++ b/packages/example-react-app/src/web3/AccountContext.tsx @@ -3,16 +3,17 @@ import { type ReactNode, useContext, useEffect, + useMemo, useState, } from "react"; import { type IWeb3Context, Web3Context } from "./Web3Context"; -export interface IAccountContext { +export type IAccountContext = { accounts: string[]; selectedAccount: string | undefined; requestAccounts: () => void; -} +}; const defaultContext: IAccountContext = { accounts: [], @@ -27,7 +28,7 @@ export const AccountContext = createContext(defaultContext); * @param children components that may require Web3 account * @returns React component that provides a context for managing and interacting with Web3 accounts */ -export const AccountProvider = ({ children }: { children: ReactNode }) => { +export function AccountProvider({ children }: { children: ReactNode }) { const web3Context: IWeb3Context = useContext(Web3Context); const [accounts, setAccounts] = useState([]); @@ -40,10 +41,19 @@ export const AccountProvider = ({ children }: { children: ReactNode }) => { return; } - web3Context.web3.eth.getAccounts().then(setAccounts); + web3Context.web3.eth + .getAccounts() + .then(setAccounts) + .catch((error) => { + // eslint-disable-next-line no-console + console.error(error); + }); + provider.provider.on("accountsChanged", setAccounts); - return () => + + return () => { provider.provider.removeListener("accountsChanged", setAccounts); + }; }, [web3Context.currentProvider, web3Context.web3.eth]); // update selected account @@ -56,18 +66,27 @@ export const AccountProvider = ({ children }: { children: ReactNode }) => { }, [accounts]); function requestAccounts() { - web3Context.web3.eth.requestAccounts().then(setAccounts); + web3Context.web3.eth + .requestAccounts() + .then(setAccounts) + .catch((error) => { + // eslint-disable-next-line no-console + console.error(error); + }); } - const accountContext: IAccountContext = { - accounts, - selectedAccount, - requestAccounts, - }; + const accountContext: IAccountContext = useMemo( + () => ({ + accounts, + selectedAccount, + requestAccounts, + }), + [accounts, selectedAccount, requestAccounts], + ); return ( {children} ); -}; +} diff --git a/packages/example-react-app/src/web3/Web3Context.tsx b/packages/example-react-app/src/web3/Web3Context.tsx index ae29467..cb06ad2 100644 --- a/packages/example-react-app/src/web3/Web3Context.tsx +++ b/packages/example-react-app/src/web3/Web3Context.tsx @@ -6,25 +6,26 @@ import { useMemo, useState, } from "react"; -import { providers, Web3 } from "web3"; +import type { EIP6963ProviderDetail } from "web3"; +import { Web3 } from "web3"; import { WalletRpcPlugin } from "web3-plugin-wallet-rpc"; + import { useProviders } from "./useProviders"; -export interface IWeb3Context { +export type IWeb3Context = { web3: Web3; - providers: providers.EIP6963ProviderDetail[]; - currentProvider: providers.EIP6963ProviderDetail | undefined; - setCurrentProvider: (provider: providers.EIP6963ProviderDetail) => void; -} + providers: EIP6963ProviderDetail[]; + currentProvider: EIP6963ProviderDetail | undefined; + setCurrentProvider: (provider: EIP6963ProviderDetail) => void; +}; const defaultContext: IWeb3Context = { web3: new Web3(), providers: [], currentProvider: undefined, - setCurrentProvider: function ( - provider: providers.EIP6963ProviderDetail - ): void { + setCurrentProvider(provider: EIP6963ProviderDetail): void { this.web3.setProvider(provider.provider); + this.currentProvider = provider; }, }; @@ -36,25 +37,29 @@ export const Web3Context = createContext(defaultContext); * @param children components that may require access to an instance of Web3.js * @returns React component that provides a context for interacting with a shared, managed instance of Web3.js */ -export const Web3Provider = ({ children }: { children: ReactNode }) => { +export function Web3Provider({ children }: { children: ReactNode }) { const web3: Web3 = useMemo(() => { - const web3 = new Web3(); - web3.registerPlugin(new WalletRpcPlugin()); - return web3; + const tempWeb3 = new Web3(); + tempWeb3.registerPlugin(new WalletRpcPlugin()); + + return tempWeb3; }, []); - const providers: providers.EIP6963ProviderDetail[] = useProviders(); + + const providers: EIP6963ProviderDetail[] = useProviders(); const [currentProvider, _setCurrentProvider] = useState< - providers.EIP6963ProviderDetail | undefined + EIP6963ProviderDetail | undefined >(undefined); const setCurrentProvider = useCallback( - (provider: providers.EIP6963ProviderDetail) => { + (provider: EIP6963ProviderDetail) => { web3.setProvider(provider.provider); + localStorage.setItem("provider", provider.info.rdns); + _setCurrentProvider(provider); }, - [web3] + [web3], ); // update provider with cached value from local storage on page load @@ -68,25 +73,27 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => { return; } - const targetProvider: providers.EIP6963ProviderDetail | undefined = - providers.find( - (provider: providers.EIP6963ProviderDetail) => - provider.info.rdns === cachedProvider - ); + const targetProvider: EIP6963ProviderDetail | undefined = providers.find( + (provider: EIP6963ProviderDetail) => + provider.info.rdns === cachedProvider, + ); if (targetProvider !== undefined) { setCurrentProvider(targetProvider); } }, [currentProvider, providers, setCurrentProvider]); - const web3Context: IWeb3Context = { - web3, - providers, - currentProvider, - setCurrentProvider, - }; + const web3Context = useMemo( + () => ({ + web3, + providers, + currentProvider, + setCurrentProvider, + }), + [web3, providers, currentProvider, setCurrentProvider], + ); return ( {children} ); -}; +} diff --git a/packages/example-react-app/src/web3/useProviders.ts b/packages/example-react-app/src/web3/useProviders.ts index 5c5d8d6..7ddd621 100644 --- a/packages/example-react-app/src/web3/useProviders.ts +++ b/packages/example-react-app/src/web3/useProviders.ts @@ -1,7 +1,12 @@ import { useSyncExternalStore } from "react"; -import { providers, Web3 } from "web3"; +import type { + EIP6963ProviderDetail, + EIP6963ProviderResponse, + EIP6963ProvidersMapUpdateEvent, +} from "web3"; +import { Web3, web3ProvidersMapUpdated } from "web3"; -let providerList: providers.EIP6963ProviderDetail[] = []; +let providerList: EIP6963ProviderDetail[] = []; /** * External store for subscribing to EIP-6963 providers @@ -10,30 +15,35 @@ let providerList: providers.EIP6963ProviderDetail[] = []; const providerStore = { getSnapshot: () => providerList, subscribe: (callback: () => void) => { - function setProviders(response: providers.EIP6963ProviderResponse) { + function setProviders(response: EIP6963ProviderResponse): void { providerList = []; - for (const [, provider] of response) { + + response.forEach((provider) => { providerList.push(provider); - } + }); callback(); } - Web3.requestEIP6963Providers().then(setProviders); + Web3.requestEIP6963Providers() + .then(setProviders) + .catch((error) => { + // eslint-disable-next-line no-console + console.error(error); + }); - function updateProviders( - providerEvent: providers.EIP6963ProvidersMapUpdateEvent, - ) { + function updateProviders(providerEvent: EIP6963ProvidersMapUpdateEvent) { setProviders(providerEvent.detail); } Web3.onNewProviderDiscovered(updateProviders); - return () => + return () => { window.removeEventListener( - providers.web3ProvidersMapUpdated as any, + web3ProvidersMapUpdated as any, updateProviders, ); + }; }, }; diff --git a/packages/example-react-app/tsconfig.json b/packages/example-react-app/tsconfig.json index eab4d9e..8df5389 100644 --- a/packages/example-react-app/tsconfig.json +++ b/packages/example-react-app/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es2020", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -20,7 +16,5 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ] + "include": ["src"] } diff --git a/packages/web3-plugin-wallet-rpc/tsconfig.json b/packages/web3-plugin-wallet-rpc/tsconfig.json index 694b50b..844eb27 100644 --- a/packages/web3-plugin-wallet-rpc/tsconfig.json +++ b/packages/web3-plugin-wallet-rpc/tsconfig.json @@ -1,25 +1,25 @@ { - "compilerOptions": { - "baseUrl": "./", - "resolveJsonModule": true, - "forceConsistentCasingInFileNames": true, - "target": "es2020", - "module": "commonjs", - "declaration": true, - "moduleResolution": "node", - "noFallthroughCasesInSwitch": true, - "noImplicitReturns": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "pretty": true, - "removeComments": true, - "sourceMap": true, - "declarationMap": true, - "strict": true, - "strictNullChecks": true, - "outDir": "lib", - "esModuleInterop": true - }, - "include": ["src", "test"], - "exclude": ["node_modules"] -} \ No newline at end of file + "compilerOptions": { + "baseUrl": "./", + "resolveJsonModule": true, + "forceConsistentCasingInFileNames": true, + "target": "es2020", + "module": "commonjs", + "declaration": true, + "moduleResolution": "node", + "noFallthroughCasesInSwitch": true, + "noImplicitReturns": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "pretty": true, + "removeComments": true, + "sourceMap": true, + "declarationMap": true, + "strict": true, + "strictNullChecks": true, + "outDir": "lib", + "esModuleInterop": true + }, + "include": ["src", "test"], + "exclude": ["node_modules"] +}