Saltar al contenido principal

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