전체적인 구조

이 글은 https://docs.metamask.io/guide/ 를 보고 전체적인 구조와 내용을 정리한 글입니다.

1️⃣ Guide

1. 소개

a. 왜 메타마스크인지

안전하고 유용한 이더리움 베이스 웹사이트 위해 만들어짐
계정 관리하고 유저들을 블록체인에 연결함

b. 계정 관리

다양한 방식으로 계정 관련

c. 블록체인 연결

이미 이더리움 블록체인 + 테스트 네트워크에 대한 연결리 로드되어있음
Ethereum 호환 JSON RPC API 를 노출하는 모든 블록체인과 호환됩니다. (새 창을 엽니다), 맞춤형 및 사설 블록체인을 포함합니다. 개발을 위해 Ganache 와 같은 테스트 블록체인을 실행하는 것이 좋습니다
우리는 지속적으로 새로운 프라이빗 블록체인이 생성되고 있음을 알고 있습니다. MetaMask를 자체 사용자 지정 네트워크와 통합하는 데 관심이 있는 경우 이미 많은 네트워크에서 동일한 작업을 수행할 수 있도록 지원하는 API가 있습니다.

→ L2를 사용하는 방법

d. 새로운 Dapp 개발자

2. 시작하기

a. 기본 고려사항

window.ethereum이 undefined가 아니면 메타마스크가 설치돼있다는 뜻
Test Network 돌리는 법
메타마스크 detect하는 법
user상태 아는 법
- 상세
  - What is the current network?
  - What is the current account?
    
    Both of these are available synchronously as ethereum.networkVersion and ethereum.selectedAddress. You can listen for changes using events too, see (the API reference).
메타마스크에 연결하는 법
- 예제코드랑 → 버튼, 코드 제공 (눌러보고 연결해볼 수 있도록)
- 상세 - async, await 으로 설명

b. 편한 라이브러리 선택하기

provider API는 이더리움 json-RPC를 wrapping함 → ethers나 web3.js 나 등등 프로바이더랑 인터렉트하기 위한 라이브러리를 찾아봐 ! 그럼 lower-level API 없이 편리하게 사용할 수 있어 !

3. 용어

a. 용어들 어려우니까 이런 거 읽어봐

Web3를 처음 접하는 경우 MetaMask의 블록체인 소개 기사를 살펴보십시오. 우리의 지식 기반에서.
그리고 경험 수준에 상관없이 ConsenSys의 블록체인 용어집 을 북마크하세요. 정기적으로 업데이트되는 많은 정보 소스의 통합입니다.

4. Dapps 초기 세팅

기본적으로 편리한 라이브러리를 사용한다해도 몇 가지 기본적인 사항이 필요함

a. contract 네트워크

올바른 네트워크에 연결이 되어있는지 (메인넷? 테스트넷? → 비용을 피하기 위해 일단 테스트넷에 배포하기를 선택하게될거야 ~ )
최종 배포 네트워크에 관계 없이 사용자는 엑세스 할 수 있어야 함

b. contract 주소

이더리움의 모든 계정에는 외부 키 쌍 계정이든 스마트 계약이든 주소가 있습니다. 스마트 계약 라이브러리가 계약과 통신하려면 정확한 주소를 알아야 합니다. 계약을 배포한 경우 주소를 찾는 방법을 알고 있을 수 있지만 이제 막 시작하는 경우 계약 주소 찾기에 대한 지식 베이스 설명을 확인하십시오.(새 창을 엽니다)

c. contract ABI

이더리움에서 ABI 사양 사용자 인터페이스가 이해할 수 있는 방식으로 스마트 계약의 인터페이스를 인코딩하는 방법입니다. 이것은 메소드를 설명하는 객체의 배열이며, 이 주소와 주소를 계약 추상화 라이브러리 ABI에 제공하면 제공할 메소드와 해당 메소드를 호출하기 위해 트랜잭션을 구성하는 방법에 대해 해당 라이브러리에 알려줍니다.
예제 라이브러리는 다음과 같습니다. - web3.js ethers

d. contract bytecode

