fix(playground): checkbox ids and passkey TOS approval (#4308)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to add a `disabled` prop to various components for better control over user interactions.

### Detailed summary
- Added `disabled` prop to `WalletTypeRowButton` component in `WalletTypeRowButton.tsx`
- Added `disabled` prop to `ConnectWalletSocialOptions` component in `ConnectWalletSocialOptions.tsx`
- Added `disabled` prop to different options in `ConnectWalletSocialOptions` component
- Updated label and ID in `LeftSection.tsx` for TOS approval checkbox

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/playground-web/src/app/connect/sign-in/button/LeftSection.tsx

@@ -167,7 +167,7 @@ export function LeftSection(props: {
             {/* Require Approval */}
             <section className="flex items-center gap-2">
               <Checkbox
-                id="show-thirdweb-branding"
+                id="require-approval"
                 checked={connectOptions.requireApproval}
                 onCheckedChange={(checkState) => {
                   setConnectOptions((v) => ({
@@ -176,9 +176,7 @@ export function LeftSection(props: {
                   }));
                 }}
               />
-              <Label htmlFor="show-thirdweb-branding">
-                Require TOS approval
-              </Label>
+              <Label htmlFor="require-approval">Require TOS approval</Label>
             </section>
           </div>
         </div>

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx

@@ -14,6 +14,7 @@ type WalletTypeRowProps = {
   onClick: () => void;
   title: string;
   icon: string;
+  disabled?: boolean;
 };
 
 export function WalletTypeRowButton(props: WalletTypeRowProps) {
@@ -29,6 +30,7 @@ export function WalletTypeRowButton(props: WalletTypeRowProps) {
       onClick={() => {
         props.onClick();
       }}
+      disabled={props.disabled}
     >
       <Container flex="row" gap="sm" center="y" color="accentText">
         <Img

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -369,6 +369,7 @@ export const ConnectWalletSocialOptions = (
                 setManualInputMode("email");
               }}
               title={locale.emailPlaceholder}
+              disabled={props.disabled}
             />
           )}
         </>
@@ -409,6 +410,7 @@ export const ConnectWalletSocialOptions = (
                 setManualInputMode("phone");
               }}
               title={locale.phonePlaceholder}
+              disabled={props.disabled}
             />
           )}
         </>
@@ -423,6 +425,7 @@ export const ConnectWalletSocialOptions = (
               handlePassKeyLogin();
             }}
             title={locale.passkey}
+            disabled={props.disabled}
           />
         </>
       )}