Web3Modal-Angular

Angular's version of https://github.com/Web3Modal/web3modal. Built on top of 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.

Usage

1. Install Web3Modal-Angular NPM package

npm install --save @mindsorg/web3modal-angular

Or

yarn add @mindsorg/web3modal-angular

2. Import Web3ModalModule which contains and exports the Web3ModalComponent.

3. Instantiate the Web3ModalService with the useFactory pattern:

@NgModule({imports: [Web3ModalModule],providers: [{provide: Web3ModalService,useFactory: ()=>{returnnewWeb3ModalService({network: "mainnet",// optionalcacheProvider: true,// optional
providerOptions // required});},},]})

For more information about the Web3ModalService constructor argument, see: Web3Modal or Web3Modal-TS

The Web3WalletConnector constructors takes an optional configuration argument that matches the original web3modal's configuration object

See Web3Modal's provider options

4. Declare m-web3-modal tag:

<m-web3-modaltitle="Modal Title"
description="Modal description"
descriptionGray="Modal subtitle"
dismissText="Text that will dismiss modal on click"
></m-web3-modal>

5. Call open on Web3ModalService

constprovider=awaitthis.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.

import{Web3Provider}from'@ethersproject/providers';constprovider=awaitthis.web3modalService.open();constweb3provider=newWeb3Provider(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

Additionally, it supports:

WalletLink

1. Install Provider Package

npm install --save walletlink
# OR
yarn add walletlink

2. Set Provider Options

importWalletLinkfrom"walletlink";constproviderOptions={walletlink: {package: WalletLink,options: {infuraUrl: 'https://mainnet.infura.io/v3/PROJECT_ID',appName: "My Awesome DApp",appLogoUrl: "https://example.com/logo.png",darkMode: false},},};

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 build and changes to the web3 modal will be be built.

License

MIT