저번 글에서 브라우저와 메타마스크 연동 및 로그인된 메타마스크 계정의 잔액 조회를 했고,
이번 글에서 추가적으로 송금 및 스마트 컨트렉트 배포를 해보려고 한다.

---

송금하기

const sendBtn = async() =>{
    
    await web3.eth.sendTransaction({
      // 컨트랙트 배포자 계정, 현재 로그인 된 계정
      from : account,
      // to : To input의 value를 가져와 state 저장한 값
      to : to, 
      // amount : amount input의 value를 가져와 state 저장한 값
      value : web3.utils.toWei(amount,"ether"),
  })
  }

---

스마트 컨트렉트 배포

동작순서

1. solidity로 sol 파일에 함수 작성

// ⭐ 라이선스를 지정하는 주석 , 맨 상단에 있어야한다.
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.13;

// 스마트 계약을 정의하는 부분
contract Counter{
  // value 라는 상태변수 선언
    uint value;
// 생성자 함수, 스마트 계약이 배포될 때 한번 실행되는 특별한 함수, 이 코드는 빈상태.
    constructor(){}
// setValue 라는 함수 정의 하는데 public :공개적으로 접근 가능하게 만들고,
//_value 매개변수를 받고, unit256은 양의 정수의 데이터 타입을 정의
    function setValue(uint256 _value) public{
        // 상태 변수 변경
        value = _value;
    }
 // getValue라는 함수 정의, public : 공개적으로 접근 가능하게 만들고,
 // ⭐⭐⭐ view : 스마트 계약의 상태를 변경하지않고 읽기 전용인 함수를 만든다.
 // 트랜잭셕을 생성하지않고 호출 가능하며, 조회 관련된 함수에 주로 사용, 가스비용 발생 X
 // ⭐ returns : 반환 값의 데이터의 타입을 정의 
    function getValue()public view returns(uint256){
        return value;
    }
}

---

2. abi, bin 파일 생성 및 abi 선언

파일 생성

npx solc --bin --abi ./파일이름.sol

abi 선언

const abi = [
    {inputs:[],stateMutability:"nonpayable",type:"constructor"},
    {inputs:[],name:"getValue",outputs:[{internalType:"uint256",name:"",type:"uint256"}],stateMutability:"view",type:"function"},
    {inputs:[{internalType:"uint256",name:"_value",type:"uint256"}],name:"setValue",outputs:[],stateMutability:"nonpayable",type:"function"},
  ];

---

3. 각각의 버튼 눌렀을 때 동작하는 함수 작성

컨트렉트 배포 버튼 클릭시 동작 함수

const contractDeploy = async () => {
	// 트랜잭션 생성
    await web3.eth.sendTransaction({
      // 컨트랙트 배포자 계정
      from : account,
      // gas 제한량
      gas : "300000",
      // 컴파일된 컨트랙트 바이트 코드
      data : "bin 파일의 내용 붙여넣기"
    }).then(data => {
      // ⭐⭐⭐ CA , ContractAddress 주소 state 저장.
      console.log(data.contractAddress)
      setCa(data.contractAddress);
    });
  }

---

조회버튼 클릭시 동작 함수

const check = async()=>{

    //⭐ web3.eth.abi.encodeFunctionCall(): 스마트 계약 함수 호출을 위한 데이터를 인코딩하는데 사용.
    //⭐ (abi[1],[]) : abi 배열의 인덱스 1인 함수를 호출하고, 인자로는 넘기는게 없다는 뜻
    //⭐ getCodeHash 의 출력값은 0x20965255 이런형식이고, 함수 호출을 위한 데이터가 인코딩된 결과이다.
    //⭐ 이후, 트랜잭션을 보내거나 스마트 컨트렉트 상호작용하는데 사용된다.
    const getCodeHash = await web3.eth.abi.encodeFunctionCall(abi[1],[]);
        console.log(getCodeHash); // 출력값은 0x20965255

        // call 읽기 전용
        // 원격 프로시저 호출 값을 조회
        //⭐ web3.eth.call() : 스마트 컨트렉트에 데이터를 요청.
        const data = await web3.eth.call({
          // to : CA 주소
            to : ca,
          // data : 함수 호출을 위한 데이터
            data : getCodeHash,
        });
        console.log("data",data);

        //⭐ web3.utils 안의 메서드를 확인하고 싶을 때 사용.
        console.log(web3.utils);
        
        //⭐ 스마트 컨트렉스에서 반환 데이터 data를 BigInt 형태로 받고, 10진수로 문자열을 표현.
        const result = await web3.utils.toBigInt(data).toString(10);
        setCnt(result);
        return parseInt(result);
  }

---

증가,감소버튼 클릭시 동작 함수
🚨 증가 함수에는 매개변수를 +1 , 감소 함수에는 매개변수를 -1 만 변경하고, 나머지는 같다.

const increase = async() =>{
    const _getvalue = await check();
  		
        const setCodeHash  = await web3.eth.abi.encodeFunctionCall(abi[2],[_getvalue + 1]);
        
        // ⭐setCodeHash 의 값이 0x552410770000000000000000000000000000000000000000000000000000000000000003
        // 이렇게 나오는데, 0x55241077는 함수의 시그니처(이름과 인수)를 해시화환 값
        // 맨뒤에 value 값은 함수에 전달되는 인수 데이터
        // 가운데 0 들은 데이터의 길이를 일정하기 유지하기 위한 단순 패딩.⭐
        console.log("setCodeHash ",setCodeHash);

        const tx = {
            from : account, //트랜잭션을 발생시키는 계정
            to : ca, // CA 계정 주소
            data : setCodeHash,
            gas : 500000,
            gasPrice : 200000000,
        }
        const data = await web3.eth.sendTransaction(tx);
        console.log(data);
        check();
        balanceBtn();
  }

---

🤔 트랜잭션을 발생시킬 때, 가스비용을 정한다. 지정하지 않아도, 스마트 컨트렉트 함수를 호출하기 때문에
네트워크 기본값으로 비용이 청구가 되는데, 그럼 왜 ❓❓❓ 가스 비용을 지정하는가 ❓❓❓
-> 우선순위와 처리시간을 위해 사용자가 가스비용을 조절하는것.