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 install pipeline-express-react
After downloading the example folder, from within the folder run:
npm install
npm run start
See included example.
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'
import 'pipeline-express-react/dist/index.css';
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;
MIT © headline-design