web3-wallets-react v1.3.0

Web3 wallets (React.js)

Integrate Web3 Wallets into your Dapp with just a few lines of code

Wallet state remains consistant throughout Dapp navigation

Installation

Install the Package

  npm install web3-wallets-react

Warning Incase you encounter an issue with webpack :

1. Change the version of react-scripts in package.json to "react-scripts": "4.0.3"
2. Run rm -rf node_modules
3. Run rm -f package-lock.json
4. Run npm install

Import the module Provider in Index.js

 import { WalletProvider } from 'web3-wallets-react'

Wallet Provider props

Example

//index.js
import {WalletProvider} from 'web3-wallets-react'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
<WalletProvider  
    allowedWallets={[
        "metamask",
        "walletconnect",
        "coinbase",  
        "formatic", 
        "portis"   
    ]} 

    allowedNetworks={[
        1,/**mainnet */
        4 /**Rinkeby */ ,
        1030 /**ConFlux espace chain */,
        1666600000 /**Harmony mainnet (shard 0) */
        /** +150 chains registered */]}
    portisOptions = {{

        key: "portis-api-key",
        network : "<network NAME >" /** Heres a list of networks that portis support (make sure to include the network ID in allowedNetworks prop as well) https://docs.portis.io/#/configuration */

    }}
    formaticOptions = {{

        key: "formatic-api-key",
        network : "<network NAME >" /** Heres examples of networks that formatic support (make sure to include the network ID in allowedNetworks prop as well) https://docs.fortmatic.com/web3-integration/network-configuration */

    }}

    coinbaseOptions = {{

        appName: "name of your Dapp",
        logo : "url to your apps logo", /**Optional */
        jsonrpc : "<-rpc-url->",
        defaultChain : 1
    
    }}
>
    <App />
</WalletProvider>, document.getElementById('root'))

App.js

//App.js
import React from 'react'
import { BrowserRouter,Route, Routes } from "react-router-dom";
import Home from './Pages/Home';
import Account from './Pages/Account';
import Network from './Pages/Network';

const App = () => {

  return ( 
  <BrowserRouter> 
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="net" element={<Network/>} />
      <Route path="acc" element={<Account/>} />
    </Routes>
  </BrowserRouter>);
}

export default App;

Wallet Button usage & creating a transaction

commitTransaction(to, amount, functionABI=false, functionParameters = [])

//Home.js 
import React from 'react'
import  {WalletButton,WalletContext}  from 'web3-wallets-react'
import 'web3-wallets-react/dist/index.css'
import Nav from '../Components/Nav'
const Home = () => {
  const { commitTransaction} = React.useContext(WalletContext)

  return( 
  <div>
    <Nav/>
      <br/>
      <WalletButton/>
      <br/>
      <button onClick={async ()=> {
      
          //Sending eth to a wallet
          await commitTransaction("0x642dC956a520BbF8A76fc1ec70B2515a8f0A4f89","0.05")
      
      }}> 
        transact 
      </button>
      
            <button onClick={async ()=> {
      
          //calling a contracts mint function
          
          let contractAddress = "0xA72Df45fD3B3B0E6D47DB7Ed5a579c8B4de527C1";
          let mintFunctionArguments = ["0x9269d990B8a6EF01e1b6D554cb1A05dE4cBf2D2c", "https://example.com/meta-data-url"];
          let mintFunctionAbi = {
                "inputs": [
                  {
                    "internalType": "address",
                    "name": "to",
                    "type": "address"
                  },
                  {
                    "internalType": "string",
                    "name": "uri",
                    "type": "string"
                  }
                ],
                "name": "mint",
                "outputs": [
                  {
                    "internalType": "uint256",
                    "name": "newTokenID",
                    "type": "uint256"
                  }
                ],
                "stateMutability": "nonpayable",
                "type": "function"
                };
            
            
          
          await commitTransaction(contractAddress, "0.05", mintFunctionAbi, mintFunctionArguments);
      
      }}> 
        call mint function
      </button>
  </div>
   );
}
export default Home;

Rendering connected wallet info :

import React from 'react'
import  {WalletContext}  from 'web3-wallets-react'
import 'web3-wallets-react/dist/index.css'
const Account = () => {
  const {connectedWallet} = React.useContext(WalletContext)

  return <div>
          
            <h1>{connectedWallet.account  || 'not connected'}</h1>
            <h1>{connectedWallet.selectedNetwork || 'not connected'}</h1>
            <h1>{connectedWallet.allowedNetworks || 'not connected'}</h1>
            <h1>{connectedWallet.isAuthenticated || 'not connected'}</h1>
            <h1>{connectedWallet.protocal || 'not connected'}</h1>
            
        </div>
}
export default Account;

Future plans

• Re-write this package using TypeScript
• Build a better interface for creating transactions, calling smart contracts, and requesting signatures
• Add support for more wallets
• Add the ability to customize the wallet button and Modal styles
• Add error modal popups for failed transactions
• Add the ability to alternate between accounts in app
• Add option to display a QR code modal when prompting to send eth to a certain address

Authors

• @fsobh
• Donation address : 0x28DcF6c93C63B76aad9510234E1415Fc31468753
• ENS domain : oblock.eth