Merge Dev to Main (#186)

.env

@@ -5,3 +5,6 @@ NEXT_PUBLIC_SUBGRAPH_URL=https://api.studio.thegraph.com/query/67235/mento-celo/
 NEXT_PUBLIC_SUBGRAPH_URL_ALFAJORES=https://api.studio.thegraph.com/query/67235/mento-alfajores/version/latest
 
 NEXT_PUBLIC_WALLET_CONNECT_ID=f6fc31fb4c4e660595895d3cca81d304
+
+NEXT_PUBLIC_SENTRY_DSN=https://b6c8f7b9cb466185a7a62fa432a9961d@o4504211835256832.ingest.us.sentry.io/4507407772352512
+SENTRY_DSN=https://b6c8f7b9cb466185a7a62fa432a9961d@o4504211835256832.ingest.us.sentry.io/4507407772352512

next.config.js

@@ -22,45 +22,41 @@ const nextConfig = {
 
 module.exports = nextConfig;
 
-
 // Injected content via Sentry wizard below
 
 const { withSentryConfig } = require("@sentry/nextjs");
 
-module.exports = withSentryConfig(
-  module.exports,
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
+module.exports = withSentryConfig(module.exports, {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
 
-    org: "mento-labs",
-    project: "governance-ui",
+  org: "mento-labs",
+  project: "governance-ui",
 
-    // Only print logs for uploading source maps in CI
-    silent: !process.env.CI,
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
 
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
 
-    // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-    // This can increase your server load as well as your hosting bill.
-    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-    // side errors will fail.
-    // tunnelRoute: "/monitoring",
+  // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: "/monitoring",
 
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
 
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
 
-    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-    // See the following for more information:
-    // https://docs.sentry.io/product/crons/
-    // https://vercel.com/docs/cron-jobs
-    automaticVercelMonitors: true,
-  }
-);
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
+});

sentry.client.config.ts

@@ -4,8 +4,10 @@
 
 import * as Sentry from "@sentry/nextjs";
 
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
 Sentry.init({
-  dsn: "https://b6c8f7b9cb466185a7a62fa432a9961d@o4504211835256832.ingest.us.sentry.io/4507407772352512",
+  dsn: SENTRY_DSN,
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,

sentry.edge.config.ts

@@ -5,8 +5,10 @@
 
 import * as Sentry from "@sentry/nextjs";
 
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
 Sentry.init({
-  dsn: "https://b6c8f7b9cb466185a7a62fa432a9961d@o4504211835256832.ingest.us.sentry.io/4507407772352512",
+  dsn: SENTRY_DSN,
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,

sentry.server.config.ts

@@ -4,8 +4,10 @@
 
 import * as Sentry from "@sentry/nextjs";
 
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
 Sentry.init({
-  dsn: "https://b6c8f7b9cb466185a7a62fa432a9961d@o4504211835256832.ingest.us.sentry.io/4507407772352512",
+  dsn: SENTRY_DSN,
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,
@@ -15,5 +17,4 @@ Sentry.init({
 
   // Uncomment the line below to enable Spotlight (https://spotlightjs.com)
   // spotlight: process.env.NODE_ENV === 'development',
-
 });

src/app/(routes)/layout.tsx → src/app/layout.tsx

@@ -1,4 +1,3 @@
-"use client";
 import React, { ReactNode } from "react";
 import { Analytics } from "@vercel/analytics/react";
 import { Inter } from "next/font/google";
@@ -12,9 +11,9 @@ import {
 } from "@/components/_shared";
 import "@rainbow-me/rainbowkit/styles.css";
 import "@/styles/globals.scss";
-import { Providers } from "@/app/(routes)/providers";
-import { usePathname } from "next/navigation";
+import { Providers } from "@/app/providers";
 import { cn } from "@/styles/helpers";
+import { Metadata } from "next";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -26,10 +25,30 @@ interface RootLayoutProps {
   children: ReactNode;
 }
 
-export default function RootLayout({ children }: RootLayoutProps) {
-  const path = usePathname();
-  const homePage = path === "/";
+export const metadata: Metadata = {
+  title: "Mento Governance",
+  description: "Mento governance platform.",
+  openGraph: {
+    url: "https://governance.mento.org",
+    type: "website",
+    title: "Mento Governance",
+    description: "Mento governance platform.",
+  },
+  robots: {
+    index: false,
+    follow: true,
+    nocache: true,
+    googleBot: {
+      index: true,
+      follow: false,
+      noimageindex: true,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+};
 
+export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html className={`${inter.variable} w-full overscroll-none`} lang="en">
       <body
@@ -46,7 +65,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         <Providers>
           <Header />
           <MaxWidthWrapper>
-            {!homePage && <Breadcrumbs />}
+            <Breadcrumbs />
             {children}
           </MaxWidthWrapper>
           <LearnMore className="pt-x5" />

src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import { RedirectType, redirect } from "next/navigation";
+
+export default function NotFoundPage() {
+  redirect("/", RedirectType.replace);
+}

src/app/(routes)/page.tsx → src/app/page.tsx

@@ -1,35 +1,26 @@
 "use client";
-
 import { Suspense } from "react";
 import { useAccount } from "wagmi";
-
-import { CeloLogoIcon, MentoIcon } from "@/components/_icons";
+import { MentoIcon } from "@/components/_icons";
 import {
-  Badge,
   Button,
   ButtonProps,
   Card,
   Divider,
   Loader,
 } from "@/components/_shared";
-import useTokens from "@/lib/contracts/useTokens";
-import NumbersService from "@/lib/helpers/numbers.service";
-import { formatUnits } from "viem";
-import Head from "next/head";
 import {
+  Badges,
   ContractParams,
   ProposalSummaryComponent,
   ProposalsListComponent,
 } from "@/components/index";
 import Link from "next/link";
 import { cn } from "@/styles/helpers";
 
-const Page = () => {
+export default function Page() {
   return (
     <main className="mt-x11 flex flex-col place-items-center font-fg">
-      <Head>
-        <title>Mento Governance</title>
-      </Head>
       <Title />
       <Subtitle />
       <Card className="mt-8 md:mt-[55px]" block>
@@ -53,7 +44,7 @@ const Page = () => {
       </Suspense>
     </main>
   );
-};
+}
 
 const MobileNavigationLinks = ({ className }: ButtonProps) => {
   const { address } = useAccount();
@@ -72,30 +63,6 @@ const MobileNavigationLinks = ({ className }: ButtonProps) => {
     </Link>
   );
 };
-
-const Badges = () => {
-  const {
-    mentoContractData: { totalSupply, decimals },
-  } = useTokens();
-
-  const { chain } = useAccount();
-
-  return (
-    <div className="flex flex-col gap-x3 md:flex-row">
-      <Badge type="outline">
-        <CeloLogoIcon />
-        &nbsp;{chain?.name || "Celo"}&nbsp;
-        {chain?.testnet ? "Testnet" : "Mainnet"}
-      </Badge>
-      <Badge type="secondary">
-        MENTO{" "}
-        {NumbersService.parseNumericValue(formatUnits(totalSupply, decimals))}{" "}
-        Supply
-      </Badge>
-    </div>
-  );
-};
-
 const DesktopTagline = () => (
   <p className="mb-[20px] text-[18px] md:mb-[30px] md:text-[22px]">
     Transparent Digital Asset Solutions
@@ -141,5 +108,3 @@ const Subtitle = () => (
     Participate in the governance process of Mento stablecoin platform
   </h2>
 );
-
-export default Page;

src/app/(routes)/proposals/[id]/page.tsx → src/app/proposals/[id]/page.tsx

@@ -14,9 +14,9 @@ import {
   Status,
   WalletAddressWithCopy,
 } from "@/components/_shared";
-import Vote from "@/app/(routes)/proposals/[id]/_components/vote.component";
-import ExecutionCode from "@/app/(routes)/proposals/[id]/_components/execution-code.component";
-import Participants from "@/app/(routes)/proposals/[id]/_components/participants.component";
+import Vote from "@/app/proposals/[id]/_components/vote.component";
+import ExecutionCode from "@/app/proposals/[id]/_components/execution-code.component";
+import Participants from "@/app/proposals/[id]/_components/participants.component";
 import { Countdown, ProposalCurrentVotes } from "@/components/index";
 
 const Page = ({ params: { id } }: { params: { id: string } }) => {

src/app/(routes)/providers.tsx → src/app/providers.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { ReactNode, useEffect, useState } from "react";
 import { WagmiProvider } from "wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

src/components/_shared/breadcrumbs/breadcrumbs.component.tsx

@@ -33,13 +33,15 @@ const Crumb = ({ path, index, last }: CrumbProps) => {
 };
 
 export const Breadcrumbs = () => {
-  const paths = usePathname().split("/");
+  const path = usePathname();
+  const homePage = path === "/";
+  const paths = path.split("/");
   const crumbsPath = useMemo(
     () => paths.filter((path) => routingMap.has(path)),
     [paths],
   );
 
-  return (
+  return !homePage ? (
     <nav
       className="mt-10 w-full font-inter text-[18px]/[20px] font-medium"
       aria-label="Breadcrumb"
@@ -55,6 +57,8 @@ export const Breadcrumbs = () => {
         ))}
       </ol>
     </nav>
+  ) : (
+    <></>
   );
 };
 

src/components/_shared/learn-more/learn-more.component.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { usePathname } from "next/navigation";
 import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import { ChevronIcon, DiscordIcon, LearnMoreIcon } from "@/components/_icons";

src/components/_shared/theme-switch/theme-switch.component.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { DarkModeIcon, LightModeIcon } from "@/components/_icons";
 import { useTheme } from "next-themes";
 import { cn } from "@/styles/helpers";

src/components/badges/badges.component.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { CeloLogoIcon } from "@/components/_icons";
+import { Badge } from "@/components/_shared";
+import useTokens from "@/lib/contracts/useTokens";
+import NumbersService from "@/lib/helpers/numbers.service";
+import { formatUnits } from "viem";
+import { useAccount } from "wagmi";
+
+export const Badges = () => {
+  const {
+    mentoContractData: { totalSupply, decimals },
+  } = useTokens();
+
+  const { chain } = useAccount();
+
+  return (
+    <div className="flex flex-col gap-x3 md:flex-row">
+      <Badge type="outline">
+        <CeloLogoIcon />
+        &nbsp;{chain?.name || "Celo"}&nbsp;
+        {chain?.testnet ? "Testnet" : "Mainnet"}
+      </Badge>
+      <Badge type="secondary">
+        MENTO{" "}
+        {NumbersService.parseNumericValue(formatUnits(totalSupply, decimals))}{" "}
+        Supply
+      </Badge>
+    </div>
+  );
+};

src/components/index.tsx

@@ -1,3 +1,4 @@
+export { Badges } from "./badges/badges.component";
 export { ContractParams } from "./contract-params/contract-params.component";
 export { Countdown } from "./countdown/countdown.component";
 export { LocksList } from "./locks-list/locks-list.component";

src/lib/contracts/useTokens.ts

@@ -1,3 +1,4 @@
+"use client";
 import { useAccount, useBlockNumber, useReadContracts } from "wagmi";
 import { useContracts } from "@/lib/contracts/useContracts";
 import { useEffect, useMemo } from "react";

src/lib/hooks/useEnsureChain.ts

@@ -1,3 +1,4 @@
+"use client";
 import { Alfajores, Celo } from "@/config/chains";
 import { useEffect } from "react";
 import { useAccount, useSwitchChain } from "wagmi";