@hashlike-official/extend-web3-react-wrapper

It offers a common interface for different wallet providers.
currently, metamask and kaikas.

You can easily extend this library to integrate other wallet what you want.
Just implement abstract classes under src/types folder.

• abstract class WalletLibrary
• abstract class WrappedContract

example

Look packages/example-cra

state management

• states from web3-react
• currently connected wallet, account, balance
• functions that can change states

type WalletType = "MetaMask" | "Kaikas";

type WalletLibraryType = {
  connector: Connector;
  hooks: Web3ReactHooks;
  store: Web3ReactStore;
  currentType: WalletType | undefined;
  pending: number;
  balance: number;
  account: string;
  connect: (type: WalletType, chainId?: number) => Promise<void>;
  fetchBalance: (provider: WalletLibrary<any>) => Promise<void>;
};

you can get state inside react components like this:

import { useWeb3Store } from "@hashlike-official/extend-web3-react-wrapper";

export default function MyComponent() {
  const account = useWeb3Store(state => state.account);
  const connect = useWeb3Store(state => state.connect);
  // ...
}

hooks

• useProvider : it returns connected wallet's provider like Web3Provider(@ethersproject/providers), Caver(caver-js)

  const provider = useProvider();
  // ...
  const getBlockNumber = useCallback(async () => {
    if (provider) {
      const blockNumber = await provider.getBlockNumber();
      setBlockNumber(blockNumber);
    }
  }, [provider]);
  // ...

• useTransfer : it returns function which can submits transaction to the network.

  const transfer = useTransfer();
  const account = useWeb3Store((state) => state.account);
  // ...
  const sendButtonHandler = () => {
    if (account) {
      transfer(account, sendAddress, sendKlay);
    }
  };
  // ...

• useInitWallet : you can initialize account and balance with specipic wallet type(metamask, kaikas) which stored in localStorage and specific chainId.(but it doesn't work with kaikas)

  function App() {
    useInitWallet(1001);
    // ...
  }