react-icons/io#IoIosArrowBack JavaScript Examples
The following examples show how to use
react-icons/io#IoIosArrowBack.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: create_wallet.js From twmwallet with MIT License | 4 votes |
|
render() {
if (this.isLoading) {
return (
<Container fluid className="h-100">
<Container
fluid
className="height100 d-flex flex-column justify-content-center align-items-center"
>
<Loader type="ThreeDots" color="#13D3FD" height={40} width={80} />
</Container>
</Container>)
}
if (this.state.wallet_made) {
return (<div className={`w-100 h-100`}>
<div className="w-100 h-100">
<WalletHome
wallet={this.state.wallet}
daemon_host={this.state.daemon_host}
daemon_port={this.state.daemon_port}
password={this.state.password}
wallet_path={this.state.new_path}
showKeys={this.state.showKeys}
onInitialShowClose={this.handleInitialKeysClose} />
</div>
</div>)
}
return (
<div
fluid
className={`w-100 h-100`}
>
<div
fluid
className="w-100 h-100 d-flex flex-column justify-content-center align-items-center"
>
<div className="start-background-image h-100 w-100 d-flex flex-column justify-content-center align-items-center">
<Image
className="entry-mini-logo"
src={require("./../../img/safex-multi-small.svg")}
/>
<Image
onClick={() => {
alert("Closing Wallet... (TEST)");
}}
className="entry-off-button pointer"
src={require("./../../img/off_black.svg")}
/>
<Row className="entry-progress-row">
<Col
onClick={this.goBack}
className="d-flex align-items-center entry-back-text pointer"
md={2}
>
<IconContext.Provider
value={{ color: "#13D3FD", size: "3rem" }}
>
<IoIosArrowBack />
</IconContext.Provider>
BACK
</Col>
<a
onClick={() => {
this.setState({ pageNumber: 1 });
}}
>
<ProgressIcon
number={1}
color={
this.state.pageNumber === 1
? "progress-icon-color"
: this.state.new_path.length > 0
? "progress-icon-color-complete"
: ""
}
title={"SAVE FILES"}
/>
</a>
<a
onClick={() => {
this.setState({ pageNumber: 2 });
}}
>
<ProgressIcon
number={2}
title={"NETWORK CONNECTION"}
color={
this.state.pageNumber === 2
? "progress-icon-color"
: this.state.daemon_host.length > 0
? "progress-icon-color-complete"
: ""
}
/>
</a>
<a
onClick={() => {
this.setState({ pageNumber: 3 });
}}
>
<ProgressIcon
number={3}
title={"YOUR PASSWORD"}
color={
this.state.pageNumber === 3
? "progress-icon-color"
: this.state.password.length > 0
? "progress-icon-color-complete"
: ""
}
/>
</a>
</Row>
{this.state.pageNumber === 1 && (
<div>
{this.state.new_path.length > 0 ? (
<div className="entry-container">
<p className="h3">
{" "}
This file will be saved to:{" "}
<br /> <i>{this.state.new_path}</i>
</p>
<button
className="mx-auto custom-button-entry"
onClick={this.change_path}
>
Change Path
</button>
<button
className="mt-2 mx-auto custom-button-entry orange-border"
onClick={() => this.setState({ pageNumber: 2 })}
>
Continue
</button>
</div>
) : (
<div className="entry-container">
<p className="h3">
Where would you like to save your Safex Wallet Files?
</p>
<Form
className="mt-2 mb-2"
id="set_path"
onSubmit={this.set_path}
>
<input className="display-none" type="file" />
<button
className="mx-auto custom-button-entry orange-border mt-2"
type="submit"
variant="primary"
>
Select File Path
</button>
</Form>
</div>
)}
</div>
)}
{this.state.new_path.length > 0 && this.state.pageNumber === 2 && (
<div className="entry-container">
{this.state.daemon_host.length < 1 ? (
<form
id="set_daemon"
onSubmit={this.set_daemon_state}
className=""
>
<label className="entry-form-label" htmlFor="daemon-host">
Daemon Host:
{this.renderUrlTooltip()}
</label>
<input
id="daemon-host"
className="my-2 entry-form-input"
name="daemon_host"
defaultValue="stagenetrpc.safex.org"
placedholder="set the ip address of the safex blockchain"
/>
<label htmlFor="daemon-port">Daemon Port:</label>
<input
id="daemon-port"
className="mt-2 mb-3"
name="daemon_port"
defaultValue="30393"
placedholder="set the port of the safex blockchain"
/>
<button
className="w-100 custom-button-entry orange-border"
type="submit"
variant="primary"
>
Set Connection
</button>
</form>
) : (
<div className="d-flex flex-column justify-content-around h-100">
<p className="h3">
You will be connected to:
<br />
<i>
{this.state.daemon_host}:{this.state.daemon_port}
</i>
</p>
<button
className="w-100 mt-3 custom-button-entry"
type="button"
onClick={() =>
this.setState({ daemon_host: "", daemon_port: 0 })
}
>
Reset Connection
</button>
<button
className="w-100 mt-2 mx-auto custom-button-entry orange-border"
onClick={() => this.setState({ pageNumber: 3 })}
>
Continue
</button>
</div>
)}
</div>
)}
{this.state.pageNumber === 3 && (
<div className="entry-container">
<form
id="set_password"
className=""
onSubmit={this.set_password}
>
<label htmlFor="password-input">Choose a password</label>
<input
id="password-input"
type="password"
name="password"
className="mt-2 mb-2"
/>
<label htmlFor="repeat-password-input">
Confirm your password
</label>
<input
id="repeat-password-input"
name="repeat_password"
className="mt-2 mb-2"
type="password"
/>
<button
type="submit"
className="w-100 custom-button-entry orange-border mt-3"
>
Set Password
</button>
</form>
</div>
)}
{this.state.new_path.length > 0 &&
this.state.daemon_host.length > 0 &&
this.state.wallet_made === false &&
this.state.password.length > 0 &&
this.state.pageNumber === 4 && (
<div className="entry-container">
<p className="h3">
This file will be saved to: <br /> <i>{this.state.new_path}</i>
</p>
<button
autoFocus
onClick={this.make_wallet}
className="mt-2 mx-auto custom-button-entry orange-border"
>
Create New Wallet
</button>
</div>
)}
</div>
</div>
</div>
);
}
Example #2
| Source File: open_wallet.js From twmwallet with MIT License | 4 votes |
|
render() {
return (
<div className="h-100 w-100">
{this.state.wallet_made && !this.isLoading ? (
<div className="w-100 h-100">
<WalletHome
wallet={this.state.wallet}
daemon_host={this.state.daemon_host}
daemon_port={this.state.daemon_port}
password={this.state.password}
wallet_path={this.state.new_path}
/>
</div>
) : (
<Container
fluid
className="start-background-image height100 d-flex flex-column justify-content-center align-items-center"
>
<Container className="h-100 d-flex flex-column justify-content-center align-items-center">
<Image
className="entry-mini-logo"
src={require("./../../img/safex-multi-small.svg")}
/>
<Image
onClick={() => {
alert("Closing Wallet... (TEST)");
}}
className="entry-off-button pointer"
src={require("./../../img/off_black.svg")}
/>
<Row className="entry-progress-row">
<Col
onClick={this.goBack}
className="d-flex align-items-center entry-back-text pointer"
md={2}
>
<IconContext.Provider
value={{ color: "#13D3FD", size: "3rem" }}
>
<IoIosArrowBack />
</IconContext.Provider>
BACK
</Col>
<a
onClick={() => {
this.setState({ pageNumber: 1, error: "" });
}}
>
<ProgressIcon
number={1}
color={
this.state.pageNumber === 1
? "progress-icon-color"
: this.state.new_path.length > 0
? "progress-icon-color-complete"
: ""
}
title={"SELECT FILES"}
/>
</a>
<a
onClick={() => {
this.setState({ pageNumber: 2, error: "" });
}}
>
<ProgressIcon
number={2}
title={"NETWORK CONNECTION"}
color={
this.state.pageNumber === 2
? "progress-icon-color"
: this.state.daemon_host.length > 0
? "progress-icon-color-complete"
: ""
}
/>
</a>
<a
onClick={() => {
this.setState({ pageNumber: 3 });
}}
>
<ProgressIcon
number={3}
title={"YOUR PASSWORD"}
color={
this.state.pageNumber === 3
? "progress-icon-color"
: this.state.password.length > 0
? "progress-icon-color-complete"
: ""
}
/>
</a>
</Row>
{this.state.pageNumber === 1 ? (
<div>
{this.state.new_path.length > 0 ? (
<div className="entry-container">
<p className="h3">
{" "}
Selected Wallet File: <br /><i>{this.state.new_path}</i>
</p>
<div className="d-flex flex-column mt-3">
<button
className="w-100 mx-auto custom-button-entry"
onClick={this.change_path}
>
Change File
</button>
<button
autoFocus
className="mt-2 w-100 mx-auto custom-button-entry orange-border"
onClick={() => this.setState({ pageNumber: 2 })}
>
Continue
</button>
</div>
</div>
) : (
<div className="entry-container">
<p className="h3">
Open an existing Safex wallet by selecting the{" "}
<b>.keys file</b>
</p>
<Form
className="mt-4"
id="set_path"
onSubmit={this.set_path}
>
<input className="display-none" type="file" />
<button
autoFocus
className="w-100 mx-auto custom-button-entry orange-border"
type="submit"
variant="primary"
>
Select File Path
</button>
</Form>
</div>
)}
</div>
) : (
""
)}
{this.state.pageNumber === 2 ? (
<div className="entry-container p-4">
{this.state.daemon_host.length < 1 ? (
<form
id="set_daemon"
onSubmit={this.set_daemon_state}
className=""
>
<label className="entry-form-label" htmlFor="daemon-host">
Daemon Host:
{this.renderUrlTooltip()}
</label>
<input
id="daemon-host"
className="my-2 entry-form-input"
name="daemon_host"
defaultValue="stagenetrpc.safex.org"
placedholder="set the ip address of the safex blockchain"
/>
<label htmlFor="daemon-port">Daemon Port:</label>
<input
id="daemon-port"
className="mt-2 mb-3"
name="daemon_port"
defaultValue="30393"
placedholder="set the port of the safex blockchain"
/>
<button
autoFocus
className="w-100 custom-button-entry orange-border"
type="submit"
variant="primary"
>
Set Connection
</button>
</form>
) : (
<div className="d-flex flex-column h-100">
<p className="h3">
You will be connected to:
<br />
<i>
{this.state.daemon_host}:{this.state.daemon_port}
</i>
{this.renderUrlTooltip()}
</p>
<button
className="mt-2 w-100 custom-button-entry"
onClick={() =>
this.setState({ daemon_host: "", daemon_port: 0 })
}
>
Reset Connection
</button>
<button
autoFocus
className="mt-2 w-100 mx-auto custom-button-entry orange-border"
onClick={() => this.setState({ pageNumber: 3 })}
>
Continue
</button>
</div>
)}
</div>
) : (
""
)}
{this.state.pageNumber === 3 ? (
<div className="entry-container">
<form
id="set_password"
className={
this.state.error === "password" ? "wrong-password" : ""
}
onSubmit={this.open_wallet}
>
<label htmlFor="password-input">
{this.state.error === "password" ? (
"Looks Like You Made a Mistake. Please Try Again"
) : this.state.error === "checking" ? (
<Loader
type="ThreeDots"
color="#13D3FD"
height={40}
width={80}
/>
) : (
"Enter Your Password"
)}
</label>
<input
autoFocus
id="password-input"
type="password"
name="password"
className={
this.state.error === "checking"
? "opacity100"
: "mt-2 mb-2"
}
/>
<button
type="submit"
className={`w-100 mt-2 ${
this.state.error === "checking"
? "opacity100"
: "custom-button-entry orange-border"}`
}
>
Continue
</button>
</form>
</div>
) : (
""
)}
</Container>
</Container>
)}
</div>
);
}
Example #3
| Source File: recover_keys.js From twmwallet with MIT License | 4 votes |
|
render() {
return (
<div className={"w-100 h-100"}>
{this.state.wallet_made && this.state.loading === false ? (
<div className="w-100 h-100">
<WalletHome
wallet={this.state.wallet}
daemon_host={this.state.daemon_host}
daemon_port={this.state.daemon_port}
password={this.state.password}
wallet_path={this.state.new_path}
/>
</div>
) : (
<div className="w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<div className="start-background-image w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<Image
className="entry-mini-logo"
src={require("./../../img/safex-multi-small.svg")}
/>
<Image
onClick={() => {
alert("Closing Wallet... (TEST)");
}}
className="entry-off-button pointer"
src={require("./../../img/off_black.svg")}
/>
<Row className="entry-progress-row">
<Col
onClick={this.goBack}
className="pointer d-flex align-items-center entry-back-text"
md={2}
>
<IconContext.Provider
value={{ color: "#13D3FD", size: "3rem" }}
>
<IoIosArrowBack />
</IconContext.Provider>
BACK
</Col>
<ProgressIcon
amount={4}
number={1}
color={
this.state.pageNumber === 0
? "progress-icon-color"
: this.state.viewkey.length > 0
? "progress-icon-color-complete"
: ""
}
title={"ADDRESS & KEYS"}
/>
<ProgressIcon
amount={4}
number={2}
title={"SAVE FILES"}
color={
this.state.pageNumber === 1
? "progress-icon-color"
: this.state.new_path.length > 0
? "progress-icon-color-complete"
: ""
}
/>
<ProgressIcon
amount={4}
number={3}
title={"NETWORK CONNECTION"}
color={
this.state.pageNumber === 2
? "progress-icon-color"
: this.state.daemon_host.length > 0
? "progress-icon-color-complete"
: ""
}
/>
<ProgressIcon
amount={4}
number={4}
title={"YOUR PASSWORD"}
color={
this.state.pageNumber === 3
? "progress-icon-color"
: this.state.password.length > 0
? "progress-icon-color-complete"
: ""
}
/>
</Row>
{this.state.wallet_made && (
<div className="w-100 h-100">
<WalletHome
wallet={this.state.wallet}
daemon_host={this.state.daemon_host}
daemon_port={this.state.daemon_port}
password={this.state.password}
wallet_path={this.state.new_path}
/>
</div>
)}
{this.state.pageNumber === 0 ? (
<div className="entry-container">
<Form id="set_keys" onSubmit={this.set_keys}>
<label htmlFor="public_address">
Public Address
<AiOutlineInfoCircle
data-tip
data-for="publicAddressInfo"
className="ml-3"
/>
<ReactTooltip
type="info"
id="publicAddressInfo"
effect="solid"
place="bottom"
>
<span>
Your Safex Address should start with ’Safex’ and
contain between 95 and 105 characters. <br />
Example:
<br />
Safex5zHGtYQYE41yEzLTRQWiajC5keyJHVwQamarNyp9ssouD87bbGhobVnYAtUEQa4me79ybZev2AmLUnbds4PRYv3P1KmW6j2F
</span>
</ReactTooltip>
</label>
<input className="mb-3" name="public_address" />
<label htmlFor="spendkey">
Spend Key
<AiOutlineInfoCircle
size={15}
data-tip
data-for="spendKeyInfo"
className="ml-3"
/>
<ReactTooltip
id="spendKeyInfo"
type="info"
effect="solid"
place="bottom"
>
<span>
Your Secret Spend Key should be a 64 digit hex.
<br />
Example:
<br />
55e48e029634404f1f19b45eb89298e7c27efb414d4151d98f551b39f015fb0d
</span>
</ReactTooltip>
</label>
<input className="mb-3" name="spendkey" />
<label htmlFor="viewkey">
View Key
<AiOutlineInfoCircle
data-tip
data-for="viewKeyInfo"
className="ml-3"
/>
<ReactTooltip
id="viewKeyInfo"
type="info"
effect="solid"
place="bottom"
>
<span>
Your Secret View Key should be a 64 digits hex.
<br />
Example:
<br />
<b>
c53eaf7c443f1b5a9967a1d1a651897f5a1aafd13a21b519aea6d0798ba5d007
</b>
</span>
</ReactTooltip>
</label>
<input className="mb-3" name="viewkey" />
<button
className="w-100 mx-auto custom-button-entry orange-border mt-3"
type="submit"
>
Set Keys
</button>
</Form>
</div>
) : (
""
)}
{this.state.pageNumber === 1 ? (
<div>
{this.state.new_path.length > 0 ? (
<div className="entry-container">
<p className="h3">
{" "}
This file will be saved to:{" "}
<br /><i>{this.state.new_path}</i>
</p>
<button
className="w-100 mx-auto custom-button-entry"
onClick={this.change_path}
>
Change Path
</button>
<button
className="mt-2 w-100 mx-auto custom-button-entry orange-border"
onClick={() => this.setState({ pageNumber: 2 })}
>
Continue
</button>
</div>
) : (
<div className="entry-container">
<p className="h3">
Where would you like to save your new Safex Wallet
Files?
</p>
<Form
className="mt-2 mb-2"
id="set_path"
onSubmit={this.set_path}
>
<input className="display-none" type="file" />
<button
className="w-100 mx-auto custom-button-entry orange-border"
type="submit"
variant="primary"
>
Select File Path
</button>
</Form>
</div>
)}
</div>
) : (
""
)}
{this.state.new_path.length > 0 && this.state.pageNumber === 2 ? (
<div className="entry-container">
{this.state.daemon_host.length < 1 ? (
<form
id="set_daemon"
onSubmit={this.set_daemon_state}
className=""
>
<label className="entry-form-label" htmlFor="daemon-host">
Daemon Host:
<AiOutlineInfoCircle className="ml-3" size={15} data-tip data-for="daemonHostInfo" />
<ReactTooltip
id="daemonHostInfo"
type="info"
effect="solid"
place="bottom"
>
<span>
This is the URL used to connect to the Safex
blockchain.
<br />
You can use the default provided by the Safex
Foundation
<br />
or replace it with your own full node.
<br />
<br />
<ul className="mb-4">
<li>
The default self hosted wallet setup would be:
</li>
<li className="mt-4">
HOST: <b>127.0.0.1</b>
</li>
<li className="mt-1">
PORT: <b>17402</b>
</li>
<li className="mt-2">
The default is rpc.safex.org:30393
</li>
</ul>
</span>
</ReactTooltip>
</label>
<input
id="daemon-host"
className="my-2 entry-form-input"
name="daemon_host"
defaultValue="stagenetrpc.safex.org"
placedholder="set the ip address of the safex blockchain"
/>
<label htmlFor="daemon-port">Daemon Port:</label>
<input
id="daemon-port"
className="mt-2 mb-3"
name="daemon_port"
defaultValue="30393"
placedholder="set the port of the safex blockchain"
/>
<button
className="w-100 custom-button-entry orange-border"
type="submit"
variant="primary"
>
Set Connection
</button>
</form>
) : (
<div className="d-flex flex-column">
<p className="h3">
You will be connected to:
<br />
<i>
{this.state.daemon_host}:{this.state.daemon_port}
</i>
</p>
<button
className="w-100 custom-button-entry"
onClick={() =>
this.setState({ daemon_host: "", daemon_port: 0 })
}
>
Reset Connection
</button>
<button
className="mt-2 w-100 mx-auto custom-button-entry orange-border"
onClick={() => this.setState({ pageNumber: 3 })}
>
Continue
</button>
</div>
)}
</div>
) : (
""
)}
{this.state.pageNumber === 3 && (
<div className="entry-container">
<form
id="set_password"
className=""
onSubmit={this.set_password}
>
<label htmlFor="password-input">Choose a password</label>
<input
id="password-input"
type="password"
name="password"
className="mt-2 mb-2"
/>
<label htmlFor="repeat-password-input">
Confirm your password
</label>
<input
id="repeat-password-input"
name="repeat_password"
className="mt-2 mb-2"
type="password"
/>
<button
type="submit"
onClick={() => {
this.setState({ pageNumber: 4 });
}}
className="w-100 custom-button-entry orange-border mt-2"
>
Set Password
</button>
</form>
</div>
)}
{this.state.pageNumber === 4 && (
<div className="entry-container">
<p className="h3">
This file will be saved to: <br /><i>{this.state.new_path}</i>
</p>
<button
onClick={this.make_wallet}
className="w-100 mt-2 mx-auto custom-button-entry orange-border"
>
Restore Wallet
</button>
</div>
)}
</div>
</div>
)}
</div>
);
}
Example #4
| Source File: recover_seed.js From twmwallet with MIT License | 4 votes |
|
render() {
return (
<div className={"w-100 h-100"}>
{this.state.wallet_made && this.state.loading === false ? (
<div fluid className="w-100 h-100">
<WalletHome
wallet={this.state.wallet}
daemon_host={this.state.daemon_host}
daemon_port={this.state.daemon_port}
password={this.state.password}
wallet_path={this.state.new_path}
/>
</div>
) : (
<div className="w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<div className="start-background-image w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<Image
onClick={() => {
alert("Closing Wallet... (TEST)");
}}
className="entry-off-button pointer"
src={require("./../../img/off_black.svg")}
/>
<Row className="entry-progress-row">
<Col
onClick={this.goBack}
className="d-flex align-items-center entry-back-text pointer"
md={2}
>
<IconContext.Provider
value={{ color: "#13D3FD", size: "3rem" }}
>
<IoIosArrowBack />
</IconContext.Provider>
BACK
</Col>
<ProgressIcon
amount={4}
number={1}
color={
this.state.pageNumber === 0
? "progress-icon-color"
: this.state.seed_set
? "progress-icon-color-complete"
: ""
}
title={"SEED PHRASE"}
/>
<ProgressIcon
amount={4}
number={2}
title={"SAVE FILES"}
color={
this.state.pageNumber === 1
? "progress-icon-color"
: this.state.new_path.length > 0
? "progress-icon-color-complete"
: ""
}
/>
<ProgressIcon
amount={4}
number={3}
title={"NETWORK CONNECTION"}
color={
this.state.pageNumber === 2
? "progress-icon-color"
: this.state.daemon_host.length > 0
? "progress-icon-color-complete"
: ""
}
/>
<ProgressIcon
amount={4}
number={4}
title={"YOUR PASSWORD"}
color={
this.state.pageNumber === 3
? "progress-icon-color"
: this.state.password.length > 0
? "progress-icon-color-complete"
: ""
}
/>
</Row>
{this.state.wallet_made && (
<div className="w-100 h-100">
<WalletHome
wallet={this.state.wallet}
daemon_host={this.state.daemon_host}
daemon_port={this.state.daemon_port}
password={this.state.password}
wallet_path={this.state.new_path}
/>
</div>
)}
{this.state.pageNumber === 0 ? (
<div className="entry-container">
<p className="h3">Enter your Seed Phrase</p>
<Form id="set_seed" onSubmit={this.set_seed}>
<Form.Control
className="w-100"
name="seed"
as="textarea"
rows="3"
/>
<button
className="w-100 mt-2 custom-button-entry orange-border"
type="submit"
>
Set Seed
</button>
</Form>
</div>
) : (
""
)}
{this.state.pageNumber === 1 ? (
<div>
{this.state.new_path.length > 0 ? (
<div className="entry-container">
<p className="h3">
{" "}
This file will be saved to:{" "}
<br /><i>{this.state.new_path}</i>
</p>
<button
className="w-100 mt-3 mx-auto custom-button-entry"
onClick={this.change_path}
>
Change Path
</button>
<button
className="w-100 mt-2 mx-auto custom-button-entry orange-border"
onClick={() => this.setState({ pageNumber: 2 })}
>
Continue
</button>
</div>
) : (
<div className="entry-container">
<p className="h3">
Where would you like to save your new Safex Wallet
Files?
</p>
<Form
className="mt-2 mb-2"
id="set_path"
onSubmit={this.set_path}
>
<input className="display-none" type="file" />
<button
className="w-100 mt-2 mx-auto custom-button-entry orange-border"
type="submit"
variant="primary"
>
Select File Path
</button>
</Form>
</div>
)}
</div>
) : (
""
)}
{this.state.new_path.length > 0 && this.state.pageNumber === 2 ? (
<div className="entry-container">
{this.state.daemon_host.length < 1 ? (
<form
id="set_daemon"
onSubmit={this.set_daemon_state}
className=""
>
<label className="entry-form-label" htmlFor="daemon-host">
Daemon Host:
<AiOutlineInfoCircle className="ml-3" size={15} data-tip data-for="daemonHostInfo" />
<ReactTooltip
id="daemonHostInfo"
type="info"
effect="solid"
place="bottom"
>
<span>
This is the URL used to connect to the Safex
blockchain.
<br />
You can use the default provided by the Safex
Foundation
<br />
or replace it with your own full node.
<br />
<br />
<ul className="mb-4">
<li>
The default self hosted wallet setup would be:
</li>
<li className="mt-4">
HOST: <b>127.0.0.1</b>
</li>
<li className="mt-1">
PORT: <b>17402</b>
</li>
<li className="mt-2">
The default is rpc.safex.org:30393
</li>
</ul>
</span>
</ReactTooltip>
</label>
<input
id="daemon-host"
className="my-2 entry-form-input"
name="daemon_host"
defaultValue="stagenetrpc.safex.org"
placedholder="set the ip address of the safex blockchain"
/>
<label htmlFor="daemon-port">Daemon Port:</label>
<input
id="daemon-port"
className="mt-2 mb-3"
name="daemon_port"
defaultValue="30393"
placedholder="set the port of the safex blockchain"
/>
<button
className="w-100 custom-button-entry orange-border"
type="submit"
variant="primary"
size="lg"
>
Set Connection
</button>
</form>
) : (
<div className="d-flex flex-column justify-content-around h-100">
<p className="h3">
You will be connected to:
<br />
<i>
{this.state.daemon_host}:{this.state.daemon_port}
</i>
</p>
<button
className="w-100 mt-2 custom-button-entry"
onClick={() =>
this.setState({ daemon_host: "", daemon_port: 0 })
}
>
Reset Connection
</button>
<button
className="w-100 mt-2 mx-auto custom-button-entry orange-border"
onClick={() => this.setState({ pageNumber: 3 })}
>
Continue
</button>
</div>
)}
</div>
) : (
""
)}
{this.state.pageNumber === 3 ? (
<div className="entry-container">
<form
id="set_password"
className=""
onSubmit={this.set_password}
>
<label htmlFor="password-input">Choose a password</label>
<input
id="password-input"
type="password"
name="password"
className="mt-2 mb-2"
/>
<label htmlFor="repeat-password-input">
Confirm your password
</label>
<input
id="repeat-password-input"
name="repeat_password"
className="mt-2 mb-2"
type="password"
/>
<button
type="submit"
className="w-100 mt-2 custom-button-entry orange-border"
>
Set Password
</button>
</form>
</div>
) : (
""
)}
{this.state.new_path.length > 0 &&
this.state.daemon_host.length > 0 &&
this.state.wallet_made === false &&
this.state.password.length > 0 &&
this.state.pageNumber === 4 ? (
<div className="entry-container">
<p className="h3">
This file will be saved to: <br /><i>{this.state.new_path}</i>
</p>
<button
onClick={this.make_wallet}
className="w-100 mt-2 mx-auto custom-button-entry orange-border"
>
Restore Wallet
</button>
</div>
) : (
""
)}
</div>
</div>
)}
</div>
);
}
