add success + socials

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 mintedParams = 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 (mintedParams) {
+    const contractName = mintedParams.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/Success.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import Link from "next/link";
+
+interface SuccessPageData {
+  contractName: string;
+  contractPage: string;
+  txnHashUrl: string;
+}
+
+export function SuccessPage({ data }: { data: SuccessPageData }): JSX.Element {
+  const { contractPage, contractName, txnHashUrl } = data;
+
+  return (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardDescription>
+          Success you just deployed a smart contract!
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="text-center">
+        <p className="font-bold">{contractName}</p>
+        <Link href="/">
+          <Button variant={"link"}>Deploy New Contract</Button>
+        </Link>
+      </CardContent>
+
+      <CardFooter className="flex gap-4">
+        <Link target="_blank" href={txnHashUrl}>
+          <Button variant={"secondary"} className="text-xs">
+            View Transaction
+          </Button>
+        </Link>
+        <Link target="_blank" href={contractPage}>
+          <Button className="text-xs">View Store on Mintbase</Button>
+        </Link>
+      </CardFooter>
+    </Card>
+  );
+}

contract-deployer/src/config/setup.ts

@@ -1,4 +1,21 @@
+import { Network } from "@mintbase-js/sdk";
+
 export const MintbaseWalletSetup = {
   contractAddress: "test122212.mintspace2.testnet",
   network: "testnet",
-};
+};
+
+export const network = MintbaseWalletSetup.network as Network;
+
+const isTestnet = MintbaseWalletSetup.network === "testnet";
+
+export const nearblocksApi = !isTestnet
+  ? "https://api.nearblocks.io"
+  : "https://api-testnet.nearblocks.io";
+
+export const mbUrl = !isTestnet
+  ? "https://www.mintbase.xyz"
+  : "https://testnet.mintbase.xyz";
+export const nearblocksUrl = !isTestnet
+  ? "https://nearblocks.io"
+  : "https://testnet.nearblocks.io";

contract-deployer/src/hooks/useDeployContract.ts

@@ -7,8 +7,16 @@ import * as z from "zod";
 
 import { zodResolver } from "@hookform/resolvers/zod";
 
+import { network } from "@/config/setup";
+import { callbackUrl } from "@/lib/utils";
 import { checkStoreName } from "@mintbase-js/data";
-import { MINTBASE_CONTRACTS, deployContract, execute } from "@mintbase-js/sdk";
+import {
+  CallBackArgs,
+  MINTBASE_CONTRACTS,
+  TransactionSuccessEnum,
+  deployContract,
+  execute,
+} from "@mintbase-js/sdk";
 import { formSchema } from "./formSchema";
 
 const useDeployContract = () => {
@@ -33,24 +41,38 @@ const useDeployContract = () => {
   });
 
   const handleDeployContract = async (data: FieldValues): Promise<void> => {
-    if (!activeAccountId) return;
+    if (!activeAccountId || !data?.name) return;
+
+    const contractName = data.name;
 
     // check if contract already exists.
-    const { data: checkStore } = await checkStoreName(data.name);
+    const { data: checkStore } = await checkStoreName(contractName);
 
     if (checkStore?.nft_contracts.length === 0) {
       setAlreadyExistsError("");
       const wallet = await getWallet();
+
+      const factoryContractId = MINTBASE_CONTRACTS[network];
+
+      const callbackArgs: CallBackArgs = {
+        args: {
+          contractAddress: `${contractName}.${factoryContractId}`,
+        },
+        type: TransactionSuccessEnum.DEPLOY_STORE,
+      };
+
+      const cbUrl = callbackUrl(callbackArgs);
+
       const deployArgs = deployContract({
-        name: data.name,
+        name: contractName,
         ownerId: activeAccountId,
-        factoryContractId: MINTBASE_CONTRACTS.testnet,
+        factoryContractId: factoryContractId,
         metadata: {
           symbol: data.symbol,
         },
       });
 
-      await execute({ wallet }, deployArgs);
+      await execute({ wallet, callbackUrl: cbUrl }, deployArgs);
     } else {
       setAlreadyExistsError("Contract already exists.");
     }

contract-deployer/src/lib/utils.ts

@@ -1,8 +1,26 @@
 "use client";
 
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
+import { nearblocksApi } from "@/config/setup";
+import { CallBackArgs } from "@mintbase-js/sdk";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
+
+export const getTxnHash = async (hash: string) => {
+  const res = await fetch(`${nearblocksApi}/v1/search/?keyword=${hash}`);
+
+  const txn = await res.json();
+
+  return txn?.receipts[0].originated_from_transaction_hash;
+};
+
+export const callbackUrl = (cbArgs: CallBackArgs) =>
+  `${window.location.origin}/?signMeta=${encodeURIComponent(
+    JSON.stringify({
+      type: cbArgs.type,
+      args: cbArgs.args,
+    })
+  )}`;