Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/OnBoarding/OnBoarding.js
| import React, { useState } from 'react'; | import React, { useState } from 'react'; | ||||
| import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
| import { WalletContext } from '../../utils/context'; | import { WalletContext } from '../../utils/context'; | ||||
| import { Input, Icon, Form, Modal } from 'antd'; | import { Input, Form, Modal } from 'antd'; | ||||
| import { ExclamationCircleOutlined } from '@ant-design/icons'; | import { | ||||
| ExclamationCircleOutlined, | |||||
| PlusSquareOutlined, | |||||
| ImportOutlined, | |||||
| LockOutlined, | |||||
| } from '@ant-design/icons'; | |||||
| import StyledOnboarding from '../Common/StyledOnBoarding'; | import StyledOnboarding from '../Common/StyledOnBoarding'; | ||||
| import PrimaryButton, { | import PrimaryButton, { | ||||
| SecondaryButton, | SecondaryButton, | ||||
| SmartButton, | SmartButton, | ||||
| } from '../Common/PrimaryButton'; | } from '../Common/PrimaryButton'; | ||||
| import { currency } from '../Common/Ticker.js'; | import { currency } from '../Common/Ticker.js'; | ||||
| import { Event } from '../../utils/GoogleAnalytics'; | import { Event } from '../../utils/GoogleAnalytics'; | ||||
| ▲ Show 20 Lines • Show All 68 Lines • ▼ Show 20 Lines | return ( | ||||
| money on a web wallet is not recommended. | money on a web wallet is not recommended. | ||||
| <br /> | <br /> | ||||
| <br /> | <br /> | ||||
| Create a new wallet below to get started, or import an existing | Create a new wallet below to get started, or import an existing | ||||
| wallet using a seed phrase. | wallet using a seed phrase. | ||||
| </WelcomeText> | </WelcomeText> | ||||
| <PrimaryButton onClick={() => showBackupConfirmModal()}> | <PrimaryButton onClick={() => showBackupConfirmModal()}> | ||||
| <Icon type="plus-square" /> New Wallet | <PlusSquareOutlined /> New Wallet | ||||
| </PrimaryButton> | </PrimaryButton> | ||||
| <SecondaryButton onClick={() => openSeedInput(!seedInput)}> | <SecondaryButton onClick={() => openSeedInput(!seedInput)}> | ||||
| <Icon type="import" /> Import Wallet | <ImportOutlined /> Import Wallet | ||||
| </SecondaryButton> | </SecondaryButton> | ||||
| {seedInput && ( | {seedInput && ( | ||||
| <StyledOnboarding> | <StyledOnboarding> | ||||
| <Form style={{ width: 'auto' }}> | <Form style={{ width: 'auto' }}> | ||||
| <Form.Item | <Form.Item | ||||
| validateStatus={ | validateStatus={ | ||||
| !formData.dirty && !formData.mnemonic | !formData.dirty && !formData.mnemonic | ||||
| ? 'error' | ? 'error' | ||||
| : '' | : '' | ||||
| } | } | ||||
| help={ | help={ | ||||
| !formData.mnemonic || !isValidMnemonic | !formData.mnemonic || !isValidMnemonic | ||||
| ? 'Valid mnemonic seed phrase required' | ? 'Valid mnemonic seed phrase required' | ||||
| : '' | : '' | ||||
| } | } | ||||
| > | > | ||||
| <Input | <Input | ||||
| prefix={<Icon type="lock" />} | prefix={<LockOutlined />} | ||||
| placeholder="mnemonic (seed phrase)" | placeholder="mnemonic (seed phrase)" | ||||
| name="mnemonic" | name="mnemonic" | ||||
| onChange={e => handleChange(e)} | onChange={e => handleChange(e)} | ||||
| required | required | ||||
| /> | /> | ||||
| </Form.Item> | </Form.Item> | ||||
| <SmartButton | <SmartButton | ||||
| Show All 11 Lines | |||||