Merge pull request #75 from krishnan05/main

Add per-page SEO metadata, OG tags, and MetaMask SDK web shim

Author: blizet

next.config.mjs

@@ -1,3 +1,5 @@
+import path from "path";
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
@@ -7,6 +9,12 @@ const nextConfig = {
   },
   webpack: (config) => {
     config.resolve.fallback = { fs: false, net: false, tls: false };
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      "@react-native-async-storage/async-storage": path.resolve(
+        "./src/shims/asyncStorage.ts"
+      ),
+    };
     return config;
   },
 };

src/app/[pool]/page.tsx

@@ -1,6 +1,39 @@
+import type { Metadata } from "next";
 import { Suspense } from "react";
 import InteractionClient from "./InteractionClient";
 
+export const metadata: Metadata = {
+  title: "Pool",
+  description:
+    "View pool details, pricing, and trade bull and bear positions on Fate Protocol with real-time oracle updates, liquidity metrics, and transparent on-chain execution.",
+  alternates: {
+    // TODO: Replace with a dynamic per-pool canonical URL once generateMetadata() is implemented.
+    canonical: "/pool",
+  },
+  openGraph: {
+    title: "Pool",
+    description:
+      "View pool details, pricing, and trade bull and bear positions on Fate Protocol with real-time oracle updates, liquidity metrics, and transparent on-chain execution.",
+    // TODO: Replace with a dynamic per-pool URL once generateMetadata() is implemented.
+    url: "/pool",
+    type: "website",
+    images: [
+      {
+        url: "https://evm.fate.stability.nexus/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Fate Protocol - Decentralized Prediction Markets",
+      },
+    ],
+  },
+  twitter: {
+    title: "Pool",
+    description:
+      "View pool details, pricing, and trade bull and bear positions on Fate Protocol with real-time oracle updates, liquidity metrics, and transparent on-chain execution.",
+    images: ["https://evm.fate.stability.nexus/og-image.png"],
+  },
+};
+
 export async function generateStaticParams() {
   return [
     { pool: "pool" }

src/app/createPool/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Create Pool",
+  description:
+    "Create a new prediction pool with custom parameters, asset selection, and oracle configuration, then deploy on supported chains with transparent fees and on-chain settlement.",
+  alternates: {
+    canonical: "/createPool",
+  },
+  openGraph: {
+    title: "Create Pool",
+    description:
+      "Create a new prediction pool with custom parameters, asset selection, and oracle configuration, then deploy on supported chains with transparent fees and on-chain settlement.",
+    url: "/createPool",
+    type: "website",
+    images: [
+      {
+        url: "https://evm.fate.stability.nexus/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Fate Protocol - Decentralized Prediction Markets",
+      },
+    ],
+  },
+  twitter: {
+    title: "Create Pool",
+    description:
+      "Create a new prediction pool with custom parameters, asset selection, and oracle configuration, then deploy on supported chains with transparent fees and on-chain settlement.",
+    images: ["https://evm.fate.stability.nexus/og-image.png"],
+  },
+};
+
+export default function CreatePoolLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return children;
+}

src/app/explorePools/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Explore Pools",
+  description:
+    "Browse prediction pools across supported chains, compare bull and bear markets, and discover real-time opportunities with oracle pricing, liquidity, and performance insights.",
+  alternates: {
+    canonical: "/explorePools",
+  },
+  openGraph: {
+    title: "Explore Pools",
+    description:
+      "Browse prediction pools across supported chains, compare bull and bear markets, and discover real-time opportunities with oracle pricing, liquidity, and performance insights.",
+    url: "/explorePools",
+    type: "website",
+    images: [
+      {
+        url: "https://evm.fate.stability.nexus/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Fate Protocol - Decentralized Prediction Markets",
+      },
+    ],
+  },
+  twitter: {
+    title: "Explore Pools",
+    description:
+      "Browse prediction pools across supported chains, compare bull and bear markets, and discover real-time opportunities with oracle pricing, liquidity, and performance insights.",
+    images: ["https://evm.fate.stability.nexus/og-image.png"],
+  },
+};
+
+export default function ExplorePoolsLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return children;
+}

src/app/layout.tsx

