@renec-foundation/wallet-adapter-react

Demon wallet adapter for 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} e2eWalletPrivKey={""}>
     {children}
   </WalletProvider>;

   • Required
     • isMainnet: Choose either true or false to select the mainnet or testnet.
   • Optional
     • e2e: Set this to true to use the mocked adapter for E2E testing
     • e2eWalletAdapterConfig: Used to config the mocked adapter

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>
    </>
  }
/>

• 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