AlgoSendButton

Clicking the AlgoSend button will open a new MyAlgo window prompting the user to confirm the transaction.

info

The rendered AlgoSend button below is nonfunctional. To see it in action, check out the Transaction Demo!

caution

The AlgoSend button executes transactions on the MainNet by default. To switch to TestNet, check out SwitchNet Component

Upon confirmation, it returns the transaction id to the context and key specified. This component has the largest number of mandatory props. Failing to set them, or setting them incorrectly will result in a transaction not executing.

Accessing returned txID

The returned transaction ID can be accessed several different ways. Setting the context prop to {this} and the returnTo prop to a state key (as string) will return the txID directly to your parent component's state without the need for additional callback or event handler code. The txID can also be accessed with Pipeline.txID:

componentDidMount() {
      this.interval = setInterval(() => this.setState({txID: Pipeline.txID}), 1000);
    }

or with an onChange handler:

handleChange = (value) =>{
    this.setState({txID: value})
  }

  render(){
    return <AlgoSendButton 
              onChange={this.handleChange} 
              wallet={myAlgoWallet}
              index={this.state.index}
              recipient={this.state.recipient}
              amount={this.state.amount}
              note={this.state.note}
            />
  }

Use Example

import {AlgoButton, AlgoSendButton, Pipeline} from 'pipeline-ui'

const myAlgoWallet = Pipeline.init();

<AlgoSendButton
      index={this.state.index}
      recipient={this.state.recipient}
      amount={this.state.amount}
      note={this.state.note}
      wallet={myAlgoWallet} 
      context={this}
      returnTo={"txID"}
      />

Props

Prop	Type	Default	Description
index	integer	0	If Algorand, must be 0. If ASA, must be numeric index value
recipient	string		Address of recipient
amount	integer	1	amount to send in micro Algos
note	string	"note"	Any data up to 1000 bytes.
wallet	reference		reference to an instance of Pipeline.init(); that is called ONCE when the app is initialized
context	reference		Recommended value: this
returnTo	string		string value of state key to return the transaction id
onChange	function		Enables callback (see example above)