You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I was going through the codebase and thought we might change the HoCs to hooks. I believe the suspense wrappers need to stay as HoC/wrappers, as their usage may require a lot of boilerplate. But in the case of the walletStatusVerifier, this is what I got after a long debate (????) with ChatGPT.
Note
There are ELI5 parts, but I left them as I like how everything is justified and detailed.
Overview
Goal: Replace the HoC and the WalletStatusVerifier component with a custom hook. Benefit: Simplify the code, make it more readable, and embrace the React Hooks pattern. Approach: Create a useWalletStatusVerifier hook that encapsulates the logic previously handled by the HoC and the component.
Step-by-Step Refactoring
1. Analyze the Existing Components
WalletStatusVerifier Component:
- Purpose: Checks the wallet connection and synchronization status.
- Behavior:
- If the wallet is not connected, render a fallback component (default: ConnectWalletButton).
- If the wallet is connected but not synced with the correct chain, render a button to switch the chain.
- If the wallet is connected and synced, render the children components. withWalletStatusVerifier HoC:
- Purpose: Wraps a component to provide the same wallet status verification.
- Behavior: Similar to WalletStatusVerifier but wraps a component instead of using children.
2. Create a Custom Hook
We'll create a useWalletStatusVerifier hook that:
Accepts:chainId, fallback, and labelSwitchChain (optional).
Returns:
isReady: A boolean indicating if the wallet is connected and synced.
statusElement: A React element to render when the wallet is not ready (fallback or switch chain button).
fallback: Component to render if the wallet is not connected.
labelSwitchChain: Label for the switch chain button. Outputs:
isReady: Indicates whether the wallet is connected and synced to the correct chain.
statusElement: The element to render if the wallet is not ready.
3. Update Components to Use the Custom Hook
Example Usage in a Component:
import{FC}from'react'import{useWalletStatusVerifier}from'@/src/hooks/useWalletStatusVerifier'constMyComponent: FC=()=>{const{ isReady, statusElement }=useWalletStatusVerifier()if(!isReady){returnstatusElement}// The wallet is connected and synced; render the component's content.return(<div>{/* Your component logic goes here */}<p>The wallet is connected and synced!</p></div>)}
Explanation:
Use the useWalletStatusVerifier hook at the top of your component.
Check the isReady flag:
If false, return the statusElement (either the fallback or the switch chain button).
If true, render your component's content.
Benefits:
Simplifies the component logic.
Avoids nesting components or using HoCs.
Makes the code more readable and maintainable.
Remove the HoC and Component
Since we have replaced the functionality with a custom hook, you can remove the withWalletStatusVerifier HoC and the WalletStatusVerifier component from your codebase.
Deleted Code:
// Remove the following from your code:constWalletStatusVerifier: FC<WalletStatusVerifierProps>=({ ... })=>{ ... }constwithWalletStatusVerifier=<Pextendsobject>(WrappedComponent: ComponentType<P>, ...)=>{ ... }
import{FC}from'react'import{useWalletStatusVerifier}from'@/src/hooks/useWalletStatusVerifier'constMyComponent: FC=()=>{const{ isReady, statusElement }=useWalletStatusVerifier({chainId: 1,// Optional: specify the chain IDfallback: <div>Please connect your wallet</div>,// Optional: custom fallbacklabelSwitchChain: 'Switch Network',// Optional: custom label})if(!isReady){returnstatusElement}return(<div>{/* Your component logic */}<p>Wallet is connected and on the correct network.</p></div>)}
Explanation and Benefits
Why Use a Custom Hook?
Encapsulation of Logic: The hook encapsulates all the logic related to wallet status verification.
Reusability: You can use the hook across multiple components without repeating code.
Simplicity: Hooks are more straightforward and align with modern React practices compared to HoCs.
Flexibility: Components using the hook can have their own rendering logic without being wrapped.
Advantages Over HoCs
Avoids Component Nesting: HoCs can lead to deeply nested component trees, making debugging harder.
Better TypeScript Support: Type inference and type-checking are often simpler with hooks.
Easier to Understand: Hooks are functions that return values, which is a familiar pattern.
Additional Customization
You can further customize the hook or its usage:
Customizing the Fallback Component
When calling the hook, you can pass a custom fallback component:
If you need to perform additional actions when the wallet becomes ready, you can use useEffect:
import{useEffect}from'react'constMyComponent: FC=()=>{const{ isReady, statusElement }=useWalletStatusVerifier()useEffect(()=>{if(isReady){// Perform any additional setup or data fetching}},[isReady])if(!isReady){returnstatusElement}return(<div>{/* Component content */}</div>)}
Conclusion
By refactoring your HoC and component into a custom hook, you achieve the following:
Modernization: Align with the current best practices in React development.
Simplification: Reduce complexity by eliminating the need for HoCs.
Flexibility: Allow components to manage their own rendering logic based on the wallet status.
Summary
Refactored the HoC and component into a useWalletStatusVerifier hook.
Simplified component usage by leveraging the hook's returned values.
Maintained the same functionality with cleaner, more modern code.
The text was updated successfully, but these errors were encountered:
I was going through the codebase and thought we might change the HoCs to hooks. I believe the suspense wrappers need to stay as HoC/wrappers, as their usage may require a lot of boilerplate. But in the case of the walletStatusVerifier, this is what I got after a long debate (????) with ChatGPT.
Note
There are ELI5 parts, but I left them as I like how everything is justified and detailed.
Overview
Goal: Replace the HoC and the WalletStatusVerifier component with a custom hook.
Benefit: Simplify the code, make it more readable, and embrace the React Hooks pattern.
Approach: Create a useWalletStatusVerifier hook that encapsulates the logic previously handled by the HoC and the component.
Step-by-Step Refactoring
1. Analyze the Existing Components
WalletStatusVerifier
Component:- Purpose: Checks the wallet connection and synchronization status.
- Behavior:
- If the wallet is not connected, render a fallback component (default:
ConnectWalletButton
).- If the wallet is connected but not synced with the correct chain, render a button to switch the chain.
- If the wallet is connected and synced, render the
children
components.withWalletStatusVerifier
HoC:- Purpose: Wraps a component to provide the same wallet status verification.
- Behavior: Similar to WalletStatusVerifier but wraps a component instead of using children.
2. Create a Custom Hook
We'll create a
useWalletStatusVerifier
hook that:chainId
,fallback
, andlabelSwitchChain
(optional).isReady
: A boolean indicating if the wallet is connected and synced.statusElement
: A React element to render when the wallet is not ready (fallback or switch chain button).Custom Hook Implementation:
Explanation:
Inputs:
chainId
: The desired chain ID.fallback
: Component to render if the wallet is not connected.labelSwitchChain
: Label for the switch chain button.Outputs:
isReady
: Indicates whether the wallet is connected and synced to the correct chain.statusElement
: The element to render if the wallet is not ready.3. Update Components to Use the Custom Hook
Example Usage in a Component:
Explanation:
useWalletStatusVerifier
hook at the top of your component.isReady
flag:false
, return thestatusElement
(either the fallback or the switch chain button).true
, render your component's content.Benefits:
Since we have replaced the functionality with a custom hook, you can remove the
withWalletStatusVerifier
HoC and theWalletStatusVerifier
component from your codebase.Deleted Code:
Final Code
Custom Hook (
useWalletStatusVerifier.ts
):Component Usage Example (
MyComponent.tsx
):Explanation and Benefits
Why Use a Custom Hook?
Advantages Over HoCs
Additional Customization
You can further customize the hook or its usage:
When calling the hook, you can pass a custom fallback component:
If you need to enforce a specific chain ID:
Customize the label:
Handling Edge Cases
If you need to perform additional actions when the wallet becomes ready, you can use
useEffect
:Conclusion
By refactoring your HoC and component into a custom hook, you achieve the following:
Summary
useWalletStatusVerifier
hook.The text was updated successfully, but these errors were encountered: