The Web3 provider wrapper with a common interface to easily interact with different types of blockchains.

yarn add @distributedlab/w3p

For the reactive frameworks such as Vue or react you need to create a wrapper for the provider, which will be used in the application.

here are the the examples for both of them:

• Vue useProvider composable implementation
• React useProvider hook implementation

The Common usage of w3p with vue here

You can setup pinia js and just copy file content, or use it's callback just for create your own composable

Or if you sure, that you will use only one provider, e.g. Metamask

import { MetamaskProvider } from "@distributedlab/w3p"

const provider = await createProvider(MetamaskProvider)

await provider.connect()

To create your own custom provider, you will need to develop a class that implements the ProviderProxyConstructor interface.

export class MyProvider extends BaseEVMProvider implements ProviderProxy {
  constructor(provider: RawProvider) {
    super(provider)
  }

  static get providerType() {
    return EXTERNAL_PROVIDERS.MyProvider
  }
}

If your provider has additional functionalities or different implementation of switching, adding a chain, signing and sending transactions methods, and more, you can create a custom class that extends the ProviderEventBus and implements the ProviderProxy interface. This allows you to override functions according to your specific requirements.

To interact with contract check this example

This project is licensed under the MIT License - see the LICENSE.md file for details