# @renec-foundation/wallet-adapter-react

> Wallet adapter React UI components shared for Next.js projects

Latest version **0.2.7-b** (published 2025-11-10) · 0 weekly downloads

## Install

```sh
npm install @renec-foundation/wallet-adapter-react
pnpm add @renec-foundation/wallet-adapter-react
yarn add @renec-foundation/wallet-adapter-react
bun add @renec-foundation/wallet-adapter-react
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.7-b |
| Published | 2025-11-10 |
| First published | 2023-05-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 61.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | RENEC Foundation |
| Maintainers | renec-foundation |
| Keywords | react, components, shared, nextjs, mui, material-ui, demon, wallet |

## Links

- npm: https://www.npmjs.com/package/@renec-foundation/wallet-adapter-react
- Repository: https://github.com/renec-foundation/wallet-adapter-react
- Homepage: https://github.com/renec-foundation/wallet-adapter-react#readme
- Issues: https://github.com/renec-foundation/wallet-adapter-react/issues
- npm.io page: https://npm.io/package/@renec-foundation/wallet-adapter-react

## Dependencies (13)

- [bs58](https://npm.io/package/bs58.md) ^5.0.0
- [react](https://npm.io/package/react.md) 18.2.0
- [encoding](https://npm.io/package/encoding.md) ^0.1.13
- [react-dom](https://npm.io/package/react-dom.md) 18.2.0
- [tweetnacl](https://npm.io/package/tweetnacl.md) ^1.0.3
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.13.2
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0
- [@solana/web3.js](https://npm.io/package/@solana/web3.js.md) ^1.77.2
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.11.16
- [react-device-detect](https://npm.io/package/react-device-detect.md) ^2.2.3
- [@solana/wallet-adapter-base](https://npm.io/package/@solana/wallet-adapter-base.md) ^0.9.22
- [@solana/wallet-adapter-react](https://npm.io/package/@solana/wallet-adapter-react.md) ^0.15.32

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.2.7-b (latest) — 2025-11-10
- 0.2.14 (beta) — 2024-05-20
- 0.2.7-a — 2025-11-07
- 0.3.6 — 2025-11-05
- 0.3.5 — 2024-10-16
- 0.3.4 — 2024-10-11
- 0.3.3 — 2024-10-11
- 0.3.0-alpha — 2024-10-07
- 0.2.12 — 2024-05-20
- 0.2.11 — 2024-05-20
- 0.2.9 — 2024-05-20
- 0.2.8 — 2024-01-29
- 0.2.7-beta — 2024-01-29
- 0.2.7 — 2024-01-24
- 0.2.6 — 2023-12-17
- … 27 more at https://npm.io/package/@renec-foundation/wallet-adapter-react/versions

## README

# 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

---
_Source: https://npm.io/package/@renec-foundation/wallet-adapter-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._