To build a dapp, connecting the wallet and utilizing it is crucial. It is the way for end users to interact with the blockchain and perform transactions such as transferring funds, moving assets, conducting verification, and signing transactions. For the RENEC blockchain, we have developed and packaged the wallet usage through the "@renec-foundation/wallet-adapter-react" library. Dapps will collectively use this library.

Guidelines

1. Install:

   Ensure you have Node.js and npm installed, then install the wallet adapter library using the following command:

   npm install @renec-foundation/wallet-adapter-react

   or yarn add @renec-foundation/wallet-adapter-react

   or pnpm install @renec-foundation/wallet-adapter-react

2. Integrate into Your Dapp:

   Ensure that the Dapp projects are developed using ReactJS or NextJS.

   First of all, for each project, we need to package the existing code of the current project in the wallet-provider as follows:

   app.tsx

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

   const AppThemeProvider = ({ children }: Props) => {

   return (

   <WalletProvider

   isMainnet={IS_MAINNET}

   locale={locale as TLocale}

   >

   {children}

   </WalletProvider>

   )}

   There are two crucial attributes:

   • isMainnet: Used to determine whether the project is being tested in the testnet or production environment, with a data type of boolean.

   • locale: Used to display text in the wallet module based on the current locale (default is "en").

3. Access Wallet State:

   The library provides a button component for the Dapp with full functionality to connect the wallet, display text, and surrounding elements.

   button.tsx

   import { WalletMultiButton } from '@renec-foundation/wallet-adapter-react';

   const ConnectWalletButton = () => {

   const menuItems = useMemo(() => {

   return (

   <>

   <li role="menuitem">

   <Link

   style={{ color: 'white', textDecoration: 'none' }}

   href="/"

   >

   {"Testing"}

   </Link>

   </li>

   </>

   );

   }, []);

   return (

   <WalletMultiButton

   style={styles.buttonConnectWalletStyle}

   listMenuItems={menuItems}

   />

   )

   }

   There are two optional attributes:

   • style: Customize button's style (background-color, text color, etc).
   • listMenuItems: Customize the menu items that are displayed when the button is clicked.

   Additionally, if you want to customize the button and only use the wallet connection function of the library, you can use:

   import { useConnectWallet } from '@renec-foundation/wallet-adapter-react';

   const { connectWallet } = useConnectWallet();

   Furthermore, to access the wallet state, such as the connected wallet address or the connection to the blockchain, you can use the Solana Web3 library @solana/wallet-adapter-react

   import { useWallet } from '@renec-foundation/wallet-adapter-react';

   const { publicKey, wallet } = useWallet();

4. Handle transactions

   Utilize the wallet provider's functions for handling transactions, signing, and other blockchain interactions.

   For Dapps that utilize their own smart contract with a specific program ID, initially, we need to initialize a program variable under the AnchorProvider class and the corresponding IDL for that program (you can write it as a hook or create an instance within your Dapp).

   import { useConnection, useAnchorWallet, useWallet } from "@renec-foundation/wallet-adapter-react";

   const anchorWallet = useAnchorWallet();

   const provider = new AnchorProvider(connection, anchorWallet, { commitment: "confirmed" });

   const program = new Program(IDL, config.program_id, provider);

   We can use program variable to interact with RENEC blockchain

   To execute a transaction on the wallet, we need to create instructions within a transaction and send them to the blockchain for validation. We can follow the steps as follows:

   import { useWallet } from '@renec-foundation/wallet-adapter-react';

   const {publicKey, wallet} = useWallet()

   // build instruction depend on program and smart contract that is designed by developer. This is pseudo code

   const instructions = [

   await program.methods.

   placeOrder(new PublicKey(tokenAddress), true).accounts({

   authority: publicKey,

   configAccount: new PublicKey(config.config_account),

   operatorAccount: new PublicKey(config.operator),

   systemProgram: SystemProgram.programId

   })

   .instruction(),

   ];

   const transaction = new Transaction().add(...instructions);

   transaction.recentBlockhash = (await connection.getLatestBlockhash("processed")).blockhash;

   // feePayer is user and publicKey we can get by useWallet() that introduced in 3rd

   transaction.feePayer = publicKey;

   // send Transaction

   const tx = await (

   wallet?.adapter as DemonWalletAdapter

   ).sendTransactionWithSigners(transaction, connection, []);

   We need to notice that sendTransactionWithSigners function. This is function that can help user to interact wallet and send transaction. Besides, RENEC blockchain supported gasless service, users can use it and sign transaction without fee

   If you do not want to allow users to use the gasless service, you can directly use the sendTransaction function instead of sendTransactionWithSigners with the same variables.