{"id":27770709,"url":"https://github.com/minds/web3modal-angular","last_synced_at":"2025-04-29T21:14:49.110Z","repository":{"id":43646465,"uuid":"306037474","full_name":"Minds/web3modal-angular","owner":"Minds","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-18T09:43:26.000Z","size":2134,"stargazers_count":17,"open_issues_count":10,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-29T21:14:44.399Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Minds.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-21T13:41:42.000Z","updated_at":"2025-04-21T00:55:45.000Z","dependencies_parsed_at":"2024-12-18T10:30:58.544Z","dependency_job_id":"cd573fd1-8182-4774-a902-09786b5294cf","html_url":"https://github.com/Minds/web3modal-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Minds%2Fweb3modal-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Minds%2Fweb3modal-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Minds%2Fweb3modal-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Minds%2Fweb3modal-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Minds","download_url":"https://codeload.github.com/Minds/web3modal-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251582942,"owners_count":21612747,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-29T21:14:48.624Z","updated_at":"2025-04-29T21:14:49.101Z","avatar_url":"https://github.com/Minds.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web3Modal-Angular\n\nAngular's version of https://github.com/Web3Modal/web3modal. Built on top of [web3modal-ts](https://gitlab.com/minds/web3modal-ts/).\n\n## Motivation\n\nWeb3Modal is a very useful and easy to use library, that allows developers to add support for multiple providers in their apps with a simple customizable configuration. \n\nThis project aims to provide the same ease of use as the original Web3Modal, in Angular, by leveraging the connectors/providers layer that the original Web3Modal implemented and was abstracted into [web3modal-ts](https://gitlab.com/minds/web3modal-ts/).\n\n## Usage\n\n1. Install Web3Modal-Angular NPM package\n\n```bash\nnpm install --save @mindsorg/web3modal-angular\n```\n\nOr\n\n```bash\nyarn add @mindsorg/web3modal-angular\n```\n\n2. Import `Web3ModalModule` which contains and exports the `Web3ModalComponent`.\n\n3. Instantiate the `Web3ModalService` with the `useFactory` pattern:\n\n```ts\n@NgModule({\n  imports: [Web3ModalModule],\n  providers: [\n    {\n      provide: Web3ModalService,\n      useFactory: () =\u003e {\n        return new Web3ModalService({\n          network: \"mainnet\", // optional\n          cacheProvider: true, // optional\n          providerOptions // required\n        });\n      },\n    },\n  ]\n})\n```\n\nFor more information about the `Web3ModalService` constructor argument, see: [Web3Modal]((https://github.com/Web3Modal/web3modal#usage)) or [Web3Modal-TS](https://gitlab.com/minds/web3modal-ts/)\n\nThe `Web3WalletConnector` constructors takes an optional configuration argument that matches the [original web3modal's configuration object](https://github.com/Web3Modal/web3modal#usage)\n\nSee [Web3Modal's provider options](https://github.com/Web3Modal/web3modal#provider-options)\n\n4. Declare `m-web3-modal` tag:\n\n```html\n\u003cm-web3-modal\n  title=\"Modal Title\"\n  description=\"Modal description\"\n  descriptionGray=\"Modal subtitle\"\n  dismissText=\"Text that will dismiss modal on click\"\n\u003e\u003c/m-web3-modal\u003e\n```\n\n5. Call `open` on `Web3ModalService`\n\n```ts\n  const provider = await this.web3modalService.open();\n\n```\n\nThis method returns a promise that resolves on connection and rejects on modal dismissal or connection errors.\n\nThe provider object resolved by the promise can be seamlessly consumed by a web3 library, like `Web3JS` or `EthersJS`.\n\n```ts\nimport { Web3Provider } from '@ethersproject/providers';\n\nconst provider = await this.web3modalService.open();\nconst web3provider = new Web3Provider(provider)\n```\n\n## Provider Options\n\nWeb3Modal-TS supports the original Web3modal's Metamask WalletConnect, Fortmatic, Torus, Authereum, UniLogin, BurnerConnect, Portis, Squarelink, Arkane, Mew Connect protocol, D'CENT Wallet and Bitski. See [Web3Modal's provider options](https://github.com/Web3Modal/web3modal#provider-options)\n\nAdditionally, it supports the overriding of logo urls by including a logoUrl in the provider options of the configuration.\n\n```ts\nconst providerOptions = {\n  ...,\n  logoUrl: 'https:///logo.jpg', // optional url to override logo\n}\n```\n\n### WalletLink\n\n1. Install Provider Package\n\n```bash\nnpm install --save walletlink\n\n# OR\n\nyarn add walletlink\n```\n\n2. Set Provider Options\n\n```typescript\nimport WalletLink from \"walletlink\";\n\nconst providerOptions = {\n  walletlink: {\n    package: WalletLink,\n    options: {\n      infuraUrl: 'https://mainnet.infura.io/v3/PROJECT_ID',\n      appName: \"My Awesome DApp\",\n      appLogoUrl: \"https://example.com/logo.png\",\n      darkMode: false\n    },\n    logoUrl: 'https://logo-url-override/logo.png', // optional url to override logo\n  }\n};\n```\n\n### Development Troubleshooting\n\nIf you experience issues using `npm link` for development, you can manually create a symbolic link in the node_modules folder.\n\n```\n# In your project front-end - e.g. minds/front\ncd node_modules/@mindsorg\n\n# Optional - make a copy of the existing module to save having to reinstall later. \nmv web3modal-angular .web3modal-angular\n\n# Adjust the path below to point to the dist folder\nln -s ../../../web3modal-angular/dist/web3modal/ web3modal-angular\n```\n\nNow when you go into the web3modal-angular's folder, you can run `npm run build` and changes to the web3 modal will be be built.\n\n\n## Publish\n\n```sh\nnpm run build web3modal\ncd dist/web3modal\n# you may need to update the package.json version number\nnpm publish . --verbose --access public\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminds%2Fweb3modal-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminds%2Fweb3modal-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminds%2Fweb3modal-angular/lists"}