{"_id":"@aleworm/connection-banner","_rev":"4-e22b63a6a667a3aea38da5bc24caf7c2","name":"@aleworm/connection-banner","dist-tags":{"latest":"1.2.9"},"versions":{"1.2.5":{"name":"@aleworm/connection-banner","version":"1.2.5","license":"MIT","description":"Web3 React component built with Rimble UI that will display an informative banner when the user is not in a web3 capable browser, or when the current browser does not have a wallet available, or when the current ethereum network does not match the require","keywords":["web3","dapp","utilities","rimble","react"],"repository":{"type":"git","url":"git+https://github.com/ConsenSys/rimble-web3-components.git"},"bugs":{"url":"https://github.com/ConsenSys/rimble-web3-components/issues"},"homepage":"https://rimble.consensys.design","main":"dist/index.umd.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","dependencies":{"@rimble/utils":"^1.2.3","rimble-ui":"^0.9.1"},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0","rimble-ui":"^0.9.1","styled-components":">= 4"},"devDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","rimble-ui":"^0.9.1","styled-components":">= 4"},"scripts":{"clean":"./task.sh clean","test":"./task.sh test","lint":"./task.sh lint"},"browser":true,"_id":"@aleworm/connection-banner@1.2.5","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-aXVmf8peUWWeVTnUrc8Svjw/v5Zq33Si6pW+4naiPnlQhMyJVxUDRTjGt6dxFcJ85oIpSDdSDTrVenw1IowlOg==","shasum":"94126944514e4c89c9eddd97f5a15556c2cac196","tarball":"https://registry.npmjs.org/@aleworm/connection-banner/-/connection-banner-1.2.5.tgz","fileCount":4,"unpackedSize":27851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIuzxCRA9TVsSAnZWagAAFmgQAJZz92Ey1OrRbdsMsots\n/P/mfOnQ2lEWtidMExq8PEN/onA5t1/FFQg5zHQqOAAChmMXPoKVIVOm2uZr\nlnCFxxtevmUdzyOr3TwcL2j6CyHo/pmSy753L6lrf8Wg4N6+kmIgAw0rZSGv\nZ0jamYpmVRQIdYHJpq+MPydwczN7HAz2NTk5tFvd1qxWDnE9vpfC5ZgSl3wy\nBctHWmeUZYgkAbqzT7mSa40oDqDBBGX3K7So6IdVFltzcv5WL6B1Hbivtekk\ny5DQZje5w9o5199HtO8kC2XcJwsmmlYTToW4C/YxfIScJatd3QoopkVhwe03\nBCh1YlBxcfh+rTZyZweqSfk2fuSKn5c7fUfN9ODmy8rCQ71Qm8eu2bobA8Ic\nmho0Ci5nYTeiJe9iickLuB3BRDhUhDGXLXC2LqOM9ZKn5KiseZjNqIOPDs5k\nzur8diLUyUb4iguh37sKFk1Qkl0skyrsVOtDH8jiieizxDygW6D3xfcJ4aLH\n2O0N0fC/gv8G5XVS+/SebiEACjBcVZZWL+kdEIZDMYfCD++oiJAsz+zpaXmN\nVh1zFp2agNhAQI0h7wwbmKrY+sPQPmnJRiX04SJvy/60aOmUprL28cCewJDG\ntplp4Fqphvp5xszFPMyXvkT8G8FrxW/4G5tW3RW33mvO/uVFEPGEDiuErejy\nIRmT\r\n=o8sM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQrTmhs5RFt3DWertDIEaoQnRxsWGilHLKWa1uk1UZAAiAuC6X3Qv0wCMI9Qf4cSQAu51QdcOvWLmBiCIMEmjBqCg=="}]},"maintainers":[{"name":"aleworm","email":"alexander.wormbs@gmail.com"}],"_npmUser":{"name":"aleworm","email":"alexander.wormbs@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/connection-banner_1.2.5_1596124401537_0.7259639507178164"},"_hasShrinkwrap":false},"1.2.6":{"name":"@aleworm/connection-banner","version":"1.2.6","license":"MIT","description":"Web3 React component built with Rimble UI that will display an informative banner when the user is not in a web3 capable browser, or when the current browser does not have a wallet available, or when the current ethereum network does not match the require","keywords":["web3","dapp","utilities","rimble","react"],"repository":{"type":"git","url":"git+https://github.com/ConsenSys/rimble-web3-components.git"},"bugs":{"url":"https://github.com/ConsenSys/rimble-web3-components/issues"},"homepage":"https://rimble.consensys.design","main":"dist/index.umd.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","dependencies":{"@rimble/utils":"^1.2.3","rimble-ui":"^0.9.1"},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0","rimble-ui":"^0.9.1","styled-components":">= 4"},"devDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","rimble-ui":"^0.9.1","styled-components":">= 4"},"scripts":{"clean":"./task.sh clean","test":"./task.sh test","lint":"./task.sh lint"},"browser":true,"_id":"@aleworm/connection-banner@1.2.6","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-TExpK9ERXip2Aw2UrTP9gCwfLbRa4pGg0KwTv5RlABhFe7H+g5t+cMfWxuh3dQFSMhKqiKCsgsUqCWsdIHGxQg==","shasum":"2b43d9d6fb59088b99d1f6537bb459275edd6b0a","tarball":"https://registry.npmjs.org/@aleworm/connection-banner/-/connection-banner-1.2.6.tgz","fileCount":2,"unpackedSize":5892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIu1jCRA9TVsSAnZWagAAE70P/Rxp5ZPVoKQgrEvHjHMK\nIxXPZkzxgh/DNnf3K3GBUP7JMDGV1JBBxqDBhEIT47wUAojgwNdR8bdevmbn\nd+Rem6iDRuxQVnSYALA2HmVXn9EQ5EkKRQegDqWGBEEEzlz8Ces+g9eDLTHr\nlbFmORXVC8M4Kx0z2VTw49N9crF6OPUBSWJYia9zfw88Vrq6aXJppeuXQRiL\nUt9W1//DpU2e44M+TnRqcK68ow7SevIyEa6r+peEKMZ8ulrUq48b5INZqOFt\nHQGaAjRYYSPs7qefQhS4wZ1h8un2t6qtm8fu5ugHlpuLhJdaUFJsacQeHGrE\ni2hA5u2f9QR+0oI4Z9/2Xd1EXt+uY7LtfKvpyNnBZLj+Ai3QgAXGB7FWdCRt\nskAwqjFYeaUPfsXWpRt7lWriDQjQspKgg3t7hNO+2Z/HagZYAM00hvZ0ixLT\n3IR3SuSxwIlQV3C1uvqSz0GwBM8Vjm4sPuOQEJYvdu2qg+7ENYqwvIVbrb9a\nU+CDSO8uQks6ieMLbSzFVrFWGAEz9hhCTYXzHZsKEzUa/7VvQhRYb2Lb65bX\n5arC9MhI4s7w5BX1tzAHGDBjxcK0pQPN4tAlFuiI/+X2SDpp+uiAcWA8beAI\nvYebnLbtte9Sd//9zEaiMI/27YOYmCQqq40CpueE3EvJFQLFjvlPyTCvKwrM\nazUw\r\n=jLdq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGs4iTN/q14vw3a604gK0xuyIEJBggskCHwTZ85pMY55AiBw748X/8Kdk6okTfP3WBlRawtW092jeVpjTRKWhDwNIg=="}]},"maintainers":[{"name":"aleworm","email":"alexander.wormbs@gmail.com"}],"_npmUser":{"name":"aleworm","email":"alexander.wormbs@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/connection-banner_1.2.6_1596124514640_0.44510924516860917"},"_hasShrinkwrap":false},"1.2.8":{"name":"@aleworm/connection-banner","version":"1.2.8","license":"MIT","description":"Web3 React component built with Rimble UI that will display an informative banner when the user is not in a web3 capable browser, or when the current browser does not have a wallet available, or when the current ethereum network does not match the require","keywords":["web3","dapp","utilities","rimble","react"],"repository":{"type":"git","url":"git+https://github.com/ConsenSys/rimble-web3-components.git"},"bugs":{"url":"https://github.com/ConsenSys/rimble-web3-components/issues"},"homepage":"https://rimble.consensys.design","main":"dist/index.umd.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","dependencies":{"@rimble/utils":"^1.2.3","rimble-ui":"^0.9.1"},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0","rimble-ui":"^0.9.1","styled-components":">= 4"},"devDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","rimble-ui":"^0.9.1","styled-components":">= 4"},"scripts":{"clean":"./task.sh clean","test":"./task.sh test","lint":"./task.sh lint"},"browser":true,"_id":"@aleworm/connection-banner@1.2.8","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3ETLjhqe+cGpaU8uW2E8Xf/MVC+SrykJZkrvIK60Sh+H0xLH4PHBJyypiK2jCK6kfY2yooVl4uGmsHf0sZDtrQ==","shasum":"e263dbd44885d02113760933a30b63424e785d23","tarball":"https://registry.npmjs.org/@aleworm/connection-banner/-/connection-banner-1.2.8.tgz","fileCount":4,"unpackedSize":27853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIu4/CRA9TVsSAnZWagAAlHkP/AjAvuVWHGZ99abXVGMQ\nSsc472ZSJ2U7sSzjYfo3VdZoUAkvZd0g8bD90YNBEJhoNTrmmoJXYJ1oFkwh\nEhPg3jDM0wHbS6tmRrSwgMR0sYaFgn6Qzs4ALlPZK8LnfTdnglaS/kcoAate\nCtpdmtA6pozlqNbKTdqTNIB95ixOe8njWLIC+tOBqvOvfQWynBgsuhk+CuBW\n179CCqDsJe64O5xdX9WuKCE/GepH/xYDQsyl2gWSFE9zzGJ9Eaz5viFvLZ10\nGZ+IBlan5dqv4arACbzZePXkp2XuSdMYfSyy4K5Z8dWo8bbCxkEqTapze459\n+cOdGPgtT3BVx42rm7ETV1g+WdOU7O3MvubFEaVIYm3J4VSquTYvIAungtZM\nbPpyw5pDeGFZbcW/28V1gGWmojXyJlvswPTrxGqqet8v78tOdBT7QJY9sd2e\nXkKmI5Rz7IKc1ywyGVGkJRfjxipisTdK1dNc50b33R9TuZlhWVoK6/6+tuiL\nNvHSnlScGRCeGhcQh1NCUjKrOVFlSm5dkHfc8/k0Xm+lPch4jKEpTAQxowNB\nO4jcTDw3y/XsKp/tcjML1Y4mUq02BWhj2iI3bhfZ4rTbUx2jrRvv2Et4vuQH\nqWA2zNKT05vp29VlANi/9ps5WSUlVUuVDm7m/61lZXeGNgle6MK1hpas8fRn\n7OAb\r\n=XPw2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGeBA+uaZG/IlI1pBYV7N0TwaR1NE4fPrzryX+4xNMVuAiAkZe3agcBUvezuymKbuD8qoact/xx/sHcCGqZbhSgSvA=="}]},"maintainers":[{"name":"aleworm","email":"alexander.wormbs@gmail.com"}],"_npmUser":{"name":"aleworm","email":"alexander.wormbs@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/connection-banner_1.2.8_1596124735318_0.9858853350367549"},"_hasShrinkwrap":false},"1.2.9":{"name":"@aleworm/connection-banner","version":"1.2.9","license":"MIT","description":"Web3 React component built with Rimble UI that will display an informative banner when the user is not in a web3 capable browser, or when the current browser does not have a wallet available, or when the current ethereum network does not match the require","keywords":["web3","dapp","utilities","rimble","react"],"repository":{"type":"git","url":"git+https://github.com/ConsenSys/rimble-web3-components.git"},"bugs":{"url":"https://github.com/ConsenSys/rimble-web3-components/issues"},"homepage":"https://rimble.consensys.design","main":"dist/index.umd.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","dependencies":{"@rimble/utils":"^1.2.3","rimble-ui":"^0.9.1"},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0","rimble-ui":"^0.9.1","styled-components":">= 4"},"devDependencies":{"prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","rimble-ui":"^0.9.1","styled-components":">= 4"},"scripts":{"clean":"./task.sh clean","test":"./task.sh test","lint":"./task.sh lint"},"browser":true,"_id":"@aleworm/connection-banner@1.2.9","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-oHtEiBRh2THVsbOW/woQ9/bTluV/L4GMQXU94AwxeAjDtI5RQ7v07HhLcmlUC3ewax3wkpTT2b9CMtrNSNSv+A==","shasum":"4696c36154b4c04543d5ba06004775c9f72b3825","tarball":"https://registry.npmjs.org/@aleworm/connection-banner/-/connection-banner-1.2.9.tgz","fileCount":4,"unpackedSize":28992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIyOyCRA9TVsSAnZWagAAUA0P/RHBuohpYC/z1qYErQLZ\nsZihp2HEO99sMWdp8ZiIjIR+HCW/0NaCwzArMaEkXum0gPzJ0LAfKWTjffDQ\n9WV/YEqxBVyVPic7kqiiHnDTbdGgjj7ZpdOEKVyyCYej2cKmE5nmm2OYRNd4\n5mU8VBXE/WqviEFyIo/X85e7mn8zopnfLxWqld4wPqjmRr1ceuIx2SEJlRDY\nA3oJ/QmgsFoW+We6Zqh2IjpyFV3Pb421mYNZvIctzh59fX5NwrrqtiEiFUJX\nu+GkME65FKxUizDplozzSh3cdOwZ/N8VE3rA26zj95yL7wqpIdrXXm2VdYV+\nvNUQsY4/iIC1SPJi+scYKvPhI6v2si2BVsPLc2zdfpv197oeQmw5ii/SxjjS\n//PEgkwcihjSc0rZgudjAsG4p4/VmB2u1r5IeLZevApz3UIJ6NPebVe7lD96\nkI4nciKZaV8XqWS9BtIu8V52+4GMx9MOrr33DG3kBQ573tbzX0i5zR23aRLf\nL7ZUIZvtcMFu6qz1DiJztxve/YXkL6S//Z4ndLyiS4zsDbR+eCxA/uWZUEEI\nk5XN/Mzus6lcpNC7Te9LFHqeb1DiXzSMa2TcKF/SPhm5qGKhWTw1GqAR6iGp\nzMPSuIBnkqPh9lpQ+bbdJ/eMnXyEjFhi+vmObNbqQMFwHI7G3Yt9BiwwSxAT\nUc0f\r\n=VNTt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIV0Xliyo+sVKzaQ8EDSTVHnjPspLSKfDau61TGqt7FAiAFKZ98/bBZZO1cumPrHQny7M25JeQqKcmS8W9XKc3L7Q=="}]},"maintainers":[{"name":"aleworm","email":"alexander.wormbs@gmail.com"}],"_npmUser":{"name":"aleworm","email":"alexander.wormbs@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/connection-banner_1.2.9_1596138417531_0.5102418052964894"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-30T15:53:21.487Z","1.2.5":"2020-07-30T15:53:21.656Z","modified":"2022-04-04T12:38:14.613Z","1.2.6":"2020-07-30T15:55:14.765Z","1.2.8":"2020-07-30T15:58:55.493Z","1.2.9":"2020-07-30T19:46:57.643Z"},"maintainers":[{"name":"aleworm","email":"alexander.wormbs@gmail.com"}],"description":"Web3 React component built with Rimble UI that will display an informative banner when the user is not in a web3 capable browser, or when the current browser does not have a wallet available, or when the current ethereum network does not match the require","homepage":"https://rimble.consensys.design","keywords":["web3","dapp","utilities","rimble","react"],"repository":{"type":"git","url":"git+https://github.com/ConsenSys/rimble-web3-components.git"},"bugs":{"url":"https://github.com/ConsenSys/rimble-web3-components/issues"},"license":"MIT","readme":"![Rimble Connection Banner - wrong network](./_assets/connection-banner-wrong-network.png)\n![Rimble Connection Banner - incompatible browser](./_assets/connection-banner-incompatible-browser.png)\n![Rimble Connection Banner - no wallet](./_assets/connection-banner-no-wallet.png)\n\nOn mobile:\n![Rimble Connection Banner - mobile - incompatible browser](./_assets/connection-banner-incompatible-browser-mobile.png)\n![Rimble Connection Banner - mobile - wrong network](./_assets/connection-banner-wrong-network-mobile.png)\n\n# @rimble/connection-banner\n\nReact component built with [Rimble UI](https://github.com/ConsenSys/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:\n\n- not using a Web3-capable browser\n- a wallet is not available\n- current Ethereum network does not match the specified required network\n\n## Installation\n\nInstall the package in your project directory with:\n\n```sh\n// with npm\nnpm install @rimble/connection-banner\n\n// with yarn\nyarn add @rimble/connection-banner\n```\n\n## Usage Example\n\n### Default messages\n\n```jsx\nimport ConnectionBanner from '@rimble/connection-banner';\n\n<ConnectionBanner\n  currentNetwork={3}\n  requiredNetwork={1}\n  onWeb3Fallback={true}\n/>;\n```\n\n### Custom messages\n\n```jsx\n<ConnectionBanner\n  currentNetwork={network.current.id}\n  requiredNetwork={this.config.requiredNetwork}\n  onWeb3Fallback={web3Fallback}\n\n  {{\n    notWeb3CapableBrowserMessage: (\n      <div>\n        <p>Not a web3 capable browser</p>\n      </div>\n    ),\n    noNetworkAvailableMessage: (\n      <div>\n        <p>No Ethereum network available</p>\n      </div>\n    ),\n    onWrongNetworkMessage: (\n      <div>\n        <p>On wrong Ethereum network</p>\n      </div>\n    ),\n  }}\n</ConnectionBanner>\n```\n\n## Props\n\n| Name                           | Type    | Default              | Description                                                                    |\n| ------------------------------ | ------- | -------------------- | ------------------------------------------------------------------------------ |\n| `currentNetwork`               | integer | none                 | The network ID that the user is connected to, if available                     |\n| `requiredNetwork`              | integer | none                 | The network ID that the dApp requires to function                              |\n| `onWeb3Fallback`               | boolean | false                | Set to `true` when you connect to a smart contract via a provider like infura  |\n| `notWeb3CapableBrowserMessage` | node    | see default messages | Markup that will be rendered when the `notWeb3CapableBrowser` condition is met |\n| `noNetworkAvailableMessage`    | node    | see default messages | Markup that will be rendered when the `noNetworkAvailable` condition is met    |\n| `onWrongNetworkMessage`        | node    | see default messages | Markup that will be rendered when the `onWrongNetwork` condition is met        |\n\n## Default Messages\n\n### notWeb3CapableBrowserMessage - Desktop\n\n> Your browser doesn't support our blockchain features\n>\n> Switch to either Brave, FireFox, Opera, or Chrome to continue\n\n### notWeb3CapableBrowserMessage - Mobile\n\n> Your browser doesn't support our blockchain features\n>\n> Try a mobile wallet browser like Status, Coinbase wallet or Cipher\n\n### noNetworkAvailableMessage - Desktop only\n\n> Install the MetaMask browser extension to use our blockchain features in your current browser\n>\n> `installMetaMaskButton`\n\n### onWrongNetworkMessage - Desktop\n\n> Switch to the `requiredNetworkName` Ethereum network in MetaMask\n>\n> Change your network in your MetaMask extension. You're currently on `currentNetworkName`\n\n### onWrongNetworkMessage - Mobile\n\n> Switch to the `requiredNetworkName` Ethereum network in Settings\n>\n> Change your network in your MetaMask extension. You're currently on `currentNetworkName`\n\n## Documentation\n\n[Documentation](https://rimble.consensys.design/components/web3-components/ConnectionBanner)\n\n### Issues\n\n[Open an issue](https://github.com/ConsenSys/rimble-web3-components/issues) for any bugs or feature requests\n\n### Contributing\n\nWe are open source and welcome your [contributions](https://github.com/ConsenSys/rimble-web3-components/CONTRIBUTIONS.md) !\n\n### License\n\nMIT © [ConsenSys](https://github.com/ConsenSys)\n","readmeFilename":"README.md"}