plena-connect-dapp-sdk

Introduction

plena-connect-dapp-sdk is a comprehensive SDK designed to seamlessly integrate your React application with Plena Wallet. It provides a simple and effective way to connect with the Plena Wallet, enabling features such as wallet connection, transaction handling, and more.

Installation

To install the plena-connect-dapp-sdk into your project, use npm or yarn:

Using npm:

npm install plena-connect-dapp-sdk

Using yarn:

yarn add plena-connect-dapp-sdk

Setup

In your React application's App.js, import PlenaWalletProvider from the SDK:

import { PlenaWalletProvider } from "plena-connect-dapp-sdk";

Next, define a configuration variable:

const config = {
    dappToken: "Your dapp Token",
    dappId: "Your dapp Id",
    bridgeUrl: "Your Bridge Url",
};

Note: You can obtain the required values (dappToken, dappId, bridgeUrl) by signing up and creating a new project on our website.

Usage

Wrap your App component with PlenaWalletProvider to enable SDK functionality throughout your application:

<PlenaWalletProvider config={config}>
  <App />
</PlenaWalletProvider>

Accessing SDK Functions

To use various SDK functions, import usePlenaWallet hook:

import { usePlenaWallet } from "plena-connect-dapp-sdk";

At the top of your functional component, you can then access various methods:

const { openModal, closeConnection, sendTransaction, walletAddress } = usePlenaWallet();

Opening the Wallet Modal

openModal is used to open the QR code modal and initialize the WebSocket connection. Once the connection is accepted by the wallet, you can retrieve the connected wallet address using walletAddress.

Closing the Connection

Use closeConnection to terminate the current WebSocket connection.

Sending Transactions

To send a transaction through the connected wallet, use sendTransaction:

const tx = {
chainId: "your preferred chainid as an integer",
method: "send_transaction or personal_sign",
data: "transaction data in bytes",
};
await sendTransaction(tx);

Support

For support, queries, or contributions, please visit our GitHub repository or contact us through our website.