Wallet Adapter React

How to use

Install the sdk

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

npm install next-transpile-modules --save-dev

// or

yarn add next-transpile-modules -D

next.config.js:

/** @type {import('next').NextConfig} */

const withTM = require("next-transpile-modules")([

"@renec-foundation/wallet-adapter-react",

]);

module.exports = withTM({});

Integrate

1. Import css

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

2. Add provider

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

   <WalletProvider isMainnet={true} autoConnect={true} e2eWalletPrivKey={""}>

   {children}

   </WalletProvider>;
   • Require
     • isMainnet: Choose either true or false to select the mainnet or testnet.
     • autoConnect: Set the value to true or false to enable or disable auto connect feature.
   • Optional
     • e2eWalletPrivKey: The passphrase of the test wallet used for end-to-end (e2e) testing.

Import button connect

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

// Default

<DemonWalletConnect />

// Customs

<DemonWalletConnect

listMenuItems={

<>

<li onClick={undefine}>

{'Title 1'}

</li>

<li onClick={undefine}>

{'Title 2'}

</li>

</>

}

/>