pipeline-ui

pipeline-ui

PIPELINE Design System's react component library.

PIPELINE is a project from HEADLINE Design, aiming to provide adaptable components and design standards for decentralized Algorand applications (dAApps). Our goal is to make it easier for developers to build dAApps with outstanding user experience. 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 today. We have made the project public in a very early stage of work 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:

• Create a new folder in src
• Add an index.js file in the new folder
• Add any new dependecies as neccesary to the package.json file for pipeline-ui
• 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
      />

Change log

0.1.3

• Theming
• Buttons and other simple components

0.1.7

• 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

0.2.4

• 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

0.2.5

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

License

MIT © PIPELINE UI