「资源分享」Bithu – NFT 铸币/智能合约收集（React JS+Solidity）附安装教程

源码介绍

Bithu– NFT Minting/Collection React. JS登陆页面模板+ Mint Solidity是 Metamask Metamask的 Metamask, NFT收藏，路线图，团队成员，常见问题部分。Bithu是 NFT网站的完整模板.Bithu模板具有现代设计风格，色彩丰富。它满足了所有 NFT投资组合登录页面所需要的所有需求，这些页面包含在模板包中。它包含了必要的组成部分和要素。

Bithu是由 ReactJS和 Next JS组成的，它构建于 Crypto NFT登录。

源码预览

安装教程

首先需要解压文件你会发现一个文件夹，包含Bithu-react版本。

1. 转到 bithu-react 文件夹
2. 运行yarn（如果你在你的电脑上全局安装了纱线，或者你可以通过安装它）npm install --global yarn
3. 对 bithu-react 运行 npm install --no-audit (to avoid audit because react new scripts has some bugs that has no fix for now you can ) 检查
4. 运行npm audit --production 检查生产没有vernerablities。
5. npm run start在下一次着陆时运行如果本地机器上没有安装node.js，请考虑从node js官网下载： Node.js

/app

/app app文件夹包含应用程序的根目录。我们也在这里做了应用路由。

/assets

/assets 在assets文件夹中，您将找到数据、图像和样式文件夹。在数据文件夹中，您将找到此模板中使用的所有数据。您还将找到图像文件夹，其中所有图像都基于特定页面保存。在主题文件夹中，您将找到此模板中的所有主题使用。

/common

/common文件夹是最重要的使用，你会发现一些常见的组件

如何铸币

在用这个包铸造你的 NFT 之前，你需要集成你的ERC-721智能合约。或者您可以在remix IDE中复制粘贴以下代码以在区块链上创建和部署智能合约（请记住，这是为了测试 Rinkbey、Rophsten 等测试网络的目的。对于主区块链，您需要更仔细地编写智能合约以节省一些 GAS 费用）。

	// SPDX-License-Identifier: GPL-3.0

	pragma solidity ^0.8.0;

	import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
	import "@openzeppelin/contracts/access/Ownable.sol";
	import "@openzeppelin/contracts/utils/Counters.sol";

	contract BithuContract is ERC721Enumerable, Ownable {
		using Strings for uint256;

		using Counters for Counters.Counter;

		Counters.Counter private _tokenIds;

		string public baseURI;
		string public baseExtension = ".json";
		uint256 public cost = 0.03 ether;
		uint256 public maxSupply = 1000;
		uint256 public maxMintAmount = 5;
		bool public paused = false;
		mapping(address => bool) public whitelisted;

		constructor(
			string memory _name,
			string memory _symbol,
			string memory _initBaseURI
		) ERC721(_name, _symbol) {
			setBaseURI(_initBaseURI);
			mint(msg.sender, 1);
		}

		// internal
		function _baseURI() internal view virtual override returns (string memory) {
			return baseURI;
		}

		// public
		function mint(address _to, uint256 _mintAmount) public payable {
			uint256 supply = totalSupply();
			require(!paused);
			require(_mintAmount > 0);
			require(_mintAmount <= maxMintAmount);
			require(supply + _mintAmount <= maxSupply);

			if (msg.sender != owner()) {
				if(whitelisted[msg.sender] != true) {
				require(msg.value >= cost * _mintAmount);
				}
			}

			for (uint256 i = 1; i <= _mintAmount; i++) {
			_safeMint(_to, supply + i);
			_tokenIds.increment();
			}
		}


		function count() public view returns (uint256){
			return _tokenIds.current();
		}

		function walletOfOwner(address _owner)
			public
			view
			returns (uint256[] memory)
		{
			uint256 ownerTokenCount = balanceOf(_owner);
			uint256[] memory tokenIds = new uint256[](ownerTokenCount);
			for (uint256 i; i < ownerTokenCount; i++) {
			tokenIds[i] = tokenOfOwnerByIndex(_owner, i);
			}
			return tokenIds;
		}

		function tokenURI(uint256 tokenId)
			public
			view
			virtual
			override
			returns (string memory)
		{
			require(
			_exists(tokenId),
			"ERC721Metadata: URI query for nonexistent token"
			);

			string memory currentBaseURI = _baseURI();
			return bytes(currentBaseURI).length > 0
				? string(abi.encodePacked(currentBaseURI, tokenId.toString(), baseExtension))
				: "";
		}

		//only owner
		function setCost(uint256 _newCost) public onlyOwner() {
			cost = _newCost;
		}

		function setmaxMintAmount(uint256 _newmaxMintAmount) public onlyOwner() {
			maxMintAmount = _newmaxMintAmount;
		}

		function setBaseURI(string memory _newBaseURI) public onlyOwner {
			baseURI = _newBaseURI;
		}

		function setBaseExtension(string memory _newBaseExtension) public onlyOwner {
			baseExtension = _newBaseExtension;
		}

		function pause(bool _state) public onlyOwner {
			paused = _state;
		}

		function whitelistUser(address _user) public onlyOwner {
			whitelisted[_user] = true;
		}

		function removeWhitelistUser(address _user) public onlyOwner {
			whitelisted[_user] = false;
		}

		function withdraw() public payable onlyOwner {
			require(payable(msg.sender).send(address(this).balance));
		}
	}

现在转到remix IDE 并使用您的任何名称创建一个文件。记住文件扩展名应该是 .sol现在将代码粘贴到您创建的文件中。然后，如果您愿意，可以更改合同名称。

编译文件。

如果没有错误，则编译完成。

现在从下拉列表中选择部署和注入 web3。

最后给出你的集合名称、符号和元数据 URI。如何为您的 NTF检查创建元数据。

成功部署合约后，您可以返回编译器并复制合约 ABI 文件。

通过在 src -> contracts 中创建一个文件（文件格式应为 .json）将其粘贴到项目文件夹。

现在将其导入 web3mint.js 文件并复制您的合约地址替换它。

复制合约地址

在这里更换

部署

运行命令npm run build

构建过程完成后。你会发现一个名为的新文件夹/build

您可以在任何托管平台上托管该文件夹，例如：netlify、Gihub Pages 等。

文件下载