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

本套源码非PHP源码,前后端都是JS代码开发的,未去授权,仅供学习参考

主要功能

  • 自动检测用户是否在使用 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);
 
}

 

 

 

 

 

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源