plena-wallet-sdk-vuejs v0.0.4

plena-wallet-sdk-vuejs

Introduction

plena-wallet-sdk-vuejs 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-wallet-sdk-vuejs into your project, use npm or yarn:

Using npm:

npm install plena-wallet-sdk-vuejs

Using yarn:

yarn add plena-wallet-sdk-vuejs

Setup

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

import PlenaWalletProvider from "plena-wallet-sdk-vuejs";

Next, use the PlenaWalletProvider in main.js:

const app = createApp(App);
app.use(PlenaWalletProvider);
app.mount("#app");

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 <wallet-provider :config="walletConfig"> </wallet-provider> to enable SDK functionality throughout your application:

<template>
  <wallet-provider :config="walletConfig">
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </wallet-provider>
</template>

export default {
  name: "App",
  components: {
    HelloWorld,
  },

  data() {
    return {
      walletConfig: {
    dappToken: "Your dapp Token",
    dappId: "Your dapp Id",
    bridgeUrl: "Your Bridge Url",
     };,
    };
  },
};

Accessing SDK Functions

To use SDK functions, import { inject } from "vue";:

 setup() {
    const walletContext = inject("plenaContext");
    const { openModal, closeConnection, walletAddress, sendTransaction } = walletContext;
    const tx = {
      chain: "Chain Id",
      method: "Method Name",
      payload: "Payload",
    };
    return {
      openModal,
      closeConnection,
      walletAddress,
      sendTransaction,
      tx,
    };
  },

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:

Call The Methods On Button Click

<button type="button" @click="openModal">Wallet Connect</button>
<button type="button" @click="closeConnection">Disconnect</button>
<button type="button" @click="sendTransaction(tx)">Send Transaction</button>
<button type="button" @click="getWalletAddress">Wallet Address</button>

Optional: You can create a getWalletAddress method to get wallet address on button click else this.walletAddress holds the wallet address

methods: {
    getWalletAddress() {
    console.log("App Wallet Address:", this.walletAddress);
  },
},

Support

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