Smart Contract <-> Svelte 프론트엔드 연동

Svelte Web3

clbrge/svelte-web3

 

소개

Web3 dApp을 Svelte로 만들 수 있게 도와준다.

npm i svelte-web3

yarn install svelte-web3

index.html

아래를 head에 추가한다.

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

 

예제

App.svelte 연동

아래는 MetaMask에 연동된다. 알맞은 provider 선택해서 하면 된다.

onMount에서 connect 하거나 await connect() pending 해서 렌더링 시킨다.

<script>
  import { onMount } from "svelte";
  import {
    defaultEvmStores as evm,
    connected,
    web3,
    selectedAccount,
    contracts,
  } from "svelte-web3";

  let pending = false;
  const connect = async () => {
    pending = true;
    try {
      await evm.setProvider(); // MetaMask etc

      // Browser: evm.setProvider(),
      // Localhost4: evm.setProvider("http://127.0.0.1:8545", 4),
      // LocalhostNull: evm.setProvider("http://127.0.0.1:8545", null),
      // Gnosis: evm.setProvider("https://rpc.gnosischain.com"),
      // Arbitrum: evm.setProvider("https://arb1.arbitrum.io/rpc"),

      pending = false;
    } catch (e) {
      console.log(e);
      pending = false;
    }
  };

  const disconnect = async () => {
    await evm.disconnect();
    pending = false;
  };

  onMount(async () => {
    await connect();
  });
</script>

<main>
  {#if !$connected}
    <h1>Loading MetaMask...</h1>
  {:else}
    <h1>dApp connected</h1>
  {/if}
</main>

 

App.svelte 스마트 컨트랙트 interaction

Ganache에 배포한 스마트 컨트랙트와 상호작용 하는 예제이다.

sendTx는 컨트랙트 payable 함수를 이용해 컨트랙트에 돈을 보내는 것

fetchData는 컨트랙트 데이터들을 부르는 방식이다.

<script>
  import { onMount } from "svelte";
  import {
    defaultEvmStores as evm,
    connected,
    web3,
    selectedAccount,
    contracts,
  } from "svelte-web3";

  import LOTTERY from "./abis/MyContract.json";

  const LOTTERY_ON_GANACHE = "address";

  evm.attachContract("MyContract", LOTTERY_ON_GANACHE, LOTTERY.abi);

  let pending = false;
  const connect = async () => {
    pending = true;
    try {
      await evm.setProvider(); // MetaMask etc

      // Browser: evm.setProvider(),
      // Localhost4: evm.setProvider("http://127.0.0.1:8545", 4),
      // LocalhostNull: evm.setProvider("http://127.0.0.1:8545", null),
      // Gnosis: evm.setProvider("https://rpc.gnosischain.com"),
      // Arbitrum: evm.setProvider("https://arb1.arbitrum.io/rpc"),

      pending = false;
    } catch (e) {
      console.log(e);
      pending = false;
    }
  };

  const disconnect = async () => {
    await evm.disconnect();
    pending = false;
  };

  onMount(async () => {
    await connect();
  });

  let eventReturnValue;

  const sendTx = async () => {
    try {
      $contracts.MyContract.methods
        .sendTx()
        .send({
          from: $selectedAccount,
          value: $web3.utils.toWei("0.15", "ether"),
          gasLimit: 6721975,
          gasPrice: 30000000000, // 알아서 조정
        })
        .on("transactionHash", function (hash) {
          console.log("transactionHash:", HashChangeEvent);
        })
        .on("receipt", function (receipt) {
          eventReturnValue = receipt.events.TicketsBought.returnValues.number;

          console.log("receipt:", receipt);
        })
        .on("confirmation", function (confirmationNumber, receipt) {
          console.log("confirmation", confirmationNumber);
        })
        .on("error", console.error); // If a out of gas error, the second parameter is the receipt.;
    } catch (err) {
      console.log(err);
    }
  };

  let money;
  let number;
  const fetchData = async () => {
    try {
      number = await $contracts.MyContract.methods.getLuckyNumber().call();
      money = $web3.utils.fromWei(
        await $contracts.MyContract.methods.getBalance().call(),
        "ether"
      );
    } catch (err) {
      console.log(err);
      throw new Error(err);
    }
  };
</script>

<main>
  {#if !$connected}
    <h1>Loading MetaMask...</h1>
  {:else}
    <h1>dApp connected</h1>

    <button class="button" on:click={sendTx}>Send money</button>

    {#await fetchData()}
        Loading...
    {:then _}
        {money}, {number}
    {/await}
  {/if}
</main>