From 98a67f09ee8ce0f57a7780618b0e2be5609a5d99 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Mon, 26 Feb 2024 15:55:37 -0800
Subject: [PATCH] update mobile view for onboarding screen

---
 src/pages/index.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e8b96c6a..780c9b90 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,9 +4,16 @@ import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { useClient } from "@xmtp/react-sdk";
 import { useNavigate } from "react-router-dom";
 import { OnboardingStep } from "../component-library/components/OnboardingStep/OnboardingStep";
-import { classNames, isAppEnvDemo, wipeKeys } from "../helpers";
+import {
+  TAILWIND_MD_BREAKPOINT,
+  classNames,
+  isAppEnvDemo,
+  wipeKeys,
+} from "../helpers";
 import useInitXmtpClient from "../hooks/useInitXmtpClient";
 import { useXmtpStore } from "../store/xmtp";
+import { Mobile } from "../component-library/components/Mobile/Mobile";
+import useWindowSize from "../hooks/useWindowSize";
 
 const OnboardingPage = () => {
   const navigate = useNavigate();
@@ -47,7 +54,11 @@ const OnboardingPage = () => {
     }
   }, [status]);
 
-  return (
+  const size = useWindowSize();
+
+  return size[0] < TAILWIND_MD_BREAKPOINT ? (
+    <Mobile />
+  ) : (
     <div className={classNames("h-screen", "w-full", "overflow-auto")}>
       <OnboardingStep
         step={step}