Оптимизм! продолжает быть предметом разговоров в городе — [разработка второго уровня].

Автор Николай Праскурин На чтение 5 мин. Просмотров 51 Опубликовано 05.10.2022

Optimism! — это второй по распространенности протокол уровня 2, используемый в настоящее время. Его цель — помочь нам экономить газ, не жертвуя безопасностью, которую предлагает Ehtereum Mainnet. За последнюю неделю ее рыночная доля выросла на 20%, несмотря на медвежий рынок, она запустила краудфандинговый токен управления и стала жертвой одного из самых специфических взломов в истории. В этом видео мы рассмотрим шаги по разработке децентрализованных приложений на этом оптимистичном рулоне.

Содержание

Перед началом работы
1. Добавьте «Оптимизм!» в свою метамаску
Оптимизм! Mainnet
Оптимизм! Testnet
2. Получение средств на уровне 2
3. Создать DApp
Умный контракт
HTML
Javascript
JSON ABI
4. Теперь мы готовы к тестированию Dapp

Перед началом работы

Для этого урока вам понадобится NodeJs, который я рекомендую загрузить на Linux через NVM, а также вам понадобится Metamask или другой совместимый кошелек.

1. Добавьте «Оптимизм!» в свою метамаску

В этом видео мы запустим программу «Оптимизм! Testnet, но я также объясняю, как это сделать в Mainnet.

Оптимизм! Mainnet

Название сети: Optimistic Ethereum
Новый URL RPC https://mainnet.optimism.io
Идентификатор цепи: 10
Символ валюты: ETH
Заблокируйте URL-адрес Explorer: https://optimistic.etherscan.io

Оптимизм! Testnet

Сетевое имя: Оптимизм Кован
Новый URL RPC https://kovan.optimism.io
Идентификатор цепи: 69
Символ валюты: ETH
Заблокируйте URL-адрес Explorer: https://kovan-optimistic.etherscan.io

2. Получение средств на уровне 2

Выполните следующие шаги, чтобы получить средства в «Оптимизме»! Testnet:

Включите тестовые сети в вашей метамаске.
Получите ETH Кована из крана.
Используйте «Мост» для отправки средств из L1 в L2.

3. Создать DApp

Умный контракт

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

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

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

Войдите в полноэкранный режим Выход из полноэкранного режима

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="account_address" style="display: none"></p>
  <p id="web3_message"></p>
  <p id="contract_state"></p>
  <input type="input"  value="" id="_hello"></input>
  <input type="button" value="Set Hello" onclick="_setHello()"></input>
  <br>
  <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

blockchain_stuff.js

const NETWORK_ID = 69

const MY_CONTRACT_ADDRESS = "0xADDRESSDELCONTRATOAQUÍ"
const MY_CONTRACT_ABI_PATH = "./json_abi/MyContract.json"
var my_contract

var accounts
var web3

function metamaskReloadCallback() {
  window.ethereum.on('accountsChanged', (accounts) => {
    document.getElementById("web3_message").textContent="Se cambió el account, refrescando...";
    window.location.reload()
  })
  window.ethereum.on('networkChanged', (accounts) => {
    document.getElementById("web3_message").textContent="Se el network, refrescando...";
    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: Porfavor conéctate a 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 () {
          my_contract = await getContract(web3, MY_CONTRACT_ADDRESS, MY_CONTRACT_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()
              document.getElementById("account_address").style.display = "block"
            } else
            {
              document.getElementById("connect_button").style.display = "block"
            }
          });
        };
        awaitContract();
      } else {
        document.getElementById("web3_message").textContent="Please connect to Rinkeby";
      }
    });
  };
  awaitWeb3();
}

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

loadDapp()

const onContractInitCallback = async () => {
  var hello = await my_contract.methods.hello().call()

  var contract_state = "Hello: " + hello

  document.getElementById("contract_state").textContent = contract_state;
}

const onWalletConnectedCallback = async () => {
}


//// Functions ////

const setHello = async (_hello) => {
  const result = await my_contract.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/MyContract.json и поместите в него ABI, сгенерированный Remix или любым другим компилятором, который вы используете.

4. Теперь мы готовы к тестированию Dapp

Сначала мы установим веб-сервер.

npm install -g lite-server

Войдите в полноэкранный режим Выход из полноэкранного режима

Теперь мы поднимаем эту тему.

lite-server

Войдите в полноэкранный режим Выход из полноэкранного режима

Результат находится в вашем браузере по адресу http://localhost:3000.

Спасибо за просмотр этого урока!

Следите за нами на dev.to и Youtube, чтобы узнать обо всем, что связано с разработкой блокчейна на английском языке.

Добавить комментарий