[feat] added tweet message

web3wagers · Nov 7, 2024 · 58a969b · 58a969b
1 parent eebe148
commit 58a969b
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 32 deletions.
diff --git 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
@@ -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.

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)