[feat] fetch funds using contract functions

frontend/gostarkme-web/app/app/page.tsx

@@ -1,47 +1,62 @@
+'use client';
 import FundCards from "@/components/dashboard/fundCard";
 import Footer from "@/components/ui/Footer";
 import Navbar from "@/components/ui/Navbar";
-import React from "react";
+import { FUND_MANAGER_ADDR } from "@/constants";
+import { fund } from "@/contracts/abis/fund";
+import { fundManager } from "@/contracts/abis/fundManager";
+import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
+import { useAtomValue } from "jotai";
+import React, { useEffect, useState } from "react";
+import { byteArray, Contract, InvokeFunctionResponse } from "starknet";
 
 const Dashboard = () => {
   const navItems = [
     { label: 'My Profile', href: 'app/myprofile' },
     { label: 'My funds', href: '/app/myfunds' }
   ];
 
-  const funds = [
-    {
-      type: "Project",
-      title: "Adrian's fund",
-      description: "I need help with my project",
-    },
-    {
-      type: "Charity",
-      title: "Adrian's fund",
-      description: "I need help with my project",
-    },
-    {
-      type: "Charity",
-      title: "Adrian's fund",
-      description: "I need help with my project",
-    },
-    {
-      type: "Project",
-      title: "Adrian's fund",
-      description: "I need help with my project",
-    },
+  const wallet = useAtomValue(walletStarknetkitLatestAtom);
+
+  const [fundManagerContract, _setFundManagerContract] = useState<Contract>(new Contract(fundManager, FUND_MANAGER_ADDR, wallet?.account));
+
+  const [funds, setFunds] = useState<any>([]);
+
+  function hex2ascii(hexx: string) {
+    var hex = hexx.toString();//force conversion
+    var str = '';
+    for (var i = 0; i < hex.length; i += 2)
+      str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
+    return str;
+  }
+
+  async function getFunds() {
+    const id = await fundManagerContract.getCurrentId();
+    let fundings = [];
+    for (let i = 1; i < id; i++) {
+      // GET FUND ADDRESS
+      let fundaddr = await fundManagerContract.getFund(i);
+      fundaddr = "0x" + fundaddr.toString(16);
+      const fundContract = new Contract(fund, fundaddr, wallet?.account);
+      // GET FUND NAME
+      let name = await fundContract.getName();
+      name = hex2ascii(name.toString(16));
+      // GET FUND DESCRIPTION
+      let desc = await fundContract.getReason();
+      fundings.push({
+        type: "Project",
+        title: name,
+        description: desc,
+      });
+    }
+    console.log(fundings);
+    setFunds(fundings);
+  }
+
+  useEffect(() => {
+    getFunds();
+  }, []);
 
-    {
-      type: "Charity",
-      title: "Adrian's fund",
-      description: "I need help with my project",
-    },
-    {
-      type: "Project",
-      title: "Adrian's fund",
-      description: "I need help with my project",
-    },
-  ];
   return (
     <div className="flex min-h-screen w-full flex-col items-center">
       <Navbar
@@ -58,11 +73,19 @@ const Dashboard = () => {
         Latest Funds
         <span className="ml-2 text-yellow-400">&#x2728;</span>
       </h1>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-6 md:gap-x-[138px] md:gap-y-[84px]">
-        {funds.map((fund, index) => (
-          <FundCards key={index} fund={fund} index={index} />
-        ))}
-      </div>
+      {funds.length !== 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-6 md:gap-x-[138px] md:gap-y-[84px]">
+          {funds.map((fund: { type: string; title: string; description: string; }, index: number) => (
+            <FundCards key={index} fund={fund} index={index} />
+          ))}
+        </div>
+      ) : (
+        <div className="flex justify-center items-center h-64">
+          <div className="text-center text-gray-500">
+            There is no fundings to display.
+          </div>
+        </div>
+      )}
       <Footer></Footer>
     </div>
   );

frontend/gostarkme-web/components/dashboard/fundCard.tsx

@@ -19,20 +19,23 @@ const FundCards = ({ fund, index }: FundCardProps) => {
     <div className="relative" ref={ref}>
       <div
         key={index}
-        className="bg-gray-950 shadow-[0px_4px_4px_0px_#00000040] text-white rounded-[10px] py-[32px] px-[24px] md:py-[48px] md:px-[48px] lg:py-[64px] lg:px-[72px] gap-8 md:gap-10 lg:gap-14 flex flex-col items-start justify-between"
+        className="min-w-[30rem] bg-gray-950 shadow-[0px_4px_4px_0px_#00000040] text-white rounded-[10px] py-[32px] md:py-[48px] md:px-[48px] lg:py-[64px] lg:px-[72px] gap-8 md:gap-10 lg:gap-14 flex flex-col items-start justify-between"
       >
         <div className="flex flex-col items-start justify-between gap-4 md:gap-6">
           <p className=" text-sm md:text-base lg:text-lg text-white font-light leading-[22px] md:leading-[25px] lg:leading-[27.6px]">
             {fund.type} {fund.type === "Project" ? <span>&#x1f680;</span> : <span>&#x1FAC0;</span>}
           </p>
-          <h1 className="text-xl md:text-xl lg:text-[40px] font-bold">
+          <h1 className="text-lg md:text-lg lg:text-[30px] font-bold">
             {fund.title}
           </h1>
         </div>
         <div>
-          <p className="text-lg md:text-lg lg:text-4xl text-white">
-            {fund.description}
-          </p>
+          {fund.description !== " " ? (
+            <p className="text-lg md:text-lg lg:text-[25px] text-white">{fund.description}</p>
+            ) : 
+            (
+              <p className="text-lg md:text-lg lg:text-[25px] text-white">No description provided</p>
+            )}
         </div>
         <StardustAnimation height={height} width={width} />
       </div>

frontend/gostarkme-web/components/ui/Bounded.tsx

@@ -3,8 +3,8 @@ import Footer from "./Footer";
 import Navbar from "./Navbar";
 
 const navItems = [
-  { label: 'My Profile', href: '/app/myprofile/1' },
-  { label: 'My funds', href: '/app/myfunds/1' }
+  { label: 'My Profile', href: '/app/myprofile/' },
+  { label: 'My funds', href: '/app/myfunds/' }
 ];
 interface BoundedProps {
   children: ReactNode;

frontend/gostarkme-web/constants/index.ts

@@ -35,3 +35,7 @@ export const ARGENT_SESSION_SERVICE_BASE_URL =
 
 export const ARGENT_WEBWALLET_URL =
   process.env.NEXT_PUBLIC_ARGENT_WEBWALLET_URL || "https://web.argent.xyz"
+
+
+export const FUND_MANAGER_ADDR = 
+  "0x0263457e0646dc4312c4a583fcae334d98f9b4ff1cf7a9c091649c2bec02543a"