Changeset View
Changeset View
Standalone View
Standalone View
src/cashtab/src/components/Configure/Configure.js
- This file was added.
import React, { useState } from "react"; | |||||
import styled from "styled-components"; | |||||
import { Icon, Collapse, Form, Input, Modal } from "antd"; | |||||
import { ExclamationCircleOutlined } from "@ant-design/icons"; | |||||
import { CashSpin, CashSpinIcon } from "../Common/CustomSpinner"; | |||||
import { WalletContext } from "../../utils/context"; | |||||
import { StyledCollapse } from "../Common/StyledCollapse"; | |||||
import { SmartButton } from "../Common/PrimaryButton"; | |||||
import { CashLoader } from "../Common/CustomIcons"; | |||||
const { confirm } = Modal; | |||||
const { Panel } = Collapse; | |||||
const StyledConfigure = styled.div` | |||||
h2 { | |||||
color: #444; | |||||
font-size: 25px; | |||||
} | |||||
p { | |||||
color: #444; | |||||
} | |||||
`; | |||||
const StyledSpacer = styled.div` | |||||
height: 1px; | |||||
width: 100%; | |||||
background-color: #e2e2e2; | |||||
margin: 60px 0 50px; | |||||
`; | |||||
export default () => { | |||||
const ContextValue = React.useContext(WalletContext); | |||||
const { wallet, loading, apiError } = ContextValue; | |||||
const { createWallet, validateMnemonic } = ContextValue; | |||||
const [formData, setFormData] = useState({ | |||||
dirty: true, | |||||
mnemonic: "" | |||||
}); | |||||
const [isValidMnemonic, setIsValidMnemonic] = useState(false); | |||||
function showConfirmImportModal() { | |||||
confirm({ | |||||
title: "Do you want to import this wallet?", | |||||
icon: <ExclamationCircleOutlined />, | |||||
content: `Importing this wallet will erase your current wallet! Please back up your existing seed.`, | |||||
onOk() { | |||||
submit(); | |||||
}, | |||||
onCancel() {} | |||||
}); | |||||
} | |||||
async function submit() { | |||||
setFormData({ | |||||
...formData, | |||||
dirty: false | |||||
}); | |||||
// Exit if no user input | |||||
if (!formData.mnemonic) { | |||||
return; | |||||
} | |||||
// Exit if mnemonic is invalid | |||||
if (!isValidMnemonic) { | |||||
return; | |||||
} | |||||
createWallet(formData.mnemonic); | |||||
} | |||||
const handleChange = e => { | |||||
const { value, name } = e.target; | |||||
// Validate mnemonic on change | |||||
// Import button should be disabled unless mnemonic is valid | |||||
setIsValidMnemonic(validateMnemonic(value)); | |||||
setFormData(p => ({ ...p, [name]: value })); | |||||
}; | |||||
return ( | |||||
<CashSpin spinning={loading} indicator={CashSpinIcon}> | |||||
<StyledConfigure> | |||||
<h2> | |||||
<Icon type="copy" theme="outlined" /> Seed Phrase | |||||
</h2> | |||||
<p> | |||||
A seed phrase can be used to restore a wallet in case the original instance of it is | |||||
destroyed. We highly recommend always making a copy of your seed phrase and keeping it | |||||
somewhere safe. | |||||
</p> | |||||
{wallet && wallet.mnemonic && ( | |||||
<StyledCollapse> | |||||
<Panel header="Click to reveal seed phrase" key="1" disabled={!(wallet || {}).mnemonic}> | |||||
<p>{wallet && wallet.mnemonic ? wallet.mnemonic : ""}</p> | |||||
</Panel> | |||||
</StyledCollapse> | |||||
)} | |||||
<StyledSpacer /> | |||||
{apiError ? ( | |||||
<> | |||||
<CashLoader /> | |||||
<p style={{ color: "red" }}> | |||||
<b>An error occured on our end. Reconnecting...</b> | |||||
</p> | |||||
</> | |||||
) : ( | |||||
<> | |||||
<h2> | |||||
<Icon type="import" /> Import Seed Phrase | |||||
</h2> | |||||
<p>Copy and paste your mnemonic seed phrase below to import an existing wallet</p> | |||||
<Form style={{ width: "auto" }}> | |||||
<Form.Item | |||||
validateStatus={!formData.dirty && !formData.mnemonic ? "error" : ""} | |||||
help={!formData.dirty && !formData.mnemonic ? "Mnemonic seed phrase required" : ""} | |||||
> | |||||
<Input | |||||
prefix={<Icon type="lock" />} | |||||
placeholder="mnemonic (seed phrase)" | |||||
name="mnemonic" | |||||
onChange={e => handleChange(e)} | |||||
required | |||||
/> | |||||
</Form.Item> | |||||
<SmartButton disabled={!isValidMnemonic} onClick={() => showConfirmImportModal()}> | |||||
Import | |||||
</SmartButton> | |||||
</Form> | |||||
</> | |||||
)} | |||||
</StyledConfigure> | |||||
</CashSpin> | |||||
); | |||||
}; |