npm install bnc-onboard

import Onboard from "bn-onboard"
​
// initialize onboard
const onboard = Onboard.init({
  dappId: "Your apiKey here",
  networkId: 1,
  subscriptions: {
    address: address => console.log("user address has changed:", address),
    network: network => console.log("user network has changed:", network),
    balance: balance => console.log("user balance has changed:", balance),
    wallet: wallet =>
      console.log(
        "a new wallet has been selected by user",
        wallet.provider,
        wallet.name
      )
  },
  modules: {
    // default wallets that are included: MetaMask, Dapper, Coinbase, Trust, WalletConnect
    walletSelect: Onboard.modules.select.defaults({
      // if you want fortmatic as a wallet option
      fortmaticInit: { apiKey: "Your fortmatic key here" },
      // if you want portis as a wallet option
      portisInit: { apiKey: "Your portis key here" },
      networkId: 4
    }),
    // default ready steps are: connect, network, balance
    walletReady: Onboard.modules.ready.defaults({
      networkId: 4,
      minimumBalance: "200000000000000000"
    })
  }
})
​
// Get user to select a wallet
await onboard.walletSelect()
​
// Get users' wallet ready to transact
await onboard.walletReady()

const options = {
  dappId: "Your api key here"
  networkId: 4,
  subscriptions: {
    address: val => console.log("address", val)
    network: val => console.log("network", val)
    balance: val => console.log("balance", val)
    wallet: val => console.log("wallet", val)
  },
  modules: {
    walletSelect: {
      heading: "Select a Wallet",
      description: "Please select a wallet that you would like to use with this Dapp",
      wallets: {
        mobile: [mobileWalletModuleOne, mobileWalletModuleTwo, ...],
        desktop: [desktopWalletModuleOne, desktopWalletModuleTwo, desktopWalletModuleThree, ...]
      }
    },
    walletReady: [readyModuleStepOne, readyModuleStepTwo, readyModuleStepThree, ...]
  }
}
​
const onboard = Onboard.init(options)

const options = {
  dappId: String, // see below
  networkId: Number, // see below
  subscriptions: {
    address: Function, // Called with the current account address of the user [String]
    network: Function, // Called with the current network id the users' wallet is connected to [Number]
    balance: Function, // Called with the current balance in `wei` of the users' current account address [String]
    wallet: Function // Called with the users' current selected wallet [Object]: {provider: Object, name: String}
  },
  modules: {
    walletSelect: {
      heading: String, // The heading for the wallet select modal
      description: String, // The description for the wallet select modal
      wallets: {
        mobile: Array, // array of mobile wallet modules
        desktop: Array // array of desktop wallet modules
      }
    },
    walletReady: Array // array of wallet readiness modules
  }
}

const walletSelected = await onboard.walletSelect()
// returns a Promise that:
// resolves with true if user selected a wallet and provider is good to go
// resolves with false if user exited from wallet select modal

const readyToTransact = await onboard.walletReady()
// returns a Promise that:
// resolves with true if user is ready to transact
// resolves with false if user exited before completing all wallet readiness modules

onboard.config({ darkMode: true })

{
  darkMode: Boolean, // (default: false)
}

modules.select.defaults({
  heading: String, // Override the default heading [optional]
  description: String, // Override the default description [optional]
  networkId: Number, // Required if you want the Portis or Fortmatic modules to be included
  portisInit: Object, // initialization object for Portis module (see below)
  fortmaticInit: Object // initialization object for Fortmatic module (see below)
})

portis({
  apiKey: String, // your Portis api key
  network: String //  the name of network you want to connect to
})

fortmatic({
  apiKey: String, // your Portis api key
  network: String //  the name of the network you want to connect to
})

fortmatic({
  infuraKey: String
})

import Onboard from "bnc-onboard"
​
// PICK AND CHOOSE MODULES
​
const { portis, dapper, metamask, fortmatic } = Onboard.modules.select
​
const onboard = Onboard.init({
  // ...
  modules: {
    walletSelect: {
      heading: "Select a Wallet",
      description:
        "Please select the wallet that you would like to use with this Dapp",
      wallets: {
        desktop: [
          portis({ apiKey: 'sdda-w2-ds3', network: 'main' })
          dapper(),
          metmask(),
        ],
        mobile: [fortmatic({apiKey: 'sd-3d3-d', network: 'main'})]
      }
    }
    //....
  }
})
​
// OR
​
// USE ALL OF THE DEFAULT MODULES
​
const onboard = Onboard.init({
  // ...
  modules: {
    walletSelect: Onboard.modules.select.defaults({
      portisInit: { apiKey: "Your portis key here" },
      networkId: 4
    }),
    // ...
  }
})

modules.ready.defaults({
  networkId: Number, // The network id your dapp runs on
  minimumBalance: String // the minimum balance in wei required to interact with your dapp
})

network(Number) //  the network id your dapp runs on

balance(String) //  the minimum balance in wei required to interact with your dapp

import Onboard from "bnc-onboard"
​
// PICK AND CHOOSE MODULES
​
const { connect, network, balance } = Onboard.modules.ready
​
const onboard = Onboard.init({
  // ...
  modules: {
    //....
    walletReady: [connect(), network(1), balance("400000000000")]
  }
})
​
// OR
​
// USE ALL OF THE DEFAULT MODULES
​
const onboard = Onboard.init({
  // ...
  modules: {
    // ...
    walletReady: Onboard.modules.ready.defaults({
      networkId: 1,
      minimumBalance: "400000000000"
    })
  }
})