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": "Paycrest",
+    "website": "https://paycrest.io",
+    "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/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/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";
 import { BlockFestBanner } from "./blockfest";
 
 const crimsonPro = Crimson_Pro({
@@ -49,6 +50,8 @@ function HomePageComponent({
   isRecipientFormOpen,
   showBlockFestBanner = false,
 }: HomePageProps) {
+  const isMiniMode = useMiniMode();
+
   const handleScrollToForm = () => {
     const formElement = document.getElementById("hero");
     if (formElement) {
@@ -143,8 +146,9 @@ function HomePageComponent({
         </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]"
@@ -433,7 +437,8 @@ function HomePageComponent({
             ));
           })()}
         </BlurRevealSection>
-      </div>
+        </div>
+      )}
     </div>
   );
 }

app/components/MainPageContent.tsx

@@ -35,8 +35,10 @@ import { clearFormState, getBannerPadding } from "../utils";
 import { useSearchParams } from "next/navigation";
 import { HomePage } from "./HomePage";
 import { useNetwork } from "../context/NetworksContext";
+import { useMiniMode } from "../hooks/useMiniMode";
 import { useBlockFestModal } from "../context/BlockFestModalContext";
 import { useInjectedWallet } from "../context";
+import { useMiniMode } from "../hooks/useMiniMode";
 
 const PageLayout = ({
   authenticated,
@@ -45,13 +47,15 @@ const PageLayout = ({
   transactionFormComponent,
   isRecipientFormOpen,
   isBlockFestReferral,
+  isMiniMode,
 }: {
   authenticated: boolean;
   ready: boolean;
   currentStep: string;
   transactionFormComponent: React.ReactNode;
   isRecipientFormOpen: boolean;
   isBlockFestReferral: boolean;
+  isMiniMode: boolean;
 }) => {
   const { claimed, resetClaim } = useBlockFestClaim();
   const { user } = usePrivy();
@@ -68,7 +72,7 @@ const PageLayout = ({
   const walletAddress = isInjectedWallet
     ? injectedAddress
     : user?.linkedAccounts.find((account) => account.type === "smart_wallet")
-        ?.address;
+      ?.address;
 
   return (
     <>
@@ -86,7 +90,12 @@ const PageLayout = ({
 
       <BlockFestCashbackModal isOpen={isOpen} onClose={closeModal} />
 
-      {currentStep === STEPS.FORM ? (
+      {isMiniMode ? (
+        // Mini mode: Show only transaction components
+        <div className={`px-5 py-28 ${getBannerPadding()}`}>
+          {transactionFormComponent}
+        </div>
+      ) : currentStep === STEPS.FORM ? (
         <HomePage
           transactionFormComponent={transactionFormComponent}
           isRecipientFormOpen={isRecipientFormOpen}
@@ -107,7 +116,9 @@ export function MainPageContent() {
   const { currentStep, setCurrentStep } = useStep();
   const { isInjectedWallet, injectedReady } = useInjectedWallet();
   const { selectedNetwork } = useNetwork();
+  const isMiniMode = useMiniMode();
   const { isBlockFestReferral } = useBlockFestReferral();
+  const isMiniMode = useMiniMode();
   const [isPageLoading, setIsPageLoading] = useState(true);
   const [isFetchingRate, setIsFetchingRate] = useState(false);
   const [isFetchingInstitutions, setIsFetchingInstitutions] = useState(false);
@@ -149,30 +160,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);
@@ -457,6 +468,7 @@ export function MainPageContent() {
           transactionFormComponent={transactionFormComponent}
           isRecipientFormOpen={isRecipientFormOpen}
           isBlockFestReferral={isBlockFestReferral}
+          isMiniMode={isMiniMode}
         />
       )}
     </div>