feat: deploy Noblocks as Farcaster Mini App using MiniKit

app/.well-known/farcaster.json

@@ -0,0 +1,36 @@
+{
+  "name": "Noblocks",
+  "description": "A crypto-enabled mini app for sending and receiving stablecoins on Base using Farcaster.",
+  "app": {
+    "url": "https://noblocks.xyz",
+    "window": {
+      "height": 600,
+      "width": 400
+    }
+  },
+  "icon": {
+    "light": "https://noblocks.xyz/icons/favicon_.png",
+    "dark": "https://noblocks.xyz/icons/favicon.png"
+  },
+  "splash_screen": {
+    "light": "https://noblocks.xyz/android-chrome-192x192.png",
+    "dark": "https://noblocks.xyz/android-chrome-192x192.png"
+  },
+  "navigation_bar": {
+    "visible": true,
+    "title": "Noblocks"
+  },
+  "version": "1.0.0",
+  "primaryCategory": "finance",
+  "tags": ["web3"],
+  "developer": {
+    "name": "CONSOLATION LOTACHI",
+    "website": "https://github.com/KEM-CONSOLATION",
+    "contact": "mailto:[email protected]"
+  },
+  "accountAssociation": {
+    "header": "eyJmaWQiOjExNjI4ODAsInR5cGUiOiJhdXRoIiwia2V5IjoiMHgzZERCMTQ5RGNBMEZjMDcxM0ZjMzhBQ2IxNjdDMzM2NzIwQjVGMDdmIn0",
+    "payload": "eyJkb21haW4iOiJub2Jsb2Nrcy1pYWxjLnZlcmNlbC5hcHAifQ",
+    "signature": "qV6dj7aiufYm6/Lnb79FhFQD3jETpubKivIbqXyFVdZK8kvLOsE/bMw0b3YN2iTbp44RAD83IXt0mJVjW8NuVRw="
+  }
+}

app/.well-known/route.ts

@@ -0,0 +1,10 @@
+export async function GET() {
+  const hostedManifestUrl = process.env.NEXT_PUBLIC_FC_HOSTED_MANIFEST_URL!;
+  return new Response(null, {
+    status: 307,
+    headers: {
+      Location: hostedManifestUrl,
+      "Cache-Control": "public, s-maxage=300, stale-while-revalidate=86400",
+    },
+  });
+}

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/api/v1/transactions/[id]/route.ts

@@ -6,7 +6,7 @@ import { withRateLimit } from "@/app/lib/rate-limit";
 export const PUT = withRateLimit(
   async (request: NextRequest, { params }: { params: { id: string } }) => {
     try {
-      const { id } = await params;
+      const { id } = params;
 
       const walletAddress = request.headers
         .get("x-wallet-address")

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";
 
@@ -75,9 +75,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";
@@ -37,7 +38,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/HomePage.tsx

@@ -15,6 +15,7 @@ import {
 import WalkthroughVideo from "./WalkthroughVideo";
 import { ScrollArrowLine, ScrollArrowHead } from "./ImageAssets";
 import { getBannerPadding } from "../utils";
+import { useMiniMode } from "../hooks/useMiniMode";
 
 const crimsonPro = Crimson_Pro({
   subsets: ["latin"],
@@ -46,6 +47,8 @@ export function HomePage({
   transactionFormComponent,
   isRecipientFormOpen,
 }: HomePageProps) {
+  const isMiniMode = useMiniMode();
+
   const handleScrollToForm = () => {
     const formElement = document.getElementById("hero");
     if (formElement) {
@@ -139,8 +142,9 @@ export function HomePage({
         </motion.div>
       </div>
 
-      {/* All additional content - always visible, scroll-triggered animations */}
-      <div className="-mt-2 w-full lg:-mt-4">
+      {/* All additional content - only visible in normal mode, scroll-triggered animations */}
+      {!isMiniMode && (
+        <div className="-mt-2 w-full lg:-mt-4">
         <BlurRevealSection
           id="video-section"
           className="mx-auto mb-[4.875rem] w-full max-w-[62.75rem] scroll-mt-24 px-5 md:mb-[11.5625rem]"
@@ -429,7 +433,8 @@ export function HomePage({
             ));
           })()}
         </BlurRevealSection>
-      </div>
+        </div>
+      )}
     </div>
   );
 }

app/components/MainPageContent.tsx

@@ -31,13 +31,15 @@ import { useInjectedWallet } from "../context/InjectedWalletContext";
 import { useSearchParams } from "next/navigation";
 import { HomePage } from "./HomePage";
 import { useNetwork } from "../context/NetworksContext";
+import { useMiniMode } from "../hooks/useMiniMode";
 
 export function MainPageContent() {
   const searchParams = useSearchParams();
   const { authenticated, ready } = usePrivy();
   const { currentStep, setCurrentStep } = useStep();
   const { isInjectedWallet, injectedReady } = useInjectedWallet();
   const { selectedNetwork } = useNetwork();
+  const isMiniMode = useMiniMode();
   const [isPageLoading, setIsPageLoading] = useState(true);
   const [isFetchingRate, setIsFetchingRate] = useState(false);
   const [isFetchingInstitutions, setIsFetchingInstitutions] = useState(false);
@@ -328,12 +330,19 @@ export function MainPageContent() {
           <Disclaimer />
           <CookieConsent />
           {!isInjectedWallet && <NetworkSelectionModal />}{" "}
-          {currentStep === STEPS.FORM ? (
+          {isMiniMode ? (
+            // Mini mode: Show only transaction components
+            <div className={`px-5 py-28 ${getBannerPadding()}`}>
+              {transactionFormComponent}
+            </div>
+          ) : currentStep === STEPS.FORM ? (
+            // Normal mode: Show full homepage with marketing content
             <HomePage
               transactionFormComponent={transactionFormComponent}
               isRecipientFormOpen={isRecipientFormOpen}
             />
           ) : (
+            // Normal mode: Show transaction components with padding
             <div className={`px-5 py-28 ${getBannerPadding()}`}>
               {transactionFormComponent}
             </div>