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);
  }
}

<mat-toolbar color="primary">NFT Minting App</mat-toolbar>
<div class="container">
  <h2 class="title">Mint Your NFT</h2>

  <p>
    This app allows you to mint your own NFT from an image that you’ve uploaded to IPFS using Pinata.
    It uses <strong>Thirdweb</strong>’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.
  </p>

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

  <div *ngIf="!walletConnected" style="margin-bottom: 2rem;">
    <button mat-flat-button color="accent" (click)="connectWallet()">Connect Wallet</button>
  </div>

  <ul *ngIf="uploadedFiles.length && walletConnected">
    <li *ngFor="let file of uploadedFiles" style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
      <a [href]="pinataConfig.pinataGateway + file.cid" target="_blank">
        <img [src]="pinataConfig.pinataGateway + '/ipfs/' + file.cid" alt="{{ file.name }}" style="height: 50px; border-radius: 4px;" />
      </a>
      <div style="flex-grow: 1">
        <a [href]="pinataConfig.pinataGateway + '/ipfs/' + file.cid" target="_blank">
          {{ file.name || file.cid }}
        </a>
      </div>
      <button mat-stroked-button color="primary" (click)="mintNft(file.cid, file.name)" [disabled]="mintedCids.has(file.cid) || minting">
        {{ mintedCids.has(file.cid) ? 'Minted' : 'Mint NFT' }}
      </button>
    </li>
  </ul>
  <p *ngIf="success">🎉 NFT successfully minted!</p>
</div>

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<string>();
  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