# Metamask開発 共有ドキュメント

Metamask公式ドキュメント：https://docs.metamask.io/guide/ethereum-provider.html

## Web3 Browser Detection
ブラウザがMetaMaskを実行しているかどうかを確認するには、以下のコードをコピーして、Webブラウザの開発者コンソールに貼り付けてください。

if (typeof window.ethereum !== 'undefined') {
console.log('MetaMask is installed!');
}

## Metamaskの連携
MetaMaskへの「接続」または「ログイン」は、事実上「ユーザーのEthereumアカウント（複数可）にアクセスする」ことを意味します。

接続要求は、ボタンをクリックするなど、ユーザーの直接的なアクションに応じてのみ開始する必要があります。接続要求が保留されている間は、常に「接続」ボタンを無効にする必要があります。ページロード時に接続要求を開始してはいけません。

**サンプルコード**

HTML
<button class="enableEthereumButton">Enable Ethereum</button>

JS
const ethereumButton = document.querySelector('.enableEthereumButton');

ethereumButton.addEventListener('click', () => {
//Will Start the metamask extension
ethereum.request({ method: 'eth_requestAccounts' });
});

## Sending Transactions
トランザクションは、ブロックチェーン上の正式なアクションです。MetaMaskでは常にeth_sendTransactionメソッドの呼び出しで開始されます。これらは常に、外部アカウントからの署名、または単純なキーペアによって開始されます。サンプルコードでは実際に送金ボタンを押してポップアップして署名するまでが見れます。

**サンプルコード**

HTML
<button class="enableEthereumButton btn">Enable Ethereum</button>
<button class="sendEthButton btn">Send Eth</button>

JS
const ethereumButton = document.querySelector('.enableEthereumButton');
const sendEthButton = document.querySelector('.sendEthButton');

let accounts = [];

//Sending Ethereum to an address
sendEthButton.addEventListener('click', () => {
ethereum
.request({
method: 'eth_sendTransaction',
params: [
{
from: accounts[0],
to: '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
value: '0x29a2241af62c0000',
gasPrice: '0x09184e72a000',
gas: '0x2710',
},
],
})
.then((txHash) => console.log(txHash))
.catch((error) => console.error);
});

ethereumButton.addEventListener('click', () => {
getAccount();
});

async function getAccount() {
accounts = await ethereum.request({ method: 'eth_requestAccounts' });
}

## Ethereum Provider API(Polygonでも同様に使用可能)

MetaMaskは、そのユーザーが訪問するウェブサイトにグローバルAPIをwindow.ethereumで連携します。このAPIにより、ウェブサイトはユーザーのEthereumアカウントを要求したり、ユーザーが接続しているブロックチェーンからデータを読み取ったり、ユーザーにメッセージや取引への署名を提案したりすることができます。プロバイダーオブジェクトの存在は、Ethereumユーザーであることを示しています。どのようなプラットフォームやブラウザでも、Metamaskのプロバイダーを検出するために、@metamask/detect-provider（新しいウィンドウを開く）を使用します。

Ethereum JavaScriptプロバイダAPIは、EIP-1193（ opens new window）で規定されています。

// This function detects most providers injected at window.ethereum
import detectEthereumProvider from '@metamask/detect-provider';

const provider = await detectEthereumProvider();

if (provider) {
// From now on, this should always be true:
// provider === window.ethereum
startApp(provider); // initialize your app
} else {
console.log('Please install MetaMask!');
}

### Events
MetaMaskプロバイダは、Node.jsのEventEmitter (opens new window)APIを実装しています。このセクションでは、そのAPIを介して発行されるイベントの詳細を説明します。このようなイベントを聞くことができます。

ethereum.on('accountsChanged', (accounts) => {
// Handle the new accounts, or lack thereof.
// "accounts" will always be an array, but it can be empty.
});

ethereum.on('chainChanged', (chainId) => {
// Handle the new chain.
// Correctly handling chain changes can be complicated.
// We recommend reloading the page unless you have good reason not to.
window.location.reload();
});

また、リスナーの聞き取りが終わったら、リスナーを削除します。

function handleAccountsChanged(accounts) {
// ...
}

ethereum.on('accountsChanged', handleAccountsChanged);

// Later

ethereum.removeListener('accountsChanged', handleAccountsChanged);

ethereum.removeListenerの第一引数はイベント名、第二引数は第一引数のイベント名でethereum.onに渡されたのと同じ関数の参照です。

### Chain IDs
Walletをブロックチェーンに接続する場合は該当するチェーンのChainIDが必要になります。今回のコントラクトで利用するのは、Polygon Mainnetになります。

**Polygon Mainnet**
ChainID:137
Currency:MATIC

## Mobile連携
プラットフォーム間で一貫したUXを実現するために選択した接続確立のパターンは以下の通りです。

1. Dappはユーザーに接続を促す
a) Androidのシングルボタン
b) ウォレットリスト（iOS
2. ユーザーがボタンを押して接続し、選択したウォレットにリダイレクトされる
3. ウォレットが、ユーザーにセッションの承認または拒否を促す
4. ウォレットは、ユーザーに手動でDappに戻るように促す
5. ユーザーは戻る/戻るボタンを押してDappに戻る

同様のパターンは、ユーザーからの署名要求が必要な場合にも起こります。

1. Dappはユーザーを以前に選択したウォレットに自動的にリダイレクトする
2. ウォレットがユーザーにリクエストの承認または拒否を促す
3. ウォレットはユーザーに手動でDappに戻るように促す
4. ユーザーは戻る/リターンボタンを押してDappに戻る

次のセクションでは、ウォレットとDappsの両方がWalletConnect統合でモバイルリンクパターンをサポートする方法について説明します。

### Wallet Support
ウォレット内でモバイルリンクのサポートを追加するには、モバイルアプリで以下のディープリンクまたはユニバーサルリンクを登録する必要があります。

### Android
WalletConnectURI標準で定義されているwc:スキーマに登録します。

# Example
wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1?bridge=https%3A%2F%2Fbridge.walletconnect.org&key=91303dedf64285cbbaf9120f6e9d160a5c8aa3deb67017a3874cd272323f48ae

### iOS
iOSのオペレーティングシステムは、同じディープリンクスキーマに加入する複数のアプリケーションを処理するようには設計されていないため、QRCode Modalはサポートしているウォレットをオープンソースのレジストリにリストアップし、各ウォレットに特定のディープリンクまたはユニバーサルリンクを設定するように設計されています。

iOSでは、ディープリンクの代わりにユニバーサルリンクを使用することをお勧めします。ユニバーサルリンクの方がプロンプトが少なく、スムーズなUXが得られるからです。iOSでdappがモバイル接続を開始すると、以下のようなリンクが表示されます。

# For deep links
://wc?uri=wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1?bridge=https%3A%2F%2Fbridge.walletconnect.org&key=91303dedf64285cbbaf9120f6e9d160a5c8aa3deb67017a3874cd272323f48ae

# For universal links
https://example.wallet/wc?uri=wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1?bridge=https%3A%2F%2Fbridge.walletconnect.org&key=91303dedf64285cbbaf9120f6e9d160a5c8aa3deb67017a3874cd272323f48ae

## Dapp Support
qrcode-modalパッケージをインストールするだけで、このパターンをサポートすることができます。このパッケージはweb3-providerパッケージで提供されています。

npm install --save @walletconnect/qrcode-modal