From eebe14820caf760570a476ed6cd72901419b9f4f Mon Sep 17 00:00:00 2001
From: adrianvrj <adrivargas48@gmail.com>
Date: Thu, 7 Nov 2024 14:44:55 -0600
Subject: [PATCH 1/2] [feat] added confirmation pages for user txs

---
 .../app/app/confirmation/page.tsx             | 11 ++++
 .../components/modules/Fund/FundDonate.tsx    | 10 ++--
 .../components/modules/Fund/FundVote.tsx      | 18 ++++---
 .../modules/confirmation/Confirmation.tsx     | 51 +++++++++++++++++++
 .../confirmation/CreationConfirmation.tsx     | 20 ++++++++
 .../confirmation/DonationConfirmation.tsx     | 20 ++++++++
 .../modules/confirmation/VoteConfirmation.tsx | 20 ++++++++
 .../components/modules/newfunding/Stages.tsx  | 26 +++++-----
 .../gostarkme-web/components/ui/ShareOnX.tsx  | 26 ++++++++++
 frontend/gostarkme-web/package.json           |  1 +
 frontend/gostarkme-web/state/latestTx.ts      |  8 +++
 11 files changed, 190 insertions(+), 21 deletions(-)
 create mode 100644 frontend/gostarkme-web/app/app/confirmation/page.tsx
 create mode 100644 frontend/gostarkme-web/components/modules/confirmation/Confirmation.tsx
 create mode 100644 frontend/gostarkme-web/components/modules/confirmation/CreationConfirmation.tsx
 create mode 100644 frontend/gostarkme-web/components/modules/confirmation/DonationConfirmation.tsx
 create mode 100644 frontend/gostarkme-web/components/modules/confirmation/VoteConfirmation.tsx
 create mode 100644 frontend/gostarkme-web/components/ui/ShareOnX.tsx
 create mode 100644 frontend/gostarkme-web/state/latestTx.ts

diff --git a/frontend/gostarkme-web/app/app/confirmation/page.tsx b/frontend/gostarkme-web/app/app/confirmation/page.tsx
new file mode 100644
index 0000000..4d82993
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx b/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx
index 6a6f063..165c651 100644
--- a/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx
+++ b/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) });
     }
