Real Estate NFT Minter UI

Hello, here's an updated version of the React.js UI using the ethers.js library to interact with the NFT minter contract:

import React, { useState } from 'react';
import { ethers } from 'ethers';
import RealEstateNFTContract from './contracts/RealEstateNFT.json';

const NFTMinter = () => {
  const [propertyDetails, setPropertyDetails] = useState('');
  const [imageUrl, setImageUrl] = useState('');
  const [rentalPrice, setRentalPrice] = useState('');
  const [rentalDuration, setRentalDuration] = useState('');

  const handleMintNFT = async () => {
    try {
      if (!window.ethereum) {
        throw new Error('Please install MetaMask to use this application');
      }

      await window.ethereum.request({ method: 'eth_requestAccounts' });
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();

      const contract = new ethers.Contract(
        RealEstateNFTContract.address,
        RealEstateNFTContract.abi,
        signer
      );

      const result = await contract.mintRealEstate(
        propertyDetails,
        imageUrl,
        ethers.utils.parseEther(rentalPrice),
        rentalDuration
      );

      console.log('NFT minted:', result);
      // Handle success and update UI as needed
    } catch (error) {
      console.error('Error minting NFT:', error);
      // Handle error and show appropriate message to the user
    }
  };

  return (
    <div>
      <h2>Mint Real Estate NFT</h2>
      <label>
        Property Details:
        <input
          type="text"
          value={propertyDetails}
          onChange={(e) => setPropertyDetails(e.target.value)}
        />
      </label>
      <label>
        Image URL:
        <input
          type="text"
          value={imageUrl}
          onChange={(e) => setImageUrl(e.target.value)}
        />
      </label>
      <label>
        Rental Price (ETH):
        <input
          type="text"
          value={rentalPrice}
          onChange={(e) => setRentalPrice(e.target.value)}
        />
      </label>
      <label>
        Rental Duration (seconds):
        <input
          type="text"
          value={rentalDuration}
          onChange={(e) => setRentalDuration(e.target.value)}
        />
      </label>
      <button onClick={handleMintNFT}>Mint NFT</button>
    </div>
  );
};

export default NFTMinter;

In this updated version, we use the ethers.js library to connect to the Ethereum network and interact with the NFT minter contract. We request access to the user's Ethereum accounts using window.ethereum.request({ method: 'eth_requestAccounts' }) and then create a Web3Provider and Signer using ethers.providers.Web3Provider and provider.getSigner().

The handleMintNFT function is updated to use the ethers.Contract instance with the Signer to interact with the smart contract. We parse the rentalPrice value using ethers.utils.parseEther to convert it to the appropriate wei value.

Make sure you have the ethers.js library installed in your project for this code to work.

Remember to replace the placeholder values with your own contract ABI and address.

Feel free to customize the UI and add additional features as needed for your application.