Medara是一个基于Solidity和Web3.js构建智能合约的全功能NFT交易市场React.js源码，建立在以太坊区块链上的NFT数字藏品资产市场Web应用程序。采用Web3、IPFS 和 React.js 构建了Solidity智能合约。Medara提供了构建可靠且强大的市场所需的所有基本功能，以及与台式机和移动设备兼容的吸引人且用户友好的设计。
主要功能
- 自动检测用户是否在使用 MetaMask
- 自动将应用程序与用户 MetaMask 钱包连接
- 检测连接的网络以及帐户更改
- 创建和销售和购买 NFts
- 计算用户资金。
- 让用户能够收集他的资金。
- 计算畅销商品及其销售排名。
- 将市场用户头像与 MetaMask 头像同步。
- 您可以在一个页面中跟踪所有资产
- 在 EtherScan 上跟踪您的交易
- 根据类别过滤 NFT
- 完全兼容的移动版本
- 工作联系表
- 在铸造期间，您可以在将商品发送到区块链之前预览您的商品在市场上的外观。
演示系统
要求
- 代码编辑软件（例如：Dreamweaver、Sublime Text、Visual Studio Code）
- 本地以太坊环境，我们更喜欢 Ganache
- 以太坊浏览器，例如 MetaMask
- 运行前端的 Node.js 环境
入门
这个应用程序使用React.js 功能组件，利用 React Hooks。此外，这个应用程序使用 Solidity 和 Web3.js来创建和处理智能合约。
模板的目录结构
由于此应用程序使用Truffle框架，您应该与运行此 truffle 命令获得的结构相同truffle unbox react
/client– 提供应用程序前端组件和功能。/contracts– 包含应用程序智能合约。/migrations– 包含帮助您从我们的智能合约生成 abis 的 JavaScript 文件。/test– 一些单元测试功能来验证应用程序的功能.gitattributes.gitignoretruffle-config.js– 适用于 Ganache 的 truffle 框架的配置文件
安装
1.确保 在本地机器上 安装Truffle ：
- 在命令行上，运行以下命令
- npm install –g truffle
2.在本地机器上下载并安装 Ganache，从 这里下载
3.安装完成后运行Ganache本地网络。
4.在您的根目录中运行以下命令：
- truffle migrate —reset
5.在\client目录中，安装我们的依赖项：
- npm install
6.安装完节点模块后，仍然在\client目录中，运行开发服务器，就可以开始了。
- npm start
部署
1. Host Provider – 用于前端
理想情况下，任何支持React的共享托管都适合您，如果您知道如何配置和部署 React 项目，您只需要上传 /client文件夹并在您的服务器上运行npm run build。
如果您不知道如何在服务器上运行构建，请按照以下步骤操作。
- 在
/client目录中，运行以下命令
- npm run build
- 此命令将在文件夹
/build内生成目录/client - 仅将目录
/build上传到您的服务器。你已经完成了 UI 部分
2.以太坊网络 – 用于智能合约
您应该在文件夹内的根目录中找到我们的智能合约 /contracts。你需要将这 3 个合约部署到你想要的以太坊网络。
由于 Networks 上的部署对于所有 Networks 都不相同，请查看以下有关如何在Polygon和 Binance Smart Chain 上部署智能合约的可视化教程。
这个怎么运作
在我们解释一切如何相互作用之前，让我们看看这个应用程序提供了哪些功能：
- 自动检测用户是否在使用 MetaMask
- 自动将应用程序与用户 MetaMask 钱包连接
- 检测连接的网络以及帐户更改
- 创建和销售和购买 NFts：
- 计算用户资金。
- 让用户能够收集他的资金。
- 计算畅销商品及其销售排名。
- 将 MetaMask 头像与市场用户头像同步。
- 您可以在一个页面中跟踪所有资产
- 在 EtherScan 上跟踪您的交易
- 根据类别过滤 NFT
- 工作联系表
现在让我们看看所有功能是如何连接在一起的：
• 首先，我们正在编译智能合约，使用Web3.js 与他们的abis 一起工作，这个编译过程将abis 生成到\client\contracts目录 中
• 所有功能都来自\store提供者，例如， collectionProvider.js我们定义了合约、集合等的获取，并在需要的地方重用此功能，让我们举个例子：
- 为了加载合约，我们在
CollectionProvider.js
const loadContractHandler = (web3, NFTCollection, deployedNetwork) => {
const contract = deployedNetwork ? new web3.eth.Contract(NFTCollection.abi, deployedNetwork.address) : '';
dispatchCollectionAction({ type: 'CONTRACT', contract: contract });
return contract;
}
- 然后，将其注入应用程序状态，以便稍后使用
const collectionContext = {
contract: CollectionState.contract,
loadContract: loadContractHandler,
};
- 现在我们可以在 App.js 中使用它从区块链中获取合约
const loadBlockchainData = async () => {
try {
await window.ethereum.request({ method: 'eth_requestAccounts' });
} catch (error) {
console.error(error);
}
// Load Contracts
const nftDeployedNetwork = NFTCollection.networks[networkId];
const nftContract = collectionCtx.loadContract(web3, NFTCollection, nftDeployedNetwork);
}