diff --git a/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx b/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx
index f70f8c5..eb6db6c 100644
--- a/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx
+++ b/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 (
diff --git a/frontend/gostarkme-web/components/modules/confirmation/Confirmation.tsx b/frontend/gostarkme-web/components/modules/confirmation/Confirmation.tsx
new file mode 100644
index 0000000..5e5fcaa
--- /dev/null
+++ b/frontend/gostarkme-web/components/modules/confirmation/Confirmation.tsx
@@ -0,0 +1,51 @@
+'use client';
+import React from "react";
+import CreationConfirmation from "./CreationConfirmation";
+import VoteConfirmation from "./VoteConfirmation";
+import DonationConfirmation from "./DonationConfirmation";
+import { useAtomValue } from "jotai";
+import { latestTxAtom } from "@/state/latestTx";
+import Navbar from "@/components/ui/Navbar";
+import { navItems } from "@/constants";
+
+const Confirmation = () => {
+    const tx = useAtomValue(latestTxAtom);
+    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 txHash={tx.txHash} />
+                    }
+
+                    {tx?.type === "vote" &&
+                        <VoteConfirmation txHash={tx.txHash} />
+                    }
+
+                    {tx?.type === "donation" &&
+                        <DonationConfirmation txHash={tx.txHash} />
+                    }
+                </div>
+            }
+        </>
+    )
+};
+
+export default Confirmation;
diff --git a/frontend/gostarkme-web/components/modules/confirmation/CreationConfirmation.tsx b/frontend/gostarkme-web/components/modules/confirmation/CreationConfirmation.tsx
new file mode 100644
index 0000000..975b5d7
--- /dev/null
+++ b/frontend/gostarkme-web/components/modules/confirmation/CreationConfirmation.tsx
@@ -0,0 +1,20 @@
+import ShareXButton from "@/components/ui/ShareOnX";
+import React from "react";
+
+interface CreationConfirmationProps {
+    txHash: String;
+}
+
+const CreationConfirmation: React.FC<CreationConfirmationProps> = ({
+    txHash,
+}) => (
+    <>
+        <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 txHash={txHash} />
+        </div>
+    </>
+);
+
+export default CreationConfirmation;
diff --git a/frontend/gostarkme-web/components/modules/confirmation/DonationConfirmation.tsx b/frontend/gostarkme-web/components/modules/confirmation/DonationConfirmation.tsx
new file mode 100644
index 0000000..c0cb7ac
--- /dev/null
+++ b/frontend/gostarkme-web/components/modules/confirmation/DonationConfirmation.tsx
@@ -0,0 +1,20 @@
+import ShareXButton from "@/components/ui/ShareOnX";
+import React from "react";
+
+interface DonationConfirmationProps {
+    txHash: String;
+}
+
+const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
+    txHash,
+}) => (
+    <>
+        <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 txHash={txHash} />
+        </div>
+    </>
+);
+
+export default DonationConfirmation;
diff --git a/frontend/gostarkme-web/components/modules/confirmation/VoteConfirmation.tsx b/frontend/gostarkme-web/components/modules/confirmation/VoteConfirmation.tsx
new file mode 100644
index 0000000..4f9d5be
--- /dev/null
+++ b/frontend/gostarkme-web/components/modules/confirmation/VoteConfirmation.tsx
@@ -0,0 +1,20 @@
+import ShareXButton from "@/components/ui/ShareOnX";
+import React from "react";
+
+interface VoteConfirmationProps {
+    txHash: String;
+}
+
+const VoteConfirmation: React.FC<VoteConfirmationProps> = ({
+    txHash,
+}) => (
+    <>
+        <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 txHash={txHash} />
+        </div>
+    </>
+);
+
+export default VoteConfirmation;
diff --git a/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx b/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx
index 605523b..2784624 100644
--- a/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx
+++ b/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx
@@ -5,23 +5,26 @@ import DescriptionStep from "./DescriptionStep";
 import { Contract, wallet, InvokeFunctionResponse, shortString } from "starknet";
 import { fundManager } from "@/contracts/abis/fundManager";
 import { FUND_MANAGER_ADDR } from "@/constants";
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
- 
+import { latestTxAtom } from "@/state/latestTx";
+import { useRouter } from "next/navigation";
 
 const Stages = () => {
   const [currentStep, setCurrentStep] = useState(0);
   const [fundingName, setFundingName] = useState("");
   const [goal, setGoal] = useState("");
   const [fundingDescription, setFundingDescription] = useState("");
-  const [errors, setErrors] = useState({ fundingName: "", goal: "",evidenceLink: "",contactHandle: "" });
+  const [errors, setErrors] = useState({ fundingName: "", goal: "", evidenceLink: "", contactHandle: "" });
   const [evidenceLink, setEvidenceLink] = useState("");
   const [contactHandle, setContactHandle] = useState("");
+  const [latestTx, setLatesTx] = useAtom(latestTxAtom);
   const wallet = useAtomValue(walletStarknetkitLatestAtom);
+  const router = useRouter();
 
   const handleNextStep = () => {
     // Reset errors
-    setErrors({ fundingName: "", goal: "", evidenceLink: "", contactHandle: ""});
+    setErrors({ fundingName: "", goal: "", evidenceLink: "", contactHandle: "" });
 
     // Validate fields
     let hasErrors = false;
@@ -58,14 +61,14 @@ const Stages = () => {
     newFund();
   };
 
-  function newFund() {
+  async function newFund() {
     const fundManagerContract = new Contract(fundManager, FUND_MANAGER_ADDR, wallet?.account);
-    const myCall = fundManagerContract.newFund(fundingName,goal,evidenceLink,contactHandle,fundingDescription);
-    wallet?.account?.execute(myCall)
+    fundManagerContract.newFund(fundingName, goal, evidenceLink, contactHandle, fundingDescription)
       .then(async (resp: InvokeFunctionResponse) => {
-        console.log("increaseBalance txH =", resp.transaction_hash);
+        setLatesTx({ txHash: resp.transaction_hash, type: "newfund" });
+        router.push("/app/confirmation");
       })
-      .catch((e: any) => { console.log("error increase balance =", e) });
+      .catch((e: any) => { console.log(e) });
   }
 
   return (
@@ -96,9 +99,8 @@ const Stages = () => {
         {[0, 1].map((_, index) => (
           <span
             key={index}
-            className={`h-3 w-3 rounded-full cursor-pointer ${
-              currentStep === index ? "bg-blueGrey" : "bg-gray-300"
-            }`}
+            className={`h-3 w-3 rounded-full cursor-pointer ${currentStep === index ? "bg-blueGrey" : "bg-gray-300"
+              }`}
             onClick={() => setCurrentStep(index)}
           />
         ))}
diff --git a/frontend/gostarkme-web/components/ui/ShareOnX.tsx b/frontend/gostarkme-web/components/ui/ShareOnX.tsx
new file mode 100644
index 0000000..0b4fae2
--- /dev/null
+++ b/frontend/gostarkme-web/components/ui/ShareOnX.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+
+interface ShareXButtonProps {
+    txHash: String;
+}  
+
+const ShareXButton : React.FC<ShareXButtonProps>  = ({txHash}) => {
+  return (
+    <button
+      className="flex items-center gap-2 bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition-colors"
+      onClick={() => window.open('https://x.com/share', '_blank')}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        className="w-5 h-5 fill-current"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+      </svg>
+      <span className="font-semibold">Share on X</span>
+    </button>
+  );
+};
+
+export default ShareXButton;
\ No newline at end of file
diff --git a/frontend/gostarkme-web/package.json b/frontend/gostarkme-web/package.json
index ef6f5cc..2b81d3f 100644
--- a/frontend/gostarkme-web/package.json
+++ b/frontend/gostarkme-web/package.json
@@ -18,6 +18,7 @@
     "next": "14.2.10",
     "react": "^18",
     "react-dom": "^18",
+    "react-router-dom": "^6.28.0",
     "starknet": "^6.7.0",
     "starknetkit": "^1.1.5",
     "usehooks-ts": "^3.1.0"
diff --git a/frontend/gostarkme-web/state/latestTx.ts b/frontend/gostarkme-web/state/latestTx.ts
new file mode 100644
index 0000000..6d40407
--- /dev/null
+++ b/frontend/gostarkme-web/state/latestTx.ts
@@ -0,0 +1,8 @@
+import { atomWithReset } from "jotai/utils"
+
+interface tx {
+    txHash: String;
+    type: String
+}
+
+export const latestTxAtom = atomWithReset<tx | undefined>(undefined)
\ No newline at end of file

From 58a969bb8f4d6a60d28139df48bac1fd6411ca90 Mon Sep 17 00:00:00 2001
From: adrianvrj <adrivargas48@gmail.com>
Date: Thu, 7 Nov 2024 17:22:47 -0600
Subject: [PATCH 2/2] [feat] added tweet message

---
 frontend/README.md                            | 37 ++++++++++++++++++-
 frontend/gostarkme-web/app/app/page.tsx       | 14 ++++---
 .../components/dashboard/fundCard.tsx         |  2 +-
 .../components/modules/Fund/Fund.tsx          | 14 ++-----
 .../modules/confirmation/Confirmation.tsx     | 17 ++++++---
 .../confirmation/CreationConfirmation.tsx     |  4 +-
 .../confirmation/DonationConfirmation.tsx     |  4 +-
 .../modules/confirmation/VoteConfirmation.tsx |  4 +-
 .../components/modules/newfunding/Stages.tsx  |  8 +++-
 .../gostarkme-web/components/ui/ShareOnX.tsx  |  8 ++--
 frontend/gostarkme-web/state/nFunds.ts        |  7 +++-
 11 files changed, 87 insertions(+), 32 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index 25a67a9..1d0c386 100644
--- a/frontend/README.md
+++ b/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
diff --git a/frontend/gostarkme-web/app/app/page.tsx b/frontend/gostarkme-web/app/app/page.tsx
index 90f7359..87a7f09 100644
--- a/frontend/gostarkme-web/app/app/page.tsx
+++ b/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,15 +62,20 @@ 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} />
@@ -79,7 +83,7 @@ const Dashboard = () => {
         </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.
diff --git a/frontend/gostarkme-web/components/dashboard/fundCard.tsx b/frontend/gostarkme-web/components/dashboard/fundCard.tsx
index 28b13a0..4b6cee2 100644
--- a/frontend/gostarkme-web/components/dashboard/fundCard.tsx
+++ b/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 (
diff --git a/frontend/gostarkme-web/components/modules/Fund/Fund.tsx b/frontend/gostarkme-web/components/modules/Fund/Fund.tsx
index a963103..2407295 100644
--- a/frontend/gostarkme-web/components/modules/Fund/Fund.tsx
+++ b/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} />}
diff --git a/frontend/gostarkme-web/components/modules/confirmation/Confirmation.tsx b/frontend/gostarkme-web/components/modules/confirmation/Confirmation.tsx
index 5e5fcaa..edb75c4 100644
--- a/frontend/gostarkme-web/components/modules/confirmation/Confirmation.tsx
+++ b/frontend/gostarkme-web/components/modules/confirmation/Confirmation.tsx
@@ -1,15 +1,22 @@
 'use client';
-import React from "react";
+import React, { useEffect } from "react";
 import CreationConfirmation from "./CreationConfirmation";
 import VoteConfirmation from "./VoteConfirmation";
 import DonationConfirmation from "./DonationConfirmation";
-import { useAtomValue } from "jotai";
+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
@@ -32,15 +39,15 @@ const Confirmation = () => {
                 <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 txHash={tx.txHash} />
+                        <CreationConfirmation message={newFundMessage} txHash={tx.txHash} />
                     }
 
                     {tx?.type === "vote" &&
-                        <VoteConfirmation txHash={tx.txHash} />
+                        <VoteConfirmation message={voteMessage} txHash={tx.txHash} />
                     }
 
                     {tx?.type === "donation" &&
-                        <DonationConfirmation txHash={tx.txHash} />
+                        <DonationConfirmation message={donationMessage} txHash={tx.txHash} />
                     }
                 </div>
             }
diff --git a/frontend/gostarkme-web/components/modules/confirmation/CreationConfirmation.tsx b/frontend/gostarkme-web/components/modules/confirmation/CreationConfirmation.tsx
index 975b5d7..fca5460 100644
--- a/frontend/gostarkme-web/components/modules/confirmation/CreationConfirmation.tsx
+++ b/frontend/gostarkme-web/components/modules/confirmation/CreationConfirmation.tsx
@@ -3,16 +3,18 @@ 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 txHash={txHash} />
+            <ShareXButton message={message} />
         </div>
     </>
 );
diff --git a/frontend/gostarkme-web/components/modules/confirmation/DonationConfirmation.tsx b/frontend/gostarkme-web/components/modules/confirmation/DonationConfirmation.tsx
index c0cb7ac..6641179 100644
--- a/frontend/gostarkme-web/components/modules/confirmation/DonationConfirmation.tsx
+++ b/frontend/gostarkme-web/components/modules/confirmation/DonationConfirmation.tsx
@@ -3,16 +3,18 @@ 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 txHash={txHash} />
+            <ShareXButton message={message} />
         </div>
     </>
 );
diff --git a/frontend/gostarkme-web/components/modules/confirmation/VoteConfirmation.tsx b/frontend/gostarkme-web/components/modules/confirmation/VoteConfirmation.tsx
index 4f9d5be..2dfc05d 100644
--- a/frontend/gostarkme-web/components/modules/confirmation/VoteConfirmation.tsx
+++ b/frontend/gostarkme-web/components/modules/confirmation/VoteConfirmation.tsx
@@ -3,16 +3,18 @@ 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 txHash={txHash} />
+            <ShareXButton message={message} />
         </div>
     </>
 );
