@decent-org/wallet-provider NPM

Decent Wallet Provider

Easily connect a dApp to a web3 wallet. Built with the help of web3modal and etherss' providers, this package quickly gets a dApp connected and interacting with an EVM compaitble blockchain with just a few props and 2 components.

Supported Wallets

Injected Wallets

Metamask, Frame etc

WalletConnect

WalletConnect Provider allows connection to mobile and supported desktop apps

Installation

Versions

React

This package uses react hooks and the Context API. react@16 or greater is required.

React-scripts

if using react-scripts version 5.0.0 or greater, react-app-rewired will be needed, along with process, buffer, util packages.

npm install react-app-rewired process buffer util

and then add config-overrifdes.js from the sandbox to allow for these node packages to be added to webpack.

Provider

Web3Provider is uses React Context API to pass the wallet provider's state to the rest of the dApp. Simply Wrap the component tree you wish to have access to the wallet provider's state.

import { Web3Provider } from '@decent-org/wallet-provider'

ReactDOM.render(
  <Web3Provider config={config} theme={theme}>
    <App />
  </Web3Provider>
);

<Web3Provider> accepts 2 props.

name	default	type	required	description
config	-	DWPConfig	`true`	Provider configurations
theme	'light'	`string` \| ModalTheme	`false`	Web3Modal theme settings

DWPConfig

Configuration for the wallet-provider.

name	default	type	required	description
providerKeys	-	ProviderKeys	At least one key is required.	Node api keys for fallback provider
localChainId	`undefined`	`string`	`false`	Chain id for local node
localProviderURL	`undefined`	`string`	`false`	providerURL for local node
fallbackChainId	-	`string`	`true`	Chain Id for when wallet is not connected
supportedChainIds	-	`string`	`true`	Supported main/test net chain ids. Should be formatted as `1,3,4,42`

Theme

This property is optional. See web3modal for more details.

Usage

The useWeb3Provider() hook allows access to the Wallet Provider and connection information within state. For typed definitions see types

export interface IWeb3ProviderContext {
  state: InitialState;
  connect: ConnectFn;
  disconnect: DisconnectFn;
}

import { useWeb3Provider } from '@decent-org/wallet-provider';

function Component() {
  const { state: { account, chaindId, network, connectionType } } = useWeb3Provider();

  console.log(account)
  // if connected 0x.... 
  // if not connected null
  console.log(chainId)
  // 0x04
  console.log(network)
  // 'rinkeby'
  console.log(connectionType)
  // 'injected provider'
  ... 
}

Connecting and Disconnect to Wallet

import { useWeb3Provider } from '@decent-org/wallet-provider';

function Component() {
  const { state: { account },  connect, disconnect } = useWeb3Provider();

  if(!account) {
    return (
      <button onClick={connect}>Connect</button>
    )
    return (
      <button onClick={disconnect}>Disconnect</button>
    )
  }
}

Interacting with the blockchain

function Component() {
  const { state: { provider, signer } } = useWeb3Provider();

  // When retreiving information use provider
    provider.on('block',  (block: number) => {
      setBlockNumber(block);
    };);

  // When broadcasting a transaction or interacting with a contract use Signer
  ontract.connect(daoData.moduleAddresses[1], signer);
}

Events

Add an event eventListener and subscribe to wallet-provider events. There is a Constant you can import to ensure correct subscription. For an example using React Toastify see the useEvents.

import { PROVIDER_EVENT } from '@decent-org/wallet-provider';

window.addEventListener(PROVIDER_EVENT, (event: CustomEventInit<WalletProviderEvent>) => {
      console.log(event.detail!.message)
      return
    })
  }

title	type	description	ex: message
UNSUPPORTED_CHAIN_IDS	warn	Connected chain id is not supported	Switch to a supported chain: 1, 4

Utilities

Coming soon

Local Development

Some scripts have been created to help get going quickly

Node

nvm use to change to node version 16.15.1

Scripts

install:packages

removes node_modules from root and sandbox directories before installing packages.

npm run install:packages

build:link

Cleans, builds and then re-establishes a local npm link between the packages dist directory and a package within the node_modules of the sandbox.

npm run build:link

build:start

Note: There currently is not a hotloader to automatically build when files are updated. after running npm run build:start, you will need to restart your development server. It's recommended you spilt your terminal to run these commands as needed.

This script will do all of the above and restart sever. currently quickest way to update sandbox with more recent build.