feat(governance-ui#35): Add proper data for Contract params on homepage

README.md

@@ -1,36 +1,41 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped
+with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Prerequisites
+
+- node.js >= 20.11.0
+- npm >= 10.2.4
 
 ## Getting Started
 
 First, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and
+load Inter, a custom Google Font.
 
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
--  [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
--  [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions
+are welcome!
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use
+the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
+from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/(api)/api/proposals/[id]/route.ts

@@ -1,5 +1,4 @@
 import { NextRequest } from "next/server";
-import IProposal from "@interfaces/proposal.interface";
 import addDays from "date-fns/addDays";
 import { ProposalState } from "@/app/graphql/generated/graphql";
 
@@ -102,14 +101,15 @@ The 100,000 USD amount is payable in ARB under the exchange rate on the day of t
 
 Note that the Rari Foundation will absorb costs related to the service and maintainance of the Protocol upkeep after the integration implementation.`;
 
-const singleProposal: IProposal = {
+const singleProposal: any = {
   id: "599ca521-df39-442f-937c-03b20bcafc2d",
   title: "Building  the Building the Future of NFTs: The Rarible Protocol",
   description: proposalDescription,
   state: ProposalState.Active,
   votesYes: 2700,
   votesNo: 1400,
   votesTotal: 4100,
+  endBlock: 9898989898n,
   createdAt: addDays(new Date(), Math.round(Math.random() * 10) * -1),
   deadlineAt: addDays(new Date(), Math.round(Math.random() * 10)),
   creator: "Andrzej",

app/(routes)/page.tsx

@@ -16,6 +16,7 @@ import { ContractParams } from "@components/contract-params/contract-params.comp
 import { useRouter } from "next/navigation";
 import { useUserStore } from "@/app/store";
 import { Suspense } from "react";
+import ProposalSummaryComponent from "@components/proposal-summary/proposal-summary.component";
 
 const Page = () => {
   const router = useRouter();
@@ -85,38 +86,15 @@ const Page = () => {
           header={"Contract parameters"}
           className="font-medium font-size-x4"
         >
-          <ContractParams />
+          <Suspense fallback={<Loader isCenter />}>
+            <ContractParams />
+          </Suspense>
         </Expandable>
       </Card>
 
-      <Card className="mt-8" block>
-        <div className="flex flex-wrap gap-x6 m-x4 mr-x6 ml-x6 justify-between">
-          <div className="flex flex-col justify-center place-items-center gap-x2">
-            <div className="font-size-x6 line-height-x6 font-medium">11</div>
-            <div className="font-size-x3">Total proposals</div>
-          </div>
-          <div className="flex flex-col justify-center place-items-center gap-x2">
-            <div className="font-size-x6 line-height-x6 font-medium">3</div>
-            <div className="font-size-x3">Active proposals</div>
-          </div>
-          <div className="flex flex-col justify-center place-items-center gap-x2">
-            <div className="font-size-x6 line-height-x6 font-medium">
-              {NumbersService.parseNumericValue(2097, 3)}
-            </div>
-            <div className="font-size-x3">Voters</div>
-          </div>
-          <div className="flex flex-col justify-center place-items-center gap-x2">
-            <div className="font-size-x6 line-height-x6 font-medium">
-              {NumbersService.parseNumericValue(120340, 3)}
-            </div>
-            <div className="font-size-x3">
-              Total veMento
-              <br />
-              Voting Power
-            </div>
-          </div>
-        </div>
-      </Card>
+      <Suspense fallback={<Loader isCenter />}>
+        <ProposalSummaryComponent />
+      </Suspense>
 
       <Suspense fallback={<Loader isCenter />}>
         <ProposalsListComponent />