From 1193e250aae5b3fd602659f07cbced110d421090 Mon Sep 17 00:00:00 2001
From: Nur Fikri <codingki@gmail.com>
Date: Mon, 28 Oct 2024 09:25:47 +0700
Subject: [PATCH 1/2] add mobile placeholder

---
 chain-registry      |  2 +-
 src/pages/index.tsx | 72 +++++++++++++++++++++++++++++----------------
 2 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/chain-registry b/chain-registry
index d469a854..0e5b998f 160000
--- a/chain-registry
+++ b/chain-registry
@@ -1 +1 @@
-Subproject commit d469a854d19a08df157513e0757c36cccfd44da8
+Subproject commit 0e5b998fc1770ebe727a2208287fa4394a2b9ba4
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 28ee3c5f..35ab7fc1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,31 +1,34 @@
+import { useEffect, useMemo, useState } from "react";
 import { defaultTheme, lightTheme, Widget } from "widgetv2";
 
 import DiscordButton from "@/components/DiscordButton";
 import { LogoGo } from "@/components/LogoGo";
 import WidgetButton from "@/components/WidgetButton";
-import { cn } from "@/utils/ui";
-
-import { apiURL, endpointOptions } from "@/lib/skip-go-widget";
-import { useEffect, useState } from "react";
 import { useURLQueryParams } from "@/hooks/useURLQueryParams";
+import { apiURL, endpointOptions } from "@/lib/skip-go-widget";
+import { isMobile } from "@/utils/os";
+import { cn } from "@/utils/ui";
 
 export default function Home() {
   const defaultRoute = useURLQueryParams();
-  const [theme, setTheme] = useState<'light' | 'dark'>();
+  const [theme, setTheme] = useState<"light" | "dark">();
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-        setTheme('light');
+    if (typeof window !== "undefined") {
+      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+        setTheme("light");
       } else {
-        setTheme('dark');
+        setTheme("dark");
       }
-    
-      window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', event => {
+
+      window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", (event) => {
         const newColorScheme = event.matches ? "light" : "dark";
         setTheme(newColorScheme);
       });
     }
   }, []);
+
+  const mobile = useMemo(() => isMobile(), []);
+
   if (!theme) return null;
   return (
     <div
@@ -34,31 +37,48 @@ export default function Home() {
         "relative overflow-x-hidden overflow-y-hidden",
         "before:fixed before:inset-x-0 before:bottom-0 before:h-[100vh] before:content-['']",
         "before:bg-cover before:bg-[center_top] before:bg-no-repeat",
-        theme === 'dark' ? 'before:bg-[url(/widgetv2-dark-bg.svg)]' : theme === 'light' ? 'before:bg-[url(/widgetv2-light-bg.svg)]' : ''
+        theme === "dark"
+          ? "before:bg-[url(/widgetv2-dark-bg.svg)]"
+          : theme === "light"
+            ? "before:bg-[url(/widgetv2-light-bg.svg)]"
+            : "",
       )}
     >
       <main className="relative flex min-h-screen flex-col items-center">
         <div className="flex h-20 w-full flex-row items-center justify-between px-6 py-4">
-          <LogoGo color={theme === "dark" ? 'white' : 'black'} />
+          <LogoGo color={theme === "dark" ? "white" : "black"} />
           <div className="flex flex-row space-x-2">
             <WidgetButton />
             <DiscordButton />
           </div>
         </div>
         <div className="flex flex-grow flex-col items-center pt-16">
-          <div
-            style={{
-              position: 'absolute',
-              top: '50%',
-              transform: 'translateY(-185px)',
-            }}
-          >
-            <Widget
-              theme={theme === 'dark' ? defaultTheme : lightTheme}
-              endpointOptions={endpointOptions}
-              apiURL={apiURL}
-            />
-          </div>
+          {!mobile ? (
+            <div
+              style={{
+                position: "absolute",
+                top: "50%",
+                transform: "translateY(-185px)",
+              }}
+            >
+              <Widget
+                theme={theme === "dark" ? defaultTheme : lightTheme}
+                endpointOptions={endpointOptions}
+                apiURL={apiURL}
+              />
+            </div>
+          ) : (
+            <div
+              style={{
+                position: "absolute",
+                top: "50%",
+              }}
+            >
+              <div className={`text-center ${theme === "dark" ? "text-white" : "text-blackA10"}`}>
+                Skip go app is not yet available on mobile.
+              </div>
+            </div>
+          )}
         </div>
       </main>
     </div>

From 9c534ae43c596d2ad41208e554a2b07f1d7bf8a9 Mon Sep 17 00:00:00 2001
From: Nur Fikri <codingki@gmail.com>
Date: Mon, 28 Oct 2024 10:10:53 +0700
Subject: [PATCH 2/2] update text

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

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 35ab7fc1..9c70a6fe 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -74,8 +74,10 @@ export default function Home() {
                 top: "50%",
               }}
             >
-              <div className={`text-center ${theme === "dark" ? "text-white" : "text-blackA10"}`}>
-                Skip go app is not yet available on mobile.
+              <div
+                className={`mx-2 rounded-2xl p-5 py-3 text-center text-[24px] font-medium ${theme === "dark" ? "bg-black text-gray-400" : "bg-white text-gray-400"}`}
+              >
+                Mobile support coming soon!
               </div>
             </div>
           )}