minter: add success page && metadata (#136)

* add right callback urls * callback * fix minter success page * fix minter success page * update minter * thumbnail * thumbnail * thumbnail * urls * urls * urls
Mintbase · Feb 19, 2024 · 3a73dec · 3a73dec
1 parent 2606bf1
commit 3a73dec
Show file tree

Hide file tree

Showing 12 changed files with 278 additions and 63 deletions.
diff --git a/minter/next.config.js b/minter/next.config.js
@@ -1,5 +1,12 @@
 /** @type {import('next').NextConfig} */
 
-const nextConfig = {}
-
-module.exports = nextConfig
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'arweave.net',
+        port: '',
+      },
+    ],
+  },}
diff --git a/minter/package.json b/minter/package.json
@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
-    "@mintbase-js/react": "0.5.4-beta.0",
-    "@mintbase-js/sdk": "0.5.4-beta.0",
-    "@mintbase-js/storage": "0.5.4-beta.0",
+    "@mintbase-js/react":"0.5.5-beta.2",
+    "@mintbase-js/sdk": "0.5.5-beta.2",
+    "@mintbase-js/storage": "0.5.5-beta.2",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",

diff --git a/minter/pnpm-lock.yaml b/minter/pnpm-lock.yaml
diff --git a/minter/public/favicon.ico b/minter/public/favicon.ico
diff --git a/minter/src/app/favicon.ico b/minter/src/app/favicon.ico
diff --git a/minter/src/app/layout.tsx b/minter/src/app/layout.tsx
@@ -1,29 +1,65 @@
-"use client";
-
-import { Inter } from "next/font/google";
+import { AppProvider } from "@/components/Provider";
+import { Metadata } from "next";
+import { headers } from "next/headers";
 import "./globals.css";
-import { MintbaseWalletContextProvider } from "@mintbase-js/react";
-import "@near-wallet-selector/modal-ui/styles.css";
-import { MintbaseWalletSetup } from "@/config/setup";
 
-const inter = Inter({ subsets: ["latin"] });
+const extractSignMeta = (url: string): string | null => {
+  const signMetaIndex = url.indexOf("signMeta=");
+  if (signMetaIndex === -1) {
+    return null; // signMeta not found
+  }
+
+  const startIndex = signMetaIndex + "signMeta=".length;
+  const endIndex = url.indexOf("&", startIndex);
+  if (endIndex === -1) {
+    return url.substring(startIndex); // signMeta is the last parameter in the URL
+  } else {
+    return url.substring(startIndex, endIndex);
+  }
+};
+
+export async function generateMetadata(): Promise<Metadata> {
+
+  const headersList = headers();
+  const referer = headersList.get("referer");
+
 
+  let pageTitle = "Mintbase Minter Example";
+  let pageDescription = "Learn how to Mint NFTs on NEAR with Mintbase Minter Example"
+
+  // Check if signMeta exists in the URL
+  const signMeta = referer ? extractSignMeta(referer) : "";
+  if (signMeta) {
+    const signMetaData = JSON.parse(decodeURIComponent(signMeta));
+
+    pageTitle = `Success! You just minted: ${signMetaData?.args?.title}`;
+    pageDescription = `Just Minted ${signMetaData?.args?.title} on Mintbase`
+    // Now you can further process the extracted signMeta value
+  }
+
+  return {
+    metadataBase: new URL("https://minter.mintbase.xyz"),
+    title: pageTitle,
+    openGraph: {
+      title:pageTitle,
+      description: pageDescription,
+      images:['https://i.imgur.com/QDJPsAA.png'],
+    },
+    twitter: {
+      title: pageTitle,
+      description: pageDescription,
+      siteId: "1467726470533754880",
+      creator: "Mintbase",
+      card: "summary_large_image",
+      images: 'https://i.imgur.com/QDJPsAA.png'
+    },
+  };
+}
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-
-  return (
-    <MintbaseWalletContextProvider {...MintbaseWalletSetup}>
-      <html lang="en">
-        <body className={`${inter.className} dark`}>
-          <div className="flex flex-1 flex-col min-h-screen text-gray-500 gradient w-full  h-full flex justify-center items-center bold text-white">
-            {children}
-          </div>
-        </body>
-      </html>
-    </MintbaseWalletContextProvider>
-  );
+  return <AppProvider> {children} </AppProvider>;
 }
diff --git a/minter/src/app/page.tsx b/minter/src/app/page.tsx
@@ -5,10 +5,37 @@ import { NearWalletConnector } from "@/components/NearWalletSelector";
 
 import Head from "next/head";
 import Minter from "@/components/Minter";
