Regen-Bazaar · gunjanghate · Jul 4, 2025 · Jul 10, 2025
diff --git a/.env.development b/.env.development
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ RegenBazar is a decentralized application (dApp) that serves as a bridge between
 ## 🚀 Live Demo
 
 **Website**: [demo.regenbazar.com](https://demo.regenbazar.com)  
-*Hosted on Netlify using Cloudflare*
+_Hosted on Netlify using Cloudflare_
 
 ## 🛠️ Technology Stack
 
@@ -92,7 +92,8 @@ npm|bun run dev
 
 **Open the application:**
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-   ```
+
+```
 
 ## 🌱 Parent Project: EcoSynthesisX
 
@@ -160,3 +161,4 @@ This project is part of the EcoSynthesisX ecosystem and follows open-source prin
 ---
 
 *Building the future of regenerative economics through Web3 innovation* 🌱
+```
diff --git a/src/app/create-nonprofit-profile/page.tsx b/src/app/create-nonprofit-profile/page.tsx
@@ -10,7 +10,7 @@ import { useWallet } from '../../context/WalletContext'
 import { depositVault } from '../../lib/contracts/depositVault'
 import { generateProfileImage } from '../../lib/generateImage'
 import { FEATURES } from '../../lib/config'
-
+import TweetButton from '@/components/TweetButton'
 interface ImpactAction {
   title: string
   achievedImpact: string
@@ -301,6 +301,7 @@ const CreateNonProfitProfile = () => {
           <>
             <div className='lg:col-span-2'>
               {/* Impact Product Data Form */}
+
               <div className='rounded-lg border border-gray-800 bg-black/50 p-6'>
                 <h2 className='mb-6 text-xl font-semibold'>
                   IMPACT PRODUCT DATA
@@ -633,12 +634,12 @@ const CreateNonProfitProfile = () => {
               <h3 className='mb-4 text-lg font-medium'>
                 Promote to your community and potential buyers
               </h3>
-              <button
-                className='w-full rounded-md bg-[#B4F481] py-2 font-medium text-black hover:bg-[#9FE070] disabled:cursor-not-allowed disabled:opacity-50'
-                disabled={currentStep !== 3}
-              >
-                SHARE
-              </button>
+              {/*------------ Tweet Button here ---------  */}
+              <TweetButton
+                text={
+                  '🚀 Just listed my real-world impact product on RegenBazar! 🌱💧 Explore it here: https://regenbazar.com'
+                }
+              />
             </div>
           </div>
         )

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -28,6 +28,7 @@ export default function RootLayout({
   return (
     <html lang='en'>
       <body
+        suppressHydrationWarning
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <WalletProvider>

diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
@@ -6,6 +6,7 @@ import { supabase } from '../../lib/supabase'
 import { Leaf, Search } from 'lucide-react'
 import toast from 'react-hot-toast'
 import PurchaseModal from '../../components/PurchaseModal'
+import TweetButton from '@/components/TweetButton'
 
 interface Project {
   id: string
@@ -50,7 +51,10 @@ const Projects = () => {
   const [selectedProject, setSelectedProject] = useState<Project | null>(null)
   const [isPurchaseModalOpen, setIsPurchaseModalOpen] = useState(false)
   const [walletAddress, _setWalletAddress] = useState<string | null>(null)
-
+  {
+    /*------------ state to manage purchase status ---------  */
+  }
+  const [isPurchaseSuccess, setIsPurchaseSuccess] = useState(false)
   useEffect(() => {
     // const checkWallet = async () => {
     //   if (typeof window.ethereum !== 'undefined') {
@@ -134,6 +138,10 @@ const Projects = () => {
   }
 
   const handlePurchaseComplete = () => {
+    {
+      /*------------ updating state of purchase ---------  */
+    }
+    setIsPurchaseSuccess(true)
     fetchProjects() // Refresh projects to update purchase counts
     setIsPurchaseModalOpen(false)
     setSelectedProject(null)
@@ -267,6 +275,14 @@ const Projects = () => {
             onPurchaseComplete={handlePurchaseComplete}
           />
         )}
+        {/*------------ Tweet Button here ---------  */}
+        {isPurchaseSuccess && (
+          <TweetButton
+            text={
+              '🎉 I just bought a real-world impact product on RegenBazar! Supporting change while collecting cool NFTs 💚 Check it out: https://regenbazar.com'
+            }
+          />
+        )}
       </div>
     </div>
   )

diff --git a/src/app/stake/page.tsx b/src/app/stake/page.tsx
@@ -7,7 +7,7 @@ import { Loader2, Shield } from 'lucide-react'
 import toast from 'react-hot-toast'
 import { projectService } from '../../lib/projectService'
 import { depositVault } from '../../lib/contracts/depositVault'
-
+import TweetButton from '@/components/TweetButton'
 interface AvailableProduct {
   id: string
   title: string
@@ -64,7 +64,10 @@ const Stake = () => {
   const [hoveredItem, setHoveredItem] = useState<string | null>(null)
   const [isProcessing, setIsProcessing] = useState(false)
   const [stakeAmount] = useState('0.01')
-
+  {
+    /*------------ state for tracking staking status ---------  */
+  }
+  const [isStaking, setIsStaking] = useState(false)
   useEffect(() => {
     const checkWallet = async () => {
       try {
@@ -192,6 +195,10 @@ const Stake = () => {
             ])
           }
           toast.success('Successfully staked')
+          {
+            /*------------ updating state of staking ---------  */
+          }
+          setIsStaking(true)
         } else {
           throw new Error(result.error || 'Failed to stake product')
         }
@@ -334,6 +341,14 @@ const Stake = () => {
                     >
                       Lock
                     </button>
+                    {isStaking && (
+                      // ------------ Tweet Button here ---------
+                      <TweetButton
+                        text={
+                          '💪 Just staked my impact NFT on RegenBazar to earn rewards and drive real-world change 🌍🔥 Join the mission: https://regenbazar.com'
+                        }
+                      />
+                    )}
                   </div>
                 )}
                 <div className='p-4'>
@@ -369,7 +384,7 @@ const Stake = () => {
             {stakedTokens.map((token) => (
               <div
                 key={`staked-token-${token.id}`}
-                className='relative rounded-lg border border-gray-800 bg-black p-6'
+                className='relative h-60 rounded-lg border border-gray-800 bg-black p-6'
                 onMouseEnter={() => setHoveredItem(`staked-token-${token.id}`)}
                 onMouseLeave={() => setHoveredItem(null)}
               >
@@ -406,14 +421,25 @@ const Stake = () => {
                     lock end date:{' '}
                     <span className='text-white'>{token.lock_end_date}</span>
                   </p>
-                  {hoveredItem === `staked-token-${token.id}` && (
-                    <button
-                      onClick={() => handleWithdraw(token.id)}
-                      className='rounded bg-[#1A2F1D] px-4 py-2 text-[#B4F481] transition-colors hover:bg-[#2A462C]'
-                    >
-                      withdraw
-                    </button>
-                  )}
+
+                  <div className='min-h-10'>
+                    {hoveredItem === `staked-token-${token.id}` && (
+                      <button
+                        onClick={() => handleWithdraw(token.id)}
+                        className='rounded bg-[#1A2F1D] px-4 py-2 text-[#B4F481] transition-colors hover:bg-[#2A462C]'
+                      >
+                        withdraw
+                      </button>
+                    )}
+                  </div>
+                </div>
+                {/* // ------------ Tweet Button here --------- */}
+                <div className='mt-2'>
+                  <TweetButton
+                    text={
+                      '📈 Earned rewards by staking my #RWIP NFT on RegenBazar! Supporting the planet AND stacking gains — let’s go! 🌿💸 https://regenbazar.com'
+                    }
+                  />
                 </div>
               </div>
             ))}

diff --git a/src/components/TweetButton.tsx b/src/components/TweetButton.tsx
@@ -0,0 +1,19 @@
+'use client'
+// use your button or a <button>
+import Link from 'next/link'
+interface TweetButtonProps {
+  text: string
+}
+
+export default function TweetButton({ text }: TweetButtonProps) {
+  const encodedText = encodeURIComponent(text)
+  const tweetUrl = `https://x.com/intent/tweet?text=${encodedText}`
+
+  return (
+    <Link href={tweetUrl} target='_blank' rel='noopener noreferrer'>
+      <button className='rounded-md border border-slate-800 px-4 py-2 text-white shadow-lg transition-all'>
+        Share on X
+      </button>
+    </Link>
+  )
+}