slate/components/sidebars/SidebarCreateWalletAddress.js

117 lines
2.6 KiB
JavaScript
Raw Normal View History

2020-06-19 06:57:57 +03:00
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
2020-06-19 06:57:57 +03:00
import * as System from "~/components/system";
2020-06-19 06:57:57 +03:00
import { css } from "@emotion/react";
const SELECT_MENU_OPTIONS = [
2020-06-19 06:57:57 +03:00
{ value: "1", name: "BLS" },
{ value: "2", name: "SECP256K1" },
// { value: '3', name: 'MULTISIG' },
];
const SELECT_MENU_MAP = {
2020-06-19 06:57:57 +03:00
"1": "BLS",
"2": "SECP256K1",
// '3': 'MULTISIG',
};
const SELECT_MENU_SAVE_STRINGS = {
2020-06-19 06:57:57 +03:00
"1": "bls",
"2": "secp256k1",
};
export default class SidebarCreateWalletAddress extends React.Component {
state = {
2020-06-19 06:57:57 +03:00
name: "",
type: "1",
default: false,
loading: false,
};
_handleSubmit = async () => {
this.setState({ loading: true });
const data = {
name: this.state.name,
wallet_type: SELECT_MENU_SAVE_STRINGS[this.state.type],
makeDefault: this.state.default,
2020-06-19 06:57:57 +03:00
type: "CREATE_WALLET_ADDRESS",
};
await this.props.onSubmit(data);
this.setState({ loading: false });
};
_handleCancel = () => {
this.props.onCancel();
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<div>
2020-09-08 02:28:50 +03:00
<System.P
style={{
fontFamily: Constants.font.semiBold,
fontSize: Constants.typescale.lvl3,
}}
>
2020-06-19 06:57:57 +03:00
Create a new address
</System.P>
<System.Input
containerStyle={{ marginTop: 24 }}
label="Address name"
name="name"
value={this.state.name}
onChange={this._handleChange}
/>
<System.SelectMenu
full
containerStyle={{ marginTop: 24 }}
name="type"
label="Address type"
value={this.state.type}
category="type"
onChange={this._handleChange}
2020-06-19 06:57:57 +03:00
options={SELECT_MENU_OPTIONS}
/>
<System.CheckBox
style={{ marginTop: 24 }}
name="default"
value={this.state.default}
2020-06-19 06:57:57 +03:00
onChange={this._handleChange}
>
Make this wallet the default
</System.CheckBox>
2020-08-02 22:17:13 +03:00
<System.ButtonPrimary
full
2020-06-19 06:57:57 +03:00
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
loading={this.state.loading}
2020-06-19 06:57:57 +03:00
>
Create {this.state.name}
2020-08-02 22:17:13 +03:00
</System.ButtonPrimary>
2020-08-02 22:17:13 +03:00
<System.ButtonSecondary
full
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
Cancel
2020-08-02 22:17:13 +03:00
</System.ButtonSecondary>
</div>
);
}
}