提问人:gojic 提问时间:11/17/2023 更新时间:11/17/2023 访问量:24
使用 walletconnect 从 web3modal 获取提供者
Getting provider from web3modal with walletconnect
问:
您好,我有一个任务,用户可以使用 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 作为组件。请注意,登录代码不是我的。我知道类似的问题,但无法理解他们如何帮助我
答: 暂无答案
评论