如何使用 React web 應用程序部署智能合約？

Question

到目前為止，為了部署智能合約，我使用了 remix ide。 但是現在我需要創建一個網站，只需點擊一個按鈕就可以部署智能合約？ 我可以這樣做嗎？

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
interface AnotherContract {
    function walletOfOwner(address owner) external view returns (uint256[] memory);
}

contract Demo{
    uint public similarity;
    uint256 public hasRedPill;
    constructor(
    string memory _name,
    string memory _symbol,
    string memory _initBaseURI
  )  {
     
    // some code
  }
    function test() public view returns(uint256  ){
       AnotherContract anotherContract = AnotherContract(address(0x116486FD64Ba04F7B789278B239E2e5A1e2f7b39));
      return anotherContract.walletOfOwner(msg.sender).length;
    }
}

假設我想使用我的 react js web 應用程序部署這個演示合約。 在這里，我必須先發送構造函數參數，然后部署合約。 作為回報，我需要合約的字節碼、abi 和地址。

有沒有辦法做到這一點？ 我覺得這是可能的，因為 remix ide 還提供了一個用於部署合約的 ui。 我是新來的。 請幫忙。

Answer 1

1. 設置松露

npm install -g truffle

2. 創建一個空的存儲庫， cd進入它，然后

truffle init

3. 配置本地網絡和提供程序

在truffle.config.js中，在 module.exports 中添加以下代碼段：

module.exports = {
  networks: {
    development: {
     host: "127.0.0.1",
     port: 7545,
     network_id: "*",
    },
  },
  compilers: {
    solc: {
      version: "0.8.0",
      settings: {
       optimizer: {
         enabled: false,
         runs: 200
       }
      }
    }
  }
};

4. 現在編譯智能合約

truffle compile

5. 遷移智能合約

truffle migrate

就是這樣，它應該在.json文件中創建一個ABI array和contract address

Answer 2

你的問題的答案將是一個很長的答案。 Sagar 的建議是一個很好的線索，盡管這里需要涵蓋很多內容。

我建議您觀看下面鏈接的速成課程，以幫助您定位。 本課程將幫助您逐步了解 go 的一些細節（這對我有很大幫助）。 我看到你已經掌握了一些后端知識，所以為了涵蓋前端，我建議你跳到第 10 課，其中涵蓋了 NextJS/React。

指南鏈接：使用 JavaScript 學習區塊鏈、Solidity 和全棧 Web3 開發