Saltar al contenido principal

Integrate carax-wallet into Dapp

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.