[feat] Add confirmation page

frontend/README.md

@@ -14,7 +14,42 @@
 
 
 
-- Comment the content of the file `frontend/gostarkme-web/next.config.mjs`.
+- Comment the content of the file `frontend/gostarkme-web/next.config.mjs`. Adding only one element to the ```nextConfig``` object like this:
+
+```
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    /**
+     * Enable static exports for the App Router.
+     *
+     * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
+     */
+    // output: "export",
+
+    /**
+     * Set base path. This is the slug of your GitHub repository.
+     *
+     * @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
+     */
+    // basePath: "/gostarkme",
+
+    // assetPrefix: 'https://web3wagers.github.io/gostarkme',
+
+    /**
+     * Disable server-based image optimization. Next.js does not support
+     * dynamic features with static exports.
+     *
+     * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
+     */
+    // images: {
+    //   unoptimized: true,
+    // },
+
+    reactStrictMode: false,
+  };
+
+  export default nextConfig;
+```
 
 
 ## Local Deployment

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

@@ -0,0 +1,11 @@
+import Confirmation from "@/components/modules/confirmation/Confirmation";
+
+const ConfirmationPage = async () => {
+  return (
+    <>
+      <Confirmation/>
+    </>
+  );
+};
+
+export default ConfirmationPage;

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

