Skip to content

Latest commit

 

History

History

signer-extension-api

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

__mocks__

__mocks__

 
 

src

src

 
 

.eslintrc.js

.eslintrc.js

 
 

CHANGELOG.MD

CHANGELOG.MD

 
 

MONOREPO.MD

MONOREPO.MD

 
 

README.md

README.md

 
 

babel.config.js

babel.config.js

 
 

package.json

package.json

 
 

tsconfig.json

tsconfig.json

 
 

webpack.common.js

webpack.common.js

 
 

webpack.dev.js

webpack.dev.js

 
 

webpack.production.js

webpack.production.js

 
 

yarn.lock

yarn.lock

 
 

README.md

@lobstrco/signer-extension-api

This package builds a wrapper around the messaging system used to interact with the LOBSTR browser extension. Client applications will be able to install this package from npm and then integrate it with the LOBSTR signer extension using dev-friendly methods.

User Interface Guideline

To ensure consistency of styles with the LOBSTR wallet, please use the assets in this folder for your integration and always write the LOBSTR wallet brand name in all capital letters only.

Getting Started

To get started, you’ll need both the LOBSTR signer extension and the API needed to integrate with it.

Install the LOBSTR signer extension.

You’ll require a local version of the extension to test.

  • Head over to the Chrome Web Store and install the LOBSTR signer extension into your browser.

Install LOBSTR signer extension API

Now, you need a way to communicate with the LOBSTR signer extension. To facilitate this, we created a Javascript library called @lobstrco/signer-extension-api that will let you send and receive messages from the extension.

For ES2023 applications

  • Install the module using npm: npm install @lobstrco/signer-extension-api

or

  • Install the module using yarn: yarn add @lobstrco/signer-extension-api

For browser-based applications

Install the packaged library via script tag using cdnjs, swapping in the desired version number for {version}:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lobstrco-signer-extension-api/{version}/index.min.js"></script>

Using LOBSTR signer extension in a web app

You now have an extension installed on your machine and a library to interact with it. This library will provide methods to send and receive data from a user’s extension on your website or application.

Importing

First import the whole library in an ES2023 application

import lobstrApi from "@lobstrco/signer-extension-api";

or import just the modules you require:

import {
 isConnected,
 getPublicKey,
 signTransaction,
} from "@lobstrco/signer-extension-api";

Now let's dig into what functionality is available to you:

isConnected

isConnected() -> <Promise<boolean>>

This function is used to determine whether a user has the LOBSTR signer extension installed in your application.

import { isConnected } from "@lobstrco/signer-extension-api";

if (await isConnected()) {
  alert("User has LOBSTR extension installed!");
}

getPublicKey

getPublicKey() -> <Promise<string>>

If the LOBSTR wallet app is installed, the LOBSTR signer extension will simply return the public key. If either of the above is not true, it will return an empty string.

import { getPublicKey } from "@lobstrco/signer-extension-api";

const retrievePublicKey = async (): Promise<string> => {
  let publicKey = "";
  let error = "";

  try {
    publicKey = await getPublicKey();
  } catch (e) {
    error = e;
  }

  if (error) {
    return error;
  }

  return publicKey;
};

signTransaction

signTransaction(xdr: string) -> <Promise<string>>

This function accepts a transaction XDR string, which it will decode, sign as the user, and then return the signed transaction to your application.

NOTE: The user must provide a valid transaction XDR string for the extension to properly sign.

import { signTransaction } from "@lobstrco/signer-extension-api";

const userSignTransaction = async (xdr: string): Promise<string> => {
  let signedTransaction = "";
  let error = "";

  try {
    signedTransaction = await signTransaction(xdr);
  } catch (e) {
    error = e;
  }

  if (error) {
    return error;
  }

  return signedTransaction;
};

Using LOBSTR in the browser

You now have the LOBSTR signer extension installed on our machine and a library to interact with it. This library will provide you methods to send and receive data from a user’s extension in your website or application.

Importing

First import the library in the <head> tag of your page.

  • Install the packaged library via script tag using cdnjs, swapping in the desired version number for {version}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lobstrco-signer-extension-api/{version}/index.min.js"></script>
</head>

This will expose a global variable called window.lobstrSignerExtension that will contain our library.

The call signatures will be exactly the same as the node version, but you will call the methods directly from window.lobstrSignerExtensionApi:

For example:

if (await window.lobstrSignerExtensionApi.isConnected()) {
  alert("User has LOBSTR extension installed!");
}