fix hooks code snippets

Author: yashovardhan

docs/sdk/web/react/hooks/useCheckout.mdx

@@ -21,10 +21,12 @@ function CheckoutButton() {
   const { showCheckout, loading, error } = useCheckout();
 
   return (
-    <button onClick={() => showCheckout()} disabled={loading}>
-      {loading ? "Opening Checkout..." : "Show Checkout"}
-    </button>
-    {error && <div>{error.message}</div>}
+    <div>
+      <button onClick={() => showCheckout()} disabled={loading}>
+        {loading ? "Opening Checkout..." : "Show Checkout"}
+      </button>
+      {error && <div>{error.message}</div>}
+    </div>
   );
 }
 ```

docs/sdk/web/react/hooks/useEnableMFA.mdx

@@ -21,10 +21,12 @@ function EnableMFAButton() {
   const { enableMFA, loading, error } = useEnableMFA();
 
   return (
-    <button onClick={() => enableMFA()} disabled={loading}>
-      {loading ? "Enabling MFA..." : "Enable MFA"}
-    </button>
-    {error && <div>{error.message}</div>}
+    <div>
+      <button onClick={() => enableMFA()} disabled={loading}>
+        {loading ? "Enabling MFA..." : "Enable MFA"}
+      </button>
+      {error && <div>{error.message}</div>}
+    </div>
   );
 }
 ```

docs/sdk/web/react/hooks/useManageMFA.mdx

@@ -22,10 +22,12 @@ function ManageMFAButton() {
   const { manageMFA, loading, error } = useManageMFA();
 
   return (
-    <button onClick={() => manageMFA()} disabled={loading}>
-      {loading ? "Managing MFA..." : "Manage MFA"}
-    </button>
-    {error && <div>{error.message}</div>}
+    <div>
+      <button onClick={() => manageMFA()} disabled={loading}>
+        {loading ? "Managing MFA..." : "Manage MFA"}
+      </button>
+      {error && <div>{error.message}</div>}
+    </div>
   );
 }
 ```

docs/sdk/web/react/hooks/useSwap.mdx

@@ -21,12 +21,12 @@ function SwapButton() {
   const { showSwap, loading, error } = useSwap();
 
   return (
-    <>
+    <div>
       <button onClick={() => showSwap()} disabled={loading}>
         {loading ? "Opening Swap..." : "Open Swap"}
       </button>
       {error && <div>Error: {error.message}</div>}
-    </>
+    </div>
   );
 }
 ```

docs/sdk/web/react/hooks/useWalletConnectScanner.mdx

@@ -21,10 +21,12 @@ function WalletConnectScannerButton() {
   const { showWalletConnectScanner, loading, error } = useWalletConnectScanner();
 
   return (
-    <button onClick={() => showWalletConnectScanner()} disabled={loading}>
-      {loading ? "Opening Scanner..." : "Show WalletConnect Scanner"}
-    </button>
-    {error && <div>{error.message}</div>}
+    <div>
+      <button onClick={() => showWalletConnectScanner()} disabled={loading}>
+        {loading ? "Opening Scanner..." : "Show WalletConnect Scanner"}
+      </button>
+      {error && <div>{error.message}</div>}
+    </div>
   );
 }
 ```

docs/sdk/web/react/hooks/useWalletServicesPlugin.mdx

@@ -23,7 +23,7 @@ function WalletServicesExample() {
     useWalletServicesPlugin();
 
   return (
-    <>
+    <div>
       <button onClick={() => showWalletConnectScanner()} disabled={!isPluginConnected}>
         Show WalletConnect Scanner
       </button>
@@ -33,7 +33,7 @@ function WalletServicesExample() {
       <button onClick={() => showWalletUI()} disabled={!isPluginConnected}>
         Show Wallet UI
       </button>
-    </>
+    </div>
   );
 }
 ```

docs/sdk/web/react/hooks/useWalletUI.mdx

@@ -21,10 +21,12 @@ function WalletUIButton() {
   const { showWalletUI, loading, error } = useWalletUI();
 
   return (
-    <button onClick={() => showWalletUI()} disabled={loading}>
-      {loading ? "Opening Wallet UI..." : "Show Wallet UI"}
-    </button>
-    {error && <div>{error.message}</div>}
+    <div>
+      <button onClick={() => showWalletUI()} disabled={loading}>
+        {loading ? "Opening Wallet UI..." : "Show Wallet UI"}
+      </button>
+      {error && <div>{error.message}</div>}
+    </div>
   );
 }
 ```

docs/sdk/web/react/hooks/useWeb3AuthConnect.mdx

@@ -60,10 +60,12 @@ function ConnectButton() {
   const { connect, loading, isConnected, error } = useWeb3AuthConnect();
 
   return (
-    <button onClick={() => connect()} disabled={loading || isConnected}>
-      {loading ? "Connecting..." : isConnected ? "Connected" : "Connect"}
-    </button>
-    {error && <div>{error.message}</div>}
+    <div>
+      <button onClick={() => connect()} disabled={loading || isConnected}>
+        {loading ? "Connecting..." : isConnected ? "Connected" : "Connect"}
+      </button>
+      {error && <div>{error.message}</div>}
+    </div>
   );
 }
 ```

docs/sdk/web/react/hooks/useWeb3AuthDisconnect.mdx

@@ -21,10 +21,12 @@ function DisconnectButton() {
   const { disconnect, loading, error } = useWeb3AuthDisconnect();
 
   return (
-    <button onClick={() => disconnect()} disabled={loading}>
-      {loading ? "Disconnecting..." : "Disconnect"}
-    </button>
-    {error && <div>{error.message}</div>}
+    <div>
+      <button onClick={() => disconnect()} disabled={loading}>
+        {loading ? "Disconnecting..." : "Disconnect"}
+      </button>
+      {error && <div>{error.message}</div>}
+    </div>
   );
 }
 ```

docs/sdk/web/react/hooks/useWeb3AuthUser.mdx

@@ -25,12 +25,14 @@ function UserInfo() {
   if (!userInfo) return <div>No user info available.</div>;
 
   return (
+    <>
     <div>
       <pre>{JSON.stringify(userInfo, null, 2)}</pre>
       <div>MFA Enabled: {isMFAEnabled ? "Yes" : "No"}</div>
       <button onClick={() => getUserInfo()}>Refresh User Info</button>
     </div>
     {error && <div>{error.message}</div>}
+    </>
   );
 }
 ```