Metamask api 활용하기

블록체인 송금 시스템 중 하나인 metamask를 활용해서 작업해달라는 고객의 요청에 metamask api 로 이더리움 송금 결제를 작업하였다.
그렇게 어려운 작업은 아니었다. 문제되는 부분은 내가 이 이더리움 송금이나 wallet에 제대로된 개념이 없어서 실수하지 않을까하는 부분이다.
일단 작업할 수 있는 코드를 찾아서 작업했다. 설명하자면

  const onPaymentMetamask = async () => {
    try {
      const ethereumProvider = service.getValue(window, "ethereum", null)

      if (!ethereumProvider) {
        Modal.confirm({
          centered: true,
          title: "Please install metamask app",
          async onOk() {
            window.open("https://metamask.io/download/")
          }
        })
      } else {
        await ethereumProvider.send("eth_requestAccounts")
        const provider = new ethers.providers.Web3Provider(ethereumProvider)
        const signer = provider.getSigner()
        ethers.utils.getAddress("0x879f0a018Fc581403EBfCD957B0495de6E1E172D")
        const tx = await signer.sendTransaction({
          to: "0x879f0a018Fc581403EBfCD957B0495de6E1E172D",
          value: ethers.utils.parseEther("0.05")
        })
        if (tx) {
          Modal.success({ content: "payment has been successed" })
          const createVariable = {
            ...formValues,
            isPromoted: true
          }
          const result = await createProject({ variables: { CreateProjectInput: createVariable } })
          if (result) {

          }
        } else {
          Modal.error({ content: "payment has been failed" })
        }
      }
    }
    catch (error) {
      Modal.error({ content: error.code })
      router.push("third");
    }
  }

결제 부분 코드는 이렇다.
설명하자면

const ethereumProvider = service.getValue(window, "ethereum", null)

      if (!ethereumProvider) {
        Modal.confirm({
          centered: true,
          title: "Please install metamask app",
          async onOk() {
            window.open("https://metamask.io/download/")
          }
        })
      } else {
   	...

이부분에서 window 즉 브라우저에 ethereum 객체가 있는지 확인한다. 이게 무엇 이냐면 크롬브라우저에서 metamask 확장프로그램이 깔려있는지 확인하는 것이다. 만약 없다면 설치 화면으로 넘긴다.

 await ethereumProvider.send("eth_requestAccounts")
        const provider = new ethers.providers.Web3Provider(ethereumProvider)
        const signer = provider.getSigner()
        ethers.utils.getAddress("0x879f0a018Fc581403EBfCD957B0495de6E1E172D")
        const tx = await signer.sendTransaction({
          to: "0x879f0a018Fc581403EBfCD957B0495de6E1E172D",
          value: ethers.utils.parseEther("0.05")
        })

여기가 핵심인데 해당 객체에서 제공하는 send를 호출하면 메타마스크가 실행된다.
그리고 나서 getSigner 메소드를 활용하면 내가 보내는 주소, 보내는 이더리움의 양을 선택해서 보낼수 있다.
생각보다 간단했다. 크롬 브라우저에서 제공하는 확장 프로그램을 쓰면 아주 간단하다.
문제는 모바일에서 이게 잘 작동하느냐가 문제이다. 메타마스크 앱이 있다는데 이걸로 연동 및 결제가 가능할지 의문이다.
이에 대해선 확인 중에 있다.