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: () => {
        return new Web3ModalService({
          network: "mainnet", // optional
          cacheProvider: 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-modal
  title="Modal Title"
  description="Modal description"
  descriptionGray="Modal subtitle"
  dismissText="Text that will dismiss modal on click"
></m-web3-modal>

5. Call open on Web3ModalService

  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.

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

Additionally, it supports:

WalletLink

1. Install Provider Package

npm install --save walletlink

# OR

yarn add walletlink

2. Set Provider Options

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
    },
  },
};

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