[2.0]Medara全功能NFT交易市场React.js源码 基于Solidity和Web3.js构建智能合约

Medara是一个基于Solidity和Web3.js构建智能合约的全功能NFT交易市场React.js源码，建立在以太坊区块链上的NFT数字藏品资产市场Web应用程序。采用Web3、IPFS 和 React.js 构建了Solidity智能合约。Medara提供了构建可靠且强大的市场所需的所有基本功能，以及与台式机和移动设备兼容的吸引人且用户友好的设计。

主要功能

• 自动检测用户是否在使用 MetaMask
• 自动将应用程序与用户 MetaMask 钱包连接
• 检测连接的网络以及帐户更改
• 创建和销售和购买 NFts
• 计算用户资金。
• 让用户能够收集他的资金。
• 计算畅销商品及其销售排名。
• 将市场用户头像与 MetaMask 头像同步。
• 您可以在一个页面中跟踪所有资产
• 在 EtherScan 上跟踪您的交易
• 根据类别过滤 NFT
• 完全兼容的移动版本
• 工作联系表
• 在铸造期间，您可以在将商品发送到区块链之前预览您的商品在市场上的外观。

演示系统

查看截图

查看演示

要求

1. 代码编辑软件（例如：Dreamweaver、Sublime Text、Visual Studio Code）
2. 本地以太坊环境，我们更喜欢 Ganache
3. 以太坊浏览器，例如 MetaMask
4. 运行前端的 Node.js 环境

入门

这个应用程序使用React.js 功能组件，利用 React Hooks。此外，这个应用程序使用 Solidity 和 Web3.js来创建和处理智能合约。

模板的目录结构

由于此应用程序使用Truffle框架，您应该与运行此 truffle 命令获得的结构相同truffle unbox react

• /client– 提供应用程序前端组件和功能。
• /contracts– 包含应用程序智能合约。
• /migrations– 包含帮助您从我们的智能合约生成 abis 的 JavaScript 文件。
• /test– 一些单元测试功能来验证应用程序的功能
• .gitattributes
• .gitignore
• truffle-config.js– 适用于 Ganache 的 truffle 框架的配置文件

安装

1.确保 在本地机器上 安装Truffle ：

• 在命令行上，运行以下命令

1. npm install –g truffle

2.在本地机器上下载并安装 Ganache，从 这里下载

3.安装完成后运行Ganache本地网络。

4.在您​​的根目录中运行以下命令：

1. truffle migrate —reset

5.在\client目录中，安装我们的依赖项：

1. npm install

6.安装完节点模块后，仍然在\client目录中，运行开发服务器，就可以开始了。

1. npm start

 

部署

1. Host Provider – 用于前端

理想情况下，任何支持React的共享托管都适合您，如果您知道如何配置和部署 React 项目，您只需要上传 /client文件夹并在您的服务器上运行npm run build。

如果您不知道如何在服务器上运行构建，请按照以下步骤操作。

• 在/client目录中，运行以下命令

1. npm run build

• 此命令将在文件夹 /build内生成目录 /client
• 仅将目录/build上传到您的服务器。你已经完成了 UI 部分

2.以太坊网络 – 用于智能合约

您应该在文件夹内的根目录中找到我们的智能合约 /contracts。你需要将这 3 个合约部署到你想要的以太坊网络。

由于 Networks 上的部署对于所有 Networks 都不相同，请查看以下有关如何在Polygon和 Binance Smart Chain 上部署智能合约的可视化教程。

如何将任何智能合约部署到 BSC 或 Polygon

这个怎么运作

在我们解释一切如何相互作用之前，让我们看看这个应用程序提供了哪些功能：

1. 自动检测用户是否在使用 MetaMask
2. 自动将应用程序与用户 MetaMask 钱包连接
3. 检测连接的网络以及帐户更改
4. 创建和销售和购买 NFts：
5. 计算用户资金。
6. 让用户能够收集他的资金。
7. 计算畅销商品及其销售排名。
8. 将 MetaMask 头像与市场用户头像同步。
9. 您可以在一个页面中跟踪所有资产
10. 在 EtherScan 上跟踪您的交易
11. 根据类别过滤 NFT
12. 工作联系表

现在让我们看看所有功能是如何连接在一起的：

• 首先，我们正在编译智能合约，使用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);
 
}