+
+
+Add the following code to `src/hooks/WalletProvider.tsx` to bundle the state and functions using `contextValue`:
+
+```tsx title="WalletProvider.tsx"
+const contextValue: WalletProviderContext = {
+ wallets,
+ selectedWallet: selectedWalletRdns === null ? null : wallets[selectedWalletRdns],
+ selectedAccount: selectedWalletRdns === null ? null : selectedAccountByWalletRdns[selectedWalletRdns],
+ errorMessage,
+ connectWallet,
+ disconnectWallet,
+ clearError,
+}
-In this step, you'll import the `MetaMaskContextProvider` in `/src/App.tsx` and wrap that component
-around the existing `Display`, `Navigation`, and `MetaMaskError` components.
+return (
+ Use of `useCallback`
++Both of the previous functions use `useCallback`. +It is used to memoize the `connectWallet` function, optimize performance, and prevent unnecessary re-renders. +It ensures the function instance remains consistent between renders if its dependencies are changed. + +For example, when using `disconnectWallet`, each time the `WalletProvider` component re-renders +without `useCallback`, a new instance of `disconnectWallet` is created. +This can cause unnecessary re-renders of child components that depend on this function. +By memoizing it with `useCallback`, React keeps the function instance consistent between renders, as +long as its dependencies (wallets and `selectedWalletRdns`) haven't changed, preventing unnecessary +re-renders of child components. + +Although `useCallback` is not strictly necessary, it demonstrates best practices. +Predicting how a context provider will be used or how the dapp might change or scale is difficult. +Using `useCallback` can improve performance in some cases by reducing unnecessary re-renders. +
+
-
-
-
- );
-};
+export const formatAddress = (addr: string) => {
+ const upperAfterLastTwo = addr.slice(0,2) + addr.slice(2)
+ return `${upperAfterLastTwo.substring(0, 5)}...${upperAfterLastTwo.substring(39)}`
+}
```
-Notice how `useMetaMask` de-structures its return value to get the items within `MetaMaskContextData`:
+Although `formatAddress` is the only function used, `formatBalance` and `formatChainAsNum` are
+added as useful utility functions.
+Explore [Viem formatters](https://viem.sh/docs/chains/formatters) or other libraries for additional
+formatting options.
-```ts
-const { wallet, hasProvider, isConnecting, connectMetaMask } = useMetaMask();
-```
+### 5. Wrap components with the context provider
-Also, the `formatAddress` function formats the wallet address for display purposes:
+With `WalletProvider.tsx` and `useWalletProvider.tsx`, the dapp can manage and access wallet-related
+state and functionality across various components.
+You can now wrap the entire dapp (the part that requires wallet connection and data) with a
+`WalletProvider` component.
-```ts
-{
- formatAddress(wallet.accounts[0]);
+Replace the code in `src/App.tsx` with the following:
+
+```tsx title="App.tsx"
+import "./App.css"
+import { WalletProvider } from "~/hooks/WalletProvider"
+// import { WalletList } from "./components/WalletList"
+// import { SelectedWallet } from "./components/SelectedWallet"
+// import { WalletError } from "./components/WalletError"
+
+function App() {
+ return (
+
-
- Vite + React & MetaMask
-
- {!hasProvider && (
- Install MetaMask
- )}
- {window.ethereum?.isMetaMask &&
- wallet.accounts.length < 1 && (
-
- )}
- {hasProvider && wallet.accounts.length > 0 && (
-
- {formatAddress(wallet.accounts[0])}
-
- )}
-
- +
Wallets Detected:
+
+ {
+ Object.keys(wallets).length > 0
+ ? Object.values(wallets).map((provider: EIP6963ProviderDetail) => (
+
+ ))
+ :
+
+ )
+}
```
-This should address any build errors in your `Navigation` component.
+This component checks if there are any detected wallets.
+If wallets are detected, it iterates over them and renders a button for each one.
-Other than using the new styling, the only thing this dapp has done differently than the local-state
-tutorial is display the user's `address` formatted inside a link once they're connected.
-Now that you have a place for connecting and showing the address, you could build out an entire
-profile component (side quest).
+- `Object.keys(wallets)` returns an array of the wallet keys (`rdns` values).
+ It is used to check the length.
+- `Object.values(wallets)` returns an array of the wallet objects.
+ It is used to map and render.
+- `wallet.info.rdns` is used as the key to ensure that each wallet button is uniquely identified.
-
+Uncomment the `WalletList` component in `src/App.tsx` and run the dapp.
+Something like the following displays:
-### 5. Display MetaMask data
+
-In the `Display` component, you won't call any functions that modify state; you'll read from
-`MetaMaskData`, a simple update.
+### 7. Display wallet data
-Update `/src/components/Display/Display.tsx` to the following:
+Add the following code to `src/components/SelectedWallet.tsx` to display data for the selected wallet:
-```tsx title="Display.tsx"
-import { useMetaMask } from "~/hooks/useMetaMask";
-import { formatChainAsNum } from "~/utils";
-import styles from "./Display.module.css";
+```tsx title="SelectedWallet.tsx" showLineNumbers {11-22}
+import { useWalletProvider } from "~/hooks/useWalletProvider"
+import { formatAddress } from "~/utils"
+import styles from "./SelectedWallet.module.css"
-export const Display = () => {
- const { wallet } = useMetaMask();
+export const SelectedWallet = () => {
+ const { selectedWallet, selectedAccount, disconnectWallet } = useWalletProvider()
return (
- there are no Announced Providers
+ }
+
- {wallet.accounts.length > 0 && (
+ <>
+
- );
-};
+ }
+
+ )
+}
```
-Notice how `useMetaMask` de-structures its return value to get only the `wallet` data:
+The code in lines 11-22 have conditional rendering, ensuring that the content inside is only
+displayed if `selectedAccount` is true. This ensures that detailed information about the selected wallet is only displayed when an active
+wallet is connected.
-```ts
-const { wallet } = useMetaMask();
-```
+You can display information about the wallet, and conditionally render anything related to the following:
+
+- Wallet address
+- Wallet balance
+- Chain ID or name
+- Other components that first need a connected wallet to work
-At this point, you can display `account`, `balance`, and `chainId` in the `Display` component:
+Uncomment the `SelectedWallet` component in `src/App.tsx` and run the dapp.
+When you connect to MetaMask, something like the following displays:
-
+
-### 6. Show MetaMask errors in the footer
+### 8. Display wallet connection errors
-If MetaMask errors or the user rejects a connection, you can display that error in the footer, or
-`MetaMaskError` component.
+Add the following code to `src/components/WalletError.tsx` to handle wallet connection errors:
-Update `/src/components/MetaMaskError/MetaMaskError.tsx` to the following:
+```tsx title="WalletError.tsx"
+import { useWalletProvider } from "~/hooks/useWalletProvider"
+import styles from "./WalletError.module.css"
-```tsx title="MetaMaskError.tsx"
-import { useMetaMask } from "~/hooks/useMetaMask";
-import styles from "./MetaMaskError.module.css";
+export const WalletError = () => {
+ const { errorMessage, clearError } = useWalletProvider()
+ const isError = !!errorMessage
-export const MetaMaskError = () => {
- const { error, errorMessage, clearError } = useMetaMask();
return (
- {selectedAccount ? "" : "No "}Wallet Selected
+ {selectedAccount && <> -Wallet Accounts: {wallet.accounts[0]}
- Wallet Balance: {wallet.balance}
- Hex ChainId: {wallet.chainId}
- Numeric ChainId: {formatChainAsNum(wallet.chainId)}
+
+ 
+
+
- )}
- {selectedWallet.info.name}
+ ({formatAddress(selectedAccount)})
+ uuid: {selectedWallet.info.uuid}
+ rdns: {selectedWallet.info.rdns}
+
- {error && (
+
+
+
+ )
+}
+
+export default App
```
-When you generate an error by cancelling the connection to MetaMask, this shows up in the footer.
-The background temporarily turns a dark red color:
+Run the dapp to view the wallet list and select a wallet to connect to.
+The final state of the dapp when connected to MetaMask looks like the following:
+
+
+
+### 10. Test the dapp features
-
+You can conduct user tests to evaluate the functionality and features demonstrated in this tutorial:
-In this tutorial's dapp, you can dismiss any MetaMask error displayed in the footer by selecting it.
-In a real-world dapp, the best UI/UX for error dismissing would be a component that displays in a
-modal or overlay and provides an obvious dismiss button.
+1. Test the ability to connect and disconnect from multiple wallets installed in your browser.
+2. After selecting a wallet, refresh the page and ensure that the selected wallet persists without
+ reverting to **No Wallet Selected**.
+3. Select a wallet, disable it, refresh the page, then re-enable the wallet and refresh the page again.
+ Observe the behavior of the dapp.
+4. When connecting to a wallet, deliberately cancel the connection or close the wallet prompt.
+ This action should trigger the `WalletError` component, which you can dismiss by selecting it.
## Conclusion
-You've successfully converted a single component dapp with local state to a multiple component dapp
-with global state, using React context and provider.
-You can modify the dapp's global state using functions and data that, when used anywhere in the dapp,
-will show up-to-date data associated with your MetaMask wallet.
+This tutorial guided you through applying EIP-6963 to connect to MetaMask.
+This method also works with any wallet that [complies with
+EIP-6963](https://github.com/WalletConnect/EIP6963/blob/master/src/utils/constants.ts) and supports
+multi-injected provider discovery.
-You can see the [source code](https://github.com/MetaMask/react-dapp-tutorial/tree/global-state-final)
-for the final state of this dapp tutorial.
+In this tutorial, you addressed edge cases and created a context provider that facilitates data
+sharing, manages functions for connecting and disconnecting from wallets, and handles errors.
+You can view the [project source code on GitHub](https://github.com/MetaMask/vite-react-global-tutorial).
diff --git a/wallet/tutorials/react-dapp-local-state.md b/wallet/tutorials/react-dapp-local-state.md
index 944b433ec3b..53fe0587ae0 100644
--- a/wallet/tutorials/react-dapp-local-state.md
+++ b/wallet/tutorials/react-dapp-local-state.md
@@ -26,7 +26,7 @@ You can view the [dapp source code on GitHub](https://github.com/MetaMask/vite-r
- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) version 9+
- A text editor (for example, [VS Code](https://code.visualstudio.com/))
- The [MetaMask extension](https://metamask.io/download) installed
-- Basic knowledge of JavaScript and React
+- Basic knowledge of TypeScript and React
## Steps
@@ -35,13 +35,13 @@ You can view the [dapp source code on GitHub](https://github.com/MetaMask/vite-r
Set up a new project using Vite, React, and TypeScript by running the following command:
```bash
-npm create vite@latest mm-dapp-react -- --template react-ts
+npm create vite@latest vite-react-local-state -- --template react-ts
```
Install the node module dependencies:
```bash
-cd mm-dapp-react && npm install
+cd vite-react-local-state && npm install
```
Launch the development server:
@@ -53,8 +53,9 @@ npm run dev
This displays a `localhost` URL in your terminal, where you can view the dapp in your browser.
:::note
-If the development server has been stopped, you can re-run your project using the `npx vite` or
-`npm run dev` command.
+If you use VS Code, you can run the command `code .` to open the project.
+If the development server has stopped, you can run the command `npx vite` or `npm run dev` to
+restart your project.
:::
Open the project in your editor.
@@ -76,7 +77,7 @@ export default App
### 2. Import EIP-6963 interfaces
-Your dapp will connect to MetaMask using the mechanism introduced by
+The dapp will connect to MetaMask using the mechanism introduced by
[EIP-6963](https://eips.ethereum.org/EIPS/eip-6963).
:::info Why EIP-6963?
@@ -94,7 +95,7 @@ needed for [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and
```tsx title="vite-env.d.ts"
///
+ {isError &&
- );
-};
+ )
+}
```
-Notice how `useMetaMask` de-structures its return value to get only the `error`, `errorMessage`, and
-`clearError` data:
+An error message renders only if `errorMessage` contains data.
+After the error is selected, `errorMessage` resets to an empty string, which hides the content.
+
+This method demonstrates how to display specific content, such as a modal or notification, in
+response to connection errors when connecting to a wallet.
+
+Uncomment the `WalletError` component in `src/App.tsx` and run the dapp.
+Disconnect from MetaMask, reconnect, and reject or cancel the connection.
+Something like the following displays:
+
+
+
+### 9. Run the final state of the dapp
-```ts
-const { error, errorMessage, clearError } = useMetaMask();
+Make sure all code in `App.tsx` is uncommented:
+
+```tsx title="App.tsx"
+import "./App.css"
+import { WalletProvider } from "~/hooks/WalletProvider"
+import { WalletList } from "./components/WalletList"
+import { SelectedWallet } from "./components/SelectedWallet"
+import { WalletError } from "./components/WalletError"
+
+function App() {
+ return (
+
Error: {errorMessage}
- )}
+ }
+