Changeset View
Changeset View
Standalone View
Standalone View
src/cashtab/src/components/OnBoarding/OnBoarding.js
- This file was added.
import React, { useState } from "react"; | |||||
import styled from "styled-components"; | |||||
import { WalletContext } from "../../utils/context"; | |||||
import { Input, Icon, Form, Modal } from "antd"; | |||||
import { ExclamationCircleOutlined } from "@ant-design/icons"; | |||||
import StyledOnboarding from "../Common/StyledOnBoarding"; | |||||
import PrimaryButton, { SecondaryButton, SmartButton } from "../Common/PrimaryButton"; | |||||
import { currency } from "../Common/Ticker.js"; | |||||
export const WelcomeText = styled.p` | |||||
color: #444; | |||||
width: 100%; | |||||
font-size: 16px; | |||||
margin-bottom: 60px; | |||||
text-align: left; | |||||
`; | |||||
export const OnBoarding = ({ history }) => { | |||||
const ContextValue = React.useContext(WalletContext); | |||||
const { createWallet, validateMnemonic } = ContextValue; | |||||
const [formData, setFormData] = useState({ | |||||
dirty: true, | |||||
mnemonic: "" | |||||
}); | |||||
const [seedInput, openSeedInput] = useState(false); | |||||
const [isValidMnemonic, setIsValidMnemonic] = useState(false); | |||||
const { confirm } = Modal; | |||||
async function submit() { | |||||
setFormData({ | |||||
...formData, | |||||
dirty: false | |||||
}); | |||||
if (!formData.mnemonic) { | |||||
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 })); | |||||
}; | |||||
function showBackupConfirmModal() { | |||||
confirm({ | |||||
title: "Don't forget to back up your wallet", | |||||
icon: <ExclamationCircleOutlined />, | |||||
content: `Once your wallet is created you can back it up by writing down your 12-word seed. You can find your seed on the Settings page. If you are browsing in Incognito mode or if you clear your browser history, you will lose any funds that are not backed up!`, | |||||
okText: "Okay, make me a wallet!", | |||||
onOk() { | |||||
createWallet(); | |||||
} | |||||
}); | |||||
} | |||||
return ( | |||||
<> | |||||
<WelcomeText> | |||||
Welcome to CashTab! CashTab is an open source, non-custodial web wallet for {currency.name}. | |||||
<br /> | |||||
<br /> | |||||
Web wallets offer user convenience, but storing large amounts of money on a web wallet is | |||||
not recommended. | |||||
<br /> | |||||
<br /> | |||||
Create a new wallet below to get started, or import an existing wallet using a seed phrase. | |||||
</WelcomeText> | |||||
<PrimaryButton onClick={() => showBackupConfirmModal()}> | |||||
<Icon type="plus-square" /> New Wallet | |||||
</PrimaryButton> | |||||
<SecondaryButton onClick={() => openSeedInput(!seedInput)}> | |||||
<Icon type="import" /> Import Wallet | |||||
</SecondaryButton> | |||||
{seedInput && ( | |||||
<StyledOnboarding> | |||||
<Form style={{ width: "auto" }}> | |||||
<Form.Item | |||||
validateStatus={!formData.dirty && !formData.mnemonic ? "error" : ""} | |||||
help={ | |||||
!formData.mnemonic || !isValidMnemonic ? "Valid 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={() => submit()}> | |||||
Import | |||||
</SmartButton> | |||||
</Form> | |||||
</StyledOnboarding> | |||||
)} | |||||
</> | |||||
); | |||||
}; |