77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import React from "react";
|
||
import { withRouter } from "next/router";
|
||
|
||
import Button from "../inputs/Button";
|
||
import StackableContainer from "../layout/StackableContainer";
|
||
import Input from "../inputs/Input";
|
||
import { exampleAddress } from "../../lib/displayHelpers";
|
||
|
||
class FindMultisigForm extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
|
||
this.state = {
|
||
address: "",
|
||
keyError: "",
|
||
processing: false,
|
||
};
|
||
}
|
||
|
||
handleChange(e) {
|
||
this.setState({
|
||
[e.target.name]: e.target.value,
|
||
});
|
||
}
|
||
|
||
async handleSearch() {
|
||
this.setState({ processing: true });
|
||
|
||
this.props.router.push(`/multi/${this.state.address}`);
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<StackableContainer>
|
||
<StackableContainer lessPadding>
|
||
<p>
|
||
Already have a multisig address? Enter it below. If it’s a valid address, you will be
|
||
able to view its transactions and create new ones.
|
||
</p>
|
||
</StackableContainer>
|
||
<StackableContainer lessPadding lessMargin>
|
||
<Input
|
||
onChange={(e) => this.handleChange(e)}
|
||
value={this.state.address}
|
||
label="Multisig Address"
|
||
name="address"
|
||
placeholder={exampleAddress()}
|
||
/>
|
||
<Button label="Use this Multisig" onClick={() => this.handleSearch()} primary />
|
||
</StackableContainer>
|
||
<StackableContainer lessPadding>
|
||
<p className="create-help">Don't have a multisig?</p>
|
||
<Button label="Create New Multisig" onClick={() => this.props.router.push("create")} />
|
||
</StackableContainer>
|
||
<style jsx>{`
|
||
.multisig-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.error {
|
||
color: coral;
|
||
font-size: 0.8em;
|
||
text-align: left;
|
||
margin: 0.5em 0;
|
||
}
|
||
.create-help {
|
||
text-align: center;
|
||
}
|
||
`}</style>
|
||
</StackableContainer>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default withRouter(FindMultisigForm);
|