mdtanrikulu / use-metamask Goto Github PK

View Code? Open in Web Editor NEW

166.0 7.0 35.0 3.41 MB

a custom React Hook to manage Metamask in Ethereum ĐApp projects

Home Page: https://mdtanrikulu.github.io/use-metamask

License: MIT License

HTML 6.72% JavaScript 86.42% CSS 6.86%

reactjs hooks react-hooks metamask blockchain ethereum

use-metamask's Issues

Metamask + Coinbase Wallet Extension not working

I am unable to get this package to work when I have both metamask and coinbase wallet as an extension.

window is not defined when using Next.js

As you know, Next.js, Gatsby.js and other static site builders build react apps using Node.js engine and not the browser, thus the window object is not available at build time.

So it give us the error window is not defined .
Writing a logic like:

    if (typeof window !== 'undefined') {
        const { connect, metaState } = useMetamask();
    }

will make the connect and metaState constant variables unavailable outside the scoped block (yeah we could use var but... come on! var ???)

Please add the logic to check for the availability of the window object before using it (I might do a pull request but Im busy nowadays, and it takes time to get my head around this repo's code!)

A sample is like this:

    if (typeof window !== 'undefined') {
        // use window object here.
    }

getChain returns Netword Id rather than Chain Id

use-metamask/src/useMetamask.js

Lines 89 to 92 in af4f218

 const chainId = await provider.request({ 

 method: "net_version", 

 params: [] 

 });

Param method is expected to be eth_chainId, according to MetaMask document:

If you need to retrieve the current chain ID, use ethereum.request({ method: 'eth_chainId' }). See also the chainChanged event for more information about how to handle chain IDs.

Add event handler for any sort of transaction

To be able to awaiting transactions in UI, give an abstracted event handler or tx lifetime state. So user can be informed based on it.

TypeScript type declarations

Hi there, do you have any plans on adding TypeScript type declarations? There is no @types/use-metamask package yet, so many developers will face this issue:

Compatibility with Alchemy Web3, a wrapper around Web3.js

Hi there! I'm developing a project using Alchemy Web3, a wrapper around Web3.js. See the Alchemy Web3 docs for more context: https://docs.alchemy.com/alchemy/documentation/alchemy-web3

I encountered a roadblock when combining it with use-metamask, so I open this issue to:

Confirm if this assessment is correct, or I missed something!
Offer a workaround.
Suggest the workaround to be documented, or a code change to account for this scenario.

Context

The connect function of use-metamask expects to receive an object that can be instantiated with new. Link to connect's source code

Working example using web3 or ethers:

import Web3 from "web3"; // or import { ethers } from "ethers";

const { connect, metaState } = useMetamask();
connect(Web3); // or connect(ethers.providers.Web3Provider);

Problem

Alchemy Web3 offers a factory function to instantiate the Web3 provider, as opposed to letting programmers create it using the new keyword. Passing that web3 instance to the connect function of useMetamask doesn't work.

// Doesn't work, throws an error
import { createAlchemyWeb3 } from '@alch/alchemy-web3';

const web3 = createAlchemyWeb3('https://eth-mainnet.alchemyapi.io/<api-key>');

connect(web3); // throws an error

Error stack trace:

Workaround

Create a constructor that returns the existing instance, and pass it to connect:

const web3 = createAlchemyWeb3('https://eth-mainnet.alchemyapi.io/<api-key>');

function Web3Wrapper() {
  return web3;
}

const { connect, metaState } = useMetamask();
connect(Web3Wrapper);

For more context, here is where I'm applying the workaround in my project. Note that the project is unfinished.

Next steps

If I didn't miss anything, I would propose documenting this workaround on the README, for having better developer experience. Depending on how common the factory function pattern is across libraries, it might make sense to update the connect function.

Cheers

'Component is not mounted' error when calling connect() from an onClick handler

EDIT: Seems to be an issue with React 18. Possible workaround would be to remove the Reac.StricMode component wrapping the app (not recommended).

Hi. I'm getting the following error when calling the connect() function from anything other than the initial useEffect hook:

I tested this just using an out-of-the-box create-react-app, so I'm not sure what's going on. Seems something really simple to need to add a workaround. Using React 18.2.

import logo from "./logo.svg";
import "./App.css";
import { useMetamask } from "use-metamask";
import { ethers } from "ethers";

function App() {
  const { connect } = useMetamask();

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button
          onClick={async () => {
            await connect(ethers.providers.Web3Provider, "any");
          }}
        >
          Click me!
        </button>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { MetamaskStateProvider } from "use-metamask";

import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <MetamaskStateProvider>
      <App />
    </MetamaskStateProvider>
  </React.StrictMode>
);

Would it be possible to build a version without Context and simply useState instead?

Hello, first of all, thanks a lot for your work on this library.

Secondly, I'm wondering if it wouldn't be possible to instead use only useState inside of the hook or change the hook implementation in order to remove the "wrap your app in this context" requirement...

I find that requiring a user to wrap the application in a "context/state component" can start clogging the overall app.

✌️

Introduce Metamask in Demo screen if user doesn't have extension installed

Does this work with react native?

Missing dependency when build with vite

I'm building a website with the latest version of [email protected] and [email protected].

I'm seeing the following error:

this is the line 93:

after a little bit of googling I saw that create-react-app has somewhere this package: regenerator runtime since I'm not using creat-react-app I don't have that package.

I don't know why, but on Firefox sometimes the website works... and sometimes it doesn't.

All my code works fine if I try create-react-app, but with vite it does not. I can create a stackblitz if you please, just let me know.

I fix this bug adding regenerator runtime to my website. even if I'm not using it I just import it on my entry point and eventing works fine.

Cheers! 🍻

NextJS Error Cannot read properties of null (reading 'useReducer')

With a fresh NextJS w/typescript installation, I'm trying

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { MetamaskStateProvider } from 'use-metamask';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MetamaskStateProvider>
      <Component {...pageProps} />
    </MetamaskStateProvider>
  );
}

export default MyApp;

and getting

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useReducer')

Any help is much obliged.

Edit: Fixed

TypeError: #<Object> is not a constructor

I'm getting this error the first time using this package. I'm using the ethers Web3Interface

TypeError: #<Object> is not a constructor
    at _construct (useMetamask.js:18:1)
    at _callee$ (useMetamask.js:137:1)
    at tryCatch (runtime.js:63:1)
    at Generator.invoke [as _invoke] (runtime.js:294:1)
    at Generator.next (runtime.js:119:1)
    at asyncGeneratorStep (useMetamask.js:32:1)
    at _next (useMetamask.js:34:1)
    at useMetamask.js:34:1
    at new Promise (<anonymous>)
    at useMetamask.js:34:1

How can I resolve this issue?

Integration with NextJS

Hello, this project seems to be very good, do you know how I could integrate this library in a project with Next?

Thanks

Any metaState change leads to component re-rendering 4 times.

Doesn't work with Nextjs/SSR

Works fine with client render but server-side rendering errors because window is not defined

update isConnected silently

Note: If you would like to check if Metamask is whether already connected to your dapp or not , you can call getAccounts method beforehand.

Calling getAccounts will still popup the plugin window of Metamask.
Is it possible to update the connecting status( isConnected ) silently as isConnected won't be updated automatically after refreshing the page.

	const chainId = await provider.request({
	method: "net_version",
	params: []
	});

mdtanrikulu / use-metamask Goto Github PK

use-metamask's Issues

Context

Problem

Workaround

Next steps

Recommend Projects

Recommend Topics

Recommend Org

Jobs