About Advertisement
Login
🔔
🎄
🎁
⭐
🦌
➰
🛷
NEW
在Linea上创建Web3市场Dapp：全面指南 - Blockchain.News

在Linea上创建Web3市场Dapp：全面指南

realtime news Sep 18, 2024 06:36

学习如何在Linea上构建Web3市场dapp，涵盖去中心化市场的前端和智能合约开发。

在Linea上创建Web3市场Dapp：全面指南

在蓬勃发展的Web3世界中，去中心化应用（dapps）已成为基础，提供安全、透明和无需信任的服务。其中，去中心化市场尤为突出，允许用户直接在区块链上买卖商品，有效消除中介。根据linea.mirror.xyz，本指南深入探讨了如何在Linea上构建一个简单的市场dapp，这是一种使用Layer 2 zkEVM技术，提供可扩展性和成本效率，同时保持以太坊的安全性。

理解市场Dapp架构

市场dapp的架构包括智能合约、前端和区块链集成。智能合约将处理例如物品列表、购买物品和所有权转移等功能。前端将作为用户界面，使买家和卖家能够与智能合约交互。与Linea区块链的交互将使用Metamask SDK以及Wagmi和Infura RPC提供商。

环境设置

首先，初始化一个monorepo来管理项目：

mkdir web3-marketplace-linea
cd web3-marketplace-linea
pnpm init

在根目录下创建一个pnpm-workspace.yaml文件：

packages:
  - 'packages/*'

工作空间结构包括：

packages
├── site         # 使用Next.js、Tailwind CSS和Shadcn UI构建的前端
└── blockchain   # 使用Hardhat的智能合约

接下来，在区块链目录中初始化一个Hardhat项目：

cd blockchain
npx hardhat init

选择TypeScript项目选项。

编写智能合约

智能合约将管理市场中的物品、所有权和交易：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

合同 Marketplace {
    struct Item {
        uint id;
        string name;
        uint price;
        address payable seller;
        address owner;
        bool isSold;
    }
    uint public itemCount = 0;
    mapping(uint => Item) public items;
    mapping(address => uint[]) public ownedItems;

    function listItem(string memory _name, uint _price) public {
        require(_price > 0, "价格必须大于零");
        itemCount++;
        items[itemCount] = Item(itemCount, _name, _price, payable(msg.sender), msg.sender, false);
        ownedItems[msg.sender].push(itemCount);
    }

    function purchaseItem(uint _id) public payable {
        Item storage item = items[_id];
        require(_id > 0 && _id <= itemCount, "物品不存在");
        require(msg.value == item.price, "价格不正确");
        require(!item.isSold, "物品已售出");
        require(msg.sender != item.seller, "卖家不能购买自己的物品");
        item.isSold = true;
        item.seller.transfer(msg.value);
        _transferOwnership(_id, item.seller, msg.sender);
    }

    function _transferOwnership(uint _id, address _from, address _to) internal {
        Item storage item = items[_id];
        item.owner = _to;
        uint[] storage fromItems = ownedItems[_from];
        for (uint i = 0; i < fromItems.length; i++) {
            if (fromItems[i] == _id) {
                fromItems[i] = fromItems[fromItems.length - 1];
                fromItems.pop();
                break;
            }
        }
        ownedItems[_to].push(_id);
    }

    function transferItem(uint _id, address _to) public {
        Item storage item = items[_id];
        require(_id > 0 && _id <= itemCount, "物品不存在");
        require(msg.sender == item.owner, "你不拥有此物品");
        _transferOwnership(_id, msg.sender, _to);
    }

    function getItemsByOwner(address _owner) public view returns (uint[] memory) {
        return ownedItems[_owner];
    }
}

此合约便于去中心化市场，用户可以列出物品、购买物品和转移所有权，所有交易记录在区块链上。

部署智能合约

在ignition文件夹中创建一个部署模块：

import { buildModule } from "@nomicfoundation/hardhat-ignition/modules";
const MarketplaceModule = buildModule("MarketplaceModule", (m) => {
  const marketplace = m.contract("Marketplace");
  return { marketplace };
});
export default MarketplaceModule;

用你的Infura API密钥和账号私钥更新.env文件：

INFURA_API_KEY=your_infura_api_key_here
ACCOUNT_PRIVATE_KEY=your_account_private_key_here

将合约部署到Linea测试网：

npx hardhat ignition deploy ignition/modules/Marketplace.ts --network linea-testnet

用Next.js和Shadcn UI进行前端开发

在site目录中初始化Next.js项目：

mkdir site
cd site
npx create-next-app@latest .

在提示时选择TypeScript、ESLint、Tailwind CSS和App Router选项。安装Shadcn UI CLI：

npx shadcn-ui@latest init

创建一个wagmi.config.ts文件以连接区块链：

import { http, createConfig } from "wagmi";
import { lineaSepolia } from "wagmi/chains";
import { metaMask } from "wagmi/connectors";

export const config = createConfig({
  chains: [lineaSepolia],
  connectors: [metaMask()],
  transports: {
    [lineaSepolia.id]: http(),
  },
});

创建一个带有合约地址和ABI的constants.ts文件：

export const CONTRACT_ADDRESS = "your_contract_address_here";
export const ABI = [/* ABI array here */];

开发前端组件并使用Wagmi和Metamask SDK将它们连接到智能合约。详细的说明和代码示例可以在完整的指南中找到，地址在linea.mirror.xyz。

运行开发服务器：

npm run dev

你的Next.js应用程序与Shadcn UI现在应该运行在http://localhost:3000。

在本指南中，我们在Linea上构建了一个简单的去中心化市场dapp，利用zkEVM技术实现可扩展性和成本效率。过程涵盖了从设置环境到编写和部署智能合约，以及与Next.js和Shadcn UI集成的前端开发。这些基础知识为进一步增强，例如集成其他功能或优化用户体验，奠定了基础。

Image source: Shutterstock