Changeset View
Changeset View
Standalone View
Standalone View
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 { Icon, Collapse, Form, Input, Modal } from 'antd'; | import { Collapse, Form, Input, Modal, Spin } from 'antd'; | ||||
import { CashSpin, CashSpinIcon } from '../Common/CustomSpinner'; | import { | ||||
PlusSquareOutlined, | |||||
WalletFilled, | |||||
ImportOutlined, | |||||
CopyOutlined, | |||||
LockOutlined, | |||||
} from '@ant-design/icons'; | |||||
import { WalletContext } from '../../utils/context'; | import { WalletContext } from '../../utils/context'; | ||||
import { StyledCollapse } from '../Common/StyledCollapse'; | import { StyledCollapse } from '../Common/StyledCollapse'; | ||||
import PrimaryButton, { | import PrimaryButton, { | ||||
SecondaryButton, | SecondaryButton, | ||||
SmartButton, | SmartButton, | ||||
} from '../Common/PrimaryButton'; | } from '../Common/PrimaryButton'; | ||||
import { CashLoader } from '../Common/CustomIcons'; | import { CashLoader, CashLoadingIcon } from '../Common/CustomIcons'; | ||||
import { ReactComponent as Trashcan } from '../../assets/trashcan.svg'; | import { ReactComponent as Trashcan } from '../../assets/trashcan.svg'; | ||||
import { ReactComponent as Edit } from '../../assets/edit.svg'; | import { ReactComponent as Edit } from '../../assets/edit.svg'; | ||||
import { Event } from '../../utils/GoogleAnalytics'; | import { Event } from '../../utils/GoogleAnalytics'; | ||||
const { Panel } = Collapse; | const { Panel } = Collapse; | ||||
const SWRow = styled.div` | const SWRow = styled.div` | ||||
border-radius: 3px; | border-radius: 3px; | ||||
▲ Show 20 Lines • Show All 156 Lines • ▼ Show 20 Lines | export default () => { | ||||
}; | }; | ||||
const cancelDeleteWallet = () => { | const cancelDeleteWallet = () => { | ||||
setWalletToBeDeleted(null); | setWalletToBeDeleted(null); | ||||
setConfirmationOfWalletToBeDeleted(''); | setConfirmationOfWalletToBeDeleted(''); | ||||
setShowDeleteWalletModal(false); | setShowDeleteWalletModal(false); | ||||
}; | }; | ||||
const updateSavedWallets = async activeWallet => { | const updateSavedWallets = async activeWallet => { | ||||
if (activeWallet) { | if (activeWallet) { | ||||
const savedWallets = await getSavedWallets(activeWallet); | let savedWallets; | ||||
try { | |||||
savedWallets = await getSavedWallets(activeWallet); | |||||
setSavedWallets(savedWallets); | setSavedWallets(savedWallets); | ||||
} catch (err) { | |||||
console.log(`Error in getSavedWallets()`); | |||||
console.log(err); | |||||
} | |||||
} | } | ||||
}; | }; | ||||
const [isValidMnemonic, setIsValidMnemonic] = useState(false); | const [isValidMnemonic, setIsValidMnemonic] = useState(false); | ||||
useEffect(() => { | useEffect(() => { | ||||
// Update savedWallets every time the active wallet changes | // Update savedWallets every time the active wallet changes | ||||
updateSavedWallets(wallet); | updateSavedWallets(wallet); | ||||
▲ Show 20 Lines • Show All 140 Lines • ▼ Show 20 Lines | const handleWalletToDeleteInput = e => { | ||||
setWalletDeleteValid(true); | setWalletDeleteValid(true); | ||||
} else { | } else { | ||||
setWalletDeleteValid(false); | setWalletDeleteValid(false); | ||||
} | } | ||||
setConfirmationOfWalletToBeDeleted(value); | setConfirmationOfWalletToBeDeleted(value); | ||||
}; | }; | ||||
return ( | return ( | ||||
<CashSpin spinning={loading} indicator={CashSpinIcon}> | <Spin spinning={loading} indicator={CashLoadingIcon}> | ||||
<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()} | ||||
> | > | ||||
<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={<Icon type="wallet" />} | 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> | ||||
</Modal> | </Modal> | ||||
Show All 16 Lines | return ( | ||||
help={ | help={ | ||||
walletDeleteValid !== null && | walletDeleteValid !== null && | ||||
walletDeleteValid | walletDeleteValid | ||||
? '' | ? '' | ||||
: 'Your confirmation phrase must match exactly' | : 'Your confirmation phrase must match exactly' | ||||
} | } | ||||
> | > | ||||
<Input | <Input | ||||
prefix={<Icon type="wallet" />} | 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> | ||||
</Modal> | </Modal> | ||||
)} | )} | ||||
<h2> | <h2> | ||||
<Icon type="copy" theme="outlined" /> Seed Phrase | <CopyOutlined /> Seed Phrase | ||||
</h2> | </h2> | ||||
<p> | <p> | ||||
Your seed phrase can be used to restore your wallet in case | Your seed phrase can be used to restore your wallet in case | ||||
the original instance of it is destroyed. We highly | the original instance of it is destroyed. We highly | ||||
recommend always making a copy of your seed phrase and | recommend always making a copy of your seed phrase and | ||||
keeping it somewhere safe. | keeping it somewhere safe. | ||||
</p> | </p> | ||||
{wallet && wallet.mnemonic && ( | {wallet && wallet.mnemonic && ( | ||||
▲ Show 20 Lines • Show All 75 Lines • ▼ Show 20 Lines | return ( | ||||
<b>An error occured on our end. Reconnecting...</b> | <b>An error occured on our end. Reconnecting...</b> | ||||
</p> | </p> | ||||
</> | </> | ||||
) : ( | ) : ( | ||||
<> | <> | ||||
<PrimaryButton | <PrimaryButton | ||||
onClick={() => updateSavedWalletsOnCreate()} | onClick={() => updateSavedWalletsOnCreate()} | ||||
> | > | ||||
<Icon type="plus-square" /> New Wallet | <PlusSquareOutlined /> New Wallet | ||||
</PrimaryButton> | </PrimaryButton> | ||||
<SecondaryButton | <SecondaryButton | ||||
onClick={() => openSeedInput(!seedInput)} | onClick={() => openSeedInput(!seedInput)} | ||||
> | > | ||||
<Icon type="import" /> 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> | ||||
<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={<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 | ||||
disabled={!isValidMnemonic} | disabled={!isValidMnemonic} | ||||
onClick={() => submit()} | onClick={() => submit()} | ||||
> | > | ||||
Import | Import | ||||
</SmartButton> | </SmartButton> | ||||
</Form> | </Form> | ||||
</> | </> | ||||
)} | )} | ||||
</> | </> | ||||
)} | )} | ||||
</StyledConfigure> | </StyledConfigure> | ||||
</CashSpin> | </Spin> | ||||
); | ); | ||||
}; | }; |