fix: respect transaction button theme prop (#3341)

<!-- start pr-codex -->

## PR-Codex overview
This PR fixes the issue where the transaction button did not respect the theme prop in the `SponsoredTxPreview` component.

### Detailed summary
- Fixed transaction button theme prop issue in `SponsoredTxPreview`
- Added `isValidTheme` and `parseTheme` functions in `buttons.tsx`
- Updated `parseTheme` to validate theme and return default if invalid

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

<!-- end pr-codex -->

Author: joaquim-verges

.changeset/dull-steaks-roll.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix transaction button not respecting theme prop

apps/playground-web/src/components/account-abstraction/sponsored-tx.tsx

@@ -12,7 +12,6 @@ import {
   useReadContract,
 } from "thirdweb/react";
 import { THIRDWEB_CLIENT } from "../../lib/client";
-import { CodeExample } from "../code/code-example";
 import { editionDropContract, editionDropTokenId } from "./constants";
 
 export function SponsoredTxPreview() {

packages/thirdweb/src/react/core/design-system/CustomThemeProvider.tsx

@@ -22,7 +22,7 @@ export function CustomThemeProvider(props: {
 }
 
 export function parseTheme(theme: "light" | "dark" | Theme | undefined): Theme {
-  if (!theme) {
+  if (!theme || !isValidTheme(theme)) {
     return darkThemeObj;
   }
 
@@ -37,6 +37,19 @@ export function parseTheme(theme: "light" | "dark" | Theme | undefined): Theme {
   return themeObj;
 }
 
+export function isValidTheme(theme: unknown): theme is Theme {
+  return (
+    theme === "dark" ||
+    theme === "light" ||
+    (typeof theme === "object" &&
+      theme !== null &&
+      "colors" in theme &&
+      "fontSizes" in theme &&
+      "radii" in theme &&
+      "space" in theme)
+  );
+}
+
 /**
  *
  * @internal

packages/thirdweb/src/react/web/ui/components/buttons.tsx

@@ -1,5 +1,9 @@
 "use client";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import {
+  isValidTheme,
+  parseTheme,
+  useCustomTheme,
+} from "../../../core/design-system/CustomThemeProvider.js";
 import {
   type Theme,
   fontSize,
@@ -17,7 +21,8 @@ export type ButtonProps = {
 };
 
 export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
-  const theme = useCustomTheme();
+  const _theme = useCustomTheme();
+  const theme = isValidTheme(props.theme) ? parseTheme(props.theme) : _theme;
   if (props.unstyled) {
     return {};
   }