JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q50822F
  • License MIT

SDK to communicate between React and App using QRCode

Package Exports

  • metasdk-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (metasdk-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

metasdk-react

SDK to communicate between React and App using QRCode

NPM JavaScript Style Guide

Install

npm install --save metasdk-react

Components

  1. Login
  2. Request
  3. SendTransaction

Usage

If callbackUrl will be given as prop, a component shows QR code directly, not popup button.

import React, { Component } from 'react';
import { Login, Request, SendTransaction } from 'metasdk-react';

class Example extends Component {
  callbackExample(arg) {}
  
  render () {
    return (
      <div>
        <Login
          data='testmsg'
          service='example'
          callback={this.callbackExample}
        />

        <Request
          request={['name', 'email']}
          service='example'
          callback={this.callbackExample}
        />

        <SendTransaction
          id='sendTransactionByRequest'
          request={this.trxRequest}
          usage='method'
          service='example'
          callback={this.callbackExample}
        />

        <SendTransaction
          id='sendTransactionWithCallbackURL'
          request={this.trxRequest}
          usage='method'
          service='example'
          callbackUrl='http://localhost/callback'
        />

        <SendTransaction
          id='sendTransactionByRaw'
          to='0x8101487270f5411cf213b8d348a2ab46df66245d'
          value='0x01'
          data='0x02'
          service='example'
          qrsize={256}
          qrvoffset={20}
          qrpadding='2em'
          qrposition='bottom right'
          qrtext='SendTransaction'
          callback={this.callbackExample}
        />
      </div>
    )
  }
}

QRCode styles can be set for all components like above example SendTransaction

  • qrsize changes the size of QRCode
  • qrvoffset is a vertical offset from origin
  • qrpadding applies padding thickness of QRCode as style
  • qrposition decides relative position from origin, declaration for positions are in util.js
  • qrtext sets Button text to open QRCode popup

Test

cd metasdk-react
npm start
[Ctrl+C]
cd example
npm start

Thanks to

create-react-library

License

MIT © hexoul