웹 앱이 미리 컴파일된 새로운 스마트 계약을 게시하려는 경우 일부 bytecode. 이 경우 계약 주소를 미리 알지 못하지만 대신 게시하고 거래가 처리되는지 지켜본 다음 완료된 거래에서 최종 계약 주소를 추출해야 합니다.
바이트코드에서 컨트랙트를 퍼블리싱하는 경우, 여전히 ABI상호작용을 원할 것입니다! 바이트코드는 최종 계약과 상호 작용하는 방법을 설명하지 않습니다

e. contract 소스코드

웹사이트에서 사용자가 Remix 와 같이 스마트 계약 소스 코드를 편집하고 컴파일할 수 있도록 허용하려는 경우 (새 창을 엽니다), 전체 컴파일러를 가져올 수 있습니다. 이 경우 해당 소스 코드에서 바이트 코드와 ABI를 파생시키고 결국에는 해당 바이트 코드가 게시되는 완료된 트랜잭션에서 계약 주소를 파생시킵니다.

5. Accounts에 접근하는 방법

사용자 계정은 식별자 및 트랜잭션 서명을 포함하여 Ethereum의 다양한 컨텍스트에서 사용됩니다. 사용자에게 서명을 요청하거나 사용자가 거래를 승인하도록 하려면 사용자의 계정에 액세스할 수 있어야 합니다. 아래 wallet methods에는 서명 또는 거래 승인이 포함되며 모두 기능 매개변수로 보내는 계정이 필요합니다.

eth_sendTransaction
eth_sign - (안전하지 않고 사용하지 않는 것이 좋습니다)
eth_personalSign
eth_signTypedData

사용자와 연결 되면 을 선택 하여 현재 계정을 언제든지 다시 확인할 수 있습니다다.

ethereum.selectedAddress.

6. Transactions 보내기

eth_sendTransaction 로 트랜젝션들을 보낼 수 있음
tansaction parameters들

2️⃣ API 레퍼런스

1. Ethereum Provider api

MetaMask injects a global API into websites visited by its users at window.ethereum

https://www.npmjs.com/package/@metamask/detect-provider → 이걸 통해 detected하는 것을 추천함

기본적 사용법 : Ethereum provider를 감지 → user가 연결된 이더리움 네트워크 감지 → 유저의 이더리움 계좌를 가져옴
- provider api만 있으면 이런 것들 가능 → 더 높은 레벨의 추상화를 원하면 ethers.js같은 라이브러리를 사용하는 것이 좋다 !
체인 아이디 : mainnet, testnet…
프로퍼티들 … ethereum.isMetaMask → 근데 이것은 표준은 아님
메소드 : ethereum.isConnected() .. request
이벤트 : accountsChanged, chainChanged , connect, disconnect, message
에러 타입

