스크롤 테스트넷 런칭!🚀🚀

29530 단어
우리는 여러 evm 호환 zkRollup이 곧 출시되는 zkRollup 시대에 있습니다. 이 비디오에서 우리는 zkRollup을 사용하기 매우 쉬운 Scroll을 탐색할 것입니다. 새로운 도구를 배우거나 설치할 필요가 없기 때문에 레이어 1을 사용하는 것과 매우 유사한 경험을 제공합니다.

현재 Scroll은 비공개 알파에 있으므로 화이트리스트에 포함되려면 채우고this form 확인을 기다려야 합니다.



종속성



이 자습서에는 NodeJs 이 필요합니다. NVM 및 Metamask 을 통해 Linux에서 다운로드하는 것이 좋습니다.

1. 스크롤 L1 및 L2를 메타마스크에 추가



레이어 1 테스트넷



네트워크 이름: Scroll L1 Testnet새 RPC URL: https://prealpha.scroll.io/l1체인 ID: 534351통화 기호: TSETH블록 탐색기 URL: https://l1scan.scroll.io/

레이어 2 테스트넷



네트워크 이름: Scroll L2 Testnet새 RPC URL: https://prealpha.scroll.io/l2체인 ID: 534354통화 기호: TSETH블록 탐색기 URL: https://l2scan.scroll.io/

2. 테스트 이더 받기



faucet을 통해 TSETH를 가져오고 bridge을 통해 L1에서 L2로 보냅니다.

3. DApp 실행


ㅏ. 스마트 계약



Remix을 통해 이 스마트 계약을 시작할 수 있습니다. 시작하기 전에 Metamask의 L2에 있는지 확인하세요.

// SPDX-License-Identifier: MIT
pragma solidity 0.8.17;

contract HelloWorld {
    string public hello = "Hola mundo!";

    function setHello(string memory hello_) public
    {
        hello = hello_;
    }
}


비. HTML



새 디렉터리에 HTML 파일을 만듭니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <input id="connect_button" type="button" value="Connect" onclick="connectWallet()" style="display: none"></input>
  <p id="web3_message"></p>
  <p id="contract_state"></p>
  <h1>Hola Mundo! DApp</h1>
  <p id="hello"></p>
  <input type="input"  value="" id="hello_"></input>
  <input type="button" value="Set Hello" onclick="_setHello()"></input>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.3.5/web3.min.js"></script>
  <script type="text/javascript" src="blockchain_stuff.js"></script>
</body>
</html>

<script>
  function _setHello()
  {
    hello_ = document.getElementById("hello_").value
    setHello(hello_)
  }
</script>


씨. 자바스크립트



동일한 디렉토리에 Javascript 파일을 추가하십시오. 네트워크 ID534354를 사용하고 있습니다. 또한 방금 시작한 계약으로 HELLO_WORLD_CONTRACT_ADDRESS 변수를 설정하는 것을 잊지 마십시오.
blockchain_stuff.js
const NETWORK_ID = 534354
const HELLO_WORLD_CONTRACT_ADDRESS = "ADDRESS DE TU CONTRATO AQUI"
const HELLO_WORLD_ABI_PATH = "./HelloWorld.json"

var helloWorldContract
var accounts
var web3

function metamaskReloadCallback() {
  window.ethereum.on('accountsChanged', (accounts) => {
    document.getElementById("web3_message").textContent="Account changed, refreshing...";
    window.location.reload()
  })
  window.ethereum.on('networkChanged', (accounts) => {
    document.getElementById("web3_message").textContent="Network changed, refreshing...";
    window.location.reload()
  })
}

const getWeb3 = async () => {
  return new Promise((resolve, reject) => {
    if(document.readyState=="complete")
    {
      if (window.ethereum) {
        const web3 = new Web3(window.ethereum)
        window.location.reload()
        resolve(web3)
      } else {
        reject("must install MetaMask")
        document.getElementById("web3_message").textContent="Error: Please connect to metamask";
      }
    }else
    {
      window.addEventListener("load", async () => {
        if (window.ethereum) {
          const web3 = new Web3(window.ethereum)
          resolve(web3)
        } else {
          reject("must install MetaMask")
          document.getElementById("web3_message").textContent="Error: Please install Metamask";
        }
      });
    }
  });
};

const getContract = async (web3, address, abi_path) => {
  const response = await fetch(abi_path);
  const data = await response.json();

  const netId = await web3.eth.net.getId();
  contract = new web3.eth.Contract(
    data,
    address
    );
  return contract
}

async function loadDapp() {
  metamaskReloadCallback()
  document.getElementById("web3_message").textContent="Please connect to Metamask"
  var awaitWeb3 = async function () {
    web3 = await getWeb3()
    web3.eth.net.getId((err, netId) => {
      if (netId == NETWORK_ID) {
        var awaitContract = async function () {
          helloWorldContract = await getContract(web3, HELLO_WORLD_CONTRACT_ADDRESS, HELLO_WORLD_ABI_PATH)
          document.getElementById("web3_message").textContent="You are connected to Metamask"
          onContractInitCallback()
          web3.eth.getAccounts(function(err, _accounts){
            accounts = _accounts
            if (err != null)
            {
              console.error("An error occurred: "+err)
            } else if (accounts.length > 0)
            {
              onWalletConnectedCallback()
            } else
            {
              document.getElementById("connect_button").style.display = "block"
            }
          });
        };
        awaitContract();
      } else {
        document.getElementById("web3_message").textContent="Please connect to Arbitrum Testnet";
      }
    });
  };
  awaitWeb3();
}

async function connectWallet() {
  await window.ethereum.request({ method: "eth_requestAccounts" })
  accounts = await web3.eth.getAccounts()
  onWalletConnectedCallback()
}

loadDapp()

const onContractInitCallback = async () => {
  var hello = await helloWorldContract.methods.hello().call()
  document.getElementById("hello").textContent = hello;
}

const onWalletConnectedCallback = async () => {
}

//// Functions ////

const setHello = async (hello_) => {
  const result = await helloWorldContract.methods.setHello(hello_)
  .send({ from: accounts[0], gas: 0, value: 0 })
  .on('transactionHash', function(hash){
    document.getElementById("web3_message").textContent="Executing...";
  })
  .on('receipt', function(receipt){
    document.getElementById("web3_message").textContent="Success.";    })
  .catch((revertReason) => {
    console.log("ERROR! Transaction reverted: " + revertReason.receipt.transactionHash)
  });
}


디. JSON ABI



마지막으로 JSON ABI를 추가합니다.
HelloWorld.json
[
  {
    "inputs": [
      {
        "internalType": "string",
        "name": "hello_",
        "type": "string"
      }
    ],
    "name": "setHello",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "hello",
    "outputs": [
      {
        "internalType": "string",
        "name": "",
        "type": "string"
      }
    ],
    "stateMutability": "view",
    "type": "function"
  }
]


4. 웹 앱과 상호 작용




npm install -g lite-server
lite-server


브라우저에서 localhost:3000로 이동합니다.
Kotlin 코루틴으로 개조
Ditsmod 애플리케이션의 옵션 및 CORS

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage