Page MenuHomePhabricator
Differential D9315 Diff 27922 web/cashtab/src/components/Configure/Configure.js

Changeset View

Standalone View

View Options

web/cashtab/src/components/Configure/Configure.js

/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Collapse, Form, Input, Modal, Spin, Alert } from 'antd'; import { Collapse, Form, Input, Modal, Spin, Alert } from 'antd';
import { import {
PlusSquareOutlined, PlusSquareOutlined,
WalletFilled, WalletFilled,
ImportOutlined, ImportOutlined,
LockOutlined, LockOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { WalletContext } from '@utils/context'; import { WalletContext } from '@utils/context';
import { StyledCollapse } from '@components/Common/StyledCollapse'; import { StyledCollapse } from '@components/Common/StyledCollapse';
import { AntdFormWrapper } from '@components/Common/EnhancedInputs';
import PrimaryButton, { import PrimaryButton, {
SecondaryButton, SecondaryButton,
SmartButton, SmartButton,
} from '@components/Common/PrimaryButton'; } from '@components/Common/PrimaryButton';
import { import {
CashLoader, CashLoader,
CashLoadingIcon, CashLoadingIcon,
ThemedCopyOutlined, ThemedCopyOutlined,
▲ Show 20 Lines • Show All 355 Lines • ▼ Show 20 Lines return (
<StyledConfigure> <StyledConfigure>
{walletToBeRenamed !== null && ( {walletToBeRenamed !== null && (
<Modal <Modal
title={`Rename Wallet ${walletToBeRenamed.name}`} title={`Rename Wallet ${walletToBeRenamed.name}`}
visible={showRenameWalletModal} visible={showRenameWalletModal}
onOk={changeWalletName} onOk={changeWalletName}
onCancel={() => cancelRenameWallet()} onCancel={() => cancelRenameWallet()}
> >
<AntdFormWrapper>
<Form style={{ width: 'auto' }}> <Form style={{ width: 'auto' }}>
<Form.Item <Form.Item
validateStatus={ validateStatus={
newWalletNameIsValid !== null && newWalletNameIsValid !== null &&
newWalletNameIsValid newWalletNameIsValid
? '' ? ''
: 'error' : 'error'
} }
help={ help={
newWalletNameIsValid !== null && newWalletNameIsValid !== null &&
newWalletNameIsValid newWalletNameIsValid
? '' ? ''
: 'Wallet name must be a string between 1 and 24 characters long' : 'Wallet name must be a string between 1 and 24 characters long'
} }
> >
<Input <Input
prefix={<WalletFilled />} prefix={<WalletFilled />}
placeholder="Enter new wallet name" placeholder="Enter new wallet name"
name="newName" name="newName"
value={newWalletName} value={newWalletName}
onChange={e => handleWalletNameInput(e)} onChange={e => handleWalletNameInput(e)}
/> />
</Form.Item> </Form.Item>
</Form> </Form>
</AntdFormWrapper>
</Modal> </Modal>
)} )}
{walletToBeDeleted !== null && ( {walletToBeDeleted !== null && (
<Modal <Modal
title={`Are you suer you want to delete wallet "${walletToBeDeleted.name}"?`} title={`Are you sure you want to delete wallet "${walletToBeDeleted.name}"?`}
visible={showDeleteWalletModal} visible={showDeleteWalletModal}
onOk={deleteSelectedWallet} onOk={deleteSelectedWallet}
onCancel={() => cancelDeleteWallet()} onCancel={() => cancelDeleteWallet()}
> >
<AntdFormWrapper>
<Form style={{ width: 'auto' }}> <Form style={{ width: 'auto' }}>
<Form.Item <Form.Item
validateStatus={ validateStatus={
walletDeleteValid !== null && walletDeleteValid !== null &&
walletDeleteValid walletDeleteValid
? '' ? ''
: 'error' : 'error'
} }
help={ help={
walletDeleteValid !== null && walletDeleteValid !== null &&
walletDeleteValid walletDeleteValid
? '' ? ''
: 'Your confirmation phrase must match exactly' : 'Your confirmation phrase must match exactly'
} }
> >
<Input <Input
prefix={<WalletFilled />} prefix={<WalletFilled />}
placeholder={`Type "delete ${walletToBeDeleted.name}" to confirm`} placeholder={`Type "delete ${walletToBeDeleted.name}" to confirm`}
name="walletToBeDeletedInput" name="walletToBeDeletedInput"
value={confirmationOfWalletToBeDeleted} value={confirmationOfWalletToBeDeleted}
onChange={e => handleWalletToDeleteInput(e)} onChange={e =>
handleWalletToDeleteInput(e)
}
/> />
</Form.Item> </Form.Item>
</Form> </Form>
</AntdFormWrapper>
</Modal> </Modal>
)} )}
<h2> <h2>
<ThemedCopyOutlined /> Backup your wallet <ThemedCopyOutlined /> Backup your wallet
</h2> </h2>
<Alert <Alert
style={{ marginBottom: '12px' }} style={{ marginBottom: '12px' }}
description="Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe." description="Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe."
Show All 35 Lines return (
<ImportOutlined /> Import Wallet <ImportOutlined /> Import Wallet
</SecondaryButton> </SecondaryButton>
{seedInput && ( {seedInput && (
<> <>
<p> <p>
Copy and paste your mnemonic seed phrase Copy and paste your mnemonic seed phrase
below to import an existing wallet below to import an existing wallet
</p> </p>
<AntdFormWrapper>
<Form style={{ width: 'auto' }}> <Form style={{ width: 'auto' }}>
<Form.Item <Form.Item
validateStatus={ validateStatus={
!formData.dirty && !formData.dirty &&
!formData.mnemonic !formData.mnemonic
? 'error' ? 'error'
: '' : ''
} }
help={ help={
!formData.dirty && !formData.dirty &&
!formData.mnemonic !formData.mnemonic
? 'Mnemonic seed phrase required' ? '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>
</> </>
)} )}
</> </>
)} )}
{savedWallets && savedWallets.length > 0 && ( {savedWallets && savedWallets.length > 0 && (
<> <>
<StyledCollapse> <StyledCollapse>
<Panel header="Saved wallets" key="2"> <Panel header="Saved wallets" key="2">
▲ Show 20 Lines • Show All 59 Lines • Show Last 20 Lines