diff --git a/examples/react-components/package.json b/examples/react-components/package.json index 546b4d80..5cb71459 100644 --- a/examples/react-components/package.json +++ b/examples/react-components/package.json @@ -17,9 +17,9 @@ "@mui/material": "^6.1.5", "@noble/hashes": "1.4.0", "@solana/web3.js": "^1.95.8", - "@turnkey/sdk-browser": "workspace:*", - "@turnkey/sdk-react": "workspace:*", - "@turnkey/sdk-server": "workspace:*", + "@turnkey/sdk-browser": "^1.11.0", + "@turnkey/sdk-react": "^2.00", + "@turnkey/sdk-server": "^1.7.0", "@types/node": "20.3.1", "@types/react": "18.2.14", "@types/react-dom": "18.2.6", diff --git a/examples/react-components/src/app/index.css b/examples/react-components/src/app/index.css index 71529fbb..acaf7b18 100644 --- a/examples/react-components/src/app/index.css +++ b/examples/react-components/src/app/index.css @@ -167,3 +167,53 @@ body { .sonner-toaster > div { pointer-events: auto; } +.mobile-warning { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 16px; + background: rgba(255, 255, 255, 0.8); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-image: url("../../public/grid.svg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +.mobile-content { + text-align: center; +} +.warning-text { + margin-bottom: 20px; + font-size: 1.2rem; + font-weight: bold; +} + +.continueButton { + padding: 10px 16px 10px 16px; + gap: 8px; + color: #ffffff; + width: 50%; + font-size: 1rem; + background: var(--Greyscale-900, #2b2f33); + border: 1px solid var(--Greyscale-800, #3f464b); + border-radius: 8px; + cursor: pointer; + transition: 0.3s ease; +} + +.continueButton:disabled { + color: var(--Greyscale-700, #a2a7ae); + background: #ffffff; + border-color: var(--Greyscale-400, #a2a7ae); + cursor: not-allowed; +} + +.continueButton:hover { + background-color: var(--Greyscale-700, #4a4f55); +} diff --git a/examples/react-components/src/app/page.tsx b/examples/react-components/src/app/page.tsx index 719dd8de..52e0917f 100644 --- a/examples/react-components/src/app/page.tsx +++ b/examples/react-components/src/app/page.tsx @@ -46,6 +46,8 @@ export default function AuthPage() { router.push("/dashboard"); }; const { turnkey } = useTurnkey(); + const [isMobile, setIsMobile] = useState(false); + const [showContent, setShowContent] = useState(!isMobile); const [configOrder, setConfigOrder] = useState([ "socials", "email", @@ -67,6 +69,22 @@ export default function AuthPage() { }, }); + useEffect(() => { + const checkMobile = () => { + const userAgent = navigator.userAgent || navigator.vendor; + const mobileRegex = + /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i; + setIsMobile(mobileRegex.test(userAgent.toLowerCase())); + }; + checkMobile(); + window.addEventListener("resize", checkMobile); + return () => window.removeEventListener("resize", checkMobile); + }, []); + useEffect(() => { + if (isMobile) { + setShowContent(false); + } + }, [isMobile]); useEffect(() => { const manageSession = async () => { if (turnkey) { @@ -164,6 +182,26 @@ export default function AuthPage() { setConfigOrder(reorderedConfig); }; + if (isMobile && !showContent) { + return ( + + + + + For the best experience, please view this demo on a desktop. + + setShowContent(true)} + > + Continue Anyway + + + + + ); + } + return ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5640a20f..81c70db9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -497,13 +497,13 @@ importers: specifier: ^1.95.8 version: 1.95.8(encoding@0.1.13) '@turnkey/sdk-browser': - specifier: workspace:* + specifier: ^1.11.0 version: link:../../packages/sdk-browser '@turnkey/sdk-react': - specifier: workspace:* + specifier: ^2.00 version: link:../../packages/sdk-react '@turnkey/sdk-server': - specifier: workspace:* + specifier: ^1.7.0 version: link:../../packages/sdk-server '@types/node': specifier: 20.3.1