Contract deployer socials widget and success page (#149)

* Add Success Page + Socials in Contract Deployer Example

* add success + socials

* naming

contract-deployer/package.json

@@ -1,7 +1,16 @@
 {
   "name": "NFT-Contract-Deployer-Mintbase-Templates",
   "version": "0.1.0",
-  "keywords": ["templates", "mintbase", "web3", "nextjs", "react", "blog","contract","contract-deployer"],
+  "keywords": [
+    "templates",
+    "mintbase",
+    "web3",
+    "nextjs",
+    "react",
+    "blog",
+    "contract",
+    "contract-deployer"
+  ],
   "repository": "https://github.com/mintbase/templates.git",
   "homepage": "https;//templates.mintbase.xyz/contract-deployer",
   "author": "Mintbase Team <[email protected]>",
@@ -26,7 +35,9 @@
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-github-btn": "^1.4.0",
     "react-hook-form": "^7.48.2",
+    "react-share": "^5.1.0",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"

contract-deployer/src/app/globals.css

@@ -1,71 +1,71 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
- 
+
     --primary: 0 0% 9%;
     --primary-foreground: 0 0% 98%;
- 
+
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
- 
+
     --muted: 0 0% 96.1%;
     --muted-foreground: 0 0% 45.1%;
- 
+
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
 
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
- 
+
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
- 
+
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
- 
+
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
- 
+
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;
- 
+
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
- 
+
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
- 
+
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
     --ring: 0 0% 83.1%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
@@ -75,7 +75,19 @@
   }
 }
 
-.gradient { 
-background: rgb(144,40,47);
-background: radial-gradient(circle, rgba(144,40,47,0.3) 0%, rgba(144,40,47,0.6) 0%, rgba(16,18,35,0.3730085784313726) 55%);
+.gradient {
+  background: rgb(144, 40, 47);
+  background: radial-gradient(
+    circle,
+    rgba(144, 40, 47, 0.3) 0%,
+    rgba(144, 40, 47, 0.6) 0%,
+    rgba(16, 18, 35, 0.3730085784313726) 55%
+  );
+}
+
+.social-networks {
+  position: relative;
+  top: -3px;
+  display: flex;
+  gap: 4px;
 }

contract-deployer/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import { AppComponent } from "@/components/App";
 import "./globals.css";
 
+import { SocialMedias } from "@/components/Social";
 import "@near-wallet-selector/modal-ui/styles.css";
 import { Metadata } from "next";
 
@@ -34,6 +35,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <AppComponent> {children} </AppComponent>
+    <AppComponent>
+      <SocialMedias /> {children}
+    </AppComponent>
   );
 }

contract-deployer/src/app/page.tsx

@@ -1,15 +1,54 @@
 "use client";
 
-import { useMbWallet } from "@mintbase-js/react";
 import { NearWalletConnector } from "@/components/NearWalletSelector";
+import { useMbWallet } from "@mintbase-js/react";
 
-import Head from "next/head";
 import ContractDeployer from "@/components/ContractDeployer";
+import { SuccessPage } from "@/components/Success";
 import { Button } from "@/components/ui/button";
+import { mbUrl, nearblocksUrl } from "@/config/setup";
+import { getTxnHash } from "@/lib/utils";
+import Head from "next/head";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export default function Home() {
   const { isConnected, activeAccountId } = useMbWallet();
 
+  const [txnUrl, setTxnUrl] = useState("");
+
+  const params = useSearchParams();
+
+  const contractDeployParams = params.get("signMeta")
+    ? JSON.parse(params.get("signMeta") as string)
+    : "";
+  const txnHashes = params.get("transactionHashes")
+    ? params.get("transactionHashes")
+    : "";
+
+  useEffect(() => {
+    const fetchTxnHash = async () => {
+      const txn = await getTxnHash(txnHashes as string);
+      setTxnUrl(txn);
+    };
+
+    fetchTxnHash();
+  }, [txnHashes]);
+
+  if (contractDeployParams) {
+    const contractName = contractDeployParams.args.contractAddress as string;
+    const contractPage = `${mbUrl}/contract/${contractName}`;
+    const txnHashUrl = `${nearblocksUrl}/txns/${txnUrl}`;
+
+    const successPageData = {
+      contractName: contractName,
+      contractPage,
+      txnHashUrl,
+    };
+
+    return <SuccessPage data={successPageData} />;
+  }
+
   if (isConnected)
     return (
       <main className="flex flex-col items-center justify-center mt-2 ">

contract-deployer/src/components/Social.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+
+"use client";
+
+import GitHubButton from "react-github-btn";
+import {
+    FacebookIcon,
+    FacebookShareButton,
+    LinkedinIcon,
+    LinkedinShareButton,
+    TelegramIcon,
+    TelegramShareButton,
+    TwitterShareButton,
+    XIcon,
+} from "react-share";
+
+export const SocialMedias = () => {
+  const url = "https://contract-deployer-template.mintbase.xyz";
+  const title = "Mintbase Templates - Contract Deployer";
+
+  return (
+    <div className="absolute pt-5 top-2 left-0  w-full h-[30px] z-50">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
+        <GitHubButton
+          href="https://github.com/mintbase/templates/generate"
+          data-color-scheme="no-preference: light; light: light; dark: dark;"
+          data-size="large"
+          aria-label="Use this template mintbase/templates on GitHub"
+        >
+          Use this template
+        </GitHubButton>
+        <GitHubButton
+          href="https://github.com/mintbase/templates"
+          data-color-scheme="no-preference: dark; light: light; dark: dark;"
+          data-icon="octicon-star"
+          data-size="large"
+          aria-label="Star mintbase/templates on GitHub"
+        >
+          Star
+        </GitHubButton>{" "}
+        <div className="social-networks">
+          <FacebookShareButton url={url}>
+            <FacebookIcon size={24} round />
+          </FacebookShareButton>
+          <TwitterShareButton url={url} title={title}>
+            <XIcon size={24} round />
+          </TwitterShareButton>
+
+          <TelegramShareButton url={url} title={title}>
+            <TelegramIcon size={24} round />
+          </TelegramShareButton>
+          <LinkedinShareButton url={url}>
+            <LinkedinIcon size={24} round />
+          </LinkedinShareButton>
+        </div>
+      </div>
+    </div>
+  );
+};