@@ -18,7 +18,10 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Fate Protocol | Decentralized Prediction Markets & DeFi Trading",
+  title: {
+    default: "Fate Protocol",
+    template: "%s | Fate Protocol",
+  },
   description:
     "Trade prediction markets on Fate Protocol - the decentralized platform for perpetual prediction pools. Buy bullCoins and bearCoins to predict price movements across multiple blockchain networks. Advanced DeFi trading with real-time price feeds and automated market making.",
   keywords: [
@@ -48,9 +51,6 @@ export const metadata: Metadata = {
     telephone: false,
   },
   metadataBase: new URL("https://evm.fate.stability.nexus"),
-  alternates: {
-    canonical: "/",
-  },
   openGraph: {
     title: "Fate Protocol | Decentralized Prediction Markets",
     description: "Trade prediction markets on Fate Protocol - the decentralized platform for perpetual prediction pools. Buy bullCoins and bearCoins to predict price movements.",

src/app/page.tsx

@@ -1,6 +1,37 @@
+import type { Metadata } from "next";
 import AboutSection from "@/components/Home/About";
 import Hero from "@/components/Home/Hero";
 
+export const metadata: Metadata = {
+  title: "Decentralized Prediction Markets & DeFi Trading",
+  description:
+    "Decentralized perpetual prediction pools for trading price movements across multiple blockchain networks with real-time oracle pricing, automated market making, and transparent on-chain execution.",
+  alternates: {
+    canonical: "/",
+  },
+  openGraph: {
+    title: "Decentralized Prediction Markets & DeFi Trading",
+    description:
+      "Decentralized perpetual prediction pools for trading price movements across multiple blockchain networks with real-time oracle pricing, automated market making, and transparent on-chain execution.",
+    url: "/",
+    type: "website",
+    images: [
+      {
+        url: "https://evm.fate.stability.nexus/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Fate Protocol - Decentralized Prediction Markets",
+      },
+    ],
+  },
+  twitter: {
+    title: "Decentralized Prediction Markets & DeFi Trading",
+    description:
+      "Decentralized perpetual prediction pools for trading price movements across multiple blockchain networks with real-time oracle pricing, automated market making, and transparent on-chain execution.",
+    images: ["https://evm.fate.stability.nexus/og-image.png"],
+  },
+};
+
 export default function Home() {
   return (
     <>

src/app/portfolio/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Portfolio",
+  description:
+    "Track your prediction positions, performance, and portfolio analytics across supported chains with real-time pricing, P&L, and historical trade insights.",
+  alternates: {
+    canonical: "/portfolio",
+  },
+  openGraph: {
+    title: "Portfolio",
+    description:
+      "Track your prediction positions, performance, and portfolio analytics across supported chains with real-time pricing, P&L, and historical trade insights.",
+    url: "/portfolio",
+    type: "website",
+    images: [
+      {
+        url: "https://evm.fate.stability.nexus/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Fate Protocol - Decentralized Prediction Markets",
+      },
+    ],
+  },
+  twitter: {
+    title: "Portfolio",
+    description:
+      "Track your prediction positions, performance, and portfolio analytics across supported chains with real-time pricing, P&L, and historical trade insights.",
+    images: ["https://evm.fate.stability.nexus/og-image.png"],
+  },
+};
+
+export default function PortfolioLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return children;
+}

src/shims/asyncStorage.ts

@@ -0,0 +1,61 @@
+type AsyncStorageLike = {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+};
+
+const memoryStore = new Map<string, string>();
+
+const getStorage = () => {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return window.localStorage;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+};
+
+const AsyncStorage: AsyncStorageLike = {
+  async getItem(key) {
+    if (memoryStore.has(key)) {
+      return memoryStore.get(key) ?? null;
+    }
+    const storage = getStorage();
+    if (storage) {
+      try {
+        return storage.getItem(key);
+      } catch {
+        return memoryStore.get(key) ?? null;
+      }
+    }
+    return memoryStore.get(key) ?? null;
+  },
+  async setItem(key, value) {
+    const storage = getStorage();
+    if (storage) {
+      try {
+        storage.setItem(key, value);
+        return;
+      } catch {
+        // Fall through to memory store
+      }
+    }
+    memoryStore.set(key, value);
+  },
+  async removeItem(key) {
+    memoryStore.delete(key);
+    const storage = getStorage();
+    if (storage) {
+      try {
+        storage.removeItem(key);
+        return;
+      } catch {
+        // Fall through to memory store
+      }
+    }
+  },
+};
+
+export default AsyncStorage;