react-icons/ai#AiOutlineInfoCircle JavaScript Examples
The following examples show how to use
react-icons/ai#AiOutlineInfoCircle.
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: AccountInfo.js From twmwallet with MIT License | 6 votes |
|
renderRow = (id, label, value, renderTooltipMessage) => (
<div className="d-flex flex-column mb-4">
<label>
{label}
<AiOutlineInfoCircle className="ml-2" size={15} data-tip data-for={id} />
<ReactTooltip id={id} type="info" effect="solid" place="right">
{renderTooltipMessage()}
</ReactTooltip>
</label>
<div className="d-flex align-items-center">
<span>{value}</span>
<CgCopy
size={15}
className="mb-0 ml-2"
onClick={() => {
copy(value);
alert("Copied to clipboard");
}}
>
Copy
</CgCopy>
</div>
</div>
)
Example #2
| Source File: create_wallet.js From twmwallet with MIT License | 6 votes |
|
renderUrlTooltip() {
return (
<>
<AiOutlineInfoCircle size={15} className="ml-2" 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>
</>)
}
Example #3
| Source File: open_wallet.js From twmwallet with MIT License | 6 votes |
|
renderUrlTooltip() {
return (
<>
<AiOutlineInfoCircle className="ml-2" size={15} data-tip data-for="daemonHostInfo" />
<ReactTooltip
id="daemonHostInfo"
effect="solid"
type="info"
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>
</>
)
}
Example #4
| Source File: Results.js From SauceKudasai with MIT License | 5 votes |
|
Results = () => {
const ctx = useContext(Context);
const truncate = (str, num) => {
if (str.length <= num) return str;
return str.substring(0, num).concat('...');
};
const closeResult = () => {
ctx.cardhandler();
};
return (
<AnimatePresence>
{ctx.animeinfoexits ? (
<>
<Overlay key="Overlay" onClick={closeResult} />
<Animecard key="animecard" variants={variants} initial="initial" animate="animate" exit="exit">
<Banner>
<Closebtn onClick={closeResult}></Closebtn>
{ctx.animeinfo.bannerImage ? (
<>
<Bannerimg src={ctx.animeinfo.bannerImage}></Bannerimg>
<Banneroverlay></Banneroverlay>{' '}
</>
) : null}
</Banner>
<Animeinfo>
<Cover>
<Coverimg src={ctx.animeinfo.coverImage.large} alt=""></Coverimg>
</Cover>
<Animetext>
<Title>{ctx.animeinfo.title.english || ctx.animeinfo.title.native}</Title>
<Info>
<Details>
<h3>Ep {ctx.animeinfo.episode}</h3>
<h3>at {(ctx.animeinfo.time / 60).toFixed(2).replace('.', ':')}</h3>
<h3>{ctx.animeinfo.seasonYear}</h3>
<Similarity props={ctx.animeinfo.similarity.toFixed(2) * 100}>
{ctx.animeinfo.similarity.toFixed(2) * 100}%
</Similarity>
</Details>
</Info>
<Summary>
<p>{ctx.animeinfo.description ? truncate(ctx.animeinfo.description, 250) : null}</p>
<Links>
{ctx.animeinfo.externalLinks.map(({ id, site, url }) => {
return (
<li key={id}>
<StyledLink href={url} target="_blank">
{site}
</StyledLink>
</li>
);
})}
</Links>
</Summary>
</Animetext>
<Resultfooter>
<Moreinfo href={ctx.animeinfo.siteUrl} target="_blank">
<AiOutlineInfoCircle size={15} />
<span>More Info</span>
<IoIosArrowForward size={15} />
</Moreinfo>
<span>
Information by{' '}
<StyledLink href="https://anilist.com" target="_blank">
Anilist
</StyledLink>
</span>
</Resultfooter>
</Animeinfo>
</Animecard>
</>
) : null}
</AnimatePresence>
);
}
Example #5
| Source File: TaskInfoCard.js From react-portal with MIT License | 4 votes |
|
TaskInfoCard = ({
data,
refreshTasks,
setRefreshTasks,
onClick,
userData
}) => {
const [showInfo, setShowInfo] = useState(false);
const [show, setShow] = useState(false);
const deleteTask = async (e, id) => {
e.stopPropagation();
try {
const res = await deleteTaskService(id);
if (!res.error && res.message === "success") {
setRefreshTasks(!refreshTasks);
_notification("success", "Success", "Successfully Deleted!");
}
} catch (err) {
_notification("error", "Error", err.message);
}
};
const showTaskInfo = e => {
e.stopPropagation();
setShowInfo(true);
};
const editTask = e => {
e.stopPropagation();
setShow(true);
};
return (
<>
<Card hoverable onClick={onClick}>
<Row
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
textTransform: "capitalize",
paddingBottom: "6px"
}}
>
<Col style={{ overflowWrap: "anywhere" }}>{data.title}</Col>
<Col>
<Row>
<AiOutlineInfoCircle
color="#4285F4"
style={{
marginLeft: "8px",
height: "1.25em",
width: "1.25em"
}}
onClick={e => showTaskInfo(e)}
/>
{(userData.role === "lead" ||
data.headIds.includes(userData.id)) && (
<>
<Popconfirm
onClick={e => e.stopPropagation()}
okText="Yes"
cancelText="No"
title="Are you sure to delete this task?"
onConfirm={e => {
deleteTask(e, data._id);
}}
onCancel={e => e.stopPropagation()}
>
<AiOutlineDelete
color="#DB4437"
style={{
marginLeft: "8px",
height: "1.25em",
width: "1.25em"
}}
/>
</Popconfirm>
<BiEditAlt
color="#F4B400"
style={{
marginLeft: "8px",
height: "1.25em",
width: "1.25em"
}}
onClick={e => editTask(e, data._id)}
/>
</>
)}
</Row>
</Col>
</Row>
<Row
style={{
alignItems: "center",
justifyContent: "space-between",
paddingTop: "12px"
}}
>
<Tag color="green">{data.createdAt.split("T")[0]}</Tag>
<Avatar.Group
size="small"
maxCount={3}
maxStyle={{
color: "#f56a00",
backgroundColor: "#fde3cf"
}}
>
{data.taskAssigneeData.map(data => (
<Tooltip
title={data.userData[0].name}
placement="top"
key={data._id}
>
<Avatar src={data.userData[0].image} />
</Tooltip>
))}
</Avatar.Group>
</Row>
</Card>
<InfoModal
setShowInfo={setShowInfo}
showInfo={showInfo}
data={data}
/>
<Drawer
title="Edit Task"
placement="right"
closable={true}
width={"100%"}
destroyOnClose={true}
onClose={() => setShow(false)}
visible={show}
>
<EditTask data={data} setShow={setShow} />
</Drawer>
</>
);
}
Example #6
| Source File: MerchantAccounts.js From twmwallet with MIT License | 4 votes |
|
export default function MerchantAccounts(props) {
return (
<div>
{props.accounts.length > 0 ?
<Row className="merchant-accounts-box">
<h1>Accounts</h1>
<Col md={7} className="account-list d-flex no-gutters p-3">
{props.accounts}
</Col>
{props.selected !== void (0) ?
<Col md={3}
className="
no-gutters d-flex flex-column
align-items-center justify-content-center b-r10
merchant-profile-view text-align-center"
>
<Row>
<ul>
<li>
<Image
className="border border-white grey-back"
width={100}
height={100}
src={props.data.avatar}
roundedCircle
/>
</li>
<h2>{props.selected.username}</h2>
</ul>
</Row>
<div id="account-edit-buttons" className=" d-flex flex-column">
<button className="merchant-mini-buttons"
onClick={() => props.handleEditAccountForm(props.selected)}>
Edit
</button>
{props.userRegistered == true ? ('User is registered') : (<button className="merchant-mini-buttons" onClick={() => props.registerApi(props.selected)}>
Register API
</button>) }
<button className="merchant-mini-buttons">
Remove
</button>
</div>
</Col>
:
''
}
</Row>
:
<Row className="merchant-accounts-box">
<Col className="new-account-box" md={4}>
<Image
width={150}
height={150}
src={props.newAccountImage}
roundedCircle
/>
<h3>Safex Seller</h3>
<button onClick={props.handleNewAccountForm}>
New Account
</button>
</Col>
</Row>
}
{props.selected ?
<ReactModal
closeTimeoutMS={500}
isOpen={props.showEditAccountForm}
onRequestClose={props.handleEditAccountForm}
className="new-account-modal"
style={{
overlay: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(255, 255, 255, 0.75)'
},
content: {
position: 'absolute',
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
overflow: 'auto',
}
}}
>
<h1>Edit Account {props.selected.username}</h1>
<Form id="edit_account"
onSubmit={(e) => props.edit_account_top(e)}>
<Form.Row>
<Col md="8">
<Form.Group as={Col}>
<Form.Label>Username</Form.Label>
<Form.Control
name="username"
defaultValue={props.selected.username}
/>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Avatar URL</Form.Label>
<Form.Control
name="avatar"
defaultValue={props.data.avatar}
onChange={props.handleChange}
/>
</Form.Group>
</Col>
<Col md="4">
<Image
className="border border-white grey-back"
width={150}
height={150}
src={props.data.avatar}
roundedCircle
/>
</Col>
</Form.Row>
<Form.Row>
<Col>
<Form.Group as={Col}>
<Form.Label>Biography</Form.Label>
<Form.Control maxLength="500"
as="textarea"
name="biography"
defaulValue={props.data.biography ? props.data.biography : ''}/>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Location</Form.Label>
<Form.Control name="location"
defaultValue={props.data.location ? props.data.location : ''}/>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Email</Form.Label>
<Form.Control name="email"
defaultValue={props.data.email ? props.data.email : ''}/>
</Form.Group>
<Form.Group>
<Form.Group md="6" as={Col}>
<Form.Label>Twitter
Link</Form.Label>
<Form.Control name="twitter"
defaultValue={props.data.twitter ? props.data.twitter : ''}/>
</Form.Group>
<Form.Group md="6" as={Col}>
<Form.Label>Facebook
Link</Form.Label>
<Form.Control name="facebook"
defaultValue={props.data.facebook ? props.data.facebook : ''}/>
</Form.Group>
<Form.Group md="6" as={Col}>
<Form.Label>LinkedIn
Link</Form.Label>
<Form.Control name="linkedin"
defaultValue={props.data.linkedin ? props.data.linkedin : ''}/>
</Form.Group>
<Form.Group md="6" as={Col}>
<Form.Label>Website</Form.Label>
<Form.Control name="website"
defaultValue={props.data.website ? props.data.website : ''}/>
</Form.Group>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Mixins</Form.Label>
<IconContext.Provider value={{
color: 'white',
size: '20px'
}}>
<AiOutlineInfoCircle data-tip
data-for='apiInfo'
className="blockchain-icon mx-4 white-text"/>
<ReactTooltip id='apiInfo'
type='info'
effect='solid'>
<span>
Mixins are transactions that have also been sent on the Safex blockchain. <br/>
They are combined with yours for private transactions.<br/>
Changing this from the default could hurt your privacy.<br/>
</span>
</ReactTooltip>
</IconContext.Provider>
<Form.Control
name="mixins"
as="select"
defaultValue="7"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</Form.Control>
</Form.Group>
</Col>
</Form.Row>
<button block size="lg" type="submit"
variant="success">
Submit Edit
</button>
</Form>
<button className="close-button my-3"
onClick={props.handleEditAccountForm}>
Close
</button>
</ReactModal>
:
''
}
</div>
)
}
Example #7
| Source File: SendSafex.js From twmwallet with MIT License | 4 votes |
|
export default function SendSafex(props) {
return (
<div className="send-safex-box">
<div className="send-safex-box--header d-flex p-3">
<span>{props.title}</span>
<AiOutlineInfoCircle
className="ml-2"
size={20}
data-tip
data-for="sendSafexInfo"
/>
<ReactTooltip
id="sendSafexInfo"
type="info"
effect="solid"
place="right"
>
<span>
How to send?
<br />
<br />
1. The address that you are sending safex to should start with
"Safex" and contain 95-105 characters.
<br />
Example:
Safex5zHGtYQYE41yEzLTRQWiajC5keyJHVwQamarNyp9ssouD87bbGhobVnYAtUEQa4me79ybZev2AmLUnbds4PRYv3P1KmW6j2F
<br />
<br />
2. The amount that you are sending has to be grater than 0. The
transaction fee will be added on to the amount you are sending.
</span>
</ReactTooltip>
</div>
<form className="p-4" id={props.id} onSubmit={props.send}>
<label htmlFor="address">RECEIVING ADDRESS</label>
<input className="mb-4" id="address" name="destination" placeholder="Safex address" />
<label htmlFor="amount">AMOUNT</label>
<input className="mb-4" id="amount" name="amount" placeholder="How much to send?" type="number" />
<div className="mb-4">
<label>
MIXINS
<AiOutlineInfoCircle size={15} data-tip data-for="mixinInfo" className="ml-1" />
<ReactTooltip
id="mixinInfo"
type="info"
effect="solid"
place="right"
>
<span>
Mixins are transactions that have also been sent on the Safex
blockchain. <br />
They are combined with yours for private transactions.
<br />
Changing this from the default could hurt your privacy.
<br />
</span>
</ReactTooltip>
:
</label>
<select className="ml-4 pl-2" name="mixins" defaultValue="7">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
<button className="btn btn-dark" type="submit">
SEND
</button>
</form>
</div>
);
}
Example #8
| Source File: Stake.js From twmwallet with MIT License | 4 votes |
|
export default function Stake(props) {
if (props.style === "stake") {
return (
<form className="stake-token-box" id={props.id} onSubmit={props.send}>
<p className="h3 my-3 text-center d-flex align-items-center">
STAKE TOKENS
<AiOutlineInfoCircle
size={15}
className="ml-3"
data-tip
data-for="stakeSafex"
/>
<ReactTooltip id="stakeSafex" type="info" effect="solid" place="left">
<span>
How to stake?
<br />
{`The amount that you are staking has to be less than your token balance: ${props.tokenBalance}.`}
<br />
5% of each sale is awarded to the revenue pool. The amount of
tokens you stake will redeem your proportion of the accrued pool.
<br />
Each 1000 blocks a new interval is formed, and you must have
staked ahead of the interval to count towards that pools accrual.
</span>
</ReactTooltip>
</p>
<div className="w-100 d-flex flex-column">
<label>Available: </label>
<span>{props.tokenBalance} SFT</span>
<input
className="mt-2"
name="amount"
placeholder="How much to stake?"
type="number"
/>
</div>
<div className="w-100 d-flex align-items-center mt-3">
<label className="d-flex align-items-center">
Mixins:
<AiOutlineInfoCircle
size={15}
data-tip
data-for="mixinInfo"
className="ml-3"
/>
<ReactTooltip
id="mixinInfo"
type="info"
effect="solid"
place="left"
>
<span>
Mixins are transactions that have also been sent on the Safex
blockchain. <br />
They are combined with yours for private transactions.
<br />
Changing this from the default could hurt your privacy.
<br />
</span>
</ReactTooltip>
</label>
<select
className="ml-2"
style={{ width: "50px" }}
name="mixins"
defaultValue="7"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
<div
className="d-flex w-100"
style={{ flex: 1, alignItems: "flex-end" }}
>
<button
style={{ height: "50px" }}
className="custom-button-send"
type="submit"
>
{props.style.toUpperCase()}
</button>
</div>
</form>
);
}
return (
<form className="stake-token-box" id={props.id} onSubmit={props.send}>
<p className="h3 my-3 text-center d-flex align-items-center">
UNSTAKE TOKENS
</p>
<div className="w-100 d-flex align-items-center">
<label>Staked: {props.stakedBalance}</label>
<select
className="ml-3"
style={{ width: "190px" }}
name="selected_stake"
>
{props.tokenStakes.map((staked, key) => {
return (
<option key={key}>
{staked.tokenStaked / 10000000000} SFT at height{" "}
{staked.blockHeight}
</option>
);
})}
</select>
</div>
<div className="w-100 d-flex align-items-center mt-3">
<label className="d-flex align-items-center">
Mixins:
<AiOutlineInfoCircle
size={15}
data-tip
data-for="mixinInfo"
className="ml-3"
/>
<ReactTooltip id="mixinInfo" type="info" effect="solid" place="left">
<span>
Mixins are transactions that have also been sent on the Safex
blockchain. <br />
They are combined with yours for private transactions.
<br />
Changing this from the default could hurt your privacy.
<br />
</span>
</ReactTooltip>
</label>
<select
className="ml-2"
style={{ width: "50px" }}
name="mixins"
defaultValue="7"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
<div className="d-flex w-100" style={{ flex: 1, alignItems: "flex-end" }}>
<button
style={{ height: "50px" }}
className="custom-button-send"
type="submit"
>
{props.style.toUpperCase()}
</button>
</div>
</form>
);
}
Example #9
| 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 #10
| 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>
);
}
