search

Step 8- Power Up Wallet Display + Ignite Gasless Minting

At this stage, your editor might be throwing errors, that's because we’re referencing two components we haven’t summoned into existence yet: WalletDisplay and GaslessMinter. No worries, let’s bring these Magmar modules to life.

hashtag
WalletDisplay: Visualize Your Digital Assets

Create a new file in your /common folder named:

WalletDisplay.tsx

Paste the following Magmar-powered logic inside:

import { useAuth } from "@common/AuthProvider";
import Loader from "@common/utils/Loader";
import { useEffect, useState } from "react";

interface Nft {
  contract: object;
  tokenId: string;
  tokenType: string;
  title: string;
  description: string;
  media: object;
}

interface Data {
  ownedNfts: Nft[];
  length: number;
}

export default function WalletDisplay() {
  const { user } = useAuth();
  const [ownedNftsArray, setOwnedNftsArray] = useState<Data | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchUserNfts();
  }, []);

  function truncateDescription(description: string, wordCount: number) {
    const words = description.split(" ");
    if (words.length > wordCount) {
      return `${words.slice(0, wordCount).join(" ")} ...`;
    }
    return description;
  }

  async function fetchUserNfts() {
    setIsLoading(true);
    try {
      const response = await fetch("/api/get-user-nfts/", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ address: user?.scwAddress }),
      });

      const messageResponse = await response.json();
      setOwnedNftsArray(messageResponse.data.ownedNfts);
      setIsLoading(false);
    } catch (error) {
      console.error("Error fetching NFTs:", error);
    }
  }

  return (
    <div>
      {isLoading ? (
        <div className="flex items-center justify-center mt-[-350px]">
          <Loader />
        </div>
      ) : ownedNftsArray && ownedNftsArray.length >= 1 ? (
        <div className="flex flex-col items-center">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-12 mb-6">
            {ownedNftsArray.map((nft, index) => (
              <div
                key={index}
                className="rounded-lg shadow-xl max-w-[250px] max-h-[600px] overflow-hidden"
              >
                <figure>
                  <img
                    src={
                      nft.tokenUri.gateway
                        ? nft.tokenUri.gateway
                        : nft.tokenUri.raw
                    }
                    alt="user nft image"
                    className="w-full max-h-[300px]"
                  />
                </figure>
                <div className="p-4">
                  <h2 className="text-xl font-semibold mb-2">{nft.title}</h2>
                  <p>{truncateDescription(nft.description, 25)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="flex flex-col items-center justify-center mx-8 mt-32 text-black">
          <p>Your Magmar Wallet is ready to ignite, but it holds no NFTs yet. 🔥</p>
          <div className="mt-4">
            Use the <b>&nbsp;Mint an NFT&nbsp;</b> tab to spark your first one!
          </div>
        </div>
      )}
    </div>
  );
}

This component fires a fetch call on mount to check which NFTs the user's Smart Contract Wallet (SCW) owns. If there’s any fire in the vault, you’ll see the blaze of your assets. If not, the minting forge awaits.

GaslessMinter: Mint with No Friction

Time to integrate Magmar’s gasless minting magic. Install the celebratory react-confetti package first:

Then, create the component:

Paste the following:

This component handles your minting flow and throws confetti when a user successfully mints their NFT — all on Sepolia and completely gasless.

PreviousStep 7 - Set Up Your Home Route for MagmarNextStep 9 - Mint Your NFT on Magmar!

Last updated