fix: ConnectButton custom theme + customized component in playground (#…

…3356)
thirdweb-dev · Jun 17, 2024 · 2d7ebe2 · 2d7ebe2
1 parent a9ce10f
commit 2d7ebe2
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 6 deletions.
diff --git a/.changeset/clean-ravens-call.md b/.changeset/clean-ravens-call.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix ConnectButton theming prop
diff --git a/apps/playground-web/src/app/connect/sign-in/page.tsx b/apps/playground-web/src/app/connect/sign-in/page.tsx
@@ -4,6 +4,7 @@ import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { CodeExample } from "../../../components/code/code-example";
+import { CustomizedConnect } from "../../../components/sign-in/custom";
 import { HooksPreview } from "../../../components/sign-in/hooks";
 import { StyledConnectButton } from "../../../components/styled-connect-button";
 import { StyledConnectEmbed } from "../../../components/styled-connect-embed";
@@ -70,6 +71,10 @@ export default function Page() {
         <EmbedComponent />
       </section>
 
+      <section className="container px-4 md:px-6 space-y-8">
+        <CustomizedComponent />
+      </section>
+
       <section className="container px-4 md:px-6 space-y-8">
         <Hooks />
       </section>
@@ -146,6 +151,65 @@ return (
   );
 }
 
+function CustomizedComponent() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Customized Component
+        </h2>
+        <p className="max-w-[600px]">
+          Change the look and feel of the connect button without rewriting your
+          own.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<CustomizedConnect />}
+        code={`import { createThirdwebClient } from "thirdweb";
+import { ConnectEmbed } from "thirdweb/react";
+
+const THIRDWEB_CLIENT = createThirdwebClient({
+clientId: "<YOUR_CLIENT_ID>"
+});
+
+function App(){
+return (
+<ConnectButton
+      client={THIRDWEB_CLIENT}
+      connectButton={{
+        label: "Custom Connect Button",
+      }}
+      showAllWallets={false}
+      connectModal={{
+        title: "Custom Connect Modal",
+        size: "compact",
+      }}
+      theme={darkTheme({
+        colors: {
+          modalBg: "#281866",
+          accentButtonBg: "#281866",
+          connectedButtonBgHover: "#281866",
+          borderColor: "rgba(256, 256,256, 0.1)",
+          accentText: "rgba(256, 256,256, 0.1)",
+          connectedButtonBg: "#281866",
+          tertiaryBg: "rgba(256, 256,256, 0.1)",
+          primaryButtonBg: "#281866",
+          secondaryButtonBg: "rgba(256, 256,256, 0.1)",
+          primaryButtonText: "#E7E8E9",
+          primaryText: "#E7E8E9",
+          separatorLine: "rgba(256, 256,256, 0.1)",
+        },
+      })}
+    />
+);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
 function Hooks() {
   return (
     <>

diff --git a/apps/playground-web/src/components/sign-in/custom.tsx b/apps/playground-web/src/components/sign-in/custom.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { ConnectButton } from "thirdweb/react";
+import { darkTheme, lightTheme } from "thirdweb/react";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+
+export const CustomizedConnect = () => {
+  return (
+    <ConnectButton
+      client={THIRDWEB_CLIENT}
+      connectButton={{
+        label: "Custom Connect Button",
+      }}
+      showAllWallets={false}
+      connectModal={{
+        title: "Custom Connect Modal",
+        size: "compact",
+      }}
+      theme={darkTheme({
+        colors: {
+          modalBg: "#281866",
+          accentButtonBg: "#281866",
+          connectedButtonBgHover: "#281866",
+          borderColor: "rgba(256, 256,256, 0.1)",
+          accentText: "rgba(256, 256,256, 0.1)",
+          connectedButtonBg: "#281866",
+          tertiaryBg: "rgba(256, 256,256, 0.1)",
+          primaryButtonBg: "#281866",
+          secondaryButtonBg: "rgba(256, 256,256, 0.1)",
+          primaryButtonText: "#E7E8E9",
+          primaryText: "#E7E8E9",
+          separatorLine: "rgba(256, 256,256, 0.1)",
+        },
+      })}
+    />
+  );
+};
diff --git a/packages/thirdweb/src/react/core/design-system/CustomThemeProvider.tsx b/packages/thirdweb/src/react/core/design-system/CustomThemeProvider.tsx
@@ -41,12 +41,7 @@ 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)
+    (typeof theme === "object" && theme !== null && "colors" in theme)
   );
 }