Merge pull request #25 from ObolNetwork/Hanan/Twitter-share

share project on twitter

public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.1'
+const PACKAGE_VERSION = '2.4.9'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

src/components/TwitterShareButton.tsx

@@ -0,0 +1,31 @@
+import type React from "react"
+import { Button } from "./ui/Button"
+import { TwitterIcon } from "public/Twitter"
+
+const getTwitterHref = (url: string) => {
+    const encodedUrl = encodeURIComponent(url)
+    return `https://twitter.com/intent/tweet?text=Checkout%20my%20project%20on%20Obol's%20RAF!%20&url=${encodedUrl}`
+}
+
+export type TwitterShareButtonProps = {
+    url: string
+}
+
+export const TwitterShareButton = ({ url }: TwitterShareButtonProps) => {
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault()
+        window.open(getTwitterHref(url), "_blank")
+    }
+
+    return (
+        <Button
+            onClick={handleClick}
+            className="text-secondary-600 h-10 px-6 py-3  inline-flex items-center justify-center  text-center transition-colors  backdrop-blur-sm  rounded-lg duration-150 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" 
+            variant="primary"
+        >
+            <TwitterIcon  />
+            Share my project
+        </Button>
+    )
+}
+

src/pages/[domain]/projects/[projectId]/index.tsx

@@ -1,16 +1,21 @@
 import { type GetServerSideProps } from "next";
-
+import {
+  TwitterShareButton,
+} from "~/components/TwitterShareButton";;
 import { LayoutWithBallot } from "~/layouts/DefaultLayout";
 import ProjectDetails from "~/features/projects/components/ProjectDetails";
 import { useProjectById } from "~/features/projects/hooks/useProjects";
 import { ProjectAddToBallot } from "~/features/projects/components/AddToBallot";
 import { ProjectAwarded } from "~/features/projects/components/ProjectAwarded";
 import { useRoundState } from "~/features/rounds/hooks/useRoundState";
 import { ProjectComments } from "~/features/comments/components/ProjectComments";
+import { useCurrentDomain } from "~/features/rounds/hooks/useRound";
+import { metadata } from "~/config";
 
 export default function ProjectDetailsPage({ projectId = "" }) {
   const project = useProjectById(projectId);
   const { name } = project.data ?? {};
+  const domain = useCurrentDomain();
 
   const action =
     useRoundState() === "RESULTS" ? (
@@ -22,7 +27,10 @@ export default function ProjectDetailsPage({ projectId = "" }) {
     <LayoutWithBallot sidebar="right" title={name} showBallot eligibilityCheck>
       <ProjectDetails attestation={project.data} action={action} />
       <ProjectComments projectId={projectId} />
-    </LayoutWithBallot>
+      <div className="space-y-4">
+        <TwitterShareButton url={`${metadata.url}/${domain}/projects/${projectId}`} />
+      </div>
+    </LayoutWithBallot >
   );
 }