为什么我的react铸造dApp无法正常工作？

Question

我正在开发我的第一个铸造 dApp，但在铸造测试中我遇到了一些正确铸造的问题：

1. 即使合约是 3 个，我也不允许同时铸造超过 2 个 nft。
2. 当我超过每个钱包允许的最大数量时，不会出现任何警报，并且我在合同中编写的其他警报也不会显示。
3. 为什么即使有脉轮类别，输入中仍然出现箭头？

React MainMint.js：

import { useState } from 'react';
import { Box, Button, Flex, Input, Text } from '@chakra-ui/react';
import { ethers } from 'ethers';
import punkFacesNFT from './PunkFacesNFT.json';

const punkFacesNFTAddress = "0x1ea791c4Fc8F9db73131E610266181DE714AD751";

const MainMint = ({ accounts, setAccounts }) => {
    const [mintAmount, setMintAmount] = useState(1);
    const isConnected = Boolean(accounts[0]);

    async function handleMint() {
        if (window.ethereum) {
            const provider = new ethers.BrowserProvider(window.ethereum);
            const signer = await provider.getSigner();
            const contract = new ethers.Contract(
                punkFacesNFTAddress,
                punkFacesNFT.abi,
                signer,
            );
            try {
                const response = await contract.mint(window.BigInt(mintAmount), {
                    value: ethers.parseEther((0.00001 * mintAmount).toString()),
                });
                console.log('response: ', response);
            } catch (err) {
                console.log("error: ", err);
            }
        }
    }

    const handleDecrement = () => {
        if (mintAmount <= 1) return;
        setMintAmount(mintAmount - 1);
    };

    const handleIncrement = () => {
        if (mintAmount >= 3) return;
        setMintAmount(mintAmount + 1);
    };
    
    return (
        <Flex justify="center" align="center" height="60vh" padding="150px">
            <Box width="450px">
                <div>
                    <Text fontSize="48px" textShadow="0 5px #000000">PunkFaces</Text>
                    
                    <Text
                        fontSize="30px"
                        letterSpacing="-5.5%"
                        fontFamily="VT323"
                        textShadow="0 2px 2px #000000"                       
                    >
                        This is a test of my first NFT collection
                        I hope everything is OK.
                        Enjoy Life!
                    </Text>
                </div>

            {isConnected ? (
                <div>
                    <Flex justify="center" align="center">
                        <Button
                            backgroundColor="#D6517D"
                            borderRadius="5px"
                            boxShadow="0px 2px 2px 1px #0F0F0F"
                            color="white"
                            cursor="pointer"
                            fontFamily="inherit"
                            padding="15px"
                            margin="10px" 
                            onClick={handleDecrement}
                        >
                            -
                        </Button>
                        <Input
                            readOnly
                            fontFamily="inherit"
                            width="100px"
                            height="40px"
                            textAlign="center"
                            paddingLeft="19px"
                            marginTop="10px"
                            type="number"
                            value={mintAmount}
                        />
                        <Button
                            backgroundColor="#D6517D"
                            borderRadius="5px"
                            boxShadow="0px 2px 2px 1px #0F0F0F"
                            color="white"
                            cursor="pointer"
                            fontFamily="inherit"
                            padding="15px"
                            margin="10px" 
                            onClick={handleIncrement}
                        >
                            +
                        </Button>   
                    </Flex>
                    <Button
                        backgroundColor="#D6517D"
                        borderRadius="5px"
                        boxShadow="0px 2px 2px 1px #0F0F0F"
                        color="white"
                        cursor="pointer"
                        fontFamily="inherit"
                        padding="15px"
                        margin="10px"                            
                        onClick={handleMint}
                    >
                        Mint Now
                    </Button>
                </div>
            ) : (
                <Text
                    marginTop="70px"
                    fontSize="30px"
                    letterSpacing="-5.5%"
                    fontFamily="VT323"
                    textShadow="0 3px #000000"
                    color="#D6517D"
                >
                    You must be connected to mint
                </Text>
            )}
            </Box>
        </Flex>
    );
};

export default MainMint;

我的合约代码：

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.24;

import '@openzeppelin/contracts/token/ERC721/ERC721.sol';
import '@openzeppelin/contracts/access/Ownable.sol';
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";

contract PunkFacesNFT is ERC721, Ownable {

    uint256 public mintPrice;
    uint256 public totalSupply;
    uint256 public maxSupply;
    uint256 public maxPerWallet;
    bool public isPublicMintEnabled;
    string public baseTokenUri;
    address payable public withdrawWallet;
    mapping(address => uint256) public walletMints;

    constructor(address initialOwner) ERC721('PunkFaces', 'PNKFC') Ownable(initialOwner) {
        mintPrice = 0.00001 ether;
        totalSupply = 0;
        maxSupply = 15;
        maxPerWallet = 3;
        withdrawWallet = payable(initialOwner);// set withdrawWallet address here
    }
    
    function setIsPublicMintEnabled(bool isPublicMintEnabled_) external onlyOwner {
        isPublicMintEnabled = isPublicMintEnabled_;
    }

    function setBaseTokenUri(string calldata baseTokenUri_) external onlyOwner {
        baseTokenUri = baseTokenUri_;
    }
    
    function tokenURI(uint256 tokenId_) public view override returns (string memory) {
    require(ownerOf(tokenId_) != address(0), 'Token does not exist!');
        return string(abi.encodePacked(baseTokenUri, Strings.toString(tokenId_), ".json"));
    }

    function withdraw() external onlyOwner {
        (bool success, ) = withdrawWallet.call{ value: address(this).balance }('');
        require(success, 'withdraw failed');
    }

    function mint(uint256 quantity_) public payable {
        require(isPublicMintEnabled, 'Minting not enabled');
        require(msg.value == quantity_ * mintPrice, 'Wrong mint value');
        require(totalSupply + quantity_ <= maxSupply, 'Sold out');
        require(walletMints[msg.sender] + quantity_ <= maxPerWallet, 'Exceed max wallet');

        for (uint256 i = 0; i <  quantity_; i++) {
            uint256 newTokenId = totalSupply + 1;
            totalSupply++;
            _safeMint(msg.sender, newTokenId);
        }
    }
}

Polygonscan合约地址：0x1ea791c4Fc8F9db73131E610266181DE714AD751

问：Pragma Solidity 0.8.20 或 0.8.24？用什么？

问：字符串公共baseTokenUri；公共、私人还是内部？用什么？

问：如果价格以 ETHERS 为单位，为什么我会收到 MATIC？

遵循 Solidity、React 和 Chakra 中的教程和一些文档，但没有任何关于此的内容。