add TurnkeyThemeProvider to apply theme to all components

tkhq · Dec 9, 2024 · be23850 · be23850
1 parent 89e666c
commit be23850
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 34 deletions.
diff --git a/examples/react-components/src/app/dashboard/page.tsx b/examples/react-components/src/app/dashboard/page.tsx
@@ -6,6 +6,7 @@ import {
   useTurnkey,
   getSuborgs,
   OtpVerification,
+  TurnkeyThemeProvider,
 } from "@turnkey/sdk-react";
 import { useEffect, useState } from "react";
 import "./dashboard.css";
@@ -431,7 +432,6 @@ export default function Dashboard() {
   return (
     <main className="main">
       <Navbar />
-
       <link rel="preload" href="/eth-hover.svg" as="image" />
       <link rel="preload" href="/solana-hover.svg" as="image" />
       <div className="dashboardCard">

diff --git a/examples/react-components/src/app/layout.tsx b/examples/react-components/src/app/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import "@turnkey/sdk-react/styles";
-import { TurnkeyProvider } from "@turnkey/sdk-react";
+import { TurnkeyProvider, TurnkeyThemeProvider } from "@turnkey/sdk-react";
 
 const turnkeyConfig = {
   apiBaseUrl: process.env.NEXT_PUBLIC_BASE_URL!,
@@ -22,9 +22,11 @@ function RootLayout({ children }: RootLayoutProps) {
         <title>Turnkey Auth Demo</title>
         <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
       </head>
-      <body>
-        <TurnkeyProvider config={turnkeyConfig}>{children}</TurnkeyProvider>
-      </body>
+      <TurnkeyThemeProvider>
+        <body>
+          <TurnkeyProvider config={turnkeyConfig}>{children}</TurnkeyProvider>
+        </body>
+      </TurnkeyThemeProvider>
     </html>
   );
 }

diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx
@@ -59,15 +59,13 @@ interface AuthProps {
     googleEnabled: boolean;
   };
   configOrder: string[];
-  theme?: Record<string, string>;
 }
 
 const Auth: React.FC<AuthProps> = ({
   onHandleAuthSuccess,
   onError,
   authConfig,
   configOrder,
-  theme,
 }) => {
   const { passkeyClient, authIframeClient } = useTurnkey();
   const [email, setEmail] = useState<string>("");
@@ -82,15 +80,6 @@ const Auth: React.FC<AuthProps> = ({
   const [loading, setLoading] = useState(true);
   const [passkeyCreated, setPasskeyCreated] = useState(false);
 
-  useEffect(() => {
-    if (theme) {
-      const root = document.documentElement.style;
-      Object.entries(theme).forEach(([key, value]) => {
-        root.setProperty(key, value);
-      });
-    }
-  }, [theme]);
-
   const handleResendCode = async () => {
     if (step === "otpEmail") {
       await handleOtpLogin("EMAIL", email, "OTP_TYPE_EMAIL");

diff --git a/packages/sdk-react/src/components/auth/TurnkeyThemeProvider.tsx b/packages/sdk-react/src/components/auth/TurnkeyThemeProvider.tsx
@@ -0,0 +1,30 @@
+import React, { createContext, useContext, useEffect } from "react";
+
+const ThemeContext = createContext<Record<string, string> | null>(null);
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  theme?: Record<string, string>;
+}
+
+export const TurnkeyThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  theme,
+}) => {
+  useEffect(() => {
+    if (theme) {
+      const root = document.documentElement.style;
+      Object.entries(theme).forEach(([key, value]) => {
+        root.setProperty(key, value);
+      });
+    }
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={theme || null}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);
diff --git a/packages/sdk-react/src/components/auth/index.ts b/packages/sdk-react/src/components/auth/index.ts
@@ -1,2 +1,3 @@
 export { default as Auth } from "./Auth";
 export { default as OtpVerification } from "./OtpVerification";
+export { TurnkeyThemeProvider } from "./TurnkeyThemeProvider";
diff --git a/packages/sdk-react/src/components/export/Export.module.css b/packages/sdk-react/src/components/export/Export.module.css
@@ -42,25 +42,25 @@
   justify-content: center;
   padding: 10px 16px;
   gap: 8px;
-  color: #ffffff;
+  color: var(--button-text);
   width: 100%;
   font-size: 1rem;
-  background: var(--Greyscale-900, #2b2f33);
-  border: 1px solid var(--Greyscale-800, #3f464b);
+  background: var(--button-bg);
+  border: 1px solid var(--button-border);
   border-radius: 8px;
   cursor: pointer;
-  transition: 0.3s ease;
+  transition: background-color 0.3s ease;
 }
 
 .exportButton:hover {
-  background-color: var(--Greyscale-700, #4a4f55);
+  background-color: var(--button-hover-bg);
 }
 
 .exportButton:disabled {
-  color: var(--Greyscale-700, #a2a7ae);
-  background: #ffffff;
-  border-color: var(--Greyscale-400, #a2a7ae);
-  cursor: not-allowed;
+  color: var(--button-disabled-text);
+  background: var(--button-disabled-bg);
+  border-color: var(--button-disabled-border);
+  cursor: default;
 }
 
 .rowsContainer {

diff --git a/packages/sdk-react/src/components/import/Import.module.css b/packages/sdk-react/src/components/import/Import.module.css
@@ -38,25 +38,25 @@
   justify-content: center;
   padding: 10px 16px;
   gap: 8px;
-  color: #ffffff;
+  color: var(--button-text);
   width: 100%;
   font-size: 1rem;
-  background: var(--Greyscale-900, #2b2f33);
-  border: 1px solid var(--Greyscale-800, #3f464b);
+  background: var(--button-bg);
+  border: 1px solid var(--button-border);
   border-radius: 8px;
   cursor: pointer;
-  transition: 0.3s ease;
+  transition: background-color 0.3s ease;
 }
 
 .importButton:hover {
-  background-color: var(--Greyscale-700, #4a4f55);
+  background-color: var(--button-hover-bg);
 }
 
 .importButton:disabled {
-  color: var(--Greyscale-700, #a2a7ae);
-  background: #ffffff;
-  border-color: var(--Greyscale-400, #a2a7ae);
-  cursor: not-allowed;
+  color: var(--button-disabled-text);
+  background: var(--button-disabled-bg);
+  border-color: var(--button-disabled-border);
+  cursor: default;
 }
 
 .poweredBy {