ready

packages/app/public/manifest.json

@@ -2,8 +2,6 @@
   "name": "Foil",
   "short_name": "Foil",
   "description": "The fully decentralized marketplace for onchain resources",
-  "start_url": "https://app.foil.xyz",
-  "scope": "https://app.foil.xyz/",
   "display": "standalone",
   "background_color": "#FFFFFF",
   "theme_color": "#2C2C2E",

packages/app/src/app/layout.tsx

@@ -4,6 +4,7 @@ import Providers from '~/app/providers';
 import '@rainbow-me/rainbowkit/styles.css';
 import '../lib/styles/globals.css';
 import { LoadingSpinner } from '~/lib/components/foil/loadingSpinner';
+import { InstallDialog } from '~/lib/components/InstallDialog';
 import { LoadingProvider } from '~/lib/context/LoadingContext';
 import { Toaster } from '@/components/ui/toaster';
 import Layout from '~/lib/layout';
@@ -61,6 +62,7 @@ const RootLayout = ({ children }: RootLayoutProps) => {
           <LoadingProvider>
             <LoadingSpinner />
             <Layout>{children}</Layout>
+            <InstallDialog />
             <Toaster />
           </LoadingProvider>
         </Providers>

packages/app/src/lib/components/InstallDialog.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { Share, PlusSquare } from 'lucide-react';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+export const InstallDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Check if we're on mobile and not in standalone mode
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    const isStandalone = window.matchMedia(
+      '(display-mode: standalone)'
+    ).matches;
+
+    if (isMobile && !isStandalone) {
+      setIsOpen(true);
+    }
+  }, []);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DialogHeader className="mb-6">
+            <div className="my-4 flex justify-center">
+              <Image
+                src="/icons/icon-192x192.png"
+                alt="Foil App Icon"
+                width={72}
+                height={72}
+                className="rounded-2xl border border-border shadow-lg"
+              />
+            </div>
+            <DialogTitle className="text-center text-2xl">
+              Install Foil
+            </DialogTitle>
+            <DialogDescription>
+              Add the app to your home screen
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 rounded-lg bg-muted px-4 py-8 text-center">
+            <div className="space-y-2">
+              <p className="text-lg">
+                Tap the{' '}
+                <span className="mx-0.5 inline-flex translate-y-[3px] items-center">
+                  <Share className="h-5 w-5" />
+                </span>{' '}
+                share icon in your browser
+              </p>
+            </div>
+            <div className="space-y-2">
+              <p className="text-lg">
+                Select{' '}
+                <span className="mx-0.5 inline-flex translate-y-[3px] items-center">
+                  <PlusSquare className="h-5 w-5" />
+                </span>{' '}
+                Add to Home Screen
+              </p>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/website/src/app/layout.tsx

@@ -15,7 +15,6 @@ export const metadata: Metadata = {
   title: APP_NAME,
   description: APP_DESCRIPTION,
   applicationName: APP_NAME,
-  manifest: '/manifest.json',
   appleWebApp: {
     capable: true,
     title: APP_NAME,

packages/website/src/lib/layout/components/header.tsx

@@ -2,15 +2,6 @@
 
 import Image from 'next/image';
 import { Button } from '@/components/ui/button';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from '@/components/ui/drawer';
-import { Share, PlusSquare } from 'lucide-react';
 
 export const Header = () => {
   return (
@@ -24,66 +15,20 @@ export const Header = () => {
           >
             Docs
           </a>
-          {/* Desktop button */}
           <Button
             asChild
-            className="hidden rounded-2xl p-6 font-semibold md:flex"
+            className="flex items-center rounded-2xl p-6 font-semibold"
           >
-            <a href="https://app.foil.xyz">Go to App</a>
+            <a href="https://app.foil.xyz" className="hidden md:inline-flex">
+              Go to App
+            </a>
+          </Button>
+          <Button
+            asChild
+            className="flex items-center rounded-2xl p-6 font-semibold md:hidden"
+          >
+            <a href="https://app.foil.xyz">Install App</a>
           </Button>
-          {/* Mobile install button with drawer */}
-          <div className="md:hidden">
-            <Drawer>
-              <DrawerTrigger asChild>
-                <Button className="rounded-2xl p-6 font-semibold">
-                  Install App
-                </Button>
-              </DrawerTrigger>
-              <DrawerContent>
-                <div className="mx-auto w-full max-w-sm">
-                  <DrawerHeader>
-                    <div className="my-4 flex justify-center">
-                      <Image
-                        src="/icons/icon-192x192.png"
-                        alt="Foil App Icon"
-                        width={72}
-                        height={72}
-                        className="rounded-2xl border border-border shadow-lg"
-                      />
-                    </div>
-                    <DrawerTitle className="text-center text-2xl">
-                      Install Foil
-                    </DrawerTitle>
-                    <p className="text-center text-muted-foreground">
-                      Add the app to your home screen
-                    </p>
-                  </DrawerHeader>
-                  <DrawerFooter>
-                    <div className="space-y-4 rounded-lg bg-muted px-4 py-8 text-center">
-                      <div className="space-y-2">
-                        <p className="text-lg">
-                          Tap the{' '}
-                          <span className="mx-0.5 inline-flex translate-y-[3px] items-center">
-                            <Share className="h-5 w-5" />
-                          </span>{' '}
-                          share icon in your browser
-                        </p>
-                      </div>
-                      <div className="space-y-2">
-                        <p className="text-lg">
-                          Select{' '}
-                          <span className="mx-0.5 inline-flex translate-y-[3px] items-center">
-                            <PlusSquare className="h-5 w-5" />
-                          </span>{' '}
-                          Add to Home Screen
-                        </p>
-                      </div>
-                    </div>
-                  </DrawerFooter>
-                </div>
-              </DrawerContent>
-            </Drawer>
-          </div>
         </div>
       </section>
     </header>