Solidity Development On Moonbeam
Xây dựng Front-end Cho Smart Contract Trên Moonbeam

Xây Dựng Front-end Cho Smart Contract Trên Moonbeam

Trong phần này, chúng ta sẽ dựa vào nội dung mà VBI đã phát triển về cách để xây dựng một Front-end DApps, các bạn có thể xem tại đây (opens in a new tab).

Demo sản phẩm cuối với mạng Sepolia Testnet: https://crowdfunding-interface.vercel.app/ (opens in a new tab)

Tích hợp Moonbase Alpha Network

Nếu các bạn đã follow video trên và biết cách để chúng ta có thể xây dựng một front-end Web3, thì các bạn không cần clone git mà hãy làm trên code base của bạn nhé.

  • Clone git front-end:
git clone -b 03-crowdfunding-interface git@github.com:openedu101/foundry-basics.git --single-branch

Nếu bạn đã tự deploy contract cho bản thân mình thì hãy dùng contract bạn đã deploy nhé. Contract mẫu ở dưới mà mình đã deploy sẵn trên mạng Moonbase.

Chúng ta sẽ không sử dụng Chainlink Oracle vì hiện tại Chainlink Oracle chưa hỗ trợ Moonbase. Nhưng nếu bạn deploy mainnet (là Moonbeam) thì Chainlink có hỗ trợ nha. Xem tại đây (opens in a new tab).

  • Contract:

0xb8c409618fB8E5f20A2b228E271c01B2a5d3de83 (opens in a new tab)

// SPDX-License-Identifier: MIT
pragma solidity 0.8.26;
 
import {Ownable} from "@openzeppelin/contracts/access/Ownable.sol";
 
contract Crowdfunding is Ownable {
    error InsufficientFunding();
 
    uint256 public constant MINIMUM_DONATION = 0.05 ether; // 0.05 native token in Wei
    address public immutable i_ethUsdPriceFeed;
 
    mapping(address => bool) public s_isFunders;
    mapping(address => uint256) public s_funderToAmount;
    address[] public s_funders;
 
    event Funded(address indexed funder, uint256 value);
    event Withdrawn(uint256 value);
 
    receive() external payable {
        fund();
    }
 
    fallback() external payable {
        fund();
    }
 
    constructor(address ethUsdPriceFeed) Ownable(msg.sender) {
        i_ethUsdPriceFeed = ethUsdPriceFeed;
    }
 
    function fund() public payable {
        if (msg.value < MINIMUM_DONATION) {
            revert InsufficientFunding();
        }
 
        s_funderToAmount[msg.sender] += msg.value;
        bool isFunded = s_isFunders[msg.sender];
 
        if (!isFunded) {
            s_funders.push(msg.sender);
            s_isFunders[msg.sender] = true;
        }
 
        emit Funded(msg.sender, msg.value);
    }
 
    function withdraw() public onlyOwner {
        uint256 withdrawBal = address(this).balance;
        (bool sent, ) = payable(owner()).call{value: withdrawBal}("");
        require(sent, "Failed to send Ether");
 
        emit Withdrawn(withdrawBal);
    }
 
    // Tìm ra có bao nhiêu người đã đóng góp
    function getFundersLength() public view returns (uint256) {
        return s_funders.length;
    }
}