The [ethereum.request(args) method](https://docs.metamask.io/guide/ethereum-provider.html#ethereum-request-args) throws errors eagerly. You can often use the error code property to determine why the request failed. Common codes and their meaning include:
- 4001
  - The request was rejected by the user
- 32602
  - The parameters were invalid
- 32603
  - Internal error
프로바이더 사용법
실험적인 API
레거시 API, 속성, 메소드, 이벤트

2. Provider 마이그레이션 가이드

원래 window.web3를 주입해줬었는데 그것에 대한 지원을 멈췄다 → 여전히 이걸 사용하고 있는 서비스들을 위해 더미 오브젝트를 주입하고 있지만 이젠 쓰지 않음

대신 window.ethereum에 이런 것들을 만들었어

이제 window.web3 를 window.ethereum 로 대체할 수 있는 방법을 알려줄게 ~

3. RPC API

[ethereum.request(args) method](https://docs.metamask.io/guide/ethereum-provider.html#ethereum-request-args) 를 RPC API를 wrapped하는 용으로 사용하고 있음.

이더리움 JSON-RPC API들은 이더리움 위키를 봐봐. 그거 보고 쓰면돼
근데 제한된 Method가 있어 → 권한이 있어야만 호출할 수 있어.

MetaMask는 EIP-2255 를 통해 Web3 지갑 권한을 도입했습니다. (새 창을 엽니다). 이 권한 시스템에서 각 RPC 방법은 제한 되거나 제한되지 않습니다 . 메서드가 제한된 경우 호출자는 해당 권한이 있어야 해당 메서드를 호출할 수 있습니다. 한편, 무제한 방법에는 해당 권한이 없습니다. 그들 중 일부는 성공하기 위해 여전히 권한에 의존하고 있습니다(예: 서명 방법에는 eth_accounts서명자 계정에 대한 권한이 있어야 함). 일부는 사용자의 확인이 필요합니다(예: wallet_addEthereumChain).
- 권한 인터페이스
```
  interface Web3WalletPermission {
    // The name of the method corresponding to the permission
    parentCapability: string;

    // The date the permission was granted, in UNIX epoch time
    date?: number;
  }
```
- 종류
  - 기본적으로 설명 - 필요한 파라미터(있으면) - 리턴값 - 설명 - 예제의 구조로 설명
  - 메타마스크 팝업으로 사용자가 식별할 이더리움 주소를 제공하도록 요청 : eth_requestAccounts
  - 호출자의 현재 권한을 가져옴, Web3WalletPermission 이 인터페이스에 대한 배열이 리턴됨. : wallet_getPermissions
  - 메타마스크 팝업으로 사용자에게 주어진 권한을 요청함 : wallet_requestPermissions
제한되지 않은 것들은 이런 식으로 파라미터 넘겨서 쓸 수 있어
- 종류
  - MetaMask가 주어진 암호화된 메시지를 해독하도록 요청합니다, 아직 메타마스크 모바일에서는 사용 불가 : eth_decrypt
  - 사용자가 공개 암호화 키를 공유하도록 요청 : eth_getEncryptionPublicKey
  - MetaMask에 지정된 체인을 추가하도록 사용자에게 요청하는 확인을 생성합니다. 사용자는 체인이 추가되면 체인으로 전환하도록 선택할 수 있습니다.: wallet_addEthereumChain
  - 메타마스크에 온보딩 게시자로 요청 사이트를 등록 : wallet_registerOnboarding
    - 메타마스크 온보딩 이후 사용자를 본 사이트로 리디렉션 할 수 있음 → 직접 호출하는 대신
      
      [@metamask/onboarding](https://github.com/MetaMask/metamask-onboarding) 을 하면 됨
  - 사용자가 MetaMask에서 토큰을 추적하도록 요청: WatchAssetParams
모바일에 특화된 RPC메소드들이 있어
- 종류
  - wallet_scanQRCode : 사용자가 기기 카메라로 QR코드 스캔하도록 요청

4. Signing Data

데이터 서명 : 각 사용자가 암호화 키를 사용할 수 있도록 하므로 웹 사이트는 이러한 서명을 다양한 용도로 사용할 수 있습니다

3️⃣ Best Practices

1. 너의 Contract의 메소드 이름을 등록해봐

2. 유저들과 함께 토큰을 등록해봐

3. 네 앱의 아이콘을 정의해봐

사이트 만들어서 로그인 리퀘스트 보낼 때 메타마스크가 너의 사이트 아이콘을 나타내는 모달을 렌더할거야

4. 온보딩 라이브러리

@metamask/onboarding를 통해 가능
예시 ) React+js / html+js (ts 타입 지정 방법?)

5. 메타마스크 확장 제공자

다른 웹 익스텐션으로부터 메타마스크 프로바이더에 접근할 수 있게 해주는 모듈

npm install metamask-extension-provider -s

에러 처리 따로 해주어야 함 → 메타마스크 연결 안됐다거나 이럴 때

You must have browserify installed (npm i -g browserify).

4️⃣ Mobile

1. 소개

몇 초 만에 사용자를 온보딩합니다. 이미 지갑 사용자이든 완전히 새로운 사용자이든 상관없이 시작할 수 있도록 안내합니다!
빠르게 성장하는 대규모 사용자 기반에 dapp을 제공하십시오.
사용자는 MetaMask web3 브라우저에서 바로 분산 웹의 다른 사용 사례를 발견할 수 있습니다.
사용자는 MetaMask 브라우저에서 귀하의 dapp을 사용하든 다른 기본 브라우저나 기본 모바일 앱 또는 데스크탑을 선호하든 상관없이 MetaMask 지갑으로 서명할 수 있습니다. [* Wallet Connect를 지원하는 dapp에서 작동]
다양한 국가에서 지원되는 최고의 요율로 암호화폐를 쉽게 구매하세요.
암호화 자산 관리 - 토큰, 수집품 보기 또는 거래
가족과 친구에게 지불금 보내기(무가스* 및 일반 거래 - 원하는 대로)
친구, 고용주 등에게 지불을 요청하십시오.
앞으로 더 흥미진진한 것들이 많이 준비되어 있으니 계속 지켜봐 주세요. 이제 시작에 불과합니다 😉

2. 사이트 가능여부 체크리스트

3. Best Practices

프로바이더
지갑 연결
deeplinking
- 상세
  
  딥링크를 사용하면 올바르게 매개변수화된 트랜잭션으로 사용자가 선호하는 지갑 애플리케이션을 즉시 호출할 수 있습니다.
  
  (인증된) 사용자만이 거래를 확인할 수 있으며 지갑은 웹, 모바일, 데스크탑 앱이 될 수 있습니다.
  
  QR 코드에 포함된 URL, 웹 페이지의 하이퍼링크, 이메일 또는 채팅 메시지는 느슨하게 결합된 애플리케이션 간에 강력한 교차 애플리케이션 신호를 가능하게 합니다.
  
  다음과 같은 용도로 딥링크를 사용할 수 있습니다.
  - 사용자가 MetaMask Mobile에서 직접 앱을 열어 이더리움 계정으로 애플리케이션과 상호 작용할 수 있도록 URL을 생성합니다.
  - 사용자가 다른 계정(수취인 주소, 금액, 네트워크 등의 사전 입력 매개변수 포함)으로 쉽게 결제할 수 있는 원클릭 경험 제공
  - Connext 지불 채널 요청으로 사용자가 가스리스 및 즉각적인 거래를 할 수 있도록 하십시오.
    - 이를 위해서는 사용자가 InstaPay 실험 기능을 선택해야 합니다.
테스팅 디버깅

5️⃣ Snaps

1. 소개

Snaps는 시험판 소프트웨어입니다. Snaps를 사용하려면 MetaMask Flask 를 설치 하세요.

Snaps는 누구나 안전하게 MetaMask의 기능을 확장할 수 있는 시스템입니다. "스냅"은 지갑 경험을 사용자 정의할 수 있는 격리된 환경에서 실행되는 프로그램입니다. 예를 들어 스냅은 MetaMask에 새로운 API를 추가하거나, 다양한 블록체인 프로토콜에 대한 지원을 추가하거나, 내부 API를 사용하여 기존 기능을 수정할 수 있습니다. Snaps는 이전에는 불가능했던 방식으로 MetaMask를 수정하여 web3 최종 사용자 경험을 생성하는 새로운 방법입니다.

스냅은 설치 중에 사용자가 부여한 권한에 따라 결정되는 제한된 기능 집합에 액세스할 수 있는 격리된 환경에서 실행됩니다. MetaMask의 Ethereum Provider RPC API 와 마찬가지로 스냅은 JSON-RPC를 사용하여 MetaMask와 통신합니다.

Snaps RPC API 의 일부로 문서화된 이더리움 제공자 JSON-RPC API에도 새로운 RPC 메소드가 추가되었습니다 . 이러한 새로운 방법을 통해 스냅이 MetaMask의 기능을 수정할 수 있습니다. 또한 웹 사이트에서 개별 스냅을 설치하고 통신할 수 있습니다.

추가적으로 flask관련

MetaMask Flask는 개발자 중심의 MetaMask 확장 배포판으로, 주요 MetaMask 응용 프로그램에 배포하기 전에 실험 기능을 테스트하고 검증합니다. Flask를 통해 출시되는 첫 번째 기능은 Snaps입니다. Snaps를 사용하면 web3 개발자가 런타임 시 MetaMask의 기능을 확장하여 우리의 개입 없이 새로운 종류의 dapp을 구축할 수 있습니다. MetaMask는 사용자에게 확장성을 제공하는 최초의 지갑이기 때문에 Snaps는 이더리움뿐만 아니라 전체 web3 생태계의 혁신 속도를 가속화할 준비가 되어 있습니다. 여기에서 Snap에 대한 자세한 내용을 읽을 수 있습니다 .

MetaMask는 개발자 도구임을 기억하십시오. 기능과 API가 안정적이지 않고 UX가 세련되지 않으며 일반 확장 또는 모바일 응용 프로그램과 동일한 수준의 지원을 보장하지 않습니다. Flask를 사용하면 가장 최첨단 기능에 액세스할 수 있지만 사용에 따른 위험은 사용자가 감수해야 합니다!

2. 개발 가이드

MetaMask Flask 를 설치했습니다. (새 창을 엽니다), @metamask/template-snap 복제 (새 창을 엽니다)저장소를 만들고 "Hello, World!"를 제공했습니다. 로컬 스냅. 자신만의 스냅을 개발할 때입니다.
1. 폴더구조, 스냅 프로젝트 생성 방법
snap 소스코드
1. walletdapp에 API를 노출하는 것과 마찬가지로 MetaMask Snap API를 노출하는 전역 개체입니다 window.ethereum. 를 통해 전송된 모든 메시지는 wallet.request()MetaMask에서 수신 및 처리됩니다. 외부 세계와 통신하기 위해 스냅은 핸들러 함수를 에 전달하여 자체 RPC API를 구현해야 합니다 registerRpcMessageHandler. 스냅이 외부 엔티티(dapp 또는 다른 스냅)로부터 JSON-RPC 요청을 수신할 때마다 위의 매개변수를 사용하여 핸들러 함수가 호출됩니다. → 직접 메소드를 만들어서 사용하는 얘시
snap manifest, Configuration 파일
스냅 번들 파일
스냅 개발

3. JSON-RPC API

Unrestricted Methods
- wallet_enable
- wallet_getSnaps
- wallet_installSnaps
- wallet_invokeSnap
Restricted Methods
- wallet_snap_*
- snap_confirm
- snap_getBip44Entropy_*
- snap_manageState

4. Patching 디펜던시

'TIL' 카테고리의 다른 글

2021 10월 TIL 모음 (0)	2021.10.31
20210901~20210910 TIL in Goorm (0)	2021.09.12
SOPT 3차 세미나 - React 기본 개념 props, state, hook (4)	2021.04.24
HTML Canvas와 JS 이용해서 그림판 만들기 (0)	2021.04.17
SOPT 2차 세미나 내용 개괄적 정리 (0)	2021.04.11

전체적인 구조

1️⃣ Guide

1. 소개

a. 왜 메타마스크인지

b. 계정 관리

c. 블록체인 연결

d. 새로운 Dapp 개발자

2. 시작하기

a. 기본 고려사항

b. 편한 라이브러리 선택하기

3. 용어

a. 용어들 어려우니까 이런 거 읽어봐

4. Dapps 초기 세팅

a. contract 네트워크

b. contract 주소

c. contract ABI

d. contract bytecode

e. contract 소스코드

5. Accounts에 접근하는 방법

6. Transactions 보내기

2️⃣ API 레퍼런스

1. Ethereum Provider api

2. Provider 마이그레이션 가이드

3. RPC API

4. Signing Data

3️⃣ Best Practices

1. 너의 Contract의 메소드 이름을 등록해봐

2. 유저들과 함께 토큰을 등록해봐

3. 네 앱의 아이콘을 정의해봐

4. 온보딩 라이브러리

5. 메타마스크 확장 제공자

4️⃣ Mobile

1. 소개

2. 사이트 가능여부 체크리스트

3. Best Practices

5️⃣ Snaps

1. 소개

2. 개발 가이드

3. JSON-RPC API

4. Patching 디펜던시

'TIL' 카테고리의 다른 글

티스토리툴바