npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ual-plainjs-renderer

v0.3.0

Published

This library providers a Plain JS renderer around the [Universal Authenticator Library](https://github.com/EOSIO/universal-authenticator-library/).

Downloads

23

Readme

UAL Renderer for PlainJS

This library providers a Plain JS renderer around the Universal Authenticator Library.

It uses nothing but standard Javascript and should be supported across desktop and mobile.

EOSIO Labs

About EOSIO Labs

EOSIO Labs repositories are experimental. Developers in the community are encouraged to use EOSIO Labs repositories as the basis for code and concepts to incorporate into their applications. Community members are also welcome to contribute and further develop these repositories. Since these repositories are not supported by Block.one, we may not provide responses to issue reports, pull requests, updates to functionality, or other requests from the community, and we encourage the community to take responsibility for these.

Getting Started

With yarn

yarn add ual-plainjs-renderer

Then, install the authenticators that you wish to use...

yarn add ual-scatter ual-lynx

With npm

npm i ual-plainjs-renderer

Then, install the authenticators that you wish to use...

npm i ual-scatter ual-lynx

Basic Usage

The below code will render a button to the DOM that will launch the Universal Authenticator Library modal.

import { UALJs } from 'ual-plainjs-renderer'
import { Scatter } from 'ual-scatter'
import { Lynx } from 'ual-lynx'

const myCallback = arrayOfUsers => {
  // Execute on successful user authentication
}

const myChain = {
  chainId: MY_CHAIN_ID,
  rpcEndpoints: [{
    protocol: MY_CHAIN_PROTOCOL,
    host: MY_CHAIN_HOST,
    port: MY_CHAIN_PORT,
  }]
}

const myAppName = 'My UAL App'

const scatter = new Scatter([myChain], { appName: myAppName })
const lynx = new Lynx([myChain], { appName: myAppName })

const myAppRoot = {
  containerElement: document.getElementById('my-ual-app')
}

const ual = new UALJs(myCallback, [myChain], myAppName, [scatter, lynx], myAppRoot)

ual.init()

Example

An example on how to use the library is provided in the examples folder.

Environment Set Up

A one-time environment setup is required prior to development. The following commands provides a quick starting point. Make sure you are in the examples/ directory.

cd examples
cp default.env .env

Now that you have a .env file, you can set your chain particulars. Note that this file will not be version-controlled, nor should it be. The default settings for the file are...

CHAIN_ID=12345
RPC_PROTOCOL=https
RPC_HOST=api.example.net
RPC_PORT=443

These values are taken from the local chain created by following the Developer Portal node set up instructions. (Note: if this is your first time following the tutorial you will need to install the eosio binaries here). These can be edited according to the requirements of your project if you have a different chain set up. They will be used as the chain data in the example app. See the Basic Example App for UAL with PlainJS for more details.

Development

After you set up your environment you can begin development. Make sure you are back in the / directory of the ual-plainjs-renderer package.

yarn
yarn link
yarn build -w

In a duplicate terminal tab, enter the following commands:

cd examples
yarn link ual-plainjs-renderer
yarn
yarn example

Open a browser at localhost:3000 to see a running instance of the example.

It is recommended to have at least two terminal tabs running so that yarn build -w and yarn example can run simultaneously creating an environment where changes are immediately reflected in the browser.

Contributing

Contributing Guide

Code of Conduct

License

MIT

Important

See LICENSE for copyright and license terms.

All repositories and other materials are provided subject to the terms of this IMPORTANT notice and you must familiarize yourself with its terms. The notice contains important information, limitations and restrictions relating to our software, publications, trademarks, third-party resources, and forward-looking statements. By accessing any of our repositories and other materials, you accept and agree to the terms of the notice.