MultiWalletConnect

A select component with button. Clicking on the button will prompt the user to connect to the selected wallet.

Some Fallback Content

Example usage

<MultiWalletConnect wallet={myWallet}/>

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 <MultiWalletConnect onChange={this.handleChange} wallet={myWallet}/>
  }

Use Example

import React, { Component } from 'react';
import { MultiWalletConnect, Pipeline} from 'pipeline-ui';


class TestButton extends Component {

  constructor(props) {
    super(props);
    this.state = {
      Algaddress: ""
    }
  }
  
  myWallet = Pipeline.init();

  render() {
    return <div>
      <MultiWalletConnect 
            wallet={this.myWallet} 
            context={this} 
            returnTo={"Algaddress"} 
            />
      <h1>{this.state.Algaddress}</h1>
    </div>
  }
}

export default TestButton;

Props

Prop	Type	Default	Description
wallet	reference
context	reference
returnTo	string	empty string	key in state to return fetched address
onChange	function		enables callback (see example above)