{"_id":"@ansdomain/web3modal","_rev":"1-0cc4d5c5e96685733b6ac27d41445c35","name":"@ansdomain/web3modal","dist-tags":{"latest":"1.9.4"},"versions":{"1.9.4":{"name":"@ansdomain/web3modal","version":"1.9.4","description":"A single Web3 / Ethereum provider solution for all Wallets","keywords":["web3","crypto","ethereum","web3modal","metamask","walletconnect","portis","fortmatic","arkane","torus","authereum","frame","walletlink"],"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","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","eslint":"^7.10.0","babel-eslint":"^10.1.0","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":{"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"},"_id":"@ansdomain/web3modal@1.9.4","_nodeVersion":"16.13.1","_npmVersion":"8.3.1","dist":{"integrity":"sha512-MovAgRH7dMMAUKXC3Ly5w1AMtznCLtxDbrCogGfm49ZMFXM5qrWOtVTelJYHhOmCAEyuEEtMl9Pt9ELH5SjDFg==","shasum":"1a9518b7c89c558ba5f4894de1bf345e11b4c023","tarball":"https://registry.npmjs.org/@ansdomain/web3modal/-/web3modal-1.9.4.tgz","fileCount":79,"unpackedSize":1249428,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGtjqaL4+MO3a0aLpfsUmooHbJYL7LUjdYaOMt3O6FHSAiEAx+T/iAzOBRxN4YZ6vs9F7zNMt7zPSikPBTae3A2aDuY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMlGNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCjA//ZQXEaluN8gwbN9DXSHa0RhrVpZEGKsTB0Yb0tQv6YXHRe30L\r\nqqbAVO5XnPYoduEQtKp6JuU3YUVcu4ydW+fiKmNuN9mZOsOicMt2ufOzI50u\r\nnlHnosqbSqtONxmMIadUA9Hk1GSR64/vnhcxVOQ9AP8x/8M4X1V9XeVM58QF\r\nKebT0Gz5ZTupH5TW4h+bY67M5TlQi4Swg1NkyaKRzO5rS52zBhTJou6ESBr+\r\nHHcD8aiALOorYEVZLI6iyjZssoq5OBOaKv6K8KBzZSo+rdY7lDR0hm4GgOgF\r\nvO97JZ5NyFdcc0tBjuqzNMzRc4voFV1bSFucYb9EFyXY22tBZvs9Pi79I+id\r\noUqL0OVq44cvyJZ0Md3fcNFl7T6ns9hInNyRk7qMA/YQ1ATy8K+4WtVp47I+\r\nHPUFsJc9WboZqVkOo9L7UlgCac1FXkr03UPOXAFjw0K0ExSInOXoVHeOQNq5\r\nWWZEisciFeEeD6kkFWpr/UxfTTnv6FCsH21xoatzkP0u7EvcxpuYeVYfAsfh\r\nM9Z+iSCuUG0sDk9Kpc5UXaF7c/OpIKD3+Q1UPQCeuKkcPtkyivmqj6Wh1XFS\r\nURUvUNuonmORje0qiHyNabugk/n//9uo+Km26XpoD7M71JULNQ/HudZV9OXa\r\nEWH070d0ToxpqyGm5mvMe4cr6uxRZHfFcus=\r\n=WnA+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"arbitrumdomains","email":"arbitrumdns@gmail.com"},"maintainers":[{"name":"arbitrumdomains","email":"arbitrumdns@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web3modal_1.9.4_1664242061317_0.5957824915138055"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-27T01:27:41.254Z","1.9.4":"2022-09-27T01:27:41.755Z","modified":"2022-10-26T13:33:04.640Z"},"maintainers":[{"email":"dev.koold@gmail.com","name":"devilla"},{"email":"arbitrumdns@gmail.com","name":"arbitrumdomains"}],"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","walletlink"],"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- [WalletLink](./docs/providers/walletlink.md)\n\n### Importing providers dynamically\n\nFor the options above you will be asked to provide a `package`. You may optionally import\nthose packages dynamically so that you only import the ones the user actually uses. You \njust need to provide a function that returns a dynamic import of the package, and set \n`packageFactory` to true, e.g:\n\n```\n  providerOptions: {\n    walletconnect: {\n      package: () => import('@walletconnect/web3-provider'),\n      packageFactory: true,\n      options: {\n        infuraId: INFURA_ID\n      }\n    }\n```\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"}