0.3.8 • Public • Published


    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

    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


    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) {
        this.state = {
          Algaddress: ""
      myAlgoWallet = Pipeline.init();
      render() {
        return <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).

          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
          returnTo={"txID"}// string value of state key to return the transaction id

    Edit with Gitpod

    Change log


    • Theming
    • Buttons and other simple components


    • Fixed Select component
    • Replaced MyAlgoButton component with hard-coded AlgoButton
    • Added Pipeline Algorand Connector as a dependecy
    • Add Verified ASA's and index numbers as a component
    • Updated rollup to latest version
    • Enabled Demo app and updated to reflect changes to parent library


    • Fixed AlgorAddress and Blockie components (formerly would not re-render on state change of props)
    • Added Pipeline Algorand Connector as component Pipeline
    • Added AlgoFetch component
    • Added PipelineShell component
    • Updated Demo app to reflect changes to parent library


    • Added SwitchNet component to switch between MainNet and TestNet
    • Add onChange props to AlgoButton and AlgoSendButton components


    • Added return of 0 for Pipeline.balance() when error occurs.


    • Numerous updates
    • WalletConnect integration
    • Fixed Peer dependency issue


    • MultiWalletConnect component
    • AlgoSigner integration
    • Fused Pipeline connector






    npm i pipeline-ui

    DownloadsWeekly Downloads






    Unpacked Size

    30.8 MB

    Total Files


    Last publish


    • pipeline-ui-2