+import { useSearchParams } from "next/navigation";
+import { SuccessPage } from "@/components/Success";
+import { mbUrl, nearblocksUrl } from "@/config/setup";
 
 export default function Home() {
   const { isConnected } = useMbWallet();
 
+  const params = useSearchParams();
+
+  const mintedParams = params.get("signMeta")
+    ? JSON.parse(params.get("signMeta") as string)
+    : "";
+  const txnHashes = params.get("transactionHashes")
+    ? params.get("transactionHashes")
+    : "";
+
+
+  if (mintedParams) {
+    const metaPage = `https://${mbUrl}/ref/${mintedParams.args.ref}?type=meta`;
+    const txnHashUrl = `https://${nearblocksUrl}/txns/${txnHashes}`;
+
+    const successPageData = {
+      nftTitle: mintedParams.args.title as string,
+      mediaUrl: mintedParams.args.mediaUrl  as string,
+      metaPage,
+      txnHashUrl,
+    };
+
+    return <SuccessPage data={successPageData} />;
+  }
+
   if (isConnected)
     return (
       <main className="flex flex-col items-center justify-center mt-2 ">

diff --git a/minter/src/components/Provider.tsx b/minter/src/components/Provider.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { Inter } from "next/font/google";
+import { MintbaseWalletContextProvider } from "@mintbase-js/react";
+import "@near-wallet-selector/modal-ui/styles.css";
+import { MintbaseWalletSetup } from "@/config/setup";
+
+
+const inter = Inter({ subsets: ["latin"] });
+
+
+export const AppProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+
+  return(
+    <MintbaseWalletContextProvider {...MintbaseWalletSetup}>
+    <html lang="en">
+      <body className={`${inter.className} dark`}>
+        <div className="flex flex-1 flex-col min-h-screen text-gray-500 gradient w-full  h-full flex justify-center items-center bold text-white">
+          {children}
+        </div>
+      </body>
+    </html>
+  </MintbaseWalletContextProvider>
+  )
+}
diff --git a/minter/src/components/Success.tsx b/minter/src/components/Success.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Link from "next/link";
+
+interface SuccessPageData {
+  nftTitle: string;
+  mediaUrl: string;
+  metaPage: string;
+  txnHashUrl: string;
+}
+
+export function SuccessPage({ data }: { data: SuccessPageData }): JSX.Element {
+  const { nftTitle, mediaUrl, metaPage, txnHashUrl } = data;
+
+  return (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardDescription> Success you just Minted! </CardDescription>
+        <CardTitle>{nftTitle}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex w-full relative">
+          <img src={mediaUrl} width="100%" height="auto" alt={nftTitle} />
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Link target="_blank" href={txnHashUrl} className="text-xs">
+          View Transaction
+        </Link>
+        <Link target="_blank" href={metaPage}>
+          <Button> View Nft on Mintbase</Button>
+        </Link>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/minter/src/config/setup.ts b/minter/src/config/setup.ts
@@ -1,11 +1,24 @@
-
-export const proxyAddress = process?.env?.NEXT_PUBLIC_PROXY_CONTRACT_ADDRESS || "0.minsta.proxy.mintbase.testnet";
-const contractAddress = process?.env?.NEXT_PUBLIC_MINT_CONTRACT_ADDRESS || "aiminter.mintspace2.testnet";
+export const proxyAddress =
+  process?.env?.NEXT_PUBLIC_PROXY_CONTRACT_ADDRESS ||
+  "0.minsta.proxy.mintbase.testnet";
+const contractAddress =
+  process?.env?.NEXT_PUBLIC_MINT_CONTRACT_ADDRESS ||
+  "aiminter.mintspace2.testnet";
 const network = process?.env?.NEXT_PUBLIC_NETWORK || "testnet";
-const callbackUrl = network === "testnet" ? `https://testnet.mintbase.xyz/contract/${contractAddress}/nfts/all/0` : `https://mintbase.xyz/contract/${contractAddress}/nfts/all/0`;
+
+const isTestnet = network === "testnet";
+const callbackUrl = !isTestnet
+  ? `https://mintbase.xyz/contract/${contractAddress}/nfts/all/0`
+  : `https://testnet.mintbase.xyz/contract/${contractAddress}/nfts/all/0`;
+export const mbUrl = !isTestnet
+  ? "https://www.mintbase.xyz"
+  : "https://testnet.mintbase.xyz";
+export const nearblocksUrl = !isTestnet
+  ? "https://nearblocks.io"
+  : "https://testnet.nearblocks.io";
 
 export const MintbaseWalletSetup = {
   contractAddress,
   network,
-  callbackUrl
-};
+  callbackUrl,
+};