Skip to main content


A button to connect to MyAlgo. Generates a popup window to connect to MyAlgo. Uppon success, returns the first wallet address.

Some Fallback Content

Accessing returned address#

The returned address 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 address directly to your parent component's state without the need for additional callback or event handler code. The address can also be accessed with Pipeline.address:

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

or with an onChange handler:

handleChange = (value) =>{    this.setState({myAddress: value})  }
  render(){    return <AlgoButton onChange={this.handleChange} wallet={myAlgoWallet}/>  }

Use Example#

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;


returnTostringempty stringkey in state to return fetched address
onChangefunctionenables callback (see example above)