Web3js
如果使用者已連接,如何自動獲取使用者的錢包資訊,但如果沒有,則不顯示元遮罩彈出?
我不希望 metamask 在頁面載入時彈出強制使用者連接,所以我們只通過一個按鈕連接 - 但是在使用者連接後如果他們刷新頁面 - 他們需要再次按下按鈕才能連接(雖然沒有發生在元遮罩中,它只是呼叫
ethereum.enable()
並關閉)。我希望能夠做類似的事情:
如果使用者已經連接(在重新載入頁面或下週回來之後),呼叫 enable 並獲取他們的錢包資訊/地址。
如果使用者尚未連接 - 在使用者按下連接按鈕之前,不要呼叫元遮罩的連接函式。
這是我連接錢包的程式碼,我不確定如何進行初始檢查 - “如果他們已經連接”。
export const loadUserWeb3 = async () => { try { if (window.ethereum) { window.web3 = new Web3(window.ethereum); await window.ethereum.enable(); window.ethereum.on("chainChanged", () => { document.location.reload(); }); return window.web3; } else if (window.web3) { window.web3 = new Web3(window.web3.currentProvider); return window.web3; } else { window.web3 = new Web3( new Web3.providers.HttpProvider(INFURA_ENDPOINT[1]) ); return window.web3; } } catch { window.web3 = new Web3(new Web3.providers.HttpProvider(INFURA_ENDPOINT[1])); return window.web3; } };
這裡的關鍵是,如果他們還沒有連接,那麼它不會呼叫
enable()
,因為這會顯示元遮罩彈出,而使用者不會要求顯示它。TL; 博士:
如果他們的錢包已經連接並且他們只是重新載入頁面,如何獲取使用者的錢包資訊 - 如果他們沒有連接,則不強制 metamask 要求他們連接。
解決方案將在一定程度上取決於您的前端。這就是我在 TypeScript 中使用 React 滿足您的要求的方式:
React.useEffect(() => { const checkConnection = async () => { // Check if browser is running Metamask let web3: any; if (window.ethereum) { web3 = new Web3(window.ethereum); } else if (window.web3) { web3 = new Web3(window.web3.currentProvider); }; // Check if User is already connected by retrieving the accounts web3.eth.getAccounts() .then(async (addr: string) => { // Set User account into state }); }; checkConnection(); }, []);
當使用者連接到網頁時,我檢查瀏覽器中是否有 web3 外掛並嘗試檢索帳戶。如果我得到任何結果,則表示使用者已經連接到 Metamask,不需要觸發任何彈出視窗來連接。
如果使用者沒有連接到 Metamask,那麼您可以通過按下您提到的按鈕觸發彈出視窗,您將執行類似的程式碼,但包括
await window.ethereum.enable();
如果你沒有使用 React,那麼你只需要在第一次載入頁面時執行這個函式並跳過該
useEffect
方法。