plena-vue-sdk

Introduction

plena-vue-sdk is a comprehensive SDK designed to seamlessly integrate your Vue 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-vue-sdk into your project, use npm or yarn:

Using npm:

npm install plena-vue-sdk

Using yarn:

yarn add plena-vue-sdk

Setup

In your Vue application's main.js, import PlenaModalPlugin from the SDK:

import {PlenaModalPlugin} from "plena-vue-sdk"

Next, use the PlenaModalPlugin in main.js:

Vue.use(PlenaModalPlugin)

and install vue-class-component

npm i vue-class-component

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

Usage

In any component import createToggleMixin and pass the config object in it, import vue-class-component and pass ToggleMixin in mixins

import { createToggleMixin} from "plena-class-based-sdk";
import Component from "vue-class-component";

const config = {
  dappToken: "Dapp Token"
  dappId: "Dapp Id",
  bridgeUrl: "Bridge Url",
};
const ToggleMixin = createToggleMixin(config);
const tx = {
  chain: "Chain Id",
  method: "Method Name",
  payload: "Payload",
};

@Component({
  components: {
  },
  mixins: [ToggleMixin],
  data() {
    return {
      config,
      tx
    };
  },
})

export default class HelloWorld extends Vue {}

Accessing SDK Functions

To use just paste the code and call the functions on desired button as mentioned:

<button @click="showModel">Toggle Modal</button>
    <PlenaModal
      :config="config"
      :dataURLs.sync="dataURL"
      :spinner.sync="spinnerOn"
      :isVisible.sync="isModalVisible"
      @close="isModalVisible = false"
    />
    <button @click="closeConnection">Close Connection</button>
    <button @click="callWalletAddress">Wallet Address</button>
    <button @click="sendTransaction(tx)">Send Transaction</button>

Opening the Wallet Modal

showModel 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 callWalletAddress.

Closing the Connection

Use closeConnection to terminate the current WebSocket connection.

Sending Transactions

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

Call The Methods On Button Click

<button @click="showModel">Toggle Modal</button>
<button @click="closeConnection">Close Connection</button>
<button @click="callWalletAddress">Wallet Address</button>
<button @click="sendTransaction(tx)">Send Transaction</button>

Note: Don't forget to use the below code of Modal in component

<PlenaModal
      :config="config"
      :dataURLs.sync="dataURL"
      :spinner.sync="spinnerOn"
      :isVisible.sync="isModalVisible"
      @close="isModalVisible = false"
    />

Support

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