Home

Awesome

pipeline-ui

PIPELINE Design System's react component library.

NPM JavaScript Style Guide MIT License GitHub stars Twitter Follow PIPELINE Discussion Travis Build Status codecov Netlify Status Gitpod ready-to-code Open in Visual Studio Code<br> NPM

PIPELINE-UI is a project from HEADLINE Design (in partnership with the Algorand Foundation), aiming to deliver a suite of development tools and reusable React components for decentralized Algorand applications (dAApps). Our goal is to make it as easy as possible for developers to build dAApps with outstanding functionality and visual design. If you're interested, we have written a bit more about our rationale and approach to building PIPELINE.

PIPELINE is in beta development and should not be considered stable. We have made the project public in order to gather feedback from the community of designers and developers building Algorand dAApps.

We are actively working on adding new components to PIPELINE and will be sharing more information on the roadmap very soon.

Modifying and testing the library on local machine:

  1. Create a new folder in src
  2. Add an index.js file in the new folder
  3. Add any new dependecies as neccesary to the package.json file for pipeline-ui
  4. Add the following line to the existing index.js file in src
export { default as MyNewComponent } from './MyNewComponent';

In command prompt, enter the following while in the pipeline-ui root directory:

npm install
npm run build
npm pack

A tgz file will be generated in the folder pipeline-ui. Move this file to the root folder of your project.

Add the following dependency to the package.json of the project that you will be using the library in:

"pipeline-ui": "file:./pipeline-ui-0.1.6.tgz",

In the project root folder, run:

npm install

Usage

Pipeline is working to hardcode the Algorand connection process into standard components. With Pipeline, the following is a complete React App to connect to a MyAlgo wallet and return the address:

import React, { Component } from 'react';
import { AlgoButton, Pipeline} from 'pipeline-ui';


class TestButton extends Component {

  constructor(props) {
    super(props);
    this.state = {
      Algaddress: ""
    }
  }
  
  myAlgoWallet = Pipeline.init();

  render() {
    return <div>
      <AlgoButton 
            wallet={this.myAlgoWallet} 
            context={this} 
            returnTo={"Algaddress"} 
            />
      <h1>{this.state.Algaddress}</h1>
    </div>
  }
}

export default TestButton;

The Send Button

The AlgoSend button has the largest number of mandatory props. Failing to set them, or setting them incorrectly will result in a transaction not executing. This button also has the optional prop index , which can be used to set and specify an ASA index number for an ASA transaction. An app that uses the AlgoSendButton must also call Pipeline.init() and either use AlgoButton or call Pipeline.connect(wallet,context,returnTo).

<AlgoSendButton
      index={this.state.index} //If Algorand, must be 0. If ASA, must be a numeric index value
      recipient={this.state.recipient} //string value
      amount={this.state.amount} //integer value in micro Algos
      note={this.state.note} //string value
      myAddress={this.state.Algaddress} //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
      />

Edit with Gitpod

Change log

0.1.3

0.1.7

0.2.4

0.2.5

0.2.6

0.3.4

0.3.5

License

MIT © PIPELINE UI