Medara是一个基于Solidity和Web3.js构建智能合约的全功能NFT交易市场React.js源码,建立在以太坊区块链上的NFT数字藏品资产市场Web应用程序。采用Web3、IPFS 和 React.js 构建了Solidity智能合约。Medara提供了构建可靠且强大的市场所需的所有基本功能,以及与台式机和移动设备兼容的吸引人且用户友好的设计。
本套源码非PHP源码,前后端都是JS代码开发的,未去授权,仅供学习参考
主要功能
- 自动检测用户是否在使用 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
.gitignore
truffle-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 上部署智能合约的可视化教程。
如何将任何智能合约部署到 BSC 或 Polygon
这个怎么运作
在我们解释一切如何相互作用之前,让我们看看这个应用程序提供了哪些功能:
- 自动检测用户是否在使用 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);
}