@W3CONNECTOR/WEB3PROVIDER 0.2.8

OPTIMIZED MAPS + KEYWORDS

It's a React library that allows you to connect your web3 project to MetaMask, WalletConnect, and Gnosis without any code implementation. Simply instantiate the Web3Custom provider passing the WalletConnect projectId, and your project is ready to go. The library provides a significant number of hooks that allow you to manage web3 connections, display the provider selection modal, and disconnect from it.

It saves previous connections in LocalStorage to ensure your project never loses connection.

EXAMPLE

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Web3CustomProvider from './store/Web3Wrapper';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
    <React.StrictMode>
      <Web3CustomProvider projectId='1234567890abcdefghilmnopq' chainId={80001}> 
            <App/>
      </Web3CustomProvider>
    </React.StrictMode>
);

// chainId = optional
// projectId (WalletConnect) = optional

// src/App.tsx

import { useWeb3Context } from '@w3connector/web3provider';

function App() {

  const { setModalOpen, web3Hooks, handleDisconnect, chainName } = useWeb3Context();

  return (
    <div className="App">
      <header className="App-header">
        {
          !web3Hooks.isActive ? (
            <button onClick={()=> {setModalOpen(true)}}>Open Modal</button>
          ):(
            <>
            <p>{web3Hooks.account}</p>
            <button onClick={()=> {handleDisconnect()}}>CLOSE</button>
            </>
          )
        }
        
      </header>
    </div>
  );
}

export default App;

CONTEXT ELEMENTS

const {  
        modalOpen,
        connectors,
        web3Error,
        web3Hooks,
        chainName,
        setModalOpen,
        setWeb3Error,
        handleDisconnect } = useWeb3Context();