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

> web3-react wrapper - it offers a common interface for different wallet providers

Latest version **1.0.25** (published 2022-08-29) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @hashlike-official/extend-web3-react-wrapper
pnpm add @hashlike-official/extend-web3-react-wrapper
yarn add @hashlike-official/extend-web3-react-wrapper
bun add @hashlike-official/extend-web3-react-wrapper
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.25 |
| Published | 2022-08-29 |
| First published | 2022-04-07 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 38.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kim HyunJin |
| Maintainers | hjkim-hashlike, hashlike1 |
| Keywords | web3-react, metamask, kaikas |

## Links

- npm: https://www.npmjs.com/package/@hashlike-official/extend-web3-react-wrapper
- Repository: https://github.com/hashlike-official/extend-web3-react
- Homepage: https://github.com/hashlike-official/extend-web3-react#readme
- Issues: https://github.com/hashlike-official/extend-web3-react/issues
- npm.io page: https://npm.io/package/@hashlike-official/extend-web3-react-wrapper

## Dependencies (8)

- [@web3-react/core](https://npm.io/package/@web3-react/core.md) 8.0.35-beta.0
- [@web3-react/store](https://npm.io/package/@web3-react/store.md) ^8.0.25-beta.0
- [@web3-react/types](https://npm.io/package/@web3-react/types.md) ^8.0.20-beta.0
- [@ethersproject/units](https://npm.io/package/@ethersproject/units.md) ^5.6.0
- [@web3-react/metamask](https://npm.io/package/@web3-react/metamask.md) 8.0.28-beta.0
- [@ethersproject/contracts](https://npm.io/package/@ethersproject/contracts.md) ^5.6.0
- [@ethersproject/providers](https://npm.io/package/@ethersproject/providers.md) ^5.6.5
- [@hashlike-official/extend-web3-react-kaikas](https://npm.io/package/@hashlike-official/extend-web3-react-kaikas.md) ^1.0.14

## Recent versions

- 1.0.25 (latest) — 2022-08-29
- 1.0.24 — 2022-08-29
- 1.0.23 — 2022-08-29
- 1.0.22 — 2022-08-05
- 1.0.21 — 2022-08-05
- 1.0.20 — 2022-07-27
- 1.0.19 — 2022-07-27
- 1.0.17 — 2022-07-27
- 1.0.16 — 2022-07-27
- 1.0.15 — 2022-05-27
- 1.0.14 — 2022-05-25
- 1.0.13 — 2022-05-25
- 1.0.12 — 2022-05-04
- 1.0.11 — 2022-05-04
- 1.0.10 — 2022-05-04
- … 10 more at https://npm.io/package/@hashlike-official/extend-web3-react-wrapper/versions

## README

# @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

```typescript
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:

```typescript
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)

  ```typescript
  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.

  ```typescript
  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)

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

---
_Source: https://npm.io/package/@hashlike-official/extend-web3-react-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._