{"_id":"@authereum/web3modal","_rev":"1-08d93201dd532d928cd24960c54dabc2","name":"@authereum/web3modal","dist-tags":{"next":"1.9.2-beta.0","latest":"1.9.2-beta.0"},"versions":{"1.9.2-beta.0":{"name":"@authereum/web3modal","version":"1.9.2-beta.0","description":"A single Web3 / Ethereum provider solution for all Wallets","keywords":["web3","crypto","ethereum","web3modal","metamask","walletconnect","squarelink","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","directories":{"dist":"dist","test":"test"},"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","routine":"npm run clean:all && npm run bootstrap && npm run check","publish:beta":"npm publish --tag beta --access public","publish:next":"npm publish --tag next --access public","publish:latest":"npm publish --tag latest --access public"},"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","chai":"^4.1.2","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":{"@authereum/starkware-provider":"1.7.0-beta.7","@authereum/starkware-wallet":"^1.3.0-beta.1","detect-browser":"^5.1.0","ethers":"^5.0.24","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6","styled-components":"^5.1.1","tslib":"^1.10.0"},"gitHead":"b3f90881468a81d217c73571d7af1a0287d46247","_id":"@authereum/web3modal@1.9.2-beta.0","_nodeVersion":"11.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-I4jUgfQ5BwNzWYbf42tt9bqENEQQbwkDT2tqXevgq1PVPv5GSWEqxbuogImEI5G+uA7DV1uVpmBWz7ZEMKux4Q==","shasum":"2794f2998d267ec01e7177375005964843a3020c","tarball":"https://registry.npmjs.org/@authereum/web3modal/-/web3modal-1.9.2-beta.0.tgz","fileCount":81,"unpackedSize":10807342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4mpgCRA9TVsSAnZWagAANLwP/RmnZ7sFggruBNHxTPT/\nFykYQfDYTT9fOFmUu4fRMxF2jiqR3rh4u843i5M5T6D2MH/voPMZFuUH5IWq\nPB5mU1v+WPzTKqu75Ci5O6Wlf4zRm/CWg6RNxXtfv2lb/uAAG/7SU0gQ2GaV\ntRN/a+hqYUwRY2ejSW6lpZpSk5i4UHf/jSb7RAthDH4PgVLU0VDIffm4zk8g\nq5AyyLM9SA0iSA6p7wI+NdGskYRPEbnN4Y2unYmJyTGXwLelNr6YhGPjXo/v\nF/oAZAH6TFTdHHlKCnWCvzwD61THJFHkAzCX5h7dwXTl4HmM3WxJsvox6qVC\nnoLubKls0KmLVoO/mw702ZspQbLaQwZxQ2ps/M8evIZzQZcl2+0TOZV4AeHV\nnM89zs9oV1AFT1QSxJSL50TEScUVJ8l1lgqx+uM6v8UMPu98USFbO3HyHsk0\n3Jg8Gl5ZVaWdQjLt5/FmWE5g+joQv3hi7US5brt6JyzI51ew4mnpUsgCxoGq\nCGfQqvtv/Wf0rMvilOuZhyiPojegLi85Tqq7CATfGG+QmieX0o90X4hbPrFf\nYXQeGStuwyn8oTQFwC+nYwWfPO7cXcuMUbIur6GzbnUzKaCWN1lPpHJSQSEu\nYHpfvnYOz3IJstesnSSE8MvvQWWxPSNS3w7wBeuT+iTotfWX9xs+chLcRXCu\n8tHE\r\n=/Ay/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGrbxKirKhA4uDSXt3fnXOz52UwH4h0K+EMjwlIwQBjqAiBkrP2Vmkk0XDLBxEuOpsyCDVhFb/vrWQqsb55ceaIBig=="}]},"_npmUser":{"name":"miguelmota","email":"hello@miguelmota.com"},"maintainers":[{"name":"miguelmota","email":"hello@miguelmota.com"},{"name":"shanefontaine","email":"shane6fontaine@gmail.com"},{"name":"cwhinfrey","email":"cwhinfrey@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web3modal_1.9.2-beta.0_1608673887499_0.701169515062843"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-22T21:51:27.328Z","1.9.2-beta.0":"2020-12-22T21:51:27.788Z","modified":"2022-04-04T16:31:45.488Z"},"maintainers":[{"name":"miguelmota","email":"hello@miguelmota.com"},{"name":"shanefontaine","email":"shane6fontaine@gmail.com"},{"name":"cwhinfrey","email":"cwhinfrey@gmail.com"}],"description":"A single Web3 / Ethereum provider solution for all Wallets","homepage":"https://github.com/web3modal/web3modal","keywords":["web3","crypto","ethereum","web3modal","metamask","walletconnect","squarelink","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## Utis\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"}