fix minter success page

Mintbase · rubenmarcus · Feb 19, 2024 · Feb 16, 2024 · Feb 16, 2024 · Feb 19, 2024
commit 2884dc5d68cd8baa5d0d4368fd0aa5e6a6f5c8f6
@@ -1,5 +1,12 @@
 /** @type {import('next').NextConfig} */
 
-const nextConfig = {}
-
-module.exports = nextConfig
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'arweave.net',
+        port: '',
+      },
+    ],
+  },}
@@ -1,29 +1,62 @@
-"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";
 
+  // 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}`;
+
+    // Now you can further process the extracted signMeta value
+  }
+
+  return {
+    metadataBase: new URL("https://minter.mintbase.xyz"),
+    title: pageTitle,
+    openGraph: {
+      title: "Mintbase Drop",
+      description: "Claim this drop for free with the Mintbase Wallet.",
+    },
+    twitter: {
+      title: "Mintbase Minter Example",
+      description: "Claim this drop for free with the Mintbase Wallet.",
+      siteId: "1467726470533754880",
+      creator: "Mintbase",
+      card: "summary_large_image",
+    },
+  };
+}
 
 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>;
 }
@@ -5,10 +5,36 @@ 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";
 
 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://testnet.mintbase.xyz/ref/${mintedParams.args.ref}?type=meta`;
+    const txnHashUrl = `https://testnet.nearblocks.io/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 ">

@@ -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>
+  )
+}
@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Image from "next/image";
+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 min-h-[200px]	relative">
+          <Image src={mediaUrl} fill 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>
+  );
+}
@@ -20,6 +20,7 @@ import { ArweaveResponse, uploadFile, uploadReference } from "@mintbase-js/stora
 import { formSchema } from "./formSchema";
 import { MintbaseWalletSetup, proxyAddress } from "@/config/setup";
 import { Wallet } from "@near-wallet-selector/core"
+import { cbUrl } from "./utils";
 
 interface SubmitData {
   title: string;
@@ -50,10 +51,12 @@ const useMintImage = () => {
       media: data?.media as unknown as File
     })
 
+    console.log(reference, 'reference')
+
     const file = uploadFile(data?.media as unknown as File
     );
 
-    await handleMint(reference.id, file, activeAccountId as string, wallet);
+    await handleMint(reference.id, file, activeAccountId as string, wallet, reference.media_url as string, data.title);
   };
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -64,21 +67,26 @@ const useMintImage = () => {
     reference: string,
     media: Promise<ArweaveResponse>,
     activeAccountId: string,
-    wallet: Wallet
+    wallet: Wallet,
+    mediaUrl: string,
+    nftTitle: string,
   ) {
 
 
     const callbackArgs = {
-      contractAddress: finalAddress.toString(),
-      amount: Number(mintAmount),
-      ref: `${id}`,
+      contractAddress: MintbaseWalletSetup.contractAddress.toString(),
+      amount: 1,
+      ref: `${reference}`,
+      mediaUrl: mediaUrl,
+      title: nftTitle
     }
 
+
     if (reference) {
       await wallet.signAndSendTransaction({
         signerId: activeAccountId,
         receiverId: proxyAddress,
-        callbackUrl:
+        callbackUrl:cbUrl(reference, callbackArgs),
         actions: [
           {
             type: "FunctionCall",

@@ -8,6 +8,12 @@ export enum TransactionSuccessEnum {
   MINT = 'mint',
 }
 
+interface CallbackArgs {
+  contractAddress: string;
+  amount: number;
+  ref: string;
+}
+
 export function getImageData(event: ChangeEvent<HTMLInputElement>) {
   // FileList is immutable, so we need to create a new one
   const dataTransfer = new DataTransfer();
@@ -27,11 +33,11 @@ export function getImageData(event: ChangeEvent<HTMLInputElement>) {
 export const callbackUrl = (
   hash: string,
   transactionType: TransactionSuccessEnum,
-  args: Record<string, string | number | boolean>
+  args: CallbackArgs
 ) =>
   `${
     window.location.origin
-  }/wallet-callback?transactionHashes=${hash}&signMeta=${encodeURIComponent(
+  }/?signMeta=${encodeURIComponent(
     JSON.stringify({
       type: transactionType,
       args: args,
@@ -40,5 +46,6 @@ export const callbackUrl = (
 
 
 
-export const cbUrl = (hash: string, callbackArgs: any) =>
-  callbackUrl(hash, TransactionSuccessEnum.MINT, callbackArgs)
+export const cbUrl = (hash: string, callbackArgs: CallbackArgs) =>
+  callbackUrl(hash, TransactionSuccessEnum.MINT, callbackArgs)
+