Minting NFTs from IPFS using Thirdweb + Angular + MetaMask on Sepolia Testnet

ng new nft-mint-app --standalone --routing --style=scss
cd nft-mint-app
ng add @angular/material
npm install @thirdweb-dev/sdk ethers pinata-web3

ng generate service thirdweb --skip-tests

import { Injectable } from '@angular/core';
import { ThirdwebSDK } from '@thirdweb-dev/sdk';
import { ethers } from 'ethers';

@Injectable({ providedIn: 'root' })
export class ThirdwebService {
  private sdk: ThirdwebSDK | null = null;
  private contractAddress = '0xYourContractAddressHere';

  private async ensureSdk() {
    if (typeof window === 'undefined' || !(window as any).ethereum) {
      throw new Error('MetaMask is not available.');
    }
    await (window as any).ethereum.request({ method: 'eth_requestAccounts' });
    if (!this.sdk) {
      const provider = new ethers.providers.Web3Provider((window as any).ethereum);
      const signer = provider.getSigner();
      this.sdk = new ThirdwebSDK(signer, {
        clientId: '[THIRD-WEB-CLIENT-ID]', // Frontend-safe       
      });           
    }
  }

  async mintTo(walletAddress: string, metadata: { name: string; description: string; image: string }) {
    await this.ensureSdk();
    const contract = await this.sdk!.getContract(this.contractAddress, 'nft-drop');
    return contract.erc721.mintTo(walletAddress, metadata);
  }
}

NFT Minting App

  Mint Your NFT

  
    This app allows you to mint your own NFT from an image that you’ve uploaded to IPFS using Pinata.
    It uses Thirdweb’s prebuilt ERC721 Drop contract and performs a lazy minting process.
    Thirdweb makes it simple to interact with Web3 and smart contracts using their SDK.
    Once minted, your NFT will be visible on OpenSea's Sepolia testnet.
  

  
    To get started, connect your MetaMask wallet using the button below.
    Your wallet must be connected to view available images and mint NFTs.
  

  
    Connect Wallet
  

  
    
      
        
      
      
        
          {{ file.name || file.cid }}
        
      
      
        {{ mintedCids.has(file.cid) ? 'Minted' : 'Mint NFT' }}
      
    
  
  🎉 NFT successfully minted!

import { Component, OnInit } from '@angular/core';
import { ThirdwebService } from './thirdweb.service';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { NgIf, NgFor } from '@angular/common';
import { PinataSDK } from 'pinata-web3';

interface Web3File {
  cid: string;
  name: string | null;
  metadataCid: string | null
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatToolbarModule, MatButtonModule, NgIf, NgFor],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit {
  pinataConfig = {
    pinataGateway: 'https://[PINATA GATEWAY URL]',
    pinataJwt: '[PINATA JWT]'
  };
  pinataGateway = this.pinataConfig.pinataGateway + "/ipfs/";
  minting = false;
  success = false;
  uploadedFiles: Web3File[] = [];
  mintedCids = new Set();
  walletConnected = false;

  pinata = new PinataSDK({ pinataJwt: this.pinataConfig.pinataJwt });

  constructor(private tw: ThirdwebService) {}

  async ngOnInit() {
    if (typeof window !== 'undefined' && (window as any).ethereum && (window as any).ethereum.selectedAddress) {
      this.walletConnected = true;
    }

    const list = await this.pinata.listFiles();

    this.uploadedFiles = list.map(file => ({
      cid: file.ipfs_pin_hash,
      name: file.metadata.name ?? '',
      metadataCid: null
    }));
  }

  async loadUploadedFiles() {
    const files = await this.pinata.listFiles() as any[]; // You can define a better type later
    this.uploadedFiles = files.map(meta => {

      return {
        name: meta.metadata.name,
        cid: meta.metadata.ipfs_pin_hash,
        metadataCid: meta.ipfs_pin_hash      
      } as Web3File;
    });
  }

  connectWallet() {
    if (typeof window !== 'undefined' && (window as any).ethereum) {
      (window as any).ethereum.request({ method: 'eth_requestAccounts' })
        .then(() => {
          this.walletConnected = true;
          console.log('Wallet connected');
        })
        .catch((error: any) => console.error('User denied wallet connection:', error));
    } else {
      alert('MetaMask is not installed.');
    }
  }

  async mintNft(cid: string, name: string |null) {
    this.success = false; //reset success flag
    this.minting = true;
    const metadata = {
      name: `RedRock NFT: ${name}`,
      description: 'Minted via Angular + Thirdweb',
      image: `ipfs://${cid}`
    };
    try {
      const accounts = await (window as any).ethereum.request({ method: 'eth_accounts' });
      const wallet = accounts[0];
      const tx = await this.tw.mintTo(wallet, metadata);
      console.log('Minted to wallet:', tx);
      this.mintedCids.add(cid);
      this.success = true;
    } catch (err) {
      console.error('Error minting:', err); 
    }
    this.minting = false;
  }
}

.container {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    text-align: left;
  }

  .container .title {
    text-align: center;
  }

ng serve