Skip to content

Nach0Git/web3modal-angular

 
 

Repository files navigation

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
  1. Import Web3ModalModule which contains and exports the Web3ModalComponent.

  2. 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

  1. 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>
  1. 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
  1. 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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 47.1%
  • HTML 43.7%
  • JavaScript 4.6%
  • SCSS 4.5%
  • CSS 0.1%