From bed1022155c17898d1bf7e232c153bbfcd25e484 Mon Sep 17 00:00:00 2001
From: Mohammad Cheikh <moe@turnkey.io>
Date: Tue, 17 Dec 2024 17:15:17 -0500
Subject: [PATCH 1/3] point to live versions of turnkey

---
 examples/react-components/package.json | 6 +++---
 pnpm-lock.yaml                         | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

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/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

From f52b04f53760e31ffe23823fe6150b57f66457b3 Mon Sep 17 00:00:00 2001
From: Mohammad Cheikh <moe@turnkey.io>
Date: Wed, 18 Dec 2024 13:13:34 -0500
Subject: [PATCH 2/3] add mobile viewing block

---
 examples/react-components/src/app/index.css | 50 +++++++++++++++++++++
 examples/react-components/src/app/page.tsx  | 32 +++++++++++++
 2 files changed, 82 insertions(+)

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..b0fb9e0c 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,16 @@ export default function AuthPage() {
     },
   });
 
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+      setShowContent(window.innerWidth > 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
   useEffect(() => {
     const manageSession = async () => {
       if (turnkey) {
@@ -164,6 +176,26 @@ export default function AuthPage() {
     setConfigOrder(reorderedConfig);
   };
 
+  if (isMobile && !showContent) {
+    return (
+      <main>
+        <div className="mobile-warning">
+          <div className="mobile-content">
+            <div className="warning-text">
+              For the best experience, please view this demo on a desktop.
+            </div>
+            <button
+              className="continueButton"
+              onClick={() => setShowContent(true)}
+            >
+              Continue Anyway
+            </button>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
   return (
     <main className="main">
       <Navbar />

From 69979f09483e87fdccdc4ac57941300267ae9409 Mon Sep 17 00:00:00 2001
From: Mohammad Cheikh <moe@turnkey.io>
Date: Wed, 18 Dec 2024 18:49:31 -0500
Subject: [PATCH 3/3] change to more robust mobile check

---
 examples/react-components/src/app/page.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/examples/react-components/src/app/page.tsx b/examples/react-components/src/app/page.tsx
index b0fb9e0c..52e0917f 100644
--- a/examples/react-components/src/app/page.tsx
+++ b/examples/react-components/src/app/page.tsx
@@ -71,14 +71,20 @@ export default function AuthPage() {
 
   useEffect(() => {
     const checkMobile = () => {
-      setIsMobile(window.innerWidth <= 768);
-      setShowContent(window.innerWidth > 768);
+      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) {