Wallet2 : 메타마스크(Meta Mask) 연동하기

탈중앙화에 민감한 사용자는 Luniverse PKMS처럼 개인키(Private Key)를 서버에서 관리해주는 방식보다 자신이 직접 개인키를 이용하여 DApp 을 사용할 수 있는 방법을 선호합니다.

루니버스 월렛 브리지 클라이언트는 크롬 브라우저의 플러그인 방식으로 가장 많이 사용되는 메타마스크를 이용하여 DApp 을 사용할 수 있도록 지원하고 있습니다.

DApp과 메타마스크 연동하기

Luniverse Side Token을 메타마스크를 통해 송금하는 방법을 설명합니다.
*Metamask의 자세한 연동 사항은 메타마스크 지원센터 를 통해 확인바랍니다.

  • ##메타마스크 설치 및 실행하기
  1. 메타마스크에 접속하여 GET CHROME EXTENSION 클릭후 메타마스크를 설치합니다.
  1. 크롬 실행 후, 우측 상단에 메타마스크 아이콘 클릭하여 메타마스크를 실행할 수 있습니다.

메타마스크에 루니버스 사이드체인 연동하기

  1. [Console]에서 메타마스크를 연동하고자 하는 사이드체인의 아이콘을 클릭하여 [Chain Overview]페이지로 이동합니다.
  1. 메타마스크에 연동하고자 하는 노드명(Node Name)을 선택하여 노드 상세페이지로 이동합니다.
  1. 노드 상세페이지의 [RPC HTTP Endpoint]를 복사합니다.
  1. 크롬 브라우져 상에서 메타마스크를 실행합니다.
  2. 메타마스크 화면 우측 상단의 [네트워크 설정] 아이콘을 클릭하여 [사용자 정의 RPC] 설정 페이지로 이동합니다.
  1. 3에서 복사한 [RPC HTTP Endpoint] 값을 [New Network] 란에 입력한 후 저장하면 해당 루니버스 사이드체인과 연동이 완료됩니다.

메타마스크의 EOA에 Side Token 연동 하기

  1. [Console]에서 메타마스크를 연동하고자 하는 ST의 아이콘을 클릭하여 [Side Token Overview]페이지로 이동합니다.
  1. ST의 [Contract Address]를 복사합니다.
  1. 메타마스크를 실행합니다. 왼쪽 상단의 햄버거 메뉴를 클릭하여 메뉴를 오픈합니다.
  1. 화면 하단의 [토큰 추가] 버튼을 클릭합니다.
  1. [사용자 정의 토큰 추가] 탭을 클릭합니다.

  2. Token Contract Address에 2에서 복사한 ST의 [Contract Address]를 붙여 넣습니다.

  3. [다음] 버튼을 클릭합니다.

  4. 메타마스크에 ST 연동이 완료되었습니다.

Luniverse ST를 메타마스크 EOA에 전송하기

  1. 메타마스크를 실행합니다. 위측 [Account]를 클릭하여 EOA 주소를 복사합니다.
  1. [Console]에서 메타마스크에 연동되어있고, 메타마스크로 송금하고자 하는 ST를 클릭하여 [Side Token Overview] 페이지로 이동합니다.
  1. 왼측 메뉴의 [Side Token Transfer] 를 클릭하여 [Side Token Transfer] 페이지로 이동합니다.
  1. 우측 상단의 [Transfer Side Token]을 클릭하여 [Transfer Side Token]페이지로 이동합니다.
  1. 수신자(Recipient)에 1에서 복사한 메타마스크 EOA 주소를 붙여넣습니다.
  2. 공금 금액(Amount Sent)에 송금하고자 하는 ST 수량을 입력합니다.
  3. 추가설명(Comment)에 해당 송금에 대한 내용 설명을 입력합니다.
  4. [Transfer] 버튼을 클릭하여 송금을 시작합니다.
  1. 토큰 송금 트랜잭션의 서명을 하기 위한 개인키(Private Key) 입력 창이 팝업됩니다. 개인키(Private Key)를 입력하거나 키스토어(Keystore) 파일을 업로드하고 패스페이즈(Passphrase)를 입력하면 트랜잭션 서명이 진행됩니다. 트랜잭션 사인이 성공하면 팝업에 "ST전송 확인(SIDE_TOKEN.TRANSFERS_RAW_TX_CONFIRM)" 메시지가 출력 됩니다. [OK] 버튼을 클릭하면 토큰 송금이 진행됩니다.
  1. 메타마스크를 실행하여 ST의 잔고가 변경된 것을 확인할 수 있습니다.

Wallet Bridge로 메타마스크 사용하는 End User 트랜잭션 서명하기

  1. 메타마스크를 사용하는 최종 사용자(End User)는 사전에 메타마스크 주소를 발급받아두어야 합니다.

트랜잭션 서명 과정

  1. 최종 사용자가 DApp 에서 트랜잭션을 일으키면 DApp 은 루니버스로 TX API를 호출합니다.
curl -X POST 'https://stg-api.luniverse.io/tx/v1.0/transactions/transfer' \
--header 'Authorization: Bearer KcUSCE7iCZoJfud8iLdmBLdZBrRyVai4e5o6x8d9c4ZpYu2h5mwtmhEPm6285f23' \
--header 'Content-Type: application/json' \
--data '{   "from": "0xab9ccaBe5075273d0D422236176ffb28A15C470F",
     "inputs": { 
               "receiverAddress": "0x3b1f1faa2bb0b913f9c50723d014c1bccc9b8020",
               "valueAmount": "1000000000000000000" 
     }
}'
  1. 루니버스 TX API 는 외부에서 발급된 Wallet Address 인지 확인한 후에 서명되지 않은 트랜잭션을 생성하여 DApp 에 반환합니다.
{ result: true,
  data:
   { from: '0xab9ccaBe5075273d0D422236176ffb28A15C470F',
     rawTx:
      { from: '0xab9ccaBe5075273d0D422236176ffb28A15C470F',
        to: '0x9f979Da4F511A3E689e5b837D065C0794e92b90E',
        data:
         '0xa9059cbb0000000000000000000000003b1f1faa2bb0b913f9c50723d014c1bccc9b80200000000000000000000000000000000000000000000000000de0b6b3a7640000',
        nonce: '0x0',
        gasLimit: '0x989680',
        gasPrice: '0x1388' 
      } 
   } 
}
  1. DApp 은 아래와 같이 web3.eth.sendTransaction 을 호출하여 서명되지 않은 트랜잭션을 메타마스크로 전달합니다.
  2. 사용자에게는 메타마스크로 트랜잭션 사인을 요청합니다.
if ( result != undefined && result.data != undefined && result.data.rawTx != undefined ) {
   if (typeof ethereum !== 'undefined') {
          ethereum.enable().catch(console.error)
          const from = web3.eth.accounts[0];

          const rawTx = result.data.rawTx;
          console.log('sendTransaction to metamask',rawTx);

          web3.eth.sendTransaction(rawTx, function(err,result) {
            if ( err ) return console.error(err);
            console.log('SIGNED:' + result);
          }
     }
}
  1. 메타마스크는 트랜잭션 사인요청을 받으면 최종 사용자에게 트랜잭션 서명을 위한 팝업창을 띄웁니다.
  1. 사용자는 메타마스크에서 트랜잭션을 확인하고 트랜잭션에 서명합니다. 서명한 트랜잭션은 메타마스크에서 설정한 사이드체인상에서 실행된 후 블록체인에 기록됩니다.