From 935efc045b69e06dae33b1aa7b40781f41292e93 Mon Sep 17 00:00:00 2001
From: yu-zhen <wlphg010688@gmail.com>
Date: Thu, 19 Dec 2024 01:55:34 +0800
Subject: [PATCH] feat: add share sns cta

---
 .../ballot/components/BallotConfirmation.tsx  | 69 +++++++++++++++++--
 1 file changed, 65 insertions(+), 4 deletions(-)

diff --git a/packages/interface/src/features/ballot/components/BallotConfirmation.tsx b/packages/interface/src/features/ballot/components/BallotConfirmation.tsx
index a6ab042d..c7d9fa63 100644
--- a/packages/interface/src/features/ballot/components/BallotConfirmation.tsx
+++ b/packages/interface/src/features/ballot/components/BallotConfirmation.tsx
@@ -1,6 +1,8 @@
 import { format } from "date-fns";
 import Link from "next/link";
 import { useMemo } from "react";
+import { FaXTwitter, FaThreads } from "react-icons/fa6";
+import { SiFarcaster } from "react-icons/si";
 import { tv } from "tailwind-variants";
 import { Hex } from "viem";
 import { useAccount } from "wagmi";
@@ -26,7 +28,16 @@ const feedbackUrl = process.env.NEXT_PUBLIC_FEEDBACK_URL!;
 const Card = createComponent(
   "div",
   tv({
-    base: "rounded-lg border border-blue-400 p-8 bg-blue-50 flex justify-between items-center gap-8 my-14",
+    base: "rounded-lg border p-8 justify-between items-center gap-8 my-14",
+    variants: {
+      variant: {
+        default: "border-blue-400 bg-blue-50 flex",
+        invert: "text-blue-700 bg-blue-400 border-blue-700",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
   }),
 );
 
@@ -56,6 +67,8 @@ export const BallotConfirmation = ({ pollId }: IBallotConfirmationProps): JSX.El
 
   const sum = useMemo(() => formatNumber(sumBallot(ballot.votes)), [ballot, sumBallot]);
 
+  const shareText = useMemo(() => `I+successfully+submit+my+vote+in+${round?.roundId}+round.`, [round]);
+
   return (
     <div className="flex w-full justify-center dark:text-white">
       <section className="md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
@@ -100,12 +113,60 @@ export const BallotConfirmation = ({ pollId }: IBallotConfirmationProps): JSX.El
 
         <Notice
           content={
-            round?.votingEndsAt ? format(round.votingEndsAt, "d MMM yyyy hh:mm") : "The date would be announced soon."
+            round?.votingEndsAt
+              ? `Results will be available after tallying - ${format(round.votingEndsAt, "d MMM yyyy hh:mm")}`
+              : "The date will be announced soon."
           }
-          title="Results will be available after tallying."
-          variant="block"
         />
 
+        <Card variant="invert">
+          <div className="text-center">
+            <b className="text-2xl uppercase">Share that you have voted in {round?.roundId} round.</b>
+          </div>
+
+          <div className="mt-2 flex w-full flex-col items-center justify-center gap-2 sm:flex-row sm:gap-4">
+            <Button
+              as={Link}
+              href={`https://x.com/intent/tweet?text=${shareText}`}
+              size="auto"
+              target="_blank"
+              variant="tertiary"
+            >
+              <FaXTwitter />
+
+              <span className="ml-2">Twitter</span>
+            </Button>
+
+            <p>OR</p>
+
+            <Button
+              as={Link}
+              href={`https://www.threads.net/intent/post?text=${shareText}`}
+              size="auto"
+              target="_blank"
+              variant="tertiary"
+            >
+              <FaThreads />
+
+              <span className="ml-2">Threads</span>
+            </Button>
+
+            <p>OR</p>
+
+            <Button
+              as={Link}
+              href={`https://warpcast.com/~/compose?text=${shareText}`}
+              size="auto"
+              target="_blank"
+              variant="tertiary"
+            >
+              <SiFarcaster />
+
+              <span className="ml-2">Farcaster</span>
+            </Button>
+          </div>
+        </Card>
+
         {roundState === ERoundState.VOTING && (
           <Card className="flex-col sm:flex-row">
             <div className="flex-3 flex flex-col gap-4">