@ant-design/icons#KeyOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#KeyOutlined.
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: Settings.js From ctf_platform with MIT License | 5 votes |
|
DeleteAccountForm = (props) => {
const [form] = Form.useForm();
return (
<Form
form={form}
name="changePassword"
className="change-password-form"
onFinish={(values) => {
fetch(window.ipAddress + "/v1/account/delete", {
method: 'post',
headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
body: JSON.stringify({
"password": values.password
})
}).then((results) => {
return results.json(); //return data in JSON (since its JSON data)
}).then((data) => {
if (data.success === true) {
message.success({ content: "Account deleted successfully" })
props.setState({ deleteAccountModal: false })
props.logout()
form.resetFields()
}
else if (data.error === "wrong-password") {
message.error({ content: "Password is incorrect. Please try again." })
}
else {
message.error({ content: "Oops. Unknown error." })
}
}).catch((error) => {
console.log(error)
message.error({ content: "Oops. There was an issue connecting with the server" });
})
}}
style={{ display: "flex", flexDirection: "column", justifyContent: "center", width: "100%", marginBottom: "2vh" }}
>
<h4>Your account data will be <b style={{ color: "#d32029" }}>deleted permanently</b>. Please ensure you really no longer want this account.</h4>
<h3>Please Enter Your Password To Confirm:</h3>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password', }]}>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter password." />
</Form.Item>
<Form.Item>
<Button style={{ marginRight: "1.5vw" }} onClick={() => { props.setState({ deleteAccountModal: false }) }}>Cancel</Button>
<Button type="primary" htmlType="submit" danger icon={<KeyOutlined />}>Delete Account</Button>
</Form.Item>
</Form>
);
}
Example #2
| Source File: adminUsers.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal
title={<span>Change User Permissions <ClusterOutlined /></span>}
visible={this.state.permissionModal}
onOk={this.changePermissions}
onCancel={() => { this.setState({ permissionModal: false }) }}
confirmLoading={this.state.modalLoading}
>
<Select size="large" value={this.state.permissionChangeTo} style={{ width: "30ch" }} onSelect={(value) => { this.setState({ permissionChangeTo: value }) }}>
<Option value="0">0 - Normal User</Option>
<Option value="1">1 - Challenge Creator User</Option>
<Option value="2">2 - Admin User</Option>
</Select>
<br />
<br />
<ul>
<li><b>0 - Normal User</b>: Has access to the basic functions and nothing else</li>
<li><b>1 - Challenge Creator User</b>: Has the additional power of submitting new challenges, but not modifying existing ones</li>
<li><b>2 - Admin User</b>: Has full access to the platform via the admin panel.</li>
</ul>
</Modal>
<Modal
title="Create New Account"
visible={this.state.createUserModal}
footer={null}
onCancel={() => { this.setState({ createUserModal: false }) }}
>
<RegisterForm createAccount={this.createAccount.bind(this)} setState={this.setState.bind(this)} />
</Modal>
<Modal
title={"Changing Account Password For: " + this.state.username}
visible={this.state.passwordResetModal}
footer={null}
onCancel={() => { this.setState({ passwordResetModal: false }) }}
>
<ChangePasswordForm username={this.state.username} setState={this.setState.bind(this)} />
</Modal>
<Modal
title={"Changing Category For: " + this.state.username}
visible={this.state.categoryChangeModal}
footer={null}
onCancel={() => { this.setState({ categoryChangeModal: false }) }}
>
<SelectParticipantCategoryForm fillTableData={this.fillTableData.bind(this)} categoryList={this.state.categoryList} username={this.state.username} participantCategory={this.state.participantCategory} />
</Modal>
<Modal
title={"Changing Email For: " + this.state.username}
visible={this.state.emailChangeModal}
footer={null}
onCancel={() => { this.setState({ emailChangeModal: false }) }}
>
<ChangeEmailForm fillTableData={this.fillTableData.bind(this)} username={this.state.username} setState={this.setState.bind(this)} />
</Modal>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<UserOutlined />} onClick={() => { this.setState({ createUserModal: true }) }}>Create New User</Button>
{this.state.loading && (
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Ellipsis color="#177ddc" size={60} ></Ellipsis>
<h1>Loading Users</h1>
</div>
)}
</div>
<Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh", maxWidth: "25ch" }} icon={<RedoOutlined />} onClick={async () => { await Promise.all([this.fillTableData(), this.getDisableStates()]); message.success("Users list refreshed.") }} />
</div>
<div style={{ display: "flex", alignItems: "center" }}>
<Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to delete the user(s) (' + this.state.selectedTableKeys.join(", ") + ')? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.deleteAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Delete Users</Button>
<Button type="default" disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<CheckOutlined style={{ color: "#49aa19" }} />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to verify the user(s) (' + this.state.selectedTableKeys.join(", ") + ')?',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.verifyAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Verify Users</Button>
<Button type="default" disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<CloseOutlined style={{ color: "#a61d24" }} />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to un-verify the user(s) (' + this.state.selectedTableKeys.join(", ") + ')?',
content: 'Please note that this action will send a new email per user asking them to re-verify.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.unverifyAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Un-Verify Users</Button>
</div>
<Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>No users found/created</h1>
</div>
)
}}>
<Column title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
return <Link to={"/Profile/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Username"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.username.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
sorter={(a, b) => {
if (a.username < b.username) return -1
else return 1
}}
/>
<Column title="Email" dataIndex="email" key="email"
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Email"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.email.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Permissions" dataIndex="type" key="type" filters={[{ text: "Normal User (0)", value: 0 }, { text: "Challenge Creator (1)", value: 1 }, { text: "Admin (2)", value: 2 }]} onFilter={(value, record) => { return value === record.type }} />
<Column title="Team" dataIndex="team" key="team"
render={(text, row, index) => {
if (text != "N/A") return <Link to={"/Team/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
else return text;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Team"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.team.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Category" dataIndex="category" key="category" filters={
this.state.categoryList.map((category) => {
return { text: category, value: category }
})} onFilter={(value, record) => { return value === record.category }} />
<Column title="Verified" dataIndex="verified" key="verified" filters={[{ text: "Verified", value: "True" }, { text: "Unverified", value: "False" }]} onFilter={(value, record) => { return value === record.verified }} />
<Column
title=""
key="action"
render={(text, record) => (
<Dropdown trigger={['click']} overlay={
<Menu>
<Menu.Item onClick={() => {
this.setState({ permissionModal: true, username: record.username, permissionChangeTo: record.type.toString() })
}}>
<span>
Change Permissions <ClusterOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ passwordResetModal: true, username: record.username })
}}>
<span>
Change Password <KeyOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ emailChangeModal: true, username: record.username })
}}>
<span>
Change Email <MailOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ categoryChangeModal: true, username: record.username, participantCategory: record.category })
}}>
<span>
Change Category <ApartmentOutlined />
</span>
</Menu.Item>
</Menu>
} placement="bottomCenter">
<Button>Actions</Button>
</Dropdown>
)}
/>
</Table>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Disable User Registration: <Switch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("registerDisable", value)} checked={this.state.registerDisable} /></h3>
<p>Disables user registration for unregistered users. Admins can still create users from this page.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable User Logins: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("loginDisable", value)} checked={this.state.loginDisable} /></h3>
<p>Disables user login except for admin users. <br /><b>Note:</b> Users already logged into the platform will remain authenticated as tokens cannot be revoked. If you want to restrict a user from accessing the platform anymore, simply delete their account.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Admin Scores: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("adminShowDisable", value)} checked={this.state.adminShowDisable} /></h3>
<p>Prevents admin scores from showing up on scoreboards and profile pages. Admin solves will still appear under the solve list in challenges. <br /> Please note that disabling/enabling this will require users to reopen ctfx to resync the scoreboard.</p>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Profile Picture Max Upload Size: <InputNumber
formatter={value => `${value}B`}
parser={value => value.replace('B', '')}
value={this.state.uploadSize}
disabled={this.state.uploadLoading}
onChange={(value) => this.setState({ uploadSize: value })}
onPressEnter={(e) => { this.changeSetting("uploadSize", this.state.uploadSize) }} /></h3>
<p>Sets the maximum file upload size for profile pictures (in Bytes). Press <b>Enter</b> to save</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Category Switches: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("categorySwitchDisable", value)} checked={this.state.categorySwitchDisable} /></h3>
<p>Prevents users from switching their scoreboard category. Useful during competitions where you want to lock the user into a category</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>User Category Management <UserOutlined /></h3>
<Space direction="vertical">
{this.state.categoryList.map((category) => {
return (
<div style={{ display: 'flex', alignItems: "center" }}>
<Input disabled value={category} />
<MinusCircleOutlined onClick={() => { this.removeCategory(category) }} style={{ cursor: "pointer", marginLeft: "1ch", color: "#f5222d" }} />
</div>
)
})}
<div style={{ display: "flex" }}>
<Input value={this.state.newCategoryValue} onChange={(e) => { this.setState({ newCategoryValue: e.target.value }) }} />
<Button
loading={this.state.addCategoryLoading}
style={{ marginLeft: "1ch" }}
type="dashed"
onClick={() => {
this.addCategory()
}}
>
<PlusOutlined /> Add Category
</Button>
</div>
</Space>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Max Team Size: <InputNumber
value={this.state.teamMaxSize}
onChange={(value) => this.setState({ teamMaxSize: value })}
onPressEnter={(e) => { this.changeSetting("teamMaxSize", this.state.teamMaxSize) }} />
</h3>
<p>Sets the maximum number of members in a team. Press <b>Enter</b> to save</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Enable Teams: <Switch disabled={this.state.disableLoading3} onClick={(value) => this.disableSetting("teamMode", value)} checked={this.state.teamMode} /></h3>
<p>Enable teams for the platform. Users in a team will have their scores combined on the scoreboard <br /> Please note that disabling/enabling this will require users to reopen ctfx to resync the scoreboard.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Team Switching: <Switch disabled={this.state.disableLoading3} onClick={(value) => this.disableSetting("teamChangeDisable", value)} checked={this.state.teamChangeDisable} /></h3>
<p>Prevents users from leaving, joining & creating a team. Enable this option if you want to prevent any team changes during a competition</p>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Enable Password Reset <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("forgotPass", value)} checked={this.state.forgotPass} /></h3>
<p>Allow users to use the "Forgot Password" option to reset their password. <br />Please ensure that you have connected to an SMTP server correctly in the "Email" tab</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Enable Email Verification <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("emailVerify", value)} checked={this.state.emailVerify} /></h3>
<p>Forces newly registered users to <b>verify their email</b> before being able to access the site.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Profile Picture Upload Path
<Input
value={this.state.uploadPath}
onChange={(e) => this.setState({ uploadPath: e.target.value })}
onPressEnter={(e) => { this.changeSetting("uploadPath", this.state.uploadPath) }} /></h3>
<p>Sets the file upload path for profile pictures. Please ensure that the folder has the appropriate permissions <br />set for the Node process to save the file there. Press <b>Enter</b> to save</p>
</Card>
</div>
</Layout>
);
}
Example #3
| Source File: adminUsers.js From ctf_platform with MIT License | 4 votes |
|
ChangePasswordForm = (props) => {
const [form] = Form.useForm();
return (
<Form
form={form}
name="changePassword"
className="change-password-form"
onFinish={(values) => {
fetch(window.ipAddress + "/v1/account/adminChangePassword", {
method: 'post',
headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
body: JSON.stringify({
"password": values.newPassword,
"username": props.username,
})
}).then((results) => {
return results.json(); //return data in JSON (since its JSON data)
}).then((data) => {
if (data.success === true) {
message.success({ content: "Password changed successfully." })
form.resetFields()
props.setState({ passwordResetModal: false })
}
else {
message.error({ content: "Oops. Unknown error." })
}
}).catch((error) => {
console.log(error)
message.error({ content: "Oops. There was an issue connecting with the server" });
})
}}
style={{ display: "flex", flexDirection: "column", justifyContent: "center", width: "100%" }}
>
<h3>New Password:</h3>
<Form.Item
name="newPassword"
rules={[
{
required: true,
message: 'Please input the new password',
},
]}
hasFeedback
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter a new password" />
</Form.Item>
<h3>Confirm New Password:</h3>
<Form.Item
name="confirm"
dependencies={['newPassword']}
hasFeedback
rules={[
{
required: true,
message: 'Please retype the new password to confirm',
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('newPassword') === value) {
return Promise.resolve();
}
return Promise.reject('Oops, the 2 passwords do not match');
},
}),
]}
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Confirm new password" />
</Form.Item>
<Form.Item>
<Button style={{ marginRight: "1.5vw" }} onClick={() => { props.setState({ passwordResetModal: false }) }}>Cancel</Button>
<Button type="primary" htmlType="submit" icon={<KeyOutlined />}>Change Password</Button>
</Form.Item>
</Form>
);
}
Example #4
| Source File: Settings.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
{this.state.loading ? (
<div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} />
</div>
) : (
<div>
<Modal
title={"Delete Account"}
visible={this.state.deleteAccountModal}
footer={null}
onCancel={() => { this.setState({ deleteAccountModal: false }) }}
confirmLoading={this.state.modalLoading}
>
<DeleteAccountForm logout={this.props.logout.bind(this)} setState={this.setState.bind(this)} />
</Modal>
<Divider />
<div style={{ display: "flex", marginRight: "5ch", alignItems: "center", justifyItems: "center" }}>
<div style={{ display: "flex", flexDirection: "column", justifyContent: "initial", width: "20ch", overflow: "hidden" }}>
<Avatar style={{ backgroundColor: "transparent", width: "12ch", height: "12ch" }} size='large' src={"/static/profile/" + this.props.username + ".webp"} />
<div style={{ marginTop: "2ch", display: "flex" }}>
<Upload
fileList={this.state.fileList}
disabled={this.state.disableUpload}
accept=".png, .jpg, .jpeg, .webp"
action={window.ipAddress + "/v1/profile/upload"}
maxCount={1}
onChange={(file) => {
this.setState({ fileList: file.fileList })
if (file.file.status === "uploading") {
this.setState({ disableUpload: true })
}
else if ("response" in file.file) {
if (file.file.response.success) {
message.success("Uploaded profile picture")
message.success("Reload the page to see your shiny new picture :)!")
}
else {
message.error("Failed to upload profile picture")
if (file.file.response.error === "too-large") {
message.info("Please upload a file smaller than " + file.file.response.size.toString() + " Bytes.")
}
}
this.setState({ fileList: [], disableUpload: false })
}
}}
headers={{ "Authorization": window.IRSCTFToken }}
name="profile_pic"
beforeUpload={file => {
const exts = ["image/png", "image/jpg", "image/jpeg", "image/webp"]
if (!exts.includes(file.type)) {
message.error(`${file.name} is not an image file.`);
return Upload.LIST_IGNORE
}
return true
}}>
<Tooltip title={<span>Upload a custom profile picture.</span>}>
<Button type="primary" icon={<UploadOutlined />}>Upload</Button>
</Tooltip>
</Upload>
<Tooltip title={<span>Reset your profile picture to the default profile picture.</span>}>
<Button danger type="primary" icon={<DeleteOutlined />} style={{ marginLeft: "1ch" }} onClick={() => { this.deleteProfilePic() }} />
</Tooltip>
</div>
</div>
<h1 style={{ fontSize: "5ch", marginLeft: "1ch" }}>{this.props.username}</h1>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<div className="form-style">
<h1 className="settings-header"><KeyOutlined /> Change Password</h1>
<ChangePasswordForm />
</div>
<Divider type="vertical" style={{ height: "inherit" }} />
<div className="form-style">
<h1 className="settings-header"><MailOutlined /> Change Email</h1>
<ChangeEmailForm email={this.state.email} />
</div>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<div className="form-style">
<h1 className="settings-header"><ApartmentOutlined /> Select Participant Category</h1>
<SelectParticipantCategoryForm participantCategory={this.state.participantCategory} categoryList={this.state.categoryList} />
</div>
</div>
<Divider />
<div>
<h3>Very Very Dangerous Button</h3>
<Button danger type="primary" icon={<DeleteOutlined />} onClick={() => { this.setState({ deleteAccountModal: true }) }} >Delete Account</Button>
<p>You will be asked to key in your password to confirm</p>
</div>
</div>
)}
</Layout>
)
}
Example #5
| Source File: Settings.js From ctf_platform with MIT License | 4 votes |
|
ChangePasswordForm = (props) => {
const [form] = Form.useForm();
const [loading, setLoading] = React.useState(false);
return (
<Form
form={form}
onFinish={async (values) => {
setLoading(true)
await fetch(window.ipAddress + "/v1/account/change/password", {
method: 'post',
headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
body: JSON.stringify({
"password": values.oldPass,
"new_password": values.newPassword,
})
}).then((results) => {
return results.json(); //return data in JSON (since its JSON data)
}).then((data) => {
if (data.success === true) {
message.success({ content: "Password changed successfully." })
form.resetFields()
}
else if (data.error === "wrong-password") {
message.error({ content: "Old password is incorrect. Please try again." })
}
else {
message.error({ content: "Oops. Unknown error." })
}
}).catch((error) => {
console.log(error)
message.error({ content: "Oops. There was an issue connecting with the server" });
})
setLoading(false);
}}
style={{ display: "flex", flexDirection: "column", justifyContent: "center", width: "100%", marginBottom: "2vh" }}
>
<h3>Old Password:</h3>
<Form.Item
name="oldPass"
rules={[{ required: true, message: 'Please input your old password', }]}>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter your old password." />
</Form.Item>
<h3>New Password:</h3>
<Form.Item
name="newPassword"
rules={[
{
required: true,
message: 'Please input your new password',
},
]}
hasFeedback
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter a new password" />
</Form.Item>
<h3>Confirm New Password:</h3>
<Form.Item
name="confirm"
dependencies={['newPassword']}
hasFeedback
rules={[
{
required: true,
message: 'Please retype your new password to confirm',
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('newPassword') === value) {
return Promise.resolve();
}
return Promise.reject('Oops, the 2 passwords do not match');
},
}),
]}
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Confirm new password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" icon={<KeyOutlined />} loading={loading}>Change Password</Button>
</Form.Item>
</Form>
);
}
Example #6
| Source File: Wallet.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const [signerAddress, setSignerAddress] = useState();
useEffect(() => {
async function getAddress() {
if (props.signer) {
const newAddress = await props.signer.getAddress();
setSignerAddress(newAddress);
}
}
getAddress();
}, [props.signer]);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState();
const providerSend = props.signer ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton;
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
} else if (pk) {
const pk = localStorage.getItem("metaPrivateKey");
const wallet = new ethers.Wallet(pk);
if (wallet.address !== selectedAddress) {
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
);
} else {
const extraPkDisplayAdded = {};
const extraPkDisplay = [];
extraPkDisplayAdded[wallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16, padding: 2, backgroundStyle: "#89e789" }}>
<a href={"/pk#" + pk}>
<Address minimized address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0, 6)}
</a>
</div>,
);
for (const key in localStorage) {
if (key.indexOf("metaPrivateKey_backup") >= 0) {
console.log(key);
const pastpk = localStorage.getItem(key);
const pastwallet = new ethers.Wallet(pastpk);
if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
extraPkDisplayAdded[pastwallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16 }}>
<a href={"/pk#" + pastpk}>
<Address minimized address={pastwallet.address} ensProvider={props.ensProvider} />{" "}
{pastwallet.address.substr(0, 6)}
</a>
</div>,
);
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr />
<i>
Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/" + pk} rel="noopener noreferrer">
burner wallet
</a>
:
</i>
<QR
value={"https://xdai.io/" + pk}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
<Paragraph style={{ fontSize: "16" }} copyable>
{"https://xdai.io/" + pk}
</Paragraph>
{extraPkDisplay ? (
<div>
<h3>Known Private Keys:</h3>
{extraPkDisplay}
<Button
onClick={() => {
const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if (currentPrivateKey) {
window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom();
const privateKey = randomWallet._signingKey().privateKey;
window.localStorage.setItem("metaPrivateKey", privateKey);
window.location.reload();
}}
>
Generate
</Button>
</div>
) : (
""
)}
</div>
);
}
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK("");
setQr("");
}}
>
<KeyOutlined /> Hide
</Button>
);
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton,
receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.signer);
let value;
try {
value = ethers.utils.parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = ethers.utils.parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
Example #7
| Source File: Wallet.jsx From moonshot with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const signerAddress = useUserAddress(props.provider);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState()
const providerSend = props.provider ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button key="hide" onClick={()=>{setPK(selectedAddress);setQr("")}}>
<KeyOutlined /> Private Key
</Button>
)
}else if(pk){
let pk = localStorage.getItem("metaPrivateKey")
let wallet = new ethers.Wallet(pk)
if(wallet.address!==selectedAddress){
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
)
}else{
let extraPkDisplayAdded = {}
let extraPkDisplay = []
extraPkDisplayAdded[wallet.address] = true
extraPkDisplay.push(
<div style={{fontSize:16,padding:2,backgroundStyle:"#89e789"}}>
<a href={"/pk#"+pk}>
<Address minimized={true} address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0,6)}
</a>
</div>
)
for (var key in localStorage){
if(key.indexOf("metaPrivateKey_backup")>=0){
console.log(key)
let pastpk = localStorage.getItem(key)
let pastwallet = new ethers.Wallet(pastpk)
if(!extraPkDisplayAdded[pastwallet.address] /*&& selectedAddress!=pastwallet.address*/){
extraPkDisplayAdded[pastwallet.address] = true
extraPkDisplay.push(
<div style={{fontSize:16}}>
<a href={"/pk#"+pastpk}>
<Address minimized={true} address={pastwallet.address} ensProvider={props.ensProvider} /> {pastwallet.address.substr(0,6)}
</a>
</div>
)
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr/>
<i>Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/"+pk} rel="noopener noreferrer">burner wallet</a>:
</i>
<QR value={"https://xdai.io/"+pk} size={"450"} level={"H"} includeMargin={true} renderAs={"svg"} imageSettings={{excavate:false}}/>
<Paragraph style={{fontSize:"16"}} copyable>{"https://xdai.io/"+pk}</Paragraph>
{extraPkDisplay?(
<div>
<h3>
Known Private Keys:
</h3>
{extraPkDisplay}
<Button onClick={()=>{
let currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if(currentPrivateKey){
window.localStorage.setItem("metaPrivateKey_backup"+Date.now(),currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom()
const privateKey = randomWallet._signingKey().privateKey
window.localStorage.setItem("metaPrivateKey",privateKey);
window.location.reload()
}}>
Generate
</Button>
</div>
):""}
</div>
)
}
receiveButton = (
<Button key="receive" onClick={()=>{setQr(selectedAddress);setPK("")}}>
<QrcodeOutlined /> Receive
</Button>
)
privateKeyButton = (
<Button key="hide" onClick={()=>{setPK("");setQr("")}}>
<KeyOutlined /> Hide
</Button>
)
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button key="hide" onClick={()=>{setPK(selectedAddress);setQr("")}}>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton, receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.provider);
let value;
try {
value = parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
Example #8
| Source File: Wallet.jsx From quadratic-diplomacy with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const [signerAddress, setSignerAddress] = useState();
useEffect(() => {
async function getAddress() {
if (props.signer) {
const newAddress = await props.signer.getAddress();
setSignerAddress(newAddress);
}
}
getAddress();
}, [props.signer]);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState();
const providerSend = props.provider ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton;
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
} else if (pk) {
const pk = localStorage.getItem("metaPrivateKey");
const wallet = new ethers.Wallet(pk);
if (wallet.address !== selectedAddress) {
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
);
} else {
const extraPkDisplayAdded = {};
const extraPkDisplay = [];
extraPkDisplayAdded[wallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16, padding: 2, backgroundStyle: "#89e789" }}>
<a href={"/pk#" + pk}>
<Address minimized address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0, 6)}
</a>
</div>,
);
for (const key in localStorage) {
if (key.indexOf("metaPrivateKey_backup") >= 0) {
console.log(key);
const pastpk = localStorage.getItem(key);
const pastwallet = new ethers.Wallet(pastpk);
if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
extraPkDisplayAdded[pastwallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16 }}>
<a href={"/pk#" + pastpk}>
<Address minimized address={pastwallet.address} ensProvider={props.ensProvider} />{" "}
{pastwallet.address.substr(0, 6)}
</a>
</div>,
);
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr />
<i>
Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/" + pk} rel="noopener noreferrer">
burner wallet
</a>
:
</i>
<QR
value={"https://xdai.io/" + pk}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
<Paragraph style={{ fontSize: "16" }} copyable>
{"https://xdai.io/" + pk}
</Paragraph>
{extraPkDisplay ? (
<div>
<h3>Known Private Keys:</h3>
{extraPkDisplay}
<Button
onClick={() => {
const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if (currentPrivateKey) {
window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom();
const privateKey = randomWallet._signingKey().privateKey;
window.localStorage.setItem("metaPrivateKey", privateKey);
window.location.reload();
}}
>
Generate
</Button>
</div>
) : (
""
)}
</div>
);
}
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK("");
setQr("");
}}
>
<KeyOutlined /> Hide
</Button>
);
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton,
receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.signer || props.provider);
let value;
try {
value = ethers.utils.parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = ethers.utils.parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
Example #9
| Source File: Wallet.jsx From nft-e2e-example with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const signerAddress = useUserAddress(props.provider);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState();
const providerSend = props.provider ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton;
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
} else if (pk) {
const pk = localStorage.getItem("metaPrivateKey");
const wallet = new ethers.Wallet(pk);
if (wallet.address !== selectedAddress) {
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
);
} else {
const extraPkDisplayAdded = {};
const extraPkDisplay = [];
extraPkDisplayAdded[wallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16, padding: 2, backgroundStyle: "#89e789" }}>
<a href={"/pk#" + pk}>
<Address minimized address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0, 6)}
</a>
</div>,
);
for (const key in localStorage) {
if (key.indexOf("metaPrivateKey_backup") >= 0) {
console.log(key);
const pastpk = localStorage.getItem(key);
const pastwallet = new ethers.Wallet(pastpk);
if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
extraPkDisplayAdded[pastwallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16 }}>
<a href={"/pk#" + pastpk}>
<Address minimized address={pastwallet.address} ensProvider={props.ensProvider} />{" "}
{pastwallet.address.substr(0, 6)}
</a>
</div>,
);
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr />
<i>
Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/" + pk} rel="noopener noreferrer">
burner wallet
</a>
:
</i>
<QR
value={"https://xdai.io/" + pk}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
<Paragraph style={{ fontSize: "16" }} copyable>
{"https://xdai.io/" + pk}
</Paragraph>
{extraPkDisplay ? (
<div>
<h3>Known Private Keys:</h3>
{extraPkDisplay}
<Button
onClick={() => {
const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if (currentPrivateKey) {
window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom();
const privateKey = randomWallet._signingKey().privateKey;
window.localStorage.setItem("metaPrivateKey", privateKey);
window.location.reload();
}}
>
Generate
</Button>
</div>
) : (
""
)}
</div>
);
}
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK("");
setQr("");
}}
>
<KeyOutlined /> Hide
</Button>
);
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton,
receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.provider);
let value;
try {
value = parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
