feat: deploy Noblocks as Farcaster Mini App using MiniKit

app/.well-known/farcaster.json/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from "next/server";
+import config from "../../lib/config";
+
+export async function GET() {
+    const assetBaseUrl = "https://noblocks.xyz";
+
+    const manifest: any = {
+        accountAssociation: {
+            header: config.baseAppHeader,
+            payload: config.baseAppPayload,
+            signature: config.baseAppSignature,
+        },
+        baseBuilder: {
+            ownerAddress: config.baseBuilderOwnerAddress,
+        },
+        miniapp: {
+            version: "1",
+            name: "Noblocks",
+            homeUrl: assetBaseUrl,
+            iconUrl: `${assetBaseUrl}/icons/android-chrome-192x192.png`,
+            imageUrl: `${assetBaseUrl}/images/og-image.jpg`,
+            splashImageUrl: `${assetBaseUrl}/images/noblocks-bg-image.png`,
+            splashBackgroundColor: "#8B85F4",
+            subtitle: "Decentralized Payments",
+            description:
+                "Send crypto payments to any bank or mobile wallet via distributed liquidity network.",
+            screenshotUrls: [
+                `${assetBaseUrl}/screenshots/mobile-narrow.png`,
+                `${assetBaseUrl}/screenshots/desktop-wide.png`,
+            ],
+            primaryCategory: "finance",
+            tags: ["payments", "crypto", "remittance", "defi"],
+            heroImageUrl: `${assetBaseUrl}/images/noblocks-bg-image.png`,
+            tagline: "Crypto-to-fiat payments",
+            ogTitle: "Noblocks",
+            ogDescription: "Decentralized payments to any bank or mobile wallet via distributed liquidity network.",
+            ogImageUrl: `${assetBaseUrl}/images/og-image.jpg`,
+            noindex: false,
+        },
+    };
+
+    return NextResponse.json(manifest, {
+        headers: {
+            "Content-Type": "application/json",
+            // Disable caching completely during testing
+            "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
+            "Pragma": "no-cache",
+            "Expires": "0",
+            // Explicitly allow framing
+            "X-Frame-Options": "",
+        },
+    });
+}

app/api/og/route.tsx

@@ -0,0 +1,81 @@
+import { ImageResponse } from "next/og";
+
+export async function GET() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: "flex",
+          height: "100%",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          background: "linear-gradient(135deg, #317EFB 0%, #1E40AF 100%)",
+          color: "white",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          padding: "40px",
+        }}
+      >
+        {/* Logo/Brand */}
+        <div
+          style={{
+            fontSize: 80,
+            fontWeight: "800",
+            marginBottom: 20,
+            letterSpacing: "-0.02em",
+          }}
+        >
+          Noblocks
+        </div>
+
+        {/* Tagline */}
+        <div
+          style={{
+            fontSize: 36,
+            textAlign: "center",
+            maxWidth: "900px",
+            lineHeight: 1.2,
+            opacity: 0.95,
+            fontWeight: "400",
+          }}
+        >
+          Change stablecoins to cash in seconds
+        </div>
+
+        {/* Subtitle */}
+        <div
+          style={{
+            fontSize: 24,
+            textAlign: "center",
+            maxWidth: "800px",
+            marginTop: 30,
+            opacity: 0.8,
+            fontWeight: "300",
+          }}
+        >
+          Decentralized payments to any bank or mobile wallet
+        </div>
+
+        {/* Visual element */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 40,
+            right: 40,
+            display: "flex",
+            alignItems: "center",
+            fontSize: 20,
+            opacity: 0.7,
+          }}
+        >
+          noblocks.xyz
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    },
+  );
+}

app/blog/[id]/page.tsx

@@ -1,6 +1,6 @@
 import DetailClient from "@/app/components/blog/post/detail-client";
 import { getPost, getRecentPosts } from "@/app/lib/sanity-data";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { Metadata } from "next";
 import type { PortableTextBlock } from "@portabletext/types";
 
