Web3 для фронтендера

WWW, W3, Web

Web 2.0

Таймлайны

Web3

Децентрализованный Интернет
(блокчейн, токены)

Разница

• Web1: чтение
• Web2: чтение и публикация
• Web3: чтение, публикация и владение

Преимущества Web3

Децентрализация

Не регулируется

Платежи встроены

Не требует доверия

Децентрализованное приложение
(DApps, dApp)

Примеры dApps

Кошельки

> 150

Криптовалютные биржи

Игры

Социальные сети

Децентрализованные финансы (DeFi)

Идентификация

Аналитика

Коллекционирование

Web 2.5

Архитектура

Архитектура

• Хранилище ➡️ Блокчейн
• Бэкенд ➡️ Смарт-контракт
• 🆕 Node Provider
• Фронтенд

Хранилище ➡️
Блокчейн

Бэкенд ➡️
Смарт-контракт

Hello World

        // HelloWorld.sol
        pragma solidity ^0.8.17;
         
        contract HelloWorld {
            string public greet = "Hello World!";
        }
      

Демо

🆕 Node Provider

Web3 as a service

Фронтенд

Ethereum Provider

• buidler.dev
• ethers.js
• eth-provider
• MetaMask
• WalletConnect
• web3.js

Connect wallet

Connect wallet (1)

        <script src="https://.../web3.min.js"></script>
        <input
          type="button"
          value="Connect Wallet"
          onclick="connect();"
        >
      

Connect wallet (2)

        async function connect() {
          if (!window.ethereum) return;
          await window.ethereum.request({ method: "eth_requestAccounts" });
          window.web3 = new Web3(window.ethereum);
          console.log(`Wallet: ${web3.eth.currentProvider.selectedAddress}`);
        }
      

Полезные утилиты

        Web3.utils.sha3("example")
        // '0x6fd43e7cffc31bb581d7421c8698e29aa2bd8e7186a394b85299908b4eb9b175'
         
        Web3.utils.toWei('1', 'ether') // 1000000000000000000
        Web3.utils.toWei('1', 'gwei') // 1000000000
         
        Web3.utils.padLeft('0x3456ff', 20); // '0x000000000000003456ff'
      

Читаем данные из блокчейна

        import Web3 from 'web3'
        const web3 = new Web3("https://mainnet.infura.io/v3/<API-KEY>")
         
        web3.eth.getBalance("0x1b3cB81E51011...").then(console.log)
        // result: BigInt(560000000065000000000000)
         
        web3.eth.getBlockNumber().then(console.log)
        // result: BigInt(13497160)
      

Вызываем метод смарт-контракта

        import Web3 from 'web3'
        const web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");
         
        const abi = [...];
        const address = "0xe435e2a3cb5dc62c75d8bb2dba8470771405911d";
        const contract = new web3.eth.Contract(abi, address);
         
        contract.methods.getValue().call().then(console.log);
      

Подписываемся смарт-контракт

        ...
        const abi = [...];
        const address = "0xe435e2a3cb5dc62c75d8bb2dba8470771405911d";
        const contract = new web3.eth.Contract(abi, address);
         
        const subscription = await contract.events.VALUE_CHANGE();
        subscription.on("data", console.log);
      

Реализации для React

Реализации для React

• web3-react
• useDApp
• wagmi

@web3modal/react (1)

        npm install
          wagmi
          viem
          @web3modal/ethereum
          @web3modal/react
      

@web3modal/react (2)

          return (
            <>
              <WagmiConfig config={wagmiConfig}>
                <HomePage />
              </WagmiConfig>
              <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
            </>
          )
      

@web3modal/react (3)

        import { Web3Button } from '@web3modal/react'
         
        function HomePage() {
          return <Web3Button />
        }
      

Тестирование

Нужен тестовый стенд

Mainnet
(основная сеть)

Testnet
(тестовая сеть)

Транзакции платные

Hardhat

        $ mkdir my-smart-contract
        $ cd my-smart-contract
        $ npm init
        $ npm install --save-dev hardhat
      

Hardhat

        $ npx hardhat
         

        ? What do you want to do? …
        ❯ Create a JavaScript project
          Create a TypeScript project
          Create an empty hardhat.config.js
          Quit
      

Hardhat

        $ npx hardhat node
        Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/
         
        Accounts
        ========
        Account #0: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 (10000 ETH)
        Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efca...
      

Демо

Деплой

Hardhat

        $ npx hardhat run --network %your-network% scripts/deploy.js
      

Fleek

        $ npm install -g @fleekhq/fleek-cli
        $ fleek site:init
        $ fleek site:deploy
      

Демо

Чеклист

Включи Web3 в своём фронтенде

Вопросы?

• 👨 Алексей Авдеев
• 🌐 github.com/avdeev
• 🌐 twitter.com/avdeev_alexey
• 🌐 vk.com/alexey.avdeev
• 🌐 Продуктовая лаборатория Mish

Оцените доклад