## 首次開啟網頁，Metamask 會無法被偵測到，點擊錢包連結後出現錯誤

## 前情提要
- 當瀏覽器同時安裝了 `Coinbase Wallet` 與 `MetaMask Wallet`，首次進入網站（關閉分頁重新開啟 or 第一次開啟瀏覽器後開啟網站），MetaMask wallet 會無法被偵測到，導致點擊錢包出現錯誤（如下圖）
- 出現錯誤之後，畫面就會卡在 `wallet connect dialog`
<img src="https://hackmd.io/_uploads/S1tpxTsg6.png" width="40%" />

## 目標
- 讓已同時安裝 `Coinbase Wallet` 與 `MetaMask Wallet` 的用戶順利連結 MetaMask Wallet
- 利用引導的方式，繞過 MetaMask 偵測不到的問題，順利避開錯誤發生

## 解決方案
### 1. 不顯示 Metamask wallet 的選項（不合理🐒）
- 有項目是這麼做，例如：[MoonBirds](https://www.proof.xyz/moonbirds)
### 2. 顯示 Metamask wallet 的選項，點擊後引導流程

#### [Launchcaster](https://www.launchcaster.xyz/)
<img src="https://hackmd.io/_uploads/HJhpp2ixp.jpg" width="25%" />
<img src="https://hackmd.io/_uploads/rynTT3oe6.jpg" width="25%" />
<img src="https://hackmd.io/_uploads/Hyha63ox6.jpg" width="25%" />
<img src="https://hackmd.io/_uploads/SynTphjea.jpg" width="25%" />

#### [ENS](https://app.ens.domains/)
<img src="https://hackmd.io/_uploads/rJkr0hjgp.jpg" width="25%" />
<img src="https://hackmd.io/_uploads/HyJBAnoxT.jpg" width="25%" />
<img src="https://hackmd.io/_uploads/S1yHAnjlp.jpg" width="25%" />

#### [Foundation](https://foundation.app/)
<img src="https://hackmd.io/_uploads/rytJypilT.jpg" width="25%" />
<img src="https://hackmd.io/_uploads/HkYyJTigp.jpg" width="25%" />

## 結論
- MataMask 錢包連結引導流程，並在最後一步驟提供 "Refresh" 的按鈕🐒，點擊後即可重新整理網頁，並重新選擇錢包做連結