{"_id":"lit-web3modal","_rev":"1-3800b35a109ca51fe470413e166332b5","name":"lit-web3modal","dist-tags":{"latest":"1.9.5"},"versions":{"1.9.5":{"name":"lit-web3modal","version":"1.9.5","description":"A single Web3 / Ethereum provider solution for all Wallets","keywords":["web3","crypto","ethereum","web3modal","metamask","walletconnect","portis","fortmatic","arkane","torus","authereum","frame"],"author":{"name":"Web3Modal","email":"web3modal.com"},"license":"MIT","main":"dist/index.js","unpkg":"dist/index.js","types":"dist/index.d.ts","typings":"dist/index.d.ts","homepage":"https://github.com/web3modal/web3modal","repository":{"type":"git","url":"git+https://github.com/web3modal/web3modal.git"},"bugs":{"url":"https://github.com/web3modal/web3modal/issues"},"scripts":{"clean":"rm -rf dist","clean:example":"rm -rf example/build","clean:node_modules":"rm -rf node_modules && cd example && rm -rf node_modules","clean:all":"npm run clean && npm run clean:example && npm run clean:node_modules","bootstrap":"npm install && cd example && npm install","start":"npm run check && cd example && npm run start","build":"webpack","build:example":"npm run bootstrap && npm run build && cd example && npm run build","test":"mocha --require ./babel-polyfill.js test/**/*.spec.js","lint":"tslint ./src/*.ts ./src/**/*.ts","format":"prettier ./src/*.ts ./src/**/*.ts --write","check":"npm run clean && npm run lint && npm run format && npm run build && npm run test","reset":"npm run clean:all && npm run bootstrap && npm run check"},"devDependencies":{"@babel/cli":"^7.11.6","@babel/core":"^7.11.6","@babel/node":"^7.10.5","@babel/polyfill":"^7.11.5","@babel/preset-env":"^7.11.5","@babel/preset-typescript":"^7.1.0","@babel/register":"^7.11.5","@types/react":"^16.9.50","@types/react-dom":"^16.8.4","@types/styled-components":"^5.1.3","@types/web3":"^1.2.2","babel-eslint":"^10.1.0","chai":"^4.1.2","eslint":"^7.10.0","file-loader":"^3.0.1","husky":"^3.0.0","isomorphic-fetch":"^2.2.1","mocha":"5.2.0","prettier":"^1.18.2","terser":"^3.14.1","ts-loader":"^5.3.3","tslint":"^5.18.0","tslint-config-prettier":"^1.18.0","tslint-config-standard":"^8.0.1","typescript":"^3.1.3","url-loader":"^1.1.2","webpack":"^4.44.2","webpack-cli":"^3.2.1"},"dependencies":{"detect-browser":"^5.1.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","styled-components":"^5.1.1","tslib":"^1.10.0"},"licenseText":"MIT License\n\nCopyright (c) 2018 Web3Modal\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"lit-web3modal@1.9.5","dist":{"shasum":"7e4d6e3411620a91718fa8366b875c0daa98fb58","integrity":"sha512-j76GWSKL+k7PK84k41Itd4/1TqZpAQYMRGcEWW5l+/QQXp7wohg6Pvcg988+uH8OVsFfO0wnjsC/hYkTFibskw==","tarball":"https://registry.npmjs.org/lit-web3modal/-/lit-web3modal-1.9.5.tgz","fileCount":89,"unpackedSize":1249603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsGyGCRA9TVsSAnZWagAAV6QP+wUjJtVCsaTOkwdrRNdi\nULyFR7Y8QYJTvM5XknLCTPB2/i5gowzm+8pkqstYLe7Z5bpFkv3vwvaMkjmw\neuKFjndbtpIzJk5OJkSUUZNeD0ABoexKlR/Qyy6OPzpVyU+GVTBUekT+QiFW\nXzd9Urpfc0eFCIEFC+wT4FPMGV9szzgnTufc2NFig0HjqVXWb0fGxwUk5AU/\nOpoatPHV2OuJa5cIFNx0+kq6jv4ryVn0D45eRPOLC+eTdxvk8bfNmYVNLviF\nTM8iubBRcMqgae9yQ6cuw812HX1rY2TrjqUw6pCDY4F2VzFoMwphizjixSLa\ncC/vUBSSflkX71hVBSaNGH5V5BjoWOvFuwLErjcnbElL77Bhp6eL4Y9Gt69S\ntxdZuZlM792lVolPl46c8ha6RVPVyBwdk0mW71on0fcr15dgkcCV4oO6UGv4\nJuwzUKeBH3rT2ElP5hYf0XG8kgHEHU7nMnEUWejNVY98yjwmo8eyHsJarECu\nFJraR/2qwmBLmbF2jYeSUguoaQMt4WiG18RM0ISCfV6Re2PUUO/oaoqYZkeC\nd8CWM9X/5mLlJ1GFLRHcdWD8lKANyztJSoBp0Y6zuC/sCBZ/b76QdayKCJSV\njAfWBLwvfm5mnuOTEX2ARsgy4TVmPUGw2tJ8U1o1Ok6rT3IrL8u1O94YNjXd\nERuC\r\n=r2ee\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7Tp1DHAB2Xob32RN2MSzTgKqFVhiZBiBo4+hYgVkJgAiA1Qi55314ORZQbGnMroNgEN4dQYecnUev9b/nSWaWZYw=="}]},"_npmUser":{"name":"glitch003","email":"chris@litprotocol.com"},"directories":{},"maintainers":[{"name":"glitch003","email":"chris@litprotocol.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lit-web3modal_1.9.5_1638952070105_0.37267822912264026"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-08T08:27:50.104Z","1.9.5":"2021-12-08T08:27:50.361Z","modified":"2022-05-08T04:31:27.684Z"},"maintainers":[{"name":"glitch003","email":"chris@litprotocol.com"}],"description":"A single Web3 / Ethereum provider solution for all Wallets","homepage":"https://github.com/web3modal/web3modal","keywords":["web3","crypto","ethereum","web3modal","metamask","walletconnect","portis","fortmatic","arkane","torus","authereum","frame"],"repository":{"type":"git","url":"git+https://github.com/web3modal/web3modal.git"},"author":{"name":"Web3Modal","email":"web3modal.com"},"bugs":{"url":"https://github.com/web3modal/web3modal/issues"},"license":"MIT","readme":"# Web3Modal\n\nA single Web3 / Ethereum provider solution for all Wallets\n\n## Introduction\n\nWeb3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration.\n\nBy default Web3Modal Library supports injected providers like (**Metamask**, **Dapper**, **Gnosis Safe**, **Frame**, Web3 Browsers, etc) and **WalletConnect**, You can also easily configure the library to support **Portis**, **Fortmatic**, **Squarelink**, **Torus**, **Authereum**, **D'CENT Wallet** and **Arkane**.\n\n## Preview\n\nYou can test the library on: https://web3modal.com/\n\n![preview](./images/preview.gif)\n\n## Projects using `web3modal`\n\n_Open a PR to add your project to the list!_\n\n- [DAO Stack](https://alchemy.daostack.io/)\n- [Gnosis Safe](https://gnosis-safe.io/)\n- [3Box Hub](https://3box.io/hub/)\n- [KnownOrigin](https://knownorigin.io/)\n- [Clovers Network](https://clovers.network/)\n- [Affogato](https://affogato.co/)\n- [Linkdrop](https://dashboard.linkdrop.io/)\n- [Dapparatus](https://github.com/austintgriffith/dapparatus/)\n- [Totle Swap](https://swap.totle.com/)\n- [Win Or Lose](https://www.winorlose.live/)\n- etc\n\n## Related Efforts\n\n- [web3-react](https://github.com/NoahZinsmeister/web3-react/)\n\n## Usage\n\n1. Install Web3Modal NPM package\n\n```bash\nnpm install --save web3modal\n\n# OR\n\nyarn add web3modal\n```\n\n2. Install Provider packages\n\n```js\n/* See Provider Options Section */\n```\n\n3. Then you can add Web3Modal to your Dapp as follows\n\n```js\nimport Web3 from \"web3\";\nimport Web3Modal from \"web3modal\";\n\nconst providerOptions = {\n  /* See Provider Options Section */\n};\n\nconst web3Modal = new Web3Modal({\n  network: \"mainnet\", // optional\n  cacheProvider: true, // optional\n  providerOptions // required\n});\n\nconst provider = await web3Modal.connect();\n\nconst web3 = new Web3(provider);\n```\n\n## Using in vanilla JavaScript\n\nYou can use the modal from the old fashioned web page JavaScript as well.\n\n[First get a Web3modal bundled JavaScript from Releases](https://github.com/Web3Modal/web3modal/releases).\n\nAfter including the bundle in your HTML, you can use it on your web page:\n\n```js\n//  You have to refer to default since it was bundled for ESModules\n// but after that the documentation will be the same\n\nconst Web3Modal = window.Web3Modal.default;\nconst providerOptions = {\n  /* See Provider Options Section */\n};\n\nconst web3Modal = new Web3Modal({\n  network: \"mainnet\", // optional\n  cacheProvider: true, // optional\n  providerOptions // required\n});\n\nconst provider = await web3Modal.connect();\n```\n\n[See the full vanilla JavaScript example application](https://github.com/Web3Modal/web3modal-vanilla-js-example).\n\n## Provider Events\n\nYou should subscribe to provider events compatible with [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) standard.\n\n```typescript\n// Subscribe to accounts change\nprovider.on(\"accountsChanged\", (accounts: string[]) => {\n  console.log(accounts);\n});\n\n// Subscribe to chainId change\nprovider.on(\"chainChanged\", (chainId: number) => {\n  console.log(chainId);\n});\n\n// Subscribe to provider connection\nprovider.on(\"connect\", (info: { chainId: number }) => {\n  console.log(info);\n});\n\n// Subscribe to provider disconnection\nprovider.on(\"disconnect\", (error: { code: number; message: string }) => {\n  console.log(error);\n});\n```\n\n## Provider Options\n\nThese are all the providers available with Web3Modal and how to configure their provider options:\n\n- [WalletConnect](./docs/providers/walletconnect.md)\n- [Fortmatic](./docs/providers/fortmatic.md)\n- [Torus](./docs/providers/torus.md)\n- [Portis](./docs/providers/portis.md)\n- [Authereum](./docs/providers/authereum.md)\n- [Frame](./docs/providers/frame.md)\n- [Bitski](./docs/providers/bitski.md)\n- [Arkane](./docs/providers/arkane.md)\n- [DCent](./docs/providers/dcent.md)\n- [BurnerConnect](./docs/providers/burnerconnect.md)\n- [MEWConnect](./docs/providers/mewconnect.md)\n\n## API\n\n```typescript\nclass Web3Modal {\n  cachedProvider: string;\n  connect(): Promise<any>;\n  connectTo(id: string): Promise<any>;\n  toggleModal(): Promise<void>;\n  on(event: string, callback: SimpleFunction): SimpleFunction;\n  off(event: string, callback?: SimpleFunction): void;\n  clearCachedProvider(): void;\n  setCachedProvider(): void;\n  updateTheme(theme: string | ThemeColors): Promise<void>;\n}\n```\n\n## Utils\n\n```typescript\nfunction getInjectedProvider(): IProviderInfo | null;\nfunction getInjectedProviderName(): string | null;\n\nfunction getProviderInfo(provider: any): IProviderInfo;\nfunction getProviderInfoByName(name: string | null): IProviderInfo;\nfunction getProviderInfoById(id: string | null): IProviderInfo;\nfunction getProviderInfoByCheck(check: string | null): IProviderInfo;\n```\n\n## Types\n\n```typescript\ninterface IProviderInfo {\n  id: string;\n  type: string;\n  check: string;\n  name: string;\n  logo: string;\n  description?: string;\n  package?: {\n    required?: string[];\n  };\n}\n\ntype ThemeColors = {\n  background: string;\n  main: string;\n  secondary: string;\n  border: string;\n  hover: string;\n};\n\ntype SimpleFunction = (input?: any) => void;\n```\n\n## Custom Themes\n\nThe theme enabled by default is `light` but dark theme is also available by setting the option `theme` to `dark`, as follows:\n\n```typescript\nconst web3Modal = new Web3Modal({\n  ...otherOptions,\n  theme: \"dark\"\n});\n```\n\nCompletely custom themes are also available by passing an object instead with the following parameters with valid css colors values:\n\n```typescript\nconst web3Modal = new Web3Modal({\n  ...otherOptions,\n  theme: {\n    background: \"rgb(39, 49, 56)\",\n    main: \"rgb(199, 199, 199)\",\n    secondary: \"rgb(136, 136, 136)\",\n    border: \"rgba(195, 195, 195, 0.14)\",\n    hover: \"rgb(16, 26, 32)\"\n  }\n});\n```\n\nAddtionally you can also update the modal theme after instantiated by calling the following method:\n\n```typescript\nawait web3Modal.updateTheme(\"dark\");\n\n// OR\n\nawait web3Modal.updateTheme({\n  background: \"rgb(39, 49, 56)\",\n  main: \"rgb(199, 199, 199)\",\n  secondary: \"rgb(136, 136, 136)\",\n  border: \"rgba(195, 195, 195, 0.14)\",\n  hover: \"rgb(16, 26, 32)\"\n});\n```\n\n## Custom Display\n\nIt's possible to customize the display of each provider to change the name, description and logo. These options are available as part of the provider options as following\n\n```typescript\nconst providerOptions = {\n  // Example with injected providers\n  injected: {\n    display: {\n      logo: \"data:image/gif;base64,INSERT_BASE64_STRING\",\n      name: \"Injected\",\n      description: \"Connect with the provider in your Browser\"\n    },\n    package: null\n  },\n  // Example with WalletConnect provider\n  walletconnect: {\n    display: {\n      logo: \"data:image/gif;base64,INSERT_BASE64_STRING\",\n      name: \"Mobile\",\n      description: \"Scan qrcode with your mobile wallet\"\n    },\n    package: WalletConnectProvider,\n    options: {\n      infuraId: \"INFURA_ID\" // required\n    }\n  }\n};\n```\n\nYou can change only one of the display options, you are not required to fill all 3 options, example:\n\n```typescript\nconst providerOptions = {\n  walletconnect: {\n    display: {\n      name: \"Mobile\"\n    },\n    package: WalletConnectProvider,\n    options: {\n      infuraId: \"INFURA_ID\" // required\n    }\n  }\n};\n```\n\n## Custom Provider\n\nIf you would like to include a provider that isn't supported yet on Web3Modal, we would recommend you submit a PR following the simple five steps in our [\"Adding Providers\" instructions](docs/ADDING_PROVIDERS.md)\n\nIf still need to add a custom provider to your Web3Modal integration, you can add it to the provider options with a key prefixed with `custom-` and you will need to include the display options and connector handler as follows\n\n```typescript\nimport ExampleProvider from \"example-provider\";\n\nconst providerOptions = {\n  \"custom-example\": {\n    display: {\n      logo: \"data:image/gif;base64,INSERT_BASE64_STRING\",\n      name: \"Example Provider\",\n      description: \"Connect to your example provider account\"\n    }\n    package: ExampleProvider,\n    options: {\n      apiKey: \"EXAMPLE_PROVIDER_API_KEY\"\n    },\n    connector: async (ProviderPackage, options) => {\n        const provider = new ProviderPackage(options);\n\n        await provider.enable()\n\n        return provider;\n    }\n  }\n}\n```\n\n## Connect to specific provider\n\nIn case you want to connect a specific provider, you can use the method `connectTo` and use the specific id. Example:\n\n```js\nimport Web3 from \"web3\";\nimport Web3Modal from \"web3modal\";\n\nconst providerOptions = {\n  /* See Provider Options Section */\n};\n\nconst web3Modal = new Web3Modal({\n  network: \"mainnet\", // optional\n  cacheProvider: true, // optional\n  providerOptions // required\n});\n\nconst provider = await web3Modal.connectTo(\"walletconnect\");\n\nconst web = new Web3(provider);\n```\n\n## Optional Flags\n\n### Disable Injected Provider\n\nBy default is set to `false` and Web3Modal always displays InjectedProvider as an option to the user if available. However you can disable it as an optional flag if you desire:\n\n```javascript\nconst web3Modal = new Web3Modal({ disableInjectedProvider: true });\n```\n\n### Cache Provider\n\nBy default is set to `false` and Web3Modal will always require the user to choose a provider option before triggering the onConnect event. However you can enable caching the last chosen provider. Example:\n\n```javascript\nconst web3Modal = new Web3Modal({ cacheProvider: true });\n```\n\nIf you wish to reset the cached provider you can call the following method:\n\n```typescript\nweb3Modal.clearCachedProvider();\n```\n\nIf you wish to connect to the cachedProvider you can simply do the following:\n\n```typescript\nif (web3Modal.cachedProvider) {\n  await web3Modal.connect();\n}\n```\n\n## Adding a new provider\n\nDo you want to add your provider to Web3Modal? All logic for supported providers lives inside the `src/providers` directory. To add a new follow the following steps [here](docs/ADDING_PROVIDERS.md)\n\n## Migrating from Web3Connect\n\nIf you were using Web3Connect before you can check the migration instructions for how to use Web3Modal and handle breaking changes [here](docs/MIGRATION_INSTRUCTIONS.md)\n\n## Contributions\n\n**Code contributions are welcome ❤️❤️❤️!**\n\nIf you wish to support a new provider submit a issue to the repo or fork this repo and create a pull request.\n\nYou can join to our discord to further discuss https://discordapp.com/invite/YGnSX9y\n\n## License\n\nMIT\n","readmeFilename":"README.md"}