스크롤 Testnet a lance! 🚀🚀

2022 및 2023 sera l'époque des zkRollups는 Solidity와 호환됩니다. VA explorer Scroll의 비디오 cette, un zkRollup très facile à utiliser parce qu'il nous offre une expérience similaire à Layer 1.

En ce moment Scroll est dans une Alpha fermé, alors si vous voulez être whitelisté vous devez remplir ce formulaire et Attendre la Confirmation.

의존성

Pour cetutorial tu vas avoir besoin deNodeJs , je vous conseille de le télécharger avecNVM , aussi on aura besoin deMetamask .

1. Ajoutez 스크롤 레이어 1 및 레이어 2 및 메타마스크

레이어 1 테스트넷

Nom du réseau: Scroll L1 TestnetRPC의 누벨 URL: https://prealpha.scroll.io/l1ID 드 체인: 534351Symbole de la devise: TSETHURL de l'explorateur de blocs: https://l1scan.scroll.io/

레이어 2 테스트넷

Nom du réseau: Scroll L2 TestnetRPC의 누벨 URL: https://prealpha.scroll.io/l2ID 드 체인: 534354Symbole de la devise: TSETHURL de l'explorateur de blocs: https://l2scan.scroll.io/

2. Recevoir du Ether d'une 수도꼭지

리세베즈TSETH 듄faucet . Et envoyez des fonds de L1 a L2 a travers lebridge .

3. 란세즈유네 DApp

ㅏ. 르 스마트 계약

Vous pouvez lancer ce smart contract en Remix , Assurez-vous de selectionner a Scroll L2 en Metamask.

// 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

Créez le fichier HTML dans un nouveau dossier.
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>

씨. 르 자바스크립트

Dans le même dossier ajoutez un fichier Javascript. Remarquez qu'on est on train d'utiliser le réseau 534354 . De plus, rappelez vous de etablir la 변수HELLO_WORLD_CONTRACT_ADDRESS avec l'adresse de ton 계약.
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

Finalement ajoutez le fichier 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

Allez alocalhost:3000와 브라우저는 DApp을 사용합니다.

Reference

이 문제에 관하여(스크롤 Testnet a lance! 🚀🚀), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/turupawn/scroll-testnet-a-lance-1i6j

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)