Merge pull request #196 from adrianvrj/feat-194

[feat] general fixes and added the new fields to funding detail page
undefinedorgcr · Nov 6, 2024 · fb27a71 · fb27a71
2 parents 77367e3 + 4d8a70b
commit fb27a71
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 54 deletions.
diff --git a/frontend/gostarkme-web/app/app/fund/page.tsx b/frontend/gostarkme-web/app/app/fund/page.tsx
@@ -1,24 +1,40 @@
 'use client';
-
-import hex2ascii from "@/app/utils";
 import Fund from "@/components/modules/Fund/Fund";
 import Bounded from "@/components/ui/Bounded";
-import Divider from "@/components/ui/Divider";
-import { FUND_MANAGER_ADDR } from "@/constants";
-import { fundAbi } from "@/contracts/abis/fund";
-import { fundManager } from "@/contracts/abis/fundManager";
-import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
+import Navbar from "@/components/ui/Navbar";
+import { navItems } from "@/constants";
+import { clickedFundState } from "@/state/nFunds";
 import { useAtomValue } from "jotai";
-import { useEffect, useState } from "react";
-import { Contract } from "starknet";
 
 const FundDetailsPage = () => {
 
+  const clickedFund = useAtomValue(clickedFundState);
+
   return (
     <>
-      <Bounded className="px-60 text-lg">
-        <Fund></Fund>
-      </Bounded>
+      {clickedFund &&
+        <Bounded className="px-60 text-lg">
+          <Fund></Fund>
+        </Bounded>
+      }
+
+      {!clickedFund &&
+        <>
+          <Navbar
+            logoSrc={process.env.NEXT_PUBLIC_APP_ROOT + "icons/starklogo.png"}
+            logoAlt="Go Stark Me logo"
+            title="Go Stark Me"
+            navItems={navItems}
+            ctaButton={{
+              label: "Connect wallet",
+              href: "/"
+            }}
+          />
+          <div className="text-center text-gray-500 mt-5">
+            Funding not found, please go back to dashboard and search for the funding again.
+          </div>
+        </>
+      }
     </>
   );
 };

diff --git a/frontend/gostarkme-web/app/app/myfunds/page.tsx b/frontend/gostarkme-web/app/app/myfunds/page.tsx
@@ -3,14 +3,11 @@
 import UserFunds from '@/components/modules/myfunds/UserFunds';
 import Navbar from '@/components/ui/Navbar';
 import Footer from '@/components/ui/Footer';
-import { useState } from 'react';
-import { useEventListener, useLocalStorage } from 'usehooks-ts'
 import { useAtomValue } from 'jotai';
 import { walletStarknetkitLatestAtom } from '@/state/connectedWallet';
 import { navItems } from '@/constants';
 
 const MyFundsPage = () => { 
-  const wallet = useAtomValue(walletStarknetkitLatestAtom);
 
   return (
     <div className="min-h-screen flex flex-col">

diff --git a/frontend/gostarkme-web/app/app/myprofile/page.tsx b/frontend/gostarkme-web/app/app/myprofile/page.tsx
@@ -5,8 +5,6 @@ import Divider from '@/components/ui/Divider';
 import Image from 'next/image';
 import Footer from '@/components/ui/Footer';
 import Navbar from '@/components/ui/Navbar';
-import { useEventListener } from 'usehooks-ts';
-import { useState } from 'react';
 import { walletStarknetkitLatestAtom } from '@/state/connectedWallet';
 import { useAtomValue } from 'jotai';
 import { navItems } from '@/constants';
@@ -37,7 +35,7 @@ const UserProfilePage = () => {
           href: "/"
         }}
       />
-      {wallet !== null ? (
+      {wallet !== undefined ? (
         <main className="flex flex-grow w-full items-center justify-center bg-white p-8">
           {/* Profile Section */}
           <section className="w-full max-w-6xl">

diff --git a/frontend/gostarkme-web/app/app/newfunding/page.tsx b/frontend/gostarkme-web/app/app/newfunding/page.tsx
@@ -3,7 +3,7 @@ import Bounded from "@/components/ui/Bounded";
 import Divider from "@/components/ui/Divider";
 import Stages from "@/components/modules/newfunding/Stages";
 
-const NewFundingPage = ({ params }: { params: { fundId: string } }) => {
+const NewFundingPage = () => {
   return (
     <>
       <Bounded className="px-60 text-lg">

diff --git a/frontend/gostarkme-web/app/app/page.tsx b/frontend/gostarkme-web/app/app/page.tsx
@@ -6,11 +6,11 @@ import { FUND_MANAGER_ADDR } from "@/constants";
 import { fundAbi } from "@/contracts/abis/fund";
 import { fundManager } from "@/contracts/abis/fundManager";
 import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import React, { useEffect, useState } from "react";
-import { byteArray, Contract, InvokeFunctionResponse } from "starknet";
+import { Contract } from "starknet";
 import { navItems } from "@/constants";
-import hex2ascii from "../utils";
+import LoadingSpinner from "@/components/ui/LoadingSpinner";
 
 const Dashboard = () => {
 
@@ -65,7 +65,10 @@ const Dashboard = () => {
       />
 
       {loading && <div className="text-center text-gray-500 mt-12">
-        Loading funds ...
+        <LoadingSpinner />
+        <div className="text-center text-gray-500">
+          Loading funds...
+        </div>
       </div>}
 
       {funds.length !== 0 && !loading &&

diff --git a/frontend/gostarkme-web/components/modules/Fund/Fund.tsx b/frontend/gostarkme-web/components/modules/Fund/Fund.tsx
@@ -6,13 +6,13 @@ import { FundVote } from "./FundVote";
 import { useEffect, useState } from "react";
 import { FUND_MANAGER_ADDR, upVotesNeeded } from "@/constants";
 import Divider from "@/components/ui/Divider";
-import hex2ascii from "@/app/utils";
 import { fundAbi } from "@/contracts/abis/fund";
 import { fundManager } from "@/contracts/abis/fundManager";
 import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
 import { useAtomValue } from "jotai";
 import { Contract } from "starknet";
 import { clickedFundState } from "@/state/nFunds";
+import LoadingSpinner from "@/components/ui/LoadingSpinner";
 
 const Fund = () => {
 
@@ -22,6 +22,8 @@ const Fund = () => {
 
   const [fund, setFund] = useState<any>({});
 
+  const [loading, setLoading] = useState(true);
+
   const clickedFund = useAtomValue(clickedFundState);
 
   async function getDetails() {
@@ -32,7 +34,7 @@ const Fund = () => {
     // GET FUND NAME
     let name = await fundContract.getName();
     // GET FUND DESCRIPTION
-    
+
     let desc = await fundContract.getReason();
     if (desc == " ") {
       desc = "No description provided";
@@ -45,24 +47,66 @@ const Fund = () => {
 
     let upVotes = await fundContract.getUpVotes();
 
-    setFund({ name: name, desc: desc, state: state, currentBalance: currentBalance, goal: goal, upVotes: upVotes, addr: addr });
+    let evidenceLink = await fundContract.get_evidence_link();
+
+    if (evidenceLink.indexOf('https') <= 0) {
+      evidenceLink = "https://" + evidenceLink;
+    }
+
+    let contactHandle = await fundContract.get_contact_handle();
+
+    if (contactHandle.indexOf('https') <= 0) {
+      contactHandle = "https://" + contactHandle;
+    }
+
+    setFund({
+      name: name,
+      desc: desc,
+      state: state,
+      currentBalance: currentBalance,
+      goal: goal,
+      upVotes: upVotes,
+      addr: addr,
+      evidenceLink: evidenceLink,
+      contactHandle: contactHandle
+    });
+    setLoading(false);
   }
 
   useEffect(() => {
     getDetails();
   }, []);
 
   return (
-    <section>
-      <h2 className="font-bold">{fund.name}</h2>
-      <Divider />
-      <p className="mb-40">{fund.desc}</p>
-      { Number(fund.state) === 0 && <p>Fund is currently innactive.</p>}
-      { Number(fund.state) === 1 && <FundVote upVotes={fund.upVotes} upVotesNeeded={upVotesNeeded} addr={fund.addr}/>}
-      { Number(fund.state) === 2 && <FundDonate icon={starknetlogo} />}
-      { Number(fund.state) === 3 && <p>Fund is currently closed.</p>}
-      { Number(fund.state) === 4 && <p>Fund was already withdrawed.</p>}
-    </section>
+    <>
+      {loading &&
+        <div className="text-center text-gray-500 mt-12">
+          <LoadingSpinner />
+          <div className="text-center text-gray-500">
+            Loading funding...
+          </div>
+        </div>
+      }
+      {!loading &&
+        <section>
+          <h1 className="font-bold text-2xl">{fund.name}</h1>
+          <Divider />
+          <h2 className="text-xl">Description</h2>
+          <p>{fund.desc}</p>
+          <Divider />
+          <h2 className="text-xl">Evidence</h2>
+          <a href={fund.evidenceLink} target="_blank">{fund.evidenceLink}</a>
+          <Divider />
+          <h2 className="text-xl">Contact handle</h2>
+          <a href={fund.contactHandle} target="_blank">{fund.contactHandle}</a>
+          {Number(fund.state) === 0 && <p>Fund is currently innactive.</p>}
+          {Number(fund.state) === 1 && <FundVote upVotes={fund.upVotes} upVotesNeeded={upVotesNeeded} addr={fund.addr} setLoading={setLoading} getDetails={getDetails} />}
+          {Number(fund.state) === 2 && <FundDonate icon={starknetlogo} />}
+          {Number(fund.state) === 3 && <p>Fund is currently closed.</p>}
+          {Number(fund.state) === 4 && <p>Fund was already withdrawed.</p>}
+        </section>
+      }
+    </>
   );
 };
 

diff --git a/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx b/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx
@@ -10,20 +10,23 @@ interface FundVoteProps {
   upVotes: number,
   upVotesNeeded: number,
   addr: string,
+  setLoading: (load: boolean) => void,
+  getDetails: () => void,
 }
 
-export const FundVote = ({ upVotes, upVotesNeeded, addr }: FundVoteProps) => {
+export const FundVote = ({ upVotes, upVotesNeeded, addr, setLoading, getDetails }: FundVoteProps) => {
 
   const wallet = useAtomValue(walletStarknetkitLatestAtom);
 
   const progress = calculatePorcentage(upVotes, upVotesNeeded);
 
   function vote() {
+    setLoading(true);
     const fundContract = new Contract(fundAbi, addr, wallet?.account);
     const myCall = fundContract.populate("receiveVote", []);
     wallet?.account?.execute(myCall)
       .then(async (resp: InvokeFunctionResponse) => {
-        console.log("increaseBalance txH =", resp.transaction_hash);
+        getDetails();
       })
       .catch((e: any) => { console.log("error increase balance =", e) });
   }

diff --git a/frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx b/frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx
@@ -42,23 +42,18 @@ const UserFunds = () => {
     alert(`Deleting fund with id: ${fundId}`);
   }
 
-  const onNewFundHandler = () => {
-    // TODO: Implement new fund action
-    alert(`Creating new fund`);
-  }
-
   return (
     <div className="max-w-screen-2xl mx-auto bg-white p-4 w-full">
       <div className="flex justify-between items-center mb-6">
         <div className="flex items-center">
           <h1 className="text-2xl font-bold mr-2">My Funds &#10024;</h1>
         </div>
-        {wallet !== null ? (
+        {wallet !== undefined ? (
           <LinkButton label="New" href="/app/newfunding" />
         ) : null}
       </div>
 
-      {wallet === null ? (
+      {wallet === undefined ? (
         <div className="flex justify-center items-center h-64">
           <div className="text-center text-gray-500">
             Please connect your wallet to see your funds.
@@ -74,7 +69,7 @@ const UserFunds = () => {
         </div>
       ) : null}
 
-      {funds.length !== 0 && wallet !== null ? (
+      {funds.length !== 0 && wallet !== undefined ? (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-16">
           {funds.map((fund: any, index: number) => (
             <FundCard

diff --git a/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx b/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx
@@ -4,11 +4,6 @@ import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
 import { useAtom } from "jotai";
 import { connect, disconnect } from "starknetkit";
 
-interface IWalletConnection {
-  wallet?: any;
-  address?: string;
-}
-
 export default function WalletConnector() {
   const [wallet, setWallet] = useAtom(walletStarknetkitLatestAtom)
 
@@ -37,7 +32,7 @@ export default function WalletConnector() {
     event.preventDefault();
     try {
       await disconnect();
-      setWallet(null);
+      setWallet(undefined);
     } catch (error) {
       console.error("Failed to disconnect wallet:", error);
     }

diff --git a/frontend/gostarkme-web/components/ui/LoadingSpinner.tsx b/frontend/gostarkme-web/components/ui/LoadingSpinner.tsx
@@ -1,11 +1,11 @@
 "use client"
 import { motion } from "framer-motion"
 
-export default function Component() {
+export default function LoadingSpinner() {
   return (
     <div className="flex items-center justify-center p-4">
       <motion.div
-        className="w-10 h-10 border-4 border-gray-300 border-t-transparent rounded-full"
+        className="w-14 h-14 border-4 border-gray-300 border-t-transparent rounded-full"
         animate={{ rotate: 360 }}
         transition={{
           duration: 1,