From aad21994b3c85bcaa01edebc2409d36f6e0a3c98 Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Mon, 9 Dec 2024 15:29:39 -0500 Subject: [PATCH] changes requested for dec5 --- .../src/app/components/PhoneInput.tsx | 2 + .../src/app/dashboard/page.tsx | 31 ++++-- examples/react-components/src/app/page.tsx | 4 +- .../react-components/src/app/utils/oidc.ts | 2 - .../sdk-react/src/components/auth/Auth.tsx | 5 +- .../auth/OtpVerification.module.css | 57 ++++++++-- .../src/components/auth/OtpVerification.tsx | 103 ++++++++++-------- .../src/components/auth/PhoneInput.tsx | 1 + .../sdk-react/src/components/auth/otp.tsx | 3 +- .../src/components/export/Export.tsx | 13 ++- .../src/components/import/Import.tsx | 14 ++- 11 files changed, 167 insertions(+), 68 deletions(-) diff --git a/examples/react-components/src/app/components/PhoneInput.tsx b/examples/react-components/src/app/components/PhoneInput.tsx index 074a51b6..5d4bd7c5 100644 --- a/examples/react-components/src/app/components/PhoneInput.tsx +++ b/examples/react-components/src/app/components/PhoneInput.tsx @@ -47,6 +47,8 @@ export const MuiPhone: React.FC = ({ {user && user.userEmail ? ( - + ) : (
@@ -467,7 +479,7 @@ export default function Dashboard() { )}
{user && user.userPhoneNumber ? ( - + ) : (
@@ -481,7 +493,7 @@ export default function Dashboard() { Passkey
{user && user.authenticators && user.authenticators.length > 0 ? ( - + ) : (
setIsPasskeyModalOpen(true)}> @@ -505,7 +517,7 @@ export default function Dashboard() { user.oauthProviders.some((provider: { issuer: string }) => provider.issuer.toLowerCase().includes("google") ) ? ( - + ) : (
handleAddOauth("Google")}> @@ -522,7 +534,7 @@ export default function Dashboard() { user.oauthProviders.some((provider: { issuer: string }) => provider.issuer.toLowerCase().includes("apple") ) ? ( - + ) : (
handleAddOauth("Apple")}> @@ -539,7 +551,7 @@ export default function Dashboard() { user.oauthProviders.some((provider: { issuer: string }) => provider.issuer.toLowerCase().includes("facebook") ) ? ( - + ) : (
handleAddOauth("Facebook")}> @@ -663,10 +675,12 @@ export default function Dashboard() { walletId={selectedWallet!} onHandleExportSuccess={handleExportSuccess} onError={(errorMessage: string) => toast.error(errorMessage)} + theme={darkButtonTheme} > toast.error(errorMessage)} onHandleImportSuccess={handleImportSuccess} + theme={darkButtonTheme} />
@@ -836,7 +850,6 @@ export default function Dashboard() { {messageSigningResult && ( setEmailInput(e.target.value)} diff --git a/examples/react-components/src/app/page.tsx b/examples/react-components/src/app/page.tsx index 2820e546..7c6c072b 100644 --- a/examples/react-components/src/app/page.tsx +++ b/examples/react-components/src/app/page.tsx @@ -180,7 +180,7 @@ export default function AuthPage() { onChange={() => toggleSocials("enabled")} />
-
+
Google @@ -200,7 +200,7 @@ export default function AuthPage() { onChange={() => toggleSocials("apple")} />
-
+
Facebook diff --git a/examples/react-components/src/app/utils/oidc.ts b/examples/react-components/src/app/utils/oidc.ts index 27d66ee1..7d8b4430 100644 --- a/examples/react-components/src/app/utils/oidc.ts +++ b/examples/react-components/src/app/utils/oidc.ts @@ -69,7 +69,6 @@ export const appleOidcToken = async ({ if (authWindow?.closed) { clearInterval(interval); - reject(new Error("Apple login window was closed.")); } }, 500); }); @@ -127,7 +126,6 @@ export const googleOidcToken = async ({ if (authWindow?.closed) { clearInterval(interval); - reject(new Error("Google login window was closed.")); } }, 500); }); diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index eb7eb28f..5f8bd6d1 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -202,11 +202,11 @@ const Auth: React.FC = ({ setPasskeyCreationScreen(false); setPasskeySignupError(""); } else { - setPasskeySignupError("Failed to login with passkey. Please try again"); + setPasskeySignupError("Failed to login with passkey. Please try again."); } } catch { setPasskeySignupError( - "The operation either timed out or was not allowed. Please try again" + "The operation either timed out or was not allowed. Please try again." ); } }; @@ -344,6 +344,7 @@ const Auth: React.FC = ({
= ({ onResendCode, }) => { const [otpError, setOtpError] = useState(null); + const [isLoading, setIsLoading] = useState(false); const [resendText, setResendText] = useState("Resend code"); const otpInputRef = useRef(null); const handleValidateOtp = async (otp: string) => { setOtpError(null); - + setIsLoading(true) try { const authResponse = await otpAuth({ suborgID: suborgId, @@ -45,12 +47,13 @@ const OtpVerification: React.FC = ({ if (authResponse?.credentialBundle) { await onValidateSuccess(authResponse.credentialBundle); } else { - setOtpError("Invalid code. Please try again"); + setOtpError("Invalid code. Please try again."); } otpInputRef.current.resetOtp(); } catch (error) { setOtpError("An error occurred. Please try again."); } + setIsLoading(false) }; const handleResendCode = async () => { @@ -72,52 +75,66 @@ const OtpVerification: React.FC = ({ return (
-
- {type === "otpEmail" ? ( - - ) : ( - + - )} -
- - - Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"} to{" "} - - {type === "otpEmail" ? contact : formatPhoneNumber(contact)} - - - - - -
{otpError ? otpError : " "}
- -
- - {resendText} +
+ )} +
+
+ {type === "otpEmail" ? ( + + ) : ( + + )} +
+ + + Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"} to{" "} + + {type === "otpEmail" ? contact : formatPhoneNumber(contact)} + + +
+ +
+ +
{otpError ? otpError : " "}
+ +
+ + {resendText} + +
); + }; export default OtpVerification; diff --git a/packages/sdk-react/src/components/auth/PhoneInput.tsx b/packages/sdk-react/src/components/auth/PhoneInput.tsx index 72cd71bb..2f408beb 100644 --- a/packages/sdk-react/src/components/auth/PhoneInput.tsx +++ b/packages/sdk-react/src/components/auth/PhoneInput.tsx @@ -48,6 +48,7 @@ export const MuiPhone: React.FC = ({ name="phoneInput" variant="outlined" color="primary" + autoComplete="off" placeholder="Phone number" value={inputValue} onChange={handlePhoneValueChange} diff --git a/packages/sdk-react/src/components/auth/otp.tsx b/packages/sdk-react/src/components/auth/otp.tsx index 8fbaa8d3..88d884a8 100644 --- a/packages/sdk-react/src/components/auth/otp.tsx +++ b/packages/sdk-react/src/components/auth/otp.tsx @@ -75,7 +75,8 @@ const OtpInput = forwardRef( style: { textAlign: "center", fontSize: "1.5rem", - width: "60px", + height: "20px", + width: "100%", background: "var(--input-bg)", }, }} diff --git a/packages/sdk-react/src/components/export/Export.tsx b/packages/sdk-react/src/components/export/Export.tsx index 1b7b62aa..dec60208 100644 --- a/packages/sdk-react/src/components/export/Export.tsx +++ b/packages/sdk-react/src/components/export/Export.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Modal, Box, Typography } from "@mui/material"; import { useTurnkey } from "../../hooks/use-turnkey"; import type { TurnkeyIframeClient } from "@turnkey/sdk-browser"; @@ -13,12 +13,14 @@ type ExportProps = { walletId: string; onHandleExportSuccess: () => Promise; onError: (errorMessage: string) => void; + theme?: Record; }; const Export: React.FC = ({ walletId, onHandleExportSuccess, onError, + theme }) => { const { authIframeClient, turnkey } = useTurnkey(); const [exportIframeClient, setExportIframeClient] = @@ -28,6 +30,15 @@ const Export: React.FC = ({ const TurnkeyExportIframeContainerId = "turnkey-export-iframe-container-id"; const TurnkeyIframeElementId = "turnkey-default-iframe-element-id"; + useEffect(() => { + if (theme) { + const root = document.documentElement.style; + Object.entries(theme).forEach(([key, value]) => { + root.setProperty(key, value); + }); + } + }, [theme]); + const handleOpenModal = async () => { setIsModalOpen(true); diff --git a/packages/sdk-react/src/components/import/Import.tsx b/packages/sdk-react/src/components/import/Import.tsx index b91ace6a..b437d2b8 100644 --- a/packages/sdk-react/src/components/import/Import.tsx +++ b/packages/sdk-react/src/components/import/Import.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Modal, Box, Typography, TextField } from "@mui/material"; import { useTurnkey } from "../../hooks/use-turnkey"; import { @@ -12,9 +12,10 @@ import importIcon from "assets/import.svg"; type ImportProps = { onError: (errorMessage: string) => void; onHandleImportSuccess: () => Promise; + theme?: Record; }; -const Import: React.FC = ({ onHandleImportSuccess, onError }) => { +const Import: React.FC = ({ onHandleImportSuccess, onError, theme}) => { const { authIframeClient, turnkey } = useTurnkey(); const [importIframeClient, setImportIframeClient] = useState(null); @@ -23,6 +24,15 @@ const Import: React.FC = ({ onHandleImportSuccess, onError }) => { const TurnkeyImportIframeContainerId = "turnkey-import-iframe-container-id"; const TurnkeyIframeElementId = "turnkey-default-iframe-element-id"; + useEffect(() => { + if (theme) { + const root = document.documentElement.style; + Object.entries(theme).forEach(([key, value]) => { + root.setProperty(key, value); + }); + } + }, [theme]); + const handleOpenModal = async () => { setIsModalOpen(true);