使用 walletconnect 从 web3modal 获取提供者

Getting provider from web3modal with walletconnect

提问人:gojic 提问时间:11/17/2023 更新时间:11/17/2023 访问量:24

问:

您好,我有一个任务,用户可以使用 walletconnect 连接到我们的 react js dapp,扫描二维码。问题是,在应用程序中,如果用户想从我的智能合约调用某些函数,我需要提供一个提供程序。现在的问题是,虽然它确实在chrome上发出了打开钱包的请求,但不在手机上。现在我现在 that.it 原因是因为我使用的是 window.ethereum,但要用作 walletConnect 的提供者。扫描二维码后,用户可以正常连接到我们的dapp。

 const initializeProviders = async (authenticationMethod, currentChainId) => {
    const networkInfo = findNetworkInfo(currentChainId);
    if (!networkInfo || !networkInfo.rpcUrls || networkInfo.rpcUrls.length === 0) {
    
        return;
    }

    if (authenticationMethod === 'metaMask') {
        // Povezivanje preko MetaMask-a
        web3Provider = new ethers.providers.Web3Provider(window.ethereum);
    } else if (authenticationMethod === 'walletConnect') {
        // Povezivanje preko WalletConnect-a
        web3Provider = new WalletConnectProvider({
            options: {
                rpc: {
                    [currentChainId]: networkInfo.rpcUrls[0]
                }
            }

        });
        try {
            await web3Provider.enable();
        } catch (error) {
            console.log('Greška pri povezivanju sa WalletConnect:', error);
            return;
        }
    } else {
        console.log('Nepoznata metoda autentifikacije');
        return;
    }

    // Inicijalizacija ostalih providera i kontrakata
    jsonRpcProvider = new ethers.providers.JsonRpcProvider(RPC_URL);
    polygonContract = new ethers.Contract(contractCEDEFIAddress, ABI, jsonRpcProvider);
    signer = web3Provider.getSigner();
    contract = new ethers.Contract(contractCEDEFIAddress, ABI, web3Provider);
    contractWithSigner = contract.connect(signer);
}

这是用户选择连接方式的登录处理方式

    import MetaMaskOnboarding from '@metamask/onboarding';
import { Web3Modal, useWeb3Modal } from '@web3modal/react';
import { useStoreActions, useStoreState } from 'easy-peasy';
import React, { useEffect, useRef, useState } from 'react';
import { WagmiConfig } from 'wagmi';

import { authorizationEffect } from '../../components/MetaMaskAthorization/actions/authorizationEffect.js';
import './styles.scss';
import { walletConnectAuthorizationEffect } from '../../components/WalletConnectAuthorization/actions/authorizationEffect.js';
import { dataHelper } from '../../components/WalletConnectAuthorization/actions/dataHelpers/dataHelper.js';
import { Loader } from '../../components/utility/Loader/index.jsx';

export const Login = () => {
  const state = useStoreState((state) => state.authentication);
  const actions = useStoreActions((actions) => actions);

  const isLoading = state.loaderLogin;
  const onboarding = useRef(null);
  const counter = state.counter;

  const { open, isOpen } = useWeb3Modal();
  const [accounts, setAccounts] = useState(null);
  const ethereumClient = dataHelper.getConnector();
  const wagmiConfig = dataHelper.wagmiConfig;
  const projectId = dataHelper.projectId;

  const invokeMetamaskAuth = () => {
    MetaMaskOnboarding.isMetaMaskInstalled()
      ? actions[authorizationEffect.actionTypes.AUTHORIZE_SIGN_IN_INVOKED]({ counter })
      : onboarding.current.startOnboarding();
  };

  const fetchAccounts = async () => {
    const fetchedAccounts = await ethereumClient.getAccount();
    setAccounts(fetchedAccounts);
  };
  const invokeWalletConnectAuth = () => {
    open();
  };

  useEffect(() => {
    (async () => {
      await fetchAccounts();
    })();
  }, [isOpen]);

  useEffect(() => {
    if (accounts?.address) {
      actions[walletConnectAuthorizationEffect.actionTypes.WALLET_CONNECT_AUTHORIZE_SIGN_IN_INVOKED]({
        counter,
        connector: ethereumClient,
        accounts,
      });
    }
  }, [accounts]);

  return isLoading ? (
    <Loader size="6x" classOption="transparent-loader" />
  ) : (
    <div className="App wrapper night-theme">
      <div className="d-flex flex-column justify-content-center align-items-center h-100 login-page">
        <div className="login-page-inner">
          <div className="login-page-inner-content">
            <div className="title">Connect wallet</div>
            <div className="flex justify-content-between">
              <div onClick={invokeMetamaskAuth} className="text-center action-buttons cursor-pointer">
                <img src="../../images/login/metamask.svg" alt="Metamask" />
                <div>Metamask</div>
              </div>
              <WagmiConfig config={wagmiConfig}>
                <div onClick={invokeWalletConnectAuth} className="text-center action-buttons cursor-pointer">
                  <img src="../../images/login/wallet-connect.svg" alt="WalletConnect" />
                  <div>WalletConnect</div>
                </div>
              </WagmiConfig>
              <div className="text-center action-buttons">
                <img src="../../images/login/binance.svg" alt="Binance" />
                <div>Binance</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
    </div>
  );
};

问题是我不能在这里得到任何证明者......我很困惑为什么使用 Web3Modal 作为组件。请注意,登录代码不是我的。我知道类似的问题,但无法理解他们如何帮助我

ReactJS 以太坊 区块链 钱包连接

评论


答: 暂无答案