feat: add ShareModal to Start with Crypto page

Author: corwintines

src/components/StartWithEthereumFlow/ShareModal.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react"
+import { FaLink, FaXTwitter } from "react-icons/fa6"
+import { MdCheck } from "react-icons/md"
+
+import { Button } from "@/components/ui/buttons/Button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog-modal"
+
+import { useClipboard } from "@/hooks/useClipboard"
+
+export const shareOnTwitter = (): void => {
+  const url = "https://ethereum.org/start"
+  const hashtags = ["ethereum", "web3", "startwithethereum"]
+  const tweet = `${encodeURI(`I connected to ethereum on ethereum.org! Try it yourself at ${url}`)}`
+
+  window.open(
+    `https://twitter.com/intent/tweet?text=${tweet}&hashtags=${hashtags}`
+  )
+}
+
+const ShareModal = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const { onCopy, hasCopied } = useClipboard()
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger>
+        <Button>Share this page</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Share this page</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          Share this page with your friends and family.
+        </DialogDescription>
+        <div className="flex flex-row justify-center">
+          <Button
+            onClick={() => onCopy(window.location.href)}
+            variant="ghost"
+            className="flex flex-col hover:bg-background-highlight"
+          >
+            {hasCopied ? (
+              <>
+                <MdCheck />
+                <p className="text-sm">Copied!</p>
+              </>
+            ) : (
+              <>
+                <FaLink />
+                <p className="text-sm">Share</p>
+              </>
+            )}
+          </Button>
+          <Button
+            variant="ghost"
+            className="flex flex-col hover:bg-background-highlight"
+            onClick={() => shareOnTwitter()}
+          >
+            <FaXTwitter />
+            <p className="text-sm">Twitter</p>
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ShareModal

src/pages/[locale]/start/index.tsx

@@ -6,7 +6,7 @@ import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
 import StartWithEthereumFlow from "@/components/StartWithEthereumFlow"
-import { ButtonLink } from "@/components/ui/buttons/Button"
+import ShareModal from "@/components/StartWithEthereumFlow/ShareModal"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -89,15 +89,8 @@ const StartWithCryptoPage = () => {
               Billions can’t open bank accounts or freely use their money.
               Ethereum’s financial system is always open and unbiased.
             </p>
-            {/* TODO: Add share button */}
             <div className="flex w-full md:w-auto">
-              <ButtonLink
-                href="/start-with-crypto/onboarding-guide"
-                variant="outline"
-                className="w-full md:w-auto"
-              >
-                Share this page
-              </ButtonLink>
+              <ShareModal />
             </div>
           </div>
           <div className="flex max-w-[450px] flex-col items-center justify-center">