Page MenuHomePhabricator
Differential D10970 Diff 32402 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, Alert, Switch, Tag } from 'antd'; import { Collapse, Form, Input, Modal, Alert, Switch, Tag } from 'antd';
import { import {
PlusSquareOutlined, PlusSquareOutlined,
WalletFilled, WalletFilled,
ImportOutlined, ImportOutlined,
LockOutlined, LockOutlined,
CheckOutlined, CheckOutlined,
CloseOutlined, CloseOutlined,
LockFilled, LockFilled,
ExclamationCircleFilled, ExclamationCircleFilled,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { WalletContext, AuthenticationContext } from '@utils/context'; import { WalletContext, AuthenticationContext } from '@utils/context';
import { SidePaddingCtn } from '@components/Common/Atoms';
import { StyledCollapse } from '@components/Common/StyledCollapse'; import { StyledCollapse } from '@components/Common/StyledCollapse';
import { import {
AntdFormWrapper, AntdFormWrapper,
CurrencySelectDropdown, CurrencySelectDropdown,
} from '@components/Common/EnhancedInputs'; } from '@components/Common/EnhancedInputs';
import PrimaryButton, { import PrimaryButton, {
SecondaryButton, SecondaryButton,
SmartButton, SmartButton,
Show All 9 Lines
import { Event } from '@utils/GoogleAnalytics'; import { Event } from '@utils/GoogleAnalytics';
import ApiError from '@components/Common/ApiError'; import ApiError from '@components/Common/ApiError';
import { formatSavedBalance } from '@utils/formatting'; import { formatSavedBalance } from '@utils/formatting';
const { Panel } = Collapse; const { Panel } = Collapse;
const SettingsLink = styled.a` const SettingsLink = styled.a`
text-decoration: underline; text-decoration: underline;
color: ${props => props.theme.primary}; color: ${props => props.theme.eCashBlue};
:visited { :visited {
text-decoration: underline; text-decoration: underline;
color: ${props => props.theme.primary}; color: ${props => props.theme.eCashBlue};
} }
:hover { :hover {
color: ${props => props.theme.brandSecondary}; color: ${props => props.theme.eCashPurple};
} }
`; `;
const SWRow = styled.div` const SWRow = styled.div`
border-radius: 3px; border-radius: 3px;
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
Show All 16 Linesconst SWName = styled.div`
@media (max-width: 500px) { @media (max-width: 500px) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
margin-bottom: 15px; margin-bottom: 15px;
} }
h3 { h3 {
font-size: 16px; font-size: 16px;
color: ${props => props.theme.wallet.text.secondary}; color: ${props => props.theme.darkBlue};
margin: 0; margin: 0;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
h3.overflow { h3.overflow {
width: 100px; width: 100px;
Show All 17 Linesconst SWBalance = styled.div`
hyphens: auto; hyphens: auto;
@media (max-width: 500px) { @media (max-width: 500px) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
margin-bottom: 15px; margin-bottom: 15px;
} }
div { div {
font-size: 13px; font-size: 13px;
color: ${props => props.theme.wallet.text.secondary}; color: ${props => props.theme.darkBlue};
margin: 0; margin: 0;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
div.overflow { div.overflow {
width: 150px; width: 150px;
Show All 15 Linesconst SWButtonCtn = styled.div`
justify-content: flex-end; justify-content: flex-end;
@media (max-width: 500px) { @media (max-width: 500px) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
button { button {
cursor: pointer; cursor: pointer;
background: transparent;
border: 1px solid #fff;
box-shadow: none;
color: #fff;
border-radius: 3px;
opacity: 0.6;
transition: all 200ms ease-in-out;
:hover {
opacity: 1;
background: ${props => props.theme.eCashBlue};
border-color: ${props => props.theme.eCashBlue};
}
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 14px; font-size: 14px;
} }
} }
svg { svg {
stroke: ${props => props.theme.wallet.text.secondary}; stroke: ${props => props.theme.eCashBlue};
fill: ${props => props.theme.wallet.text.secondary}; fill: ${props => props.theme.eCashBlue};
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
:first-child:hover { :first-child:hover {
stroke: ${props => props.theme.primary}; stroke: ${props => props.theme.eCashBlue};
fill: ${props => props.theme.primary}; fill: ${props => props.theme.eCashBlue};
} }
:hover { :hover {
stroke: ${props => props.theme.settings.delete}; stroke: ${props => props.theme.settings.delete};
fill: ${props => props.theme.settings.delete}; fill: ${props => props.theme.settings.delete};
} }
} }
`; `;
const AWRow = styled.div` const AWRow = styled.div`
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 6px; margin-bottom: 6px;
h3 { h3 {
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
color: ${props => props.theme.wallet.text.secondary}; color: ${props => props.theme.darkBlue};
margin: 0; margin: 0;
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
@media (max-width: 500px) { @media (max-width: 500px) {
font-size: 14px; font-size: 14px;
} }
} }
h4 { h4 {
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
color: ${props => props.theme.primary} !important; color: ${props => props.theme.eCashBlue} !important;
margin: 0; margin: 0;
text-align: right; text-align: right;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
flex-direction: column; flex-direction: column;
margin-bottom: 12px; margin-bottom: 12px;
} }
`; `;
const StyledConfigure = styled.div` const StyledConfigure = styled.div`
h2 { h2 {
color: ${props => props.theme.wallet.text.primary}; color: ${props => props.theme.contrast};
font-size: 25px; font-size: 25px;
} }
svg {
fill: ${props => props.theme.eCashBlue};
}
p { p {
color: ${props => props.theme.wallet.text.secondary}; color: ${props => props.theme.darkBlue};
} }
`; `;
const StyledSpacer = styled.div` const StyledSpacer = styled.div`
height: 1px; height: 1px;
width: 100%; width: 100%;
background-color: ${props => props.theme.wallet.borders.color}; background-color: ${props => props.theme.lightWhite};
margin: 60px 0 50px; margin: 60px 0 50px;
`; `;
const GeneralSettingsItem = styled.div` const GeneralSettingsItem = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.ant-switch svg {
fill: #717171;
}
.title { .title {
color: ${props => props.theme.generalSettings.item.title}; color: ${props => props.theme.contrast};
} }
.anticon { .anticon {
color: ${props => props.theme.generalSettings.item.icon}; color: ${props => props.theme.contrast};
} }
.ant-switch { .ant-switch {
background-color: ${props => props.theme.generalSettings.item.icon}; background-color: #bdbdbd;
.anticon {
color: ${props => props.theme.generalSettings.background};
}
} }
.ant-switch-checked { .ant-switch-checked {
background-color: ${props => props.theme.primary}; background-color: ${props => props.theme.eCashBlue};
svg {
fill: ${props => props.theme.contrast};
}
} }
`; `;
const Configure = () => { const Configure = () => {
const ContextValue = React.useContext(WalletContext); const ContextValue = React.useContext(WalletContext);
const authentication = React.useContext(AuthenticationContext); const authentication = React.useContext(AuthenticationContext);
const { wallet, apiError } = ContextValue; const { wallet, apiError } = ContextValue;
▲ Show 20 Lines • Show All 228 Lines • ▼ Show 20 Lines const handleAppLockToggle = (checked, e) => {
authentication.signUp(); authentication.signUp();
} }
} else { } else {
authentication.turnOffAuthentication(); authentication.turnOffAuthentication();
} }
}; };
return ( return (
<SidePaddingCtn>
<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> <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> </AntdFormWrapper>
</Modal> </Modal>
)} )}
{walletToBeDeleted !== null && ( {walletToBeDeleted !== null && (
<Modal <Modal
title={`Are you sure 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> <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> </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."
type="warning" type="warning"
showIcon showIcon
/> />
{showTranslationWarning && ( {showTranslationWarning && (
<Alert <Alert
style={{ marginBottom: '12px' }} style={{ marginBottom: '12px' }}
description="Please do not translate your seed phrase. Store your seed phrase in English. You must re-enter these exact English words to restore your wallet from seed." description="Please do not translate your seed phrase. Store your seed phrase in English. You must re-enter these exact English words to restore your wallet from seed."
type="warning" type="warning"
showIcon showIcon
/> />
)} )}
{wallet && wallet.mnemonic && ( {wallet && wallet.mnemonic && (
<StyledCollapse> <StyledCollapse>
<Panel header="Click to reveal seed phrase" key="1"> <Panel header="Click to reveal seed phrase" key="1">
<p className="notranslate"> <p
{wallet && wallet.mnemonic ? wallet.mnemonic : ''} className="notranslate"
style={{ userSelect: 'text' }}
>
{wallet && wallet.mnemonic
? wallet.mnemonic
: ''}
</p> </p>
</Panel> </Panel>
</StyledCollapse> </StyledCollapse>
)} )}
<StyledSpacer /> <StyledSpacer />
<h2> <h2>
<ThemedWalletOutlined /> Manage Wallets <ThemedWalletOutlined /> Manage Wallets
</h2> </h2>
{apiError ? ( {apiError ? (
<ApiError /> <ApiError />
) : ( ) : (
<> <>
<PrimaryButton onClick={() => updateSavedWalletsOnCreate()}> <PrimaryButton
onClick={() => updateSavedWalletsOnCreate()}
>
<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 && (
<> <>
<p> <p style={{ color: '#fff' }}>
Copy and paste your mnemonic seed phrase below Copy and paste your mnemonic seed phrase
to import an existing wallet below to import an existing wallet
</p> </p>
<AntdFormWrapper> <AntdFormWrapper>
<Form style={{ width: 'auto' }}> <Form style={{ width: 'auto' }}>
<Form.Item <Form.Item
validateStatus={ validateStatus={
isValidMnemonic === null || isValidMnemonic === null ||
isValidMnemonic isValidMnemonic
? '' ? ''
: 'error' : 'error'
} }
help={ help={
isValidMnemonic === null || isValidMnemonic === null ||
isValidMnemonic isValidMnemonic
? '' ? ''
: 'Valid mnemonic seed phrase required' : 'Valid mnemonic seed phrase required'
} }
> >
<Input <Input
prefix={<LockOutlined />} prefix={<LockOutlined />}
type="email" type="email"
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> </AntdFormWrapper>
</> </>
)} )}
</> </>
)} )}
{savedWallets && savedWallets.length > 0 && ( {savedWallets && savedWallets.length > 0 && (
<> <>
<StyledCollapse> <StyledCollapse>
<Panel header="Saved wallets" key="2"> <Panel header="Saved wallets" key="2">
<AWRow> <AWRow>
<h3 className="notranslate">{wallet.name}</h3> <h3 className="notranslate">
{wallet.name}
</h3>
<h4>Currently active</h4> <h4>Currently active</h4>
</AWRow> </AWRow>
<div> <div>
{savedWallets.map(sw => ( {savedWallets.map(sw => (
<SWRow key={sw.name}> <SWRow key={sw.name}>
<SWName> <SWName>
<h3 className="overflow notranslate"> <h3 className="overflow notranslate">
{sw.name} {sw.name}
</h3> </h3>
</SWName> </SWName>
<SWBalance> <SWBalance>
<div className="overflow"> <div className="overflow">
[ [
{sw && sw.state {sw && sw.state
? formatSavedBalance( ? formatSavedBalance(
sw.state.balances sw.state.balances
.totalBalance, .totalBalance,
) )
: 'N/A'}{' '} : 'N/A'}{' '}
XEC] XEC]
</div> </div>
</SWBalance> </SWBalance>
<SWButtonCtn> <SWButtonCtn>
<Edit <Edit
onClick={() => onClick={() =>
showPopulatedRenameWalletModal( showPopulatedRenameWalletModal(
sw, sw,
) )
} }
/> />
<Trashcan <Trashcan
onClick={() => onClick={() =>
showPopulatedDeleteWalletModal( showPopulatedDeleteWalletModal(
sw, sw,
) )
} }
/> />
<button <button
onClick={() => onClick={() =>
updateSavedWalletsOnLoad(sw) updateSavedWalletsOnLoad(
sw,
)
} }
> >
Activate Activate
</button> </button>
</SWButtonCtn> </SWButtonCtn>
</SWRow> </SWRow>
))} ))}
</div> </div>
</Panel> </Panel>
</StyledCollapse> </StyledCollapse>
</> </>
)} )}
<StyledSpacer /> <StyledSpacer />
<h2> <h2>
<ThemedDollarOutlined /> Fiat Currency <ThemedDollarOutlined /> Fiat Currency
</h2> </h2>
<AntdFormWrapper> <AntdFormWrapper>
<CurrencySelectDropdown <CurrencySelectDropdown
defaultValue={ defaultValue={
cashtabSettings && cashtabSettings.fiatCurrency cashtabSettings && cashtabSettings.fiatCurrency
? cashtabSettings.fiatCurrency ? cashtabSettings.fiatCurrency
: 'usd' : 'usd'
} }
onChange={fiatCode => onChange={fiatCode =>
changeCashtabSettings('fiatCurrency', fiatCode) changeCashtabSettings('fiatCurrency', fiatCode)
} }
/> />
</AntdFormWrapper> </AntdFormWrapper>
<StyledSpacer /> <StyledSpacer />
<h2> <h2>
<ThemedSettingOutlined /> General Settings <ThemedSettingOutlined /> General Settings
</h2> </h2>
<GeneralSettingsItem> <GeneralSettingsItem>
<div className="title"> <div className="title">
<LockFilled /> Lock App <LockFilled /> Lock App
</div> </div>
{authentication ? ( {authentication ? (
<Switch <Switch
size="small" size="small"
checkedChildren={<CheckOutlined />} checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />} unCheckedChildren={<CloseOutlined />}
checked={ checked={
authentication.isAuthenticationRequired && authentication.isAuthenticationRequired &&
authentication.credentialId authentication.credentialId
? true ? true
: false : false
} }
// checked={false} // checked={false}
onChange={handleAppLockToggle} onChange={handleAppLockToggle}
/> />
) : ( ) : (
<Tag color="warning" icon={<ExclamationCircleFilled />}> <Tag color="warning" icon={<ExclamationCircleFilled />}>
Not Supported Not Supported
</Tag> </Tag>
)} )}
</GeneralSettingsItem> </GeneralSettingsItem>
<StyledSpacer />[ <StyledSpacer />[
<SettingsLink <SettingsLink
type="link" type="link"
href="https://docs.cashtab.com/docs/" href="https://docs.cashtab.com/docs/"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
Documentation Documentation
</SettingsLink> </SettingsLink>
] ]
</StyledConfigure> </StyledConfigure>
</SidePaddingCtn>
); );
}; };
export default Configure; export default Configure;