Skip to content

Commit

Permalink
Update react-dapp-global-state.md
Browse files Browse the repository at this point in the history
some edits
  • Loading branch information
joaniefromtheblock authored Jun 14, 2024
1 parent b574c35 commit f179dca
Showing 1 changed file with 13 additions and 8 deletions.
21 changes: 13 additions & 8 deletions wallet/tutorials/react-dapp-global-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ We recommend starting with [creating a React dapp with local state](react-dapp-l
If you skip the tutorial, consider reviewing [wallet interoperability](../concepts/wallet-interoperability/) to understand how multiple injected wallet providers work.
:::

In real-world use cases, a dapp shares state across many components. This tutorial is more complex than the tutorial to create a dapp in a local state because it addresses real-world scenarios.
In real-world use cases, a dapp shares state across many components.
This tutorial is more complex than the tutorial to create a dapp in a local state because it addresses real-world scenarios.
The dapp you create using this tutorial will look similar to the following:

![React dapp with global state](../assets/tutorials/react-dapp/react-tutorial-02-final-preview.png)
Expand Down Expand Up @@ -294,7 +295,7 @@ This also adds an interface for `WalletError`.
This section of the tutorial explains how to create the React Context component using various types, interfaces, functions, hooks, events, effects, and RPC calls.
The React Context component wraps your application, providing all components access to the state and functions required to modify the state and manage connections to discovered wallets.

To start, first import the necessary context. Then, define a type alias for a record where the keys are wallet identifiers and the values are account addresses or null.
To do this, you must first import the necessary context. Then, define a type alias for a record where the keys are wallet identifiers and the values are account addresses or null.

Next, define the context interface for the EIP-6963 provider. The interface includes the following:

Expand Down Expand Up @@ -611,13 +612,13 @@ If wallets are detected, `Object.values(wallets).map(wallet => (...))` iterates
- `Object.values(wallets)` returns an array of the wallet objects. This is needed to map and render.
- Using `wallet.info.rdns` as the key ensures that each wallet button is uniquely identified.
If you uncomment the `WalletList` component is in `src/App.tsx` and run the dapp, the following is displayed:
Uncomment the `WalletList` component in `src/App.tsx` and run the dapp. The following is displayed:
![View of WalletList component](../assets/tutorials/react-dapp/react-tutorial-02-wallet-list.png)
### 6. Display MetaMask data
Import the `selectedWallet` and `selectedAccount` functions and the function `disconnectWallet` from the `useWalletProvider` hook.
Import the `selectedWallet` and `selectedAccount` functions, and the `disconnectWallet` function from the `useWalletProvider` hook.
Add the following code to `src/components/SelectedWallet.tsx`:
Expand Down Expand Up @@ -649,7 +650,10 @@ export const SelectedWallet = () => {
}
```
The code in lines 11-22 above have some conditional rendering for `{selectedAccount && (...)}`. This conditional rendering means that the content inside is only rendered if `selectedAccount` is true. This ensures that detailed information about the selected wallet is only displayed when an active wallet is connected. You can then display information about the wallet, and conditionally render anything related to the following:
The code in lines 11-22 have conditional rendering for `{selectedAccount && (...)}`.
This conditional rendering ensures 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.
You can then display information about the wallet, and conditionally render anything related to the following:
- Wallet address
- Wallet balance
Expand Down Expand Up @@ -684,13 +688,14 @@ export const WalletError = () => {
}
```
Some CSS activates only if an error is present, and a `div` with the error message renders only if `errorMessage` contains data.
A `div` with the error message renders only if `errorMessage` contains data.
After clicking `div`, reset `errorMessage` 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.
To see the error handling, uncomment the `WalletError` component in `src/App.tsx`. Then, run the dApp, disconnect from MetaMask, reconnect, and reject or cancel the connection. The following is displayed:
To see the error handling, uncomment the `WalletError` component in `src/App.tsx`.
Run the dApp, disconnect from MetaMask, reconnect, and reject or cancel the connection. The following is displayed:
![View of WalletError component](../assets/tutorials/react-dapp/react-tutorial-02-wallet-error.png)
Expand Down Expand Up @@ -735,4 +740,4 @@ You can conduct user tests to evaluate the functionality and features demonstrat
## Conclusion
This tutorial guided you through applying your knowledge of EIP-6963 to connect to wallets, specifically 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. 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](https://github.com/MetaMask/vite-react-global-tutorial)
for the final state of this dapp tutorial on GitHub.
for the final state of this dapp tutorial on GitHub.

0 comments on commit f179dca

Please sign in to comment.