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, Form, Modal } from 'antd'; | import { Input, Form, Modal } from 'antd'; | ||||
import { AntdFormWrapper } from '@components/Common/EnhancedInputs'; | |||||
import { | import { | ||||
ExclamationCircleOutlined, | ExclamationCircleOutlined, | ||||
PlusSquareOutlined, | PlusSquareOutlined, | ||||
ImportOutlined, | ImportOutlined, | ||||
LockOutlined, | LockOutlined, | ||||
} from '@ant-design/icons'; | } from '@ant-design/icons'; | ||||
import StyledOnboarding from '@components/Common/StyledOnBoarding'; | import StyledOnboarding from '@components/Common/StyledOnBoarding'; | ||||
import PrimaryButton, { | import PrimaryButton, { | ||||
▲ Show 20 Lines • Show All 97 Lines • ▼ Show 20 Lines | return ( | ||||
<PlusSquareOutlined /> New Wallet | <PlusSquareOutlined /> New Wallet | ||||
</PrimaryButton> | </PrimaryButton> | ||||
<SecondaryButton onClick={() => openSeedInput(!seedInput)}> | <SecondaryButton onClick={() => openSeedInput(!seedInput)}> | ||||
<ImportOutlined /> Import Wallet | <ImportOutlined /> Import Wallet | ||||
</SecondaryButton> | </SecondaryButton> | ||||
{seedInput && ( | {seedInput && ( | ||||
<StyledOnboarding> | <StyledOnboarding> | ||||
<AntdFormWrapper> | |||||
<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={<LockOutlined />} | prefix={<LockOutlined />} | ||||
placeholder="mnemonic (seed phrase)" | placeholder="mnemonic (seed phrase)" | ||||
name="mnemonic" | name="mnemonic" | ||||
autoComplete="off" | autoComplete="off" | ||||
onChange={e => handleChange(e)} | onChange={e => handleChange(e)} | ||||
required | required | ||||
/> | /> | ||||
</Form.Item> | </Form.Item> | ||||
<SmartButton | <SmartButton | ||||
disabled={!isValidMnemonic} | disabled={!isValidMnemonic} | ||||
onClick={() => submit()} | onClick={() => submit()} | ||||
> | > | ||||
Import | Import | ||||
</SmartButton> | </SmartButton> | ||||
</Form> | </Form> | ||||
</AntdFormWrapper> | |||||
</StyledOnboarding> | </StyledOnboarding> | ||||
)} | )} | ||||
</> | </> | ||||
); | ); | ||||
}; | }; |