use-metamask
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.2 • Public • Published

    Contributors Forks Stargazers Issues MIT License LinkedIn Codecov


    Logo

    useMetamask React Hook

    An awesome React Hook to jumpstart your projects!
    Explore the docs » (Not ready yet)

    View Demo · Report Bug · Request Feature

    Table of Contents
    1. About The Project
    2. Getting Started
    3. Usage
    4. Roadmap
    5. Contributing
    6. License
    7. Contact
    8. Acknowledgements

    About The Project

    Product Name Screen Shot

    There are many great Web3 tools available on GitHub, however, I didn't find one that really suit my needs, so I created this simple React Hook. I want to connect to the Metamask as quick as possible from any component, without rewriting all network and account change logic. -- I think this is it.

    Here's why:

    • Your time should be focused on creating your project. A project that solves a problem and helps others
    • You shouldn't be implementing the same logic over and over from scratch
    • You shouldn't need enormous tool boxes when you only want is connection to the wallet.

    Of course, no one hook will serve all projects since your needs may be different. So I'll be adding more in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue. Thanks in advance to all the people who wants put more into the project!

    Getting Started

    Install via npmjs

    Easiest option is installing the package from npm with;

    # via npm
    npm i use-metamask
    # or via yarn
    yarn add use-metamask

    But if you would like to build a package locally, follow the below;

    Build from source

    You'll need some prerequisites in order to be able build the package.

    • npm > 12.13.0 (best installing via nvm)
      npm install npm@latest -g
    • yarn (optional)
      https://classic.yarnpkg.com/en/docs/install

    Installation

    1. Clone the repo
      git clone https://github.com/mdtanrikulu/use-metamask.git
    2. Install NPM packages
      # via npm
      npm install
      # via yarn
      yarn
    3. Build the Package
      # via npm
      npm run build
      # via yarn
      yarn build
    4. Prepare Tar Package
      npm pack
      # now the package is ready to use, you can simply do "npm i ./pathoftarfile/use-metamask-1.0.0.tgz" in your project

    Usage

    1. Wrap your App component with MetamaskStateProvider
    import React                     from 'react';
    import ReactDOM                  from 'react-dom';
    import { MetamaskStateProvider } from "use-metamask";
    import App                       from './App';
    
    ReactDOM.render(
        <MetamaskStateProvider>
          <App />
        </MetamaskStateProvider>
      document.getElementById('root')
    );
    1. import your hook to your App component
    import { useEffect, useState } from "react";
    import { useMetamask }         from "use-metamask";
    // you can use any web3 interface
    // import { ethers }           from "ethers";
    // import Web3                 from "web3";
    
    function App() {
      const { connect, metaState } = useMetamask();
      //...
    1. call connect async method with your favorite Web3Interface library
    //...
    function App() {
      const { connect, metaState } = useMetamask();
    
      // instead of calling it from useEffect, you can also call connect method from button click handler
      useEffect(() => {
        if (!metaState.isConnected) {
          (async () => {
            try {
              await connect(Web3);
            } catch (error) {
              console.log(error);
            }
          })();
        }
      }, []);
    1. Now you can reach all information under metaState object; (they will be updated in case of any change in metamask)
    // all connected Metamask accounts 
    // account: Array [ "0x68bbaeb98ac22e9e6516fb35c8d27ded05bc0607" ]
    
    // current connected chain id and name 
    // chain: Object { id: "4", name: "rinkeby" }
    
    // shows if Metamask Extension is whether exist or not in the user's browser
    // isAvailable: true
    
    // shows if connection is established with at least one metamask account
    // isConnected: true
    
    // web3 instance of Web3 interface you provided
    // web3: Object { _isProvider: true, anyNetwork: true, _maxInternalBlockNumber: -1024, … }

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

    You can also get chain information by calling getChain method, without a need of calling connect method.

    const { connect, getAccounts, getChain, metaState } = useMetamask();
    
    useEffect(() => {
        if (metaState.isAvailable) {
          (async () => {
            try {
              /* you can get the information directly 
               * by assigning them to a variable, 
               * or from metaState.account and metaState.chain 
              */
              let account = await getAccounts();
              let chain = await getChain();
            } catch (error) {
              console.log(error);
            }
          })();
        }
      }, []);

    Roadmap

    See the open issues for a list of proposed features (and known issues).

    Contributing

    Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

    1. Fork the Project
    2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
    3. Commit your Changes (git commit -m 'Add some AmazingFeature')
    4. Push to the Branch (git push origin feature/AmazingFeature)
    5. Open a Pull Request

    License

    Distributed under the MIT License. See LICENSE for more information.

    Contact

    Muhammed Tanrikulu - @tanrikuIu - md.tanrikulu@gmail.com

    Project Link: https://github.com/mdtanrikulu/use-metamask

    Acknowledgements

    Install

    npm i use-metamask

    DownloadsWeekly Downloads

    157

    Version

    1.3.2

    License

    MIT

    Unpacked Size

    32 kB

    Total Files

    10

    Last publish

    Collaborators

    • mdt.