1.2.9 • Published 4 years ago

@aleworm/connection-banner v1.2.9

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

Rimble Connection Banner - wrong network Rimble Connection Banner - incompatible browser Rimble Connection Banner - no wallet

On mobile: Rimble Connection Banner - mobile - incompatible browser Rimble Connection Banner - mobile - wrong network

@rimble/connection-banner

React component built with Rimble UI that displays a banner providing information about a user's Ethereum network connection. The banner will give informative and helpful information to resolve the issue with device-specific language. The banner informs the user of the following scenarios:

  • not using a Web3-capable browser
  • a wallet is not available
  • current Ethereum network does not match the specified required network

Installation

Install the package in your project directory with:

// with npm
npm install @rimble/connection-banner

// with yarn
yarn add @rimble/connection-banner

Usage Example

Default messages

import ConnectionBanner from '@rimble/connection-banner';

<ConnectionBanner
  currentNetwork={3}
  requiredNetwork={1}
  onWeb3Fallback={true}
/>;

Custom messages

<ConnectionBanner
  currentNetwork={network.current.id}
  requiredNetwork={this.config.requiredNetwork}
  onWeb3Fallback={web3Fallback}

  {{
    notWeb3CapableBrowserMessage: (
      <div>
        <p>Not a web3 capable browser</p>
      </div>
    ),
    noNetworkAvailableMessage: (
      <div>
        <p>No Ethereum network available</p>
      </div>
    ),
    onWrongNetworkMessage: (
      <div>
        <p>On wrong Ethereum network</p>
      </div>
    ),
  }}
</ConnectionBanner>

Props

NameTypeDefaultDescription
currentNetworkintegernoneThe network ID that the user is connected to, if available
requiredNetworkintegernoneThe network ID that the dApp requires to function
onWeb3FallbackbooleanfalseSet to true when you connect to a smart contract via a provider like infura
notWeb3CapableBrowserMessagenodesee default messagesMarkup that will be rendered when the notWeb3CapableBrowser condition is met
noNetworkAvailableMessagenodesee default messagesMarkup that will be rendered when the noNetworkAvailable condition is met
onWrongNetworkMessagenodesee default messagesMarkup that will be rendered when the onWrongNetwork condition is met

Default Messages

notWeb3CapableBrowserMessage - Desktop

Your browser doesn't support our blockchain features

Switch to either Brave, FireFox, Opera, or Chrome to continue

notWeb3CapableBrowserMessage - Mobile

Your browser doesn't support our blockchain features

Try a mobile wallet browser like Status, Coinbase wallet or Cipher

noNetworkAvailableMessage - Desktop only

Install the MetaMask browser extension to use our blockchain features in your current browser

installMetaMaskButton

onWrongNetworkMessage - Desktop

Switch to the requiredNetworkName Ethereum network in MetaMask

Change your network in your MetaMask extension. You're currently on currentNetworkName

onWrongNetworkMessage - Mobile

Switch to the requiredNetworkName Ethereum network in Settings

Change your network in your MetaMask extension. You're currently on currentNetworkName

Documentation

Documentation

Issues

Open an issue for any bugs or feature requests

Contributing

We are open source and welcome your contributions !

License

MIT © ConsenSys