https://github.com/minds/web3modal-angular
https://github.com/minds/web3modal-angular
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/minds/web3modal-angular
- Owner: Minds
- License: mit
- Created: 2020-10-21T13:41:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-12-18T09:43:26.000Z (over 1 year ago)
- Last Synced: 2025-04-29T21:14:44.399Z (about 1 year ago)
- Language: TypeScript
- Size: 2.04 MB
- Stars: 17
- Watchers: 4
- Forks: 8
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web3Modal-Angular
Angular's version of https://github.com/Web3Modal/web3modal. Built on top of [web3modal-ts](https://gitlab.com/minds/web3modal-ts/).
## Motivation
Web3Modal 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.
This 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/).
## Usage
1. Install Web3Modal-Angular NPM package
```bash
npm install --save @mindsorg/web3modal-angular
```
Or
```bash
yarn add @mindsorg/web3modal-angular
```
2. Import `Web3ModalModule` which contains and exports the `Web3ModalComponent`.
3. Instantiate the `Web3ModalService` with the `useFactory` pattern:
```ts
@NgModule({
imports: [Web3ModalModule],
providers: [
{
provide: Web3ModalService,
useFactory: () => {
return new Web3ModalService({
network: "mainnet", // optional
cacheProvider: true, // optional
providerOptions // required
});
},
},
]
})
```
For more information about the `Web3ModalService` constructor argument, see: [Web3Modal]((https://github.com/Web3Modal/web3modal#usage)) or [Web3Modal-TS](https://gitlab.com/minds/web3modal-ts/)
The `Web3WalletConnector` constructors takes an optional configuration argument that matches the [original web3modal's configuration object](https://github.com/Web3Modal/web3modal#usage)
See [Web3Modal's provider options](https://github.com/Web3Modal/web3modal#provider-options)
4. Declare `m-web3-modal` tag:
```html
```
5. Call `open` on `Web3ModalService`
```ts
const provider = await this.web3modalService.open();
```
This method returns a promise that resolves on connection and rejects on modal dismissal or connection errors.
The provider object resolved by the promise can be seamlessly consumed by a web3 library, like `Web3JS` or `EthersJS`.
```ts
import { Web3Provider } from '@ethersproject/providers';
const provider = await this.web3modalService.open();
const web3provider = new Web3Provider(provider)
```
## Provider Options
Web3Modal-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)
Additionally, it supports the overriding of logo urls by including a logoUrl in the provider options of the configuration.
```ts
const providerOptions = {
...,
logoUrl: 'https:///logo.jpg', // optional url to override logo
}
```
### WalletLink
1. Install Provider Package
```bash
npm install --save walletlink
# OR
yarn add walletlink
```
2. Set Provider Options
```typescript
import WalletLink from "walletlink";
const providerOptions = {
walletlink: {
package: WalletLink,
options: {
infuraUrl: 'https://mainnet.infura.io/v3/PROJECT_ID',
appName: "My Awesome DApp",
appLogoUrl: "https://example.com/logo.png",
darkMode: false
},
logoUrl: 'https://logo-url-override/logo.png', // optional url to override logo
}
};
```
### Development Troubleshooting
If you experience issues using `npm link` for development, you can manually create a symbolic link in the node_modules folder.
```
# In your project front-end - e.g. minds/front
cd node_modules/@mindsorg
# Optional - make a copy of the existing module to save having to reinstall later.
mv web3modal-angular .web3modal-angular
# Adjust the path below to point to the dist folder
ln -s ../../../web3modal-angular/dist/web3modal/ web3modal-angular
```
Now 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.
## Publish
```sh
npm run build web3modal
cd dist/web3modal
# you may need to update the package.json version number
npm publish . --verbose --access public
```
## License
MIT