From e7455dfc27250bd3609f41c5e1a49293f83081ab Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Wed, 4 Dec 2024 18:33:53 -0500 Subject: [PATCH] custom themed components --- examples/react-components/package.json | 2 +- .../src/app/dashboard/dashboard.css | 4 +- .../src/app/dashboard/page.tsx | 7 +- examples/react-components/src/app/page.tsx | 4 +- examples/with-solana-passkeys/package.json | 2 +- examples/with-solana/package.json | 2 +- examples/with-wallet-stamper/package.json | 2 +- .../src/components/auth/Auth.module.css | 13 +- .../sdk-react/src/components/auth/Auth.tsx | 78 ++- .../auth/OtpVerification.module.css | 2 +- .../src/components/auth/OtpVerification.tsx | 4 +- .../src/components/auth/PhoneInput.tsx | 1 + .../sdk-react/src/components/auth/otp.tsx | 8 +- .../sdk-react/src/components/auth/theme.css | 91 +-- packages/solana/package.json | 2 +- packages/wallet-stamper/package.json | 2 +- pnpm-lock.yaml | 576 ++++++++---------- 17 files changed, 391 insertions(+), 409 deletions(-) diff --git a/examples/react-components/package.json b/examples/react-components/package.json index e654ef3f4..9cd5837ef 100644 --- 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 index 2df07c1ed..c4210cae0 100644 --- 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 index 71fcd5d6d..65c97533b 100644 --- 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([]); const [wallets, setWallets] = useState([]); @@ -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" }} /> ))} diff --git a/examples/react-components/src/app/page.tsx b/examples/react-components/src/app/page.tsx index 1335e355a..c62284fb0 100644 --- 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 index 568c69573..887c5ed04 100644 --- 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 index 933f60f9a..33b9c6200 100644 --- 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 index 753beeebc..0e5900ba5 100644 --- 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.module.css b/packages/sdk-react/src/components/auth/Auth.module.css index 1e4c024aa..ee41cb283 100644 --- a/packages/sdk-react/src/components/auth/Auth.module.css +++ b/packages/sdk-react/src/components/auth/Auth.module.css @@ -36,11 +36,14 @@ } .defaultLoader { + max-width: 450px; + min-width: 375px; position: relative; display: flex; justify-content: center; align-items: center; z-index: 1000; + width: 100%; } .circularProgress { @@ -215,7 +218,7 @@ min-height: 16px; text-align: center; margin-top: 12px; - color: var(--text-error); + color: var(--error-color); font-size: 12px; } @@ -286,3 +289,11 @@ cursor: pointer; text-align: center; } + +.primaryText { + color: var(--text-primary); +} + +.secondaryText { + color: var(--text-secondary); +} diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index 2fc852644..eb7eb28f3 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -10,12 +10,43 @@ import turnkeyIcon from "assets/turnkey.svg"; import googleIcon from "assets/google.svg"; import facebookIcon from "assets/facebook.svg"; import appleIcon from "assets/apple.svg"; -import passkeyIcon from "assets/passkey.svg"; -import passkeyIconRed from "assets/passkey-red.svg"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import OtpVerification from "./OtpVerification"; import { useTurnkey } from "../../hooks/use-turnkey"; +const passkeyIcon = ( + + + + +); + +const passkeyIconError = ( + + + + +); interface AuthProps { onHandleAuthSuccess: () => Promise; onError: (errorMessage: string) => void; @@ -28,6 +59,7 @@ interface AuthProps { googleEnabled: boolean; }; configOrder: string[]; + theme?: Record; } const Auth: React.FC = ({ @@ -35,6 +67,7 @@ const Auth: React.FC = ({ onError, authConfig, configOrder, + theme, }) => { const { passkeyClient, authIframeClient } = useTurnkey(); const [email, setEmail] = useState(""); @@ -49,6 +82,15 @@ const Auth: React.FC = ({ 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"); @@ -241,9 +283,6 @@ const Auth: React.FC = ({ borderRadius: "50%", padding: "6px", transition: "background-color 0.3s ease", - "&:hover": { - backgroundColor: "var(--button-hover-bg)", - }, }} /> ); @@ -312,6 +351,7 @@ const Auth: React.FC = ({ fullWidth sx={{ "& .MuiOutlinedInput-root": { + color: "var(--input-text)", "& fieldset": { borderColor: "var(--input-border)", }, @@ -397,16 +437,16 @@ const Auth: React.FC = ({ {passkeySignupScreen ? (
{renderBackButton()} -
- -
+
{passkeyIcon}
-

Create a passkey

+

Create a passkey

- Passkeys allow for easy biometric access to your wallet and can be - synced across devices. + + Passkeys allow for easy biometric access to your wallet and can + be synced across devices. +