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

algorand-qrcode

v3.3.1

Published

Algorand QR Code generator js module

Downloads

59

Readme

Algorand QR Code Generator V3.2.0

NPM JavaScript Style Guide npm

New version 3 is a complete re-write of the Algorand QRCode generation tool. Simpler and more effective!

Breaking changes: The way to import and some of options have changed , please consult this readme.

Demo

Live Demo

Links

Algorand Developers Portal Publication

Algorand Dev Hours Presentation

Algorand Dev Hours Presentation Video on YouTube

News

Version 3.2.0 is now here!

Now completely supports any modern web framework

Modern JS Module in both Node and Browser

Technical notes

Table of contents

Highlights

  • Supports NodeJS and Browser.
  • Supports RFC 3986 and Algorand URI ABNF Grammar.
  • CLI utility.
  • Save QR code as valid SVG image or text

Algorand URI ABNF Grammar

    algorandurn     = "algorand://" algorandaddress [ "?" algorandparams ]
    algorandaddress = *base32
    algorandparams  = algorandparam [ "&" algorandparams ]
    algorandparam   = [ amountparam / labelparam / noteparam / assetparam  ]
    amountparam     = "amount=" *digit
    labelparam      = "label=" *qchar
    assetparam      = "asset=" *digit
    note            = "note=" *qchar

Installation and use

npm install --save algorand-qrcode

and then

import algoqrcode from "algorand-qrcode/lib/bundle.min.js"

or, install it globally to use qrcode cli command to generate Algorand URI qrcode images in your terminal.

npm install -g algorand-qrcode

and then

algoqrcode [options]

Usage

Browser and Frameworks (react...) use

import algoqrcode from "algorand-qrcode/lib/bundle.min.js";
const MyQrCodeComponent = (props)=>{
  let qrcode = algoqrcode({wallet:props.wallet, label:props.label})
  let scg = qrcode.svg()
  return svg
}
 
      

CLI

Usage: algoqrcode [options]

Algorand options:
  -m, --amount Amount (in Micro Algos) of Algorand transaction          [number]
  -w, --wallet Destination Wallet address (Algorand account address)      [string]
  -l, --label Label of Algorand transaction                             [string]
  -a, --asset Algorand asset id (in case of Algorand ASA transfer)      [string]
  -n, --note note                                                       [string]

QR Code options:
              
  -e, --ecl     Error correction level           [choices: "L", "M", "Q", "H"]



Renderer options:
  -o, --output        Output type           [choices: "file", "svg", "terminal"]
  -w, --wallet        Destination wallet                                [number]
  -p, --padding       Padding around QRcode                             [number]
  -b, --background    Light color                                       [string]
  -c, --color         Dark color                                        [string]
  -s, --size          QRcode image width and height (px)                [number]
  -f, --file          Output file                                       [string]


Options:

  -h, --help    Show help                                              [boolean]
  --version     Show version number                                    [boolean]

Examples:
    - Send 1 Algo transaction:
    algoqrcode -w "AMESZ5UX7ZJL5M6GYEHXM63OMFCPOJ23UXCQ6CVTI2HVX6WUELYIY262WI" -m 1000000 -s 128 -n "This is an Algo payment transaction QR Code"

    - Save Algorand contact label as svg image:
    algoqrcode -w "AMESZ5UX7ZJL5M6GYEHXM63OMFCPOJ23UXCQ6CVTI2HVX6WUELYIY262WI" -l "[email protected]" -o file -f sample.svg 

NodeJS

Import the module algorand-qrcode for your NodeJS module

        import algoqrcode from 'algorand-qrcode'
        let qrcode = algoqrcode({
            wallet: "AMESZ5UX7ZJL5M6GYEHXM63OMFCPOJ23UXCQ6CVTI2HVX6WUELYIY262WI",
            label: "Test Label",
            output: "svg",
            size:256
        })
        let svg = qrcode.svg()
        console.log(svg)

Error correction level

Error correction capability allows to successfully scan a QR Code even if the symbol is dirty or damaged. Four levels are available to choose according to the operating environment.

Higher levels offer a better error resistance but reduce the symbol's capacity. If the chances that the QR Code symbol may be corrupted are low (for example if it is showed through a monitor) is possible to safely use a low error level such as Low or Medium.

Possible levels are shown below:

| Level | Error resistance | |------------------|:----------------:| | L (Low) | ~7% | | M (Medium) | ~15% | | Q (Quartile) | ~25% | | H (High) | ~30% |

The percentage indicates the maximum amount of damaged surface after which the symbol becomes unreadable.

Error level can be set through options.ecl property. If not specified, the default value is M.

QR Code options

errorCorrectionLevel

Type: String Default: M

Error correction level. Possible values are low, medium, quartile, high or L, M, Q, H.

Algorand URI params

wallet

Type: String

Wallet address for Algorand transaction.

amount

Type: Number

Amount of Algorand transaction in MicroAlgos or Standard Asset Unit.

label

Type: String

Label of Algorand transaction.

asset

Type: String

Asset Id of Algorand transaction if used. If not specified , Algo will be used as fungible token.

note

Type: String

note field content of Algorand transaction.

Renderers options

ecl

Type: String Default: M

Define the error correction level.

padding

Type: Number Default: 5

Define how much wide the quiet zone should be.

size

Type: Number Default: 128

Width and height.

color

Type: String Default: #000000ff

Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than color.light.

background

Type: String Default: #ffffffff

Color of light module. Value must be in hex format (RGBA).

License

MIT

Credits

Special appreciations to Sheghzo.

The idea for this lib was inspired by: Algorand developers portal Article Payment Prompts with Algorand Mobile Wallet ,from Jason Paulos.

Mentioned Trademarks

"QR Code" curtsey of :

"Algorand" curtsey of: