reactjs 如何使用web3.js注销MetaMask帐户

wgx48brx  于 2023-02-08  发布在  React
关注(0)|答案(6)|浏览(366)

我正在使用MetaMask发送交易到我的DApp中的合同。我需要有关如何在用户单击 * 注销按钮 * 时断开MetaMask帐户与我的DApp的连接的帮助。
前端:ReactJS
后端:Web3js、实体(以太坊)

yi0zb3m4

yi0zb3m41#

钱包一旦连接上,就由用户来决定是否断开连接,你无法控制metamask,你基本上是通过检查你是否可以访问他们的账户来模拟登录和注销的概念。

const {ethereum} = window;
const accounts = await ethereum.request({method: 'eth_accounts'});
if (accounts && accounts.length > 0) {
    console.log("user is connected");
} else {
    console.log("user not connected");
}

我要做的一件事就是留意账户的变化:

window.ethereum.on('accountsChanged', async () => {
    // Do something
});

我的应用通常有一个initialise函数,它会检查元掩码,是否已安装?是否已连接?然后我会存储状态,这样应用就可以保持用户登录的状态,即使在页面刷新时也是如此。如果发生任何事情,如帐户更改或断开连接,则会运行上述脚本,我会再次运行initialise脚本以重置状态。

// Runs on page load
initialise();

// Runs whenever the user changes account state
window.ethereum.on('accountsChanged', async () => {
    initialise();
});

所以,并没有真正回答你的问题,据我所知,现在有办法接触和断开用户.

let connected = false;
let installed = false;

function isMetaMaskInstalled() {
    return Boolean(window.ethereum && window.ethereum.isMetaMask);
}

async function isMetaMaskConnected() {
    const {ethereum} = window;
    const accounts = await ethereum.request({method: 'eth_accounts'});
    return accounts && accounts.length > 0;
}

async function initialise() {
    connected = await isMetaMaskConnected();
    installed = isMetaMaskInstalled();
}

initialise();

window.ethereum.on('accountsChanged', async () => {
    initialise();
});

然后让UI对installedconnected变量做出React。

8fq7wneg

8fq7wneg2#

用户可以使用MetaMask自身的账户断开按钮断开MetaMask账户。同样,任何页面刷新或重新加载都会自动断开MetaMask。

kgqe7b3p

kgqe7b3p3#

有一个很好的框架https://usedapp.io/,可以在typescript中设置前端来与智能合约交互,基本上可以将顶级组件与其Provider封装在一起:

import { Mainnet,ChainId} from "@usedapp/core";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <DAppProvider
      config={{
        supportedChains: [ChainId.Kovan, ChainId.Rinkeby],
      }}
    >
      <Component {...pageProps} />
    </DAppProvider>
  );
}

然后编写一个Header组件:

import { useEthers } from "@usedapp/core";

export const Header = () => {
  
  const { account, activateBrowserWallet, deactivate } = useEthers();
  const isConnected = account !== undefined;
  return (
    <div >
      {isConnected ? (
        <Button  onClick={deactivate}>
          Disconnect
        </Button>
      ) : (
        <Button onClick={() => activateBrowserWallet()}>
          Connect
        </Button>
      )}
    </div> );};

请注意,这并不会锁定元掩码,它只会断开您的应用程序与帐户的连接。

tct7dpnv

tct7dpnv4#

我不知道你是否仍然有这个问题,但是在一个异步函数中你可以调用clearCachedProvider,web3Modal变量被强制转换成我的web3示例,例如const web3Modal = new Web3Modal...:

await web3Modal.clearCachedProvider()
xmd2e60i

xmd2e60i5#

以上问题可以用wagmi来解决,你只需要把disconnect和其他需要的包沿着导入到你的项目中

import {
  useAccount,
  useConnect,
  useDisconnect,
  useNetwork,
  useSignMessage
} from "wagmi";

React:
x一个一个一个一个x一个一个二个一个x一个一个三个一个

vi4fp9gy

vi4fp9gy6#

如EIP-1193所附,web3.js目前仍仅适用于连接和事件,如断开事件、网络变更和钱包账户变更。

相关问题