Web3提供程序返回对象。需要将提供程序存储在本地存储中

Question

我的react应用程序中有一组函数，我想连接到web3模式。我使用Web3和web3modal连接不同的钱包。这是我的代码：

    import axios from "axios";
import { useState } from "react";
import Web3 from "web3"; 
import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";

  
const providerOptions = {
    walletconnect: {
      package: WalletConnectProvider, // required
      options: {
        infuraId: "my_infura_id", // required
        qrcodeModalOptions: {
          mobileLinks: [
            "rainbow",
            "metamask",
            "argent",
            "trust",
            "imtoken",
            "pillar",
          ],
        },
        rpc: { 80001:`https://mainnet.infura.io/v3/my_infura_id`},
        qrcode: true
      },
    },
  };

  const web3Modal = new Web3Modal({
    network: "mainnet", // optional
    theme: "dark", // optional
    cacheProvider: true, // optional
    providerOptions, // required
  });
export const connectWallet = async () => {
    
    try {
        var provider = await web3Modal.connect();
        window.localStorage.setItem("provider", provider); //want to set the provider in localstorage so that I can use it to connect on page refresh and go to new components.
        var web3 = new Web3(provider);
        var accounts = await web3.eth.getAccounts();
        const account= accounts[0];

        return{
          'address': account,
          'provider': provider,
          'status':'success'
        }
    } catch (error) {
        return{
            'address': '',
            'provider': '',
            'status':error
        }
    }
     
        // var web3 = new Web3(providers);
        // var accounts = await web3.eth.getAccounts();
        // // const account= accounts[0];
        // setAccount(accounts[0]);

        // console.log(providers);
}

因此，我真正需要的是用connectwallet函数连接到钱包，在连接时，我想存储提供者客栈，本地存储空间，可以用来连接到页面重新加载的应用程序。

现在我真正得到的是一个存储到本地存储的对象。该对象如下所示：

WalletConnectProvider {_events: {…}, _eventsCount: 3, _maxListeners: 30, _blockTracker: PollingBlockTracker, _ready: Stoplight, …}

这个对象用于钱包连接，当我连接到Metamask时，我得到了不同的provider对象。

当我在前端使用此对象在页面刷新时连接时，它将显示以下消息：

app.js:243955 Uncaught (in promise) Error: Can't autodetect provider for "[object Object]"

下面是我在页面刷新中连接的前端代码：

useEffect(async () => {
    
    const provider = window.localStorage.getItem("provider");
  
    if (provider){
      var web3 = new Web3(provider);
      var accounts = await web3.eth.getAccounts();
      
      setAccount(accounts[0]);
      console.log(accounts[0]);
    }else{
      setAccount("");
      console.log('nothing');
    }
  }, []);

我做错什么了吗。如果是这样的话，请帮助我完成它。

Answer 1

感谢看到这篇文章的每一个人，我不担心我没有得到任何人的任何回应。所以，这就是我想出的解决方案，这是我在跟踪文档时错过的。

useEffect(async () => {
    
    
    const { address,provider, status } = await detectProvider();

    if (status == 'success') {
      setAccount(address);
      setProvider(provider);
      console.log(address);
    } else {
      console.log(status);
    }
  }, [account,provider]);

在使用效果期间，我调用了一个函数来检查缓存的提供程序在我的浏览器中是否可用。如果缓存提供程序可用，它将自动连接到钱包提供程序，如下所示：

export const detectProvider = async () => {
    try {
      if (web3Modal.cachedProvider) {
        return connectWallet();
      }else{
        return{
          'address': '',
          'provider': '',
          'status':'error'
        }
      }
      
    } catch (error) {
        return{
            'provider': null,
            'status':error
        }
    }
}

ConnectWalet如下：

export const connectWallet = async () => {
    
    try {
        var provider = await web3Modal.connect();
        // console.log(provider);
        var web3 = new Web3(provider);
        var accounts = await web3.eth.getAccounts();
        const account= accounts[0];

        return{
          'address': account,
          'provider': provider,
          'status':'success'
        }
    } catch (error) {
        return{
            'address': '',
            'provider': '',
            'status':error
        }
    }
}

所以，当按下钱包连接按钮和页面刷新时，我调用了这个connectwallet函数。当函数一开始被调用时，它将提示要选择钱包，而当它在页面刷新中被调用时，它不会损坏钱包，而是从缓存中取出提供者并自动连接。

这个答案可能对将来面临类似问题的人有所帮助。