# Demon wallet adapter for React

## How to use

##### Install the sdk

```shell
  npm install @renec-foundation/wallet-adapter-react
  // or
  yarn add @renec-foundation/wallet-adapter-react
```

**_In case you are using Next.js, install below module add this to your `next.config.js` file_**

```shell
  npm install next-transpile-modules --save-dev
  // or
  yarn add next-transpile-modules -D
```

_`next.config.js`_:

```typescript
/** @type {import('next').NextConfig} */
const withTM = require("next-transpile-modules")([
  "@renec-foundation/wallet-adapter-react",
]);

module.exports = withTM({});
```

##### Integrate

1. Import css

   ```js
   import "@renec-foundation/wallet-adapter-react/src/style.css";
   ```

2. Add provider

   ```js
   import { Provider as WalletProvider } from "@renec-foundation/wallet-adapter-react";

   <WalletProvider isMainnet={true} e2eWalletPrivKey={""}>
     {children}
   </WalletProvider>;
   ```

   - **Require**
     - **isMainnet**: Choose either `true` or `false` to select the mainnet or testnet.
   - **Optional**
     - **e2eWalletPrivKey**: The passphrase of the test wallet used for end-to-end (e2e) testing.

##### Import button connect

```js
import { WalletMultiButton as DemonWalletConnect } from "@renec-foundation/wallet-adapter-react";
// or
const DemonWalletConnect = dynamic(
  async () =>
    (await import("@renec-foundation/wallet-adapter-react")).WalletMultiButton,
  { ssr: false }
);
```

- using the button

```js
// Default
<DemonWalletConnect />

// Customs
<DemonWalletConnect
  listMenuItems={
    <>
      <li onClick={undefine}>
        {'Title 1'}
      </li>
      <li onClick={undefine}>
        {'Title 2'}
      </li>
    </>
  }
/>
```

- **className?: string**: The class add-ons for button
- **disabled?: boolean**: Disabled button
- **endIcon?: ReactElement**: The end icon in button
- **beginIcon?: ReactElement**: The begin icon in button
- **style?: CSSProperties**: The style of button
- **listMenuItems**: The list contains custom add-ons
- **tabIndex?: number**: The tab Index
