pipeline-express-react

    1.0.8 • Public • Published

    Connect and send Algorand transactions in minutes.

    Pipeline Express is an ultra-light version of Pipeline UI React Library. The library provides two button components with hard-coded onClick events to greatly simplify the process of retrieving a wallet address from MyAlgo connect, signing and sending transactions.

    NPM JavaScript Style Guide

    Install Library in your project

    npm install pipeline-express-react

    Run included example:

    After downloading the example folder, from within the folder run:

    npm install
    npm run start

    Usage

    See included example.

    Try it in CodeSandbox (or your IDE of choice)

    Copy and paste the following code, install the dependencies and send an Algorand transaction in seconds!

    import React, {Component} from 'react'
    import { AlgoButton, AlgoSendButton, Pipeline} from 'pipeline-express-react'
    
    const myAlgoWallet = Pipeline.init();
    class App extends Component {
    
      constructor(props) {
        super(props);
        this.state = {
          myAddress: "",
          recipient: "",
          amount: 0,
          note: "",
          txID: ""
        }
      }
    
      inputRecipient = (event) => {
        this.setState({ recipient: event.target.value });
      }
    
      inputAmount = (event) => {
        this.setState({amount: event.target.value});
      }
    
      inputNote = (event) => {
        this.setState({note: event.target.value});
      }
      
      render() {
        return <div align="center"><br></br>
          <AlgoButton wallet={myAlgoWallet} context={this} returnTo={"myAddress"} />
          <h3>{"My Address: " + this.state.myAddress}</h3>
          <form >
            <label>
              Recipient:
              <input type="text" onChange={this.inputRecipient} />
            </label><br></br>
            <label>
              Amount:
              <input type="number" onChange={this.inputAmount} />
            </label>
            <label><br></br>
              Note:
              <input type="text" onChange={this.inputNote} />
            </label>
          </form>
          <AlgoSendButton
          index={0} //If ASA, must be a numeric index value > 0
          recipient={this.state.recipient} //string value
          amount={this.state.amount} //integer value in micro Algos
          note={this.state.note} //string value
          myAddress={this.state.myAddress} //string value
          wallet={myAlgoWallet} //reference to an instance of Pipeline.init(); that is called once when the app is initialized
          context={this}
          returnTo={"txID"}// string value of state key to return the transaction id
          />
          <h3>{"Transaction ID: " + this.state.txID}</h3>
    </div>
      }
    }
    
    export default App;

    License

    MIT © headline-design

    Keywords

    none

    Install

    npm i pipeline-express-react

    DownloadsWeekly Downloads

    11

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    127 kB

    Total Files

    7

    Last publish

    Collaborators

    • pipeline-ui-2