Web3-Connect

Easy way to connect users to Decentralized Applications.

English | Ukrainian

✨ Features

• Connection of Multiple Wallets and Accounts: Enable your app users to link several wallets and multiple accounts inside each wallet simultaneously.
• Support for Multiple Chains: Enable users to easily switch between different networks and chains.
• Wallet Management Center: A persistent interface for managing wallet connections and networks, with a responsive version designed for mobile devices.
• Real-time Notifications: Receive immediate transaction notifications for all transaction states on the connected wallet addresses.
• Standardization of Wallet Providers: All wallet modules provide a provider that conforms to the specifications of EIP-1193, EIP-1102, EIP-3085 and EIP-3326 specifications.
• Dynamic Loading: To support multiple wallets in your app, you need many dependencies. Web3Connect loads a wallet and its dependencies dynamically only when the user selects it, resulting in minimal bandwidth usage.

☀️ License

MIT

🖥 Environment Support

• Angular ^15.0.0
• Server-side Rendering

📦 Installation

We recommend using @angular/cli to install. It not only makes development easier, but also allows you to take advantage of the rich ecosystem of angular packages and tooling.

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add @b-ee/web3-connect

More information about @angular/cli here.

You can also install @b-ee/web3-connect with npm or yarn

$ npm install @b-ee/web3-connect
$ yarn add @b-ee/web3-connect

🔨 Usage

Import the component modules you want to use into your app.module.ts file and feature modules.

import {Web3ConnectModule} from "@b-ee/web3-connect";

@NgModule({
  imports: [ Web3ConnectModule ]
})
export class AppModule {
}

Then initialize in your app:

import {Init, injectedModule} from "@b-ee/web3-connect";

const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'

@Component({
  selector: 'app-root',
  template: `
     <web3-connect></web3-connect>
     <button (click)="connect()">Connect Wallet</button>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  private injected = injectedModule();

  private web3Connect = Init({
    wallets: [this.injected],
    chains: [
      {
        id: '0x1',
        token: 'ETH',
        label: 'Ethereum Mainnet',
        rpcUrl: MAINNET_RPC_URL
      }
    ]
  })

  async connect(): Promise<void> {
    const wallets = await this.web3Connect.connectWallet();
    console.log(wallets);
  }
}

⌨️ Development

$ git clone git@github.com:bee-io/web3-connect.git
$ cd web3-connect
$ yarn install
$ npm run demo

Browser would open automatically.

🤝 Contributing

We welcome all contributions. You can submit any ideas as pull requests or as GitHub issues.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way (This guide does not provide actual support services for this project!), How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

We list some users here, if your company or product uses @b-ee/web3-connect, let us know here!

Love @b-ee/web3-connect? Give our repo a star ⭐ ⬆️.