custom themed components

tkhq · Dec 4, 2024 · 3466c85 · 3466c85
1 parent f1b84df
commit 3466c85
Show file tree

Hide file tree

Showing 13 changed files with 326 additions and 391 deletions.
diff --git a/examples/react-components/package.json b/examples/react-components/package.json
@@ -16,7 +16,7 @@
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
     "@noble/hashes": "1.4.0",
-    "@solana/web3.js": "^1.95.4",
+    "@solana/web3.js": "^1.95.8",
     "@turnkey/sdk-browser": "^1.10.0",
     "@turnkey/sdk-react": "workspace:*",
     "@turnkey/sdk-server": "workspace:*",

diff --git a/examples/react-components/src/app/dashboard/dashboard.css b/examples/react-components/src/app/dashboard/dashboard.css
@@ -19,7 +19,7 @@ body {
   margin: 0;
   padding: 0;
   width: 100vw;
-  height: 100vh; 
+  height: 100vh;
   background-image: url("../../../public/grid.svg");
   background-size: cover;
   background-repeat: no-repeat;
@@ -251,7 +251,7 @@ button {
   border: 1px solid var(--Greyscale-800, #3f464b);
   border-radius: 8px;
   cursor: pointer;
-  transition: opacity 0.3s ease;
+  transition: 0.3s ease;
 }
 
 button:disabled {

diff --git a/examples/react-components/src/app/dashboard/page.tsx b/examples/react-components/src/app/dashboard/page.tsx
@@ -41,8 +41,7 @@ import { Toaster, toast } from "sonner";
 
 export default function Dashboard() {
   const router = useRouter();
-  const { turnkey, getActiveClient, authIframeClient, passkeyClient } =
-    useTurnkey();
+  const { turnkey, authIframeClient, passkeyClient } = useTurnkey();
   const [loading, setLoading] = useState(true);
   const [accounts, setAccounts] = useState<any>([]);
   const [wallets, setWallets] = useState<any[]>([]);
@@ -341,7 +340,7 @@ export default function Dashboard() {
 
   const handleWalletSelect = async (walletId: string) => {
     setSelectedWallet(walletId);
-    setAnchorEl(null); 
+    setAnchorEl(null);
 
     // Fetch accounts for the selected wallet
     const accountsResponse = await authIframeClient!.getWalletAccounts({
@@ -641,7 +640,7 @@ export default function Dashboard() {
                     }
                     label=""
                     className="radioButton"
-                    style={{ pointerEvents: "none" }} 
+                    style={{ pointerEvents: "none" }}
                   />
                 </div>
               ))}

diff --git a/examples/react-components/src/app/page.tsx b/examples/react-components/src/app/page.tsx
@@ -104,8 +104,8 @@ export default function AuthPage() {
     };
     const configToCopy = {
       authConfig,
-      configOrder
-    }
+      configOrder,
+    };
     navigator.clipboard.writeText(JSON.stringify(configToCopy, null, 2));
     toast.success("Copied to clipboard!");
   };

diff --git a/examples/with-solana-passkeys/package.json b/examples/with-solana-passkeys/package.json
@@ -35,7 +35,7 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@solana/web3.js": "^1.95.1",
+    "@solana/web3.js": "^1.95.8",
     "@types/node": "20.3.1",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.6"

diff --git a/examples/with-solana/package.json b/examples/with-solana/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@project-serum/anchor": "^0.26.0",
     "@solana/spl-token": "^0.4.8",
-    "@solana/web3.js": "^1.88.1",
+    "@solana/web3.js": "^1.95.8",
     "@turnkey/api-key-stamper": "workspace:*",
     "@turnkey/http": "workspace:*",
     "@turnkey/sdk-server": "workspace:*",

diff --git a/examples/with-wallet-stamper/package.json b/examples/with-wallet-stamper/package.json
@@ -25,7 +25,7 @@
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-react-ui": "^0.9.35",
     "@solana/wallet-adapter-wallets": "^0.19.32",
-    "@solana/web3.js": "^1.88.1",
+    "@solana/web3.js": "^1.95.8",
     "@t3-oss/env-nextjs": "^0.11.0",
     "@turnkey/api-key-stamper": "workspace:*",
     "@turnkey/encoding": "workspace:*",

diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx
@@ -28,13 +28,15 @@ 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>("");
@@ -49,6 +51,15 @@ 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");
@@ -240,10 +251,7 @@ const Auth: React.FC<AuthProps> = ({
         cursor: "pointer",
         borderRadius: "50%",
         padding: "6px",
-        transition: "background-color 0.3s ease",
-        "&:hover": {
-          backgroundColor: "var(--button-hover-bg)",
-        },
+        transition: "background-color 0.3s ease", 
       }}
     />
   );

diff --git a/packages/sdk-react/src/components/auth/otp.tsx b/packages/sdk-react/src/components/auth/otp.tsx
@@ -76,14 +76,17 @@ const OtpInput = forwardRef<unknown, OtpInputProps>(
                 textAlign: "center",
                 fontSize: "1.5rem",
                 width: "60px",
-                background: "white",
+                background: "var(--input-bg)",
               },
             }}
             variant="outlined"
             sx={{
               "& .MuiOutlinedInput-root": {
                 "& fieldset": {
-                  borderColor: hasError && !digit ? "red" : "var(--input-border)",
+                  borderColor:
+                    hasError && !digit
+                      ? "var(--text-error)"
+                      : "var(--input-border)",
                 },
                 "&:hover fieldset": {
                   borderColor: "var(--input-border-hover)",

diff --git a/packages/sdk-react/src/components/auth/theme.css b/packages/sdk-react/src/components/auth/theme.css
@@ -1,39 +1,56 @@
 :root {
-    /* Button Colors */
-    --button-bg: #ffffff; /* Default button background */
-    --button-text: var(--Greyscale-900, #2b2f33); /* Default button text */
-    --button-border: var(--Greyscale-400, #a2a7ae); /* Default button border */
-    --button-hover-bg: #f5f5f5; /* Hover button background */
-    --button-hover-text: var(--Greyscale-900, #2b2f33); /* Hover button text */
-    --button-disabled-bg: #ffffff; /* Disabled button background */
-    --button-disabled-text: var(--Greyscale-700, #a2a7ae); /* Disabled button text */
-    --button-disabled-border: var(--Greyscale-100, #f5f7fb); /* Disabled button border */
-
-    /* Input Field Colors */
-    --input-bg: #ffffff; /* Input field background */
-    --input-text: var(--Greyscale-900, #2b2f33); /* Input text color */
-    --input-border: var(--Greyscale-400, #D0D5DD); /* Input border color */
-    --input-hover-border: var(--Greyscale-500, #868c95); /* Input border on hover */
-    --input-focus-border: var(--Greyscale-900, #2b2f33); /* Input border on focus */
-
-    /* Text Colors */
-    --text-primary: var(--Greyscale-900, #2b2f33); /* Primary text */
-    --text-secondary: var(--Greyscale-500, #868c95); /* Secondary text */
-    --text-error: #ff4c4c; /* Error text */
-    --text-disabled: var(--Greyscale-700, #a2a7ae); /* Disabled text */
-
-    /* Border Colors */
-    --border-default: var(--Greyscale-400, #a2a7ae); /* Default border */
-    --border-hover: var(--Greyscale-500, #868c95); /* Hover border */
-    --border-disabled: var(--Greyscale-100, #f5f7fb); /* Disabled border */
-
-    /* Card Colors */
-    --auth-card-bg: var(--Greyscale-20, #f5f7fb); /* Default authCard background */
-    --auth-card-border: var(--Greyscale-100, #ebedf2); /* Default authCard border */
-    --auth-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Default authCard shadow */
-    --auth-card-radius: 15px; /* Default authCard border radius */
+  /* Button Colors */
+  --button-bg: #ffffff; /* Default button background */
+  --button-text: var(--Greyscale-900, #2b2f33); /* Default button text */
+  --button-border: var(--Greyscale-400, #a2a7ae); /* Default button border */
+  --button-hover-bg: #f5f5f5; /* Hover button background */
+  --button-hover-text: var(--Greyscale-900, #2b2f33); /* Hover button text */
+  --button-disabled-bg: #ffffff; /* Disabled button background */
+  --button-disabled-text: var(
+    --Greyscale-700,
+    #a2a7ae
+  ); /* Disabled button text */
+  --button-disabled-border: var(
+    --Greyscale-100,
+    #f5f7fb
+  ); /* Disabled button border */
 
-    /* Accent Colors */
-    --accent-color: var(--Blue-500, #4c48ff);
-  }
-
+  /* Input Field Colors */
+  --input-bg: #ffffff; /* Input field background */
+  --input-text: var(--Greyscale-900, #2b2f33); /* Input text color */
+  --input-border: var(--Greyscale-400, #d0d5dd); /* Input border color */
+  --input-hover-border: var(
+    --Greyscale-500,
+    #868c95
+  ); /* Input border on hover */
+  --input-focus-border: var(
+    --Greyscale-900,
+    #2b2f33
+  ); /* Input border on focus */
+
+  /* Text Colors */
+  --text-primary: var(--Greyscale-900, #2b2f33); /* Primary text */
+  --text-secondary: var(--Greyscale-500, #868c95); /* Secondary text */
+  --text-error: #ff4c4c; /* Error text */
+  --text-disabled: var(--Greyscale-700, #a2a7ae); /* Disabled text */
+
+  /* Border Colors */
+  --border-default: var(--Greyscale-400, #a2a7ae); /* Default border */
+  --border-hover: var(--Greyscale-500, #868c95); /* Hover border */
+  --border-disabled: var(--Greyscale-100, #f5f7fb); /* Disabled border */
+
+  /* Card Colors */
+  --auth-card-bg: var(
+    --Greyscale-20,
+    #f5f7fb
+  ); /* Default authCard background */
+  --auth-card-border: var(
+    --Greyscale-100,
+    #ebedf2
+  ); /* Default authCard border */
+  --auth-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Default authCard shadow */
+  --auth-card-radius: 15px; /* Default authCard border radius */
+
+  /* Accent Colors */
+  --accent-color: var(--Blue-500, #4c48ff);
+}
diff --git a/packages/solana/package.json b/packages/solana/package.json
@@ -48,7 +48,7 @@
     "typecheck": "tsc -p tsconfig.typecheck.json"
   },
   "dependencies": {
-    "@solana/web3.js": "^1.88.1",
+    "@solana/web3.js": "^1.95.8",
     "@turnkey/http": "workspace:*",
     "@turnkey/sdk-browser": "workspace:*",
     "@turnkey/sdk-server": "workspace:*"

diff --git a/packages/wallet-stamper/package.json b/packages/wallet-stamper/package.json
@@ -55,7 +55,7 @@
     "viem": "^2.21.35"
   },
   "devDependencies": {
-    "@solana/web3.js": "^1.88.1",
+    "@solana/web3.js": "^1.95.8",
     "@turnkey/api-key-stamper": "workspace:*",
     "@turnkey/http": "workspace:*",
     "dotenv": "^16.0.3",