@@ -109,9 +109,17 @@ export async function generateMetadata({
 
 export default async function BlogPostDetailPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ id: string }>;
+  searchParams: Promise<{ mini?: string }>;
 }) {
+  // Redirect to home page if in mini mode
+  const resolvedSearchParams = await searchParams;
+  if (resolvedSearchParams.mini === "true") {
+    redirect("/?mini=true");
+  }
+
   const { id } = await params;
   const post = await getPost(id);
   if (!post) notFound();

app/blog/page.tsx

@@ -2,6 +2,7 @@ import React, { Suspense } from "react";
 import { getPosts, getCategories, getCachedPosts } from "@/app/lib/sanity-data";
 import HomeClient from "@/app/components/blog/home-client";
 import { Metadata } from "next";
+import { redirect } from "next/navigation";
 
 // Force dynamic rendering to ensure fresh data
 export const dynamic = "force-dynamic";
@@ -43,7 +44,17 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-export default async function Home() {
+export default async function Home({
+  searchParams,
+}: {
+  searchParams: Promise<{ mini?: string }>;
+}) {
+  // Redirect to home page if in mini mode
+  const resolvedSearchParams = await searchParams;
+  if (resolvedSearchParams.mini === "true") {
+    redirect("/?mini=true");
+  }
+
   // Fetch data from Sanity (cached to avoid duplicate fetch in metadata)
   const sanityPosts = await getCachedPosts();
   const sanityCategories = await getCategories();

app/components/AppLayout.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+"use client";
+import React, { useEffect, useState } from "react";
 import Script from "next/script";
 import config from "../lib/config";
 
-import Providers from "../providers";
 import MainContent from "../mainContent";
 import {
   Footer,
@@ -11,22 +11,36 @@ import {
   PWAInstall,
   NoticeBanner,
 } from "./index";
+import { useBaseApp } from "../context";
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
+  const { isBaseApp, isFarcaster } = useBaseApp();
+  const [isMounted, setIsMounted] = useState(false);
+
+  // Only check mini app status after mount to prevent hydration mismatch
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  // Always render full UI on server, then conditionally hide on client after mount
+  const isMiniApp = isMounted && (isBaseApp || isFarcaster);
+
   return (
-    <Providers>
+    <>
       <div className="min-h-full min-w-full bg-white transition-colors dark:bg-neutral-900">
-        <div className="relative">
-          <Navbar />
-          {config.noticeBannerText && (
-            <NoticeBanner textLines={config.noticeBannerText.split("|")} />
-          )}
-        </div>
-        <LayoutWrapper footer={<Footer />}>
+        {!isMiniApp && (
+          <div className="relative">
+            <Navbar />
+            {config.noticeBannerText && (
+              <NoticeBanner textLines={config.noticeBannerText.split("|")} />
+            )}
+          </div>
+        )}
+        <LayoutWrapper footer={!isMiniApp ? <Footer /> : undefined}>
           <MainContent>{children}</MainContent>
         </LayoutWrapper>
 
-        <PWAInstall />
+        {!isMiniApp && <PWAInstall />}
       </div>
 
       {/* Brevo Chat Widget */}
@@ -44,6 +58,6 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
           />{" "}
         </>
       )}
-    </Providers>
+    </>
   );
 }

app/components/HomePage.tsx

@@ -143,7 +143,7 @@ function HomePageComponent({
         </motion.div>
       </div>
 
-      {/* All additional content - always visible, scroll-triggered animations */}
+      {/* All additional content - scroll-triggered animations */}
       <div className="-mt-2 w-full lg:-mt-4">
         <BlurRevealSection
           id="video-section"

app/components/MainPageContent.tsx

@@ -68,7 +68,7 @@ const PageLayout = ({
   const walletAddress = isInjectedWallet
     ? injectedAddress
     : user?.linkedAccounts.find((account) => account.type === "smart_wallet")
-        ?.address;
+      ?.address;
 
   return (
     <>
@@ -149,30 +149,30 @@ export function MainPageContent() {
 
   // State props for child components
   const stateProps: StateProps = {
-      formValues,
-      setFormValues,
-
-      rate,
-      setRate,
-      isFetchingRate,
-      setIsFetchingRate,
-      rateError,
-      setRateError,
-
-      institutions,
-      setInstitutions,
-      isFetchingInstitutions,
-      setIsFetchingInstitutions,
-
-      selectedRecipient,
-      setSelectedRecipient,
-
-      orderId,
-      setOrderId,
-      setCreatedAt,
-      setTransactionStatus,
-    }
-    
+    formValues,
+    setFormValues,
+
+    rate,
+    setRate,
+    isFetchingRate,
+    setIsFetchingRate,
+    rateError,
+    setRateError,
+
+    institutions,
+    setInstitutions,
+    isFetchingInstitutions,
+    setIsFetchingInstitutions,
+
+    selectedRecipient,
+    setSelectedRecipient,
+
+    orderId,
+    setOrderId,
+    setCreatedAt,
+    setTransactionStatus,
+  }
+
   useEffect(function setPageLoadingState() {
     setOrderId("");
     setIsPageLoading(false);

app/components/Navbar.tsx

@@ -193,9 +193,8 @@ export const Navbar = () => {
               <div className="hidden items-center sm:flex">
                 <Link
                   href="/"
-                  className={`${
-                    IS_MAIN_PRODUCTION_DOMAIN ? "" : "-mt-[3px]"
-                  } text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-white/80 dark:hover:text-white`}
+                  className={`${IS_MAIN_PRODUCTION_DOMAIN ? "" : "-mt-[3px]"
+                    } text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-white/80 dark:hover:text-white`}
                 >
                   Swap
                 </Link>