diff --git a/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx b/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx
index 2784624..1ea0929 100644
--- a/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx
+++ b/frontend/gostarkme-web/components/modules/newfunding/Stages.tsx
@@ -5,10 +5,11 @@ import DescriptionStep from "./DescriptionStep";
 import { Contract, wallet, InvokeFunctionResponse, shortString } from "starknet";
 import { fundManager } from "@/contracts/abis/fundManager";
 import { FUND_MANAGER_ADDR } from "@/constants";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
 import { latestTxAtom } from "@/state/latestTx";
 import { useRouter } from "next/navigation";
+import { clickedFundState } from "@/state/nFunds";
 
 const Stages = () => {
   const [currentStep, setCurrentStep] = useState(0);
@@ -18,7 +19,9 @@ const Stages = () => {
   const [errors, setErrors] = useState({ fundingName: "", goal: "", evidenceLink: "", contactHandle: "" });
   const [evidenceLink, setEvidenceLink] = useState("");
   const [contactHandle, setContactHandle] = useState("");
-  const [latestTx, setLatesTx] = useAtom(latestTxAtom);
+  const setLatesTx = useSetAtom(latestTxAtom);
+  const setActualFund = useSetAtom(clickedFundState);
+
   const wallet = useAtomValue(walletStarknetkitLatestAtom);
   const router = useRouter();
 
@@ -66,6 +69,7 @@ const Stages = () => {
     fundManagerContract.newFund(fundingName, goal, evidenceLink, contactHandle, fundingDescription)
       .then(async (resp: InvokeFunctionResponse) => {
         setLatesTx({ txHash: resp.transaction_hash, type: "newfund" });
+        setActualFund({id: 0, name: fundingName});
         router.push("/app/confirmation");
       })
       .catch((e: any) => { console.log(e) });
diff --git a/frontend/gostarkme-web/components/ui/ShareOnX.tsx b/frontend/gostarkme-web/components/ui/ShareOnX.tsx
index 0b4fae2..a3da1ae 100644
--- a/frontend/gostarkme-web/components/ui/ShareOnX.tsx
+++ b/frontend/gostarkme-web/components/ui/ShareOnX.tsx
@@ -2,14 +2,16 @@ import React from 'react';
 
 
 interface ShareXButtonProps {
-    txHash: String;
+    message: String;
 }  
 
-const ShareXButton : React.FC<ShareXButtonProps>  = ({txHash}) => {
+const ShareXButton : React.FC<ShareXButtonProps>  = ({message}) => {
+  const tweetText = encodeURIComponent(message.toString());
+  const tweetUrl = `https://twitter.com/intent/tweet?text=${tweetText}`;
   return (
     <button
       className="flex items-center gap-2 bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition-colors"
-      onClick={() => window.open('https://x.com/share', '_blank')}
+      onClick={() => window.open(tweetUrl, '_blank')}
     >
       <svg
         viewBox="0 0 24 24"
diff --git a/frontend/gostarkme-web/state/nFunds.ts b/frontend/gostarkme-web/state/nFunds.ts
index c6d7458..97a12c1 100644
--- a/frontend/gostarkme-web/state/nFunds.ts
+++ b/frontend/gostarkme-web/state/nFunds.ts
@@ -1,5 +1,10 @@
 import { atomWithReset } from "jotai/utils"
 
+interface fundInfo {
+  id: Number;
+  name: String
+}
+
 export const clickedFundState = atomWithReset<
-  Number | null | undefined
+  fundInfo | null | undefined
 >(undefined)
\ No newline at end of file