@@ -16,13 +16,12 @@ const Dashboard = () => {
 
   const wallet = useAtomValue(walletStarknetkitLatestAtom);
 
-  const [fundManagerContract, _setFundManagerContract] = useState<Contract>(new Contract(fundManager, FUND_MANAGER_ADDR, wallet?.account));
-
   const [funds, setFunds] = useState<any>([]);
 
   const [loading, setLoading] = useState(true);
 
   async function getFunds() {
+    const fundManagerContract = new Contract(fundManager, FUND_MANAGER_ADDR, wallet?.account);
     const id = await fundManagerContract.getCurrentId();
     let fundings = [];
     for (let i = 1; i < id; i++) {
@@ -63,23 +62,28 @@ const Dashboard = () => {
           href: "/"
         }}
       />
+      {!wallet &&
+        <div className="text-center text-gray-500 mt-32">
+          Please connect your wallet to see funding dashboard.
+        </div>
+      }
 
-      {loading && <div className="text-center text-gray-500 mt-12">
+      {loading && wallet && <div className="text-center text-gray-500 mt-12">
         <LoadingSpinner />
         <div className="text-center text-gray-500">
           Loading funds...
         </div>
       </div>}
 
-      {funds.length !== 0 && !loading &&
+      {funds.length !== 0 && !loading && wallet &&
         <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-6 md:gap-x-[138px] md:gap-y-[84px] mt-10 lg:mt-12">
           {funds.map((fund: { type: string; title: string; description: string; fund_id: string }, index: number) => (
             <FundCards key={index} fund={fund} index={index} />
           ))}
         </div>
       }
 
-      {funds.length === 0 && !loading &&
+      {funds.length === 0 && !loading && wallet &&
         <div className="flex justify-center items-center h-64">
           <div className="text-center text-gray-500">
             There is no fundings to display.

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

@@ -22,7 +22,7 @@ const FundCards = ({ fund, index }: FundCardProps) => {
   const setClickedFund = useSetAtom(clickedFundState);
 
   function handleNav() {
-    setClickedFund(Number(fund.fund_id));
+    setClickedFund({id: Number(fund.fund_id), name: fund.title});
   }
 
   return (

frontend/gostarkme-web/components/modules/Fund/Fund.tsx

@@ -27,7 +27,7 @@ const Fund = () => {
   const clickedFund = useAtomValue(clickedFundState);
 
   async function getDetails() {
-    let addr = await fundManagerContract.getFund(clickedFund);
+    let addr = await fundManagerContract.getFund(clickedFund?.id);
     addr = "0x" + addr.toString(16);
     const fundContract = new Contract(fundAbi, addr, wallet?.account);
 
@@ -51,16 +51,8 @@ const Fund = () => {
 
     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,
@@ -97,10 +89,10 @@ const Fund = () => {
           <p>{fund.desc}</p>
           <Divider />
           <h2 className="text-xl">Evidence</h2>
-          <a href={fund.evidenceLink} target="_blank">{fund.evidenceLink}</a>
+          <a href={fund.evidenceLink} className="text-blue-600" target="_blank">{fund.evidenceLink}</a>
           <Divider />
           <h2 className="text-xl">Contact handle</h2>
-          <a href={fund.contactHandle} target="_blank">{fund.contactHandle}</a>
+          <a href={fund.contactHandle} className="text-blue-600" 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 currentBalance={fund.currentBalance} goal={fund.goal} addr={fund.addr} icon={starknetlogo} />}

frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx

@@ -3,14 +3,15 @@
 import { calculatePorcentage } from "@/app/utils";
 import ProgressBar from "@/components/ui/ProgressBar";
 import { provider } from "@/constants";
-import { fundAbi } from "@/contracts/abis/fund";
 import { strkAbi } from "@/contracts/abis/strk";
 import { addrSTRK } from "@/contracts/addresses";
 import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
-import { useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import Image, { StaticImageData } from "next/image";
 import { useState } from "react";
 import { Contract, InvokeFunctionResponse } from "starknet";
+import { useRouter } from "next/navigation";
+import { latestTxAtom } from "@/state/latestTx";
 
 interface FundDonateProps {
   currentBalance: number;
@@ -22,8 +23,10 @@ interface FundDonateProps {
 const FundDonate = ({ currentBalance, goal, addr, icon }: FundDonateProps) => {
   const [amount, setAmount] = useState<number | "">("");
   const [error, setError] = useState<string>("");
+  const setLatestTx = useSetAtom(latestTxAtom);
   const wallet = useAtomValue(walletStarknetkitLatestAtom);
   const progress = calculatePorcentage(currentBalance, goal);
+  const router = useRouter();
 
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value === "" ? "" : Number(e.target.value);
@@ -46,7 +49,8 @@ const FundDonate = ({ currentBalance, goal, addr, icon }: FundDonateProps) => {
       });
       wallet?.account?.execute(transferCall)
         .then(async (resp: InvokeFunctionResponse) => {
-          console.log("DONE!");
+          setLatestTx({ txHash: resp.transaction_hash, type: "donation" });
+          router.push("/app/confirmation");
         })
         .catch((e: any) => { console.log("error increase balance =", e) });
     }

frontend/gostarkme-web/components/modules/Fund/FundVote.tsx

@@ -3,8 +3,10 @@ import { Button } from "@/components/ui/Button";
 import ProgressBar from "@/components/ui/ProgressBar";
 import { fundAbi } from "@/contracts/abis/fund";
 import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
-import { useAtomValue } from "jotai";
+import { latestTxAtom } from "@/state/latestTx";
+import { useAtomValue, useSetAtom } from "jotai";
 import { Contract, InvokeFunctionResponse } from "starknet";
+import { useRouter } from "next/navigation";
 
 interface FundVoteProps {
   upVotes: number,
@@ -20,15 +22,19 @@ export const FundVote = ({ upVotes, upVotesNeeded, addr, setLoading, getDetails
 
   const progress = calculatePorcentage(upVotes, upVotesNeeded);
 
-  function vote() {
+  const setLatestTx = useSetAtom(latestTxAtom);
+
+  const router = useRouter();
+
+  async function vote() {
     setLoading(true);
     const fundContract = new Contract(fundAbi, addr, wallet?.account);
-    const myCall = fundContract.populate("receiveVote", []);
-    wallet?.account?.execute(myCall)
+    fundContract.receiveVote()
       .then(async (resp: InvokeFunctionResponse) => {
-        getDetails();
+        setLatestTx({ txHash: resp.transaction_hash, type: "vote" });
+        router.push("/app/confirmation");
       })
-      .catch((e: any) => { console.log("error increase balance =", e) });
+      .catch((e: any) => { getDetails() });
   }
 
   return (

frontend/gostarkme-web/components/modules/confirmation/Confirmation.tsx

@@ -0,0 +1,58 @@
+'use client';
+import React, { useEffect } from "react";
+import CreationConfirmation from "./CreationConfirmation";
+import VoteConfirmation from "./VoteConfirmation";
+import DonationConfirmation from "./DonationConfirmation";
+import { useAtom, useAtomValue } from "jotai";
+import { latestTxAtom } from "@/state/latestTx";
+import Navbar from "@/components/ui/Navbar";
+import { navItems } from "@/constants";
+import { clickedFundState } from "@/state/nFunds";
+import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
+
+const Confirmation = () => {
+    const tx = useAtomValue(latestTxAtom);
+    const actualFund = useAtomValue(clickedFundState);
+    const voteMessage = ` 🗳️ Just cast my vote for an amazing cause called ${actualFund?.name} on Go Stark Me! This fund needs more votes to start raising funds—every vote counts! Let’s support projects that make a difference at https://web3wagers.github.io/gostarkme/ @web3_wagers 🙌💫 #GoStarkMe #Starknet #CommunityPower`;
+    const donationMessage = `🙌 Proud to support ${actualFund?.name} on Go Stark Me! Donations make a difference. 💪 Go ahead and donate at https://web3wagers.github.io/gostarkme/ @web3_wagers #Starknet #GoStarkMe #Web3Wagers`;
+    const newFundMessage = `🚀 Just launched a new fund on Go Stark Me called ${actualFund?.name}! I’m raising support for an important cause, and every contribution makes a difference. Join me in making an impact at https://web3wagers.github.io/gostarkme/! 💪🌍 Check it out on @web3_wagers #GoStarkMe #Starknet #BlockchainForGood`;
+
+    return (
+        <>
+            <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: "/"
+                }}
+            />
+            {tx === undefined &&
+                <div className="text-center text-gray-500 mt-5">
+                    The place you are trying to reach is not enabled yet.
+                </div>
+            }
+
+            {tx !== undefined &&
+                <div className="flex flex-col items-center justify-center gap-4 text-center mt-32">
+                    <h1 className="text-3xl font-extrabold">Success &#128640;</h1>
+                    {tx?.type === "newfund" &&
+                        <CreationConfirmation message={newFundMessage} txHash={tx.txHash} />
+                    }
+
+                    {tx?.type === "vote" &&
+                        <VoteConfirmation message={voteMessage} txHash={tx.txHash} />
+                    }
+
+                    {tx?.type === "donation" &&
+                        <DonationConfirmation message={donationMessage} txHash={tx.txHash} />
+                    }
+                </div>
+            }
+        </>
+    )
+};
+
+export default Confirmation;

frontend/gostarkme-web/components/modules/confirmation/CreationConfirmation.tsx

@@ -0,0 +1,22 @@
+import ShareXButton from "@/components/ui/ShareOnX";
+import React from "react";
+
+interface CreationConfirmationProps {
+    txHash: String;
+    message: String;
+}
+
+const CreationConfirmation: React.FC<CreationConfirmationProps> = ({
+    txHash,
+    message,
+}) => (
+    <>
+        <div className="flex flex-col items-center justify-center gap-4 text-center">
+            <p className="text-2xl font-light m-5">Your funding was created, take a look at the transaction <a className="text-blue-600" target="_blank" href={"https://sepolia.voyager.online/tx/" + txHash}>here.</a></p>
+            <p className="text-2xl font-light m-5">Share your contribution via X to tell everyone how cool you are</p>
+            <ShareXButton message={message} />
+        </div>
+    </>
+);
+
+export default CreationConfirmation;

frontend/gostarkme-web/components/modules/confirmation/DonationConfirmation.tsx

@@ -0,0 +1,22 @@
+import ShareXButton from "@/components/ui/ShareOnX";
+import React from "react";
+
+interface DonationConfirmationProps {
+    txHash: String;
+    message: String;
+}
+
+const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
+    txHash,
+    message,
+}) => (
+    <>
+        <div className="flex flex-col items-center justify-center gap-4 text-center">
+            <p className="text-2xl font-light m-5">Your donation was sent to the funding, take a look at the transaction <a className="text-blue-600" target="_blank" href={"https://sepolia.voyager.online/tx/" + txHash}>here.</a></p>
+            <p className="text-2xl font-light m-5">Share your contribution via X to tell everyone how cool you are</p>
+            <ShareXButton message={message} />
+        </div>
+    </>
+);
+
+export default DonationConfirmation;

frontend/gostarkme-web/components/modules/confirmation/VoteConfirmation.tsx

@@ -0,0 +1,22 @@
+import ShareXButton from "@/components/ui/ShareOnX";
+import React from "react";
+
+interface VoteConfirmationProps {
+    txHash: String;
+    message: String;
+}
+
+const VoteConfirmation: React.FC<VoteConfirmationProps> = ({
+    txHash,
+    message,
+}) => (
+    <>
+        <div className="flex flex-col items-center justify-center gap-4 text-center">
+            <p className="text-2xl font-light m-5">Your vote was submitted, take a look at the transaction <a className="text-blue-600" target="_blank" href={"https://sepolia.voyager.online/tx/" + txHash}>here.</a></p>
+            <p className="text-2xl font-light m-5">Share your contribution via X to tell everyone how cool you are</p>
+            <ShareXButton message={message} />
+        </div>
+    </>
+);
+
+export default VoteConfirmation;