dappkit-react v0.1.5

@layerx-labs/dappkit-react

$ npm install -s @layerx-labs/dappkit-react

Usage

Available hooks

import {useDappkitConnection, useDappkitConnectionInfo} from "./use-dappkit";
// ... your component

// share this connection with your other dappkit classes
const {connection} = useDappkitConnection();

// check connection address, chainId and connected status
const {address, chainId, connected} = useDappkitConnectionInfo(); 

Wallet selector

import {WalletSelector, ConnectorsNames} from "@layerx-labs/dappkit-react";

const [showModal, setShowModal] = useState(false);
// .. your component
<WalletSelector availableWallets={[ConnectorsNames.Metamask, ConnectorsNames.Coinbase]}
                showAddress={true} 
                reloadOnProviderDisconnect={true}/>

On wallet selection, WalletSelector component will update the values of useDappkitConnectionInfo()

import {useDappkitConnectionInfo} from "@layerx-labs/dappkit-react";

const {address} = useDappkitConnectionInfo();

useEffect(() => { console.log(Connected address, address); }, address)

**Supported Wallets**

| wallet            | `ConnectorsNames`  |
|:------------------|:-------------------|
| Coinbase          | Coinbase           |
| Metamask          | Metamask           |
| Safe              | GnosisSafe         |
| Wallet Connect v2 | WalletConnect      |

### Sharing your connection with other dappkit classes

```ts
import {ERC20} from "@taikai/dappkit";
import {useDappkitConnection} from "@layerx-labs/dappkit-react";
import {useEffect, useState} from "react";

function useERC20(tokenAddress: string) {
  const [token, setToken] = useState<ERC20 | null>(null);

  const {connection} = useDappkitConnection();

  useEffect(() => {
    if (!connection) {
      setToken(null);
      return;
    }

    setToken(new ERC20(connection, tokenAddress));
  }, [connection]);

  function transferTokenAmount(amount: number, address: string) {
    if (!token)
      return;

    return token.transferTokenAmount(address, amount);
  }
  
  return {token, transferTokenAmount};
}