Events

"use client";

import React, { useState } from 'react';
import { CrossmintPaymentElement } from "@crossmint/client-sdk-react-ui";
import Minting from './Minting';

const Crossmint: React.FC = () => {
  const [orderIdentifier, setOrderIdentifier] = useState<string | null>(null);

  const projectId = process.env.NEXT_PUBLIC_CROSSMINT_PROJECT_ID as string;
  const collectionId = process.env.NEXT_PUBLIC_CROSSMINT_COLLECTION_ID as string;
  const environment = process.env.NEXT_PUBLIC_CROSSMINT_ENVIRONMENT as string;

  return (
    <>
      {orderIdentifier === null ? (
        <CrossmintPaymentElement
          projectId={projectId}
          collectionId={collectionId}
          environment={environment}
          emailInputOptions={{
            show: true,
          }}
          mintConfig={{
            totalPrice: "0.001",
            quantity: "1"
          }}
          onEvent={(event) => {
            switch (event.type) {
              case "payment:process.succeeded":
                console.log(event);
                setOrderIdentifier(event.payload.orderIdentifier);
                break;
              default:
                console.log(event);
                break;
            }
          }}
        />
      ) : (
        <Minting orderIdentifier={orderIdentifier} />
      )}
    </>
  );
}

export default Crossmint;

import React from "react";
import { useCrossmintEvents } from "@crossmint/client-sdk-react-ui";

interface MintingProps {
  orderIdentifier: string;
}

const Minting: React.FC<MintingProps> = ({ orderIdentifier }) => {
  const [status, setStatus] = React.useState < string > "pending"; // ["pending", "success", "failure"
  const [result, setResult] = React.useState < any > null;
  const { listenToMintingEvents } = useCrossmintEvents({
    environment: "staging",
  });

  if (status === "pending") {
    listenToMintingEvents({ orderIdentifier }, (event) => {
      switch (event.type) {
        case "transaction:fulfillment.succeeded":
          setStatus("success");
          setResult(event.payload);
          break;
        case "transaction:fulfillment.failed":
          setStatus("failure");
          break;
        default:
          break;
      }
      console.log(event.type, ":", event);
    });
  }

  return (
    <>
      {status === "pending" && (
        <>
          <h3>Minting your NFT...</h3>
          <div className="loading-wrap">
            <div className="loading"></div>
          </div>
          This may take up to a few minutes
        </>
      )}
      {status === "success" && (
        <>
          <h3>NFT Minted Successfully!</h3>
          <a
            target="_blank"
            className="xmint-button"
            href={`https://staging.crossmint.com/user/collection/poly:${result?.contractAddress}:${result?.tokenIds[0]}`}
          >
            View in Crossmint
          </a>
        </>
      )}
      {status === "failure" && (
        <>
          <h3>Failed to Mint NFT</h3>
          <p>
            Something went wrong. You will be refunded if the mint cannot be
            fulfilled successfully.
          </p>
        </>
      )}
    </>
  );
};

export default Minting;

.loading-wrap {
  text-align: center;
  height: 70px;
  padding: 10px;
}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(32, 32, 32, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
.xmint-button {
  display: block;
  background: #81feab;
  color: #000;
  border-radius: 5px;
  padding: 10px;
  margin: 5px;
}