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

Install

npm i metasdk-react

Components

Login
Request
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'
          qrpopup={true}
          callback={this.callbackExample}
        />

        <Request
          request={['10', '20', '30']}
          usage='example'
          qrpopup={true}
          callback={this.callbackExample}
        />

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

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

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

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

qrpopup decides if QRCode exists within popup or not. default: false
qrsize changes the size of QRCode by pixel. default: 128
qrvoffset is a vertical offset from origin. default: 20
qrpadding applies padding thickness of QRCode as style. default: 1em
qrposition decides relative position from origin, declaration for positions are in util.js. default: bottom right
qrtext sets Button text to open QRCode popup

Test

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