Browse Source

docs: fix and simplify button handler example (#1054)

## Summary
Fix incorrect event handler in README and improve code clarity

## Problem
The example code from the README didn't work when implemented - the `handleClick` was returning functions instead of executing them. 

## Solution
This PR makes the handler execute functions directly for a more straightforward implementation. Since handler functions from `useWalletMultiButton` can be `undefined`, the code uses optional chaining for concise null checks. The higher-order function pattern was removed to prioritize readability in the example.
Dev Inoue 9 months ago
parent
commit
748767d685
1 changed files with 19 additions and 15 deletions
  1. 19 15
      packages/core/react/README.md

+ 19 - 15
packages/core/react/README.md

@@ -57,23 +57,27 @@ function CustomConnectButton() {
             label = 'Select Wallet';
             break;
     }
-    const handleClick = useCallback(() => {
-        switch (buttonState) {
-            case 'connected':
-                return onDisconnect;
-            case 'connecting':
-            case 'disconnecting':
-                break;
-            case 'has-wallet':
-                return onConnect;
-            case 'no-wallet':
-                return onSelectWallet;
-                break;
-        }
-    }, [buttonState, onDisconnect, onConnect, onSelectWallet]);
     return (
         <>
-            <button disabled={buttonState === 'connecting' || buttonState === 'disconnecting'} onClick={handleClick}>
+            <button
+                disabled={buttonState === 'connecting' || buttonState === 'disconnecting'}
+                onClick={() => {
+                    switch (buttonState) {
+                        case 'connected':
+                            onDisconnect?.();
+                            break;
+                        case 'connecting':
+                        case 'disconnecting':
+                            break;
+                        case 'has-wallet':
+                            onConnect?.();
+                            break;
+                        case 'no-wallet':
+                            onSelectWallet?.();
+                            break;
+                    }
+                }}
+            >
                 {label}
             </button>
             {walletModalConfig ? (