Differential D9215 Diff 27670 web/cashtab/src/components/Configure/Configure.js

Changeset 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 { Collapse, Form, Input, Modal, Spin } from 'antd';		import { Collapse, Form, Input, Modal, Spin, Alert } from 'antd';
import {		import {
PlusSquareOutlined,		PlusSquareOutlined,
WalletFilled,		WalletFilled,
		WalletOutlined,
ImportOutlined,		ImportOutlined,
CopyOutlined,		CopyOutlined,
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 PrimaryButton, {		import PrimaryButton, {
SecondaryButton,		SecondaryButton,
SmartButton,		SmartButton,
} from '@components/Common/PrimaryButton';		} from '@components/Common/PrimaryButton';
import { CashLoader, CashLoadingIcon } from '@components/Common/CustomIcons';		import { CashLoader, CashLoadingIcon } from '@components/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 SettingsLink = styled.a`
		text-decoration: underline;
		color: #ff8d00;
		:visited {
		text-decoration: underline;
		color: #ff8d00;
		}
		`;

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;
justify-content: center;		justify-content: center;
margin-bottom: 6px;		margin-bottom: 6px;
@media (max-width: 500px) {		@media (max-width: 500px) {
▲ Show 20 Lines • Show All 382 Lines • ▼ Show 20 Lines	return (
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>
<CopyOutlined /> Seed Phrase		<CopyOutlined /> Backup your wallet
</h2>		</h2>
<p>		<Alert
Your seed phrase can be used to restore your wallet in case		style={{ marginBottom: '12px' }}
the original instance of it is destroyed. We highly		description="Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe."
recommend always making a copy of your seed phrase and		type="warning"
keeping it somewhere safe.		showIcon
</p>		/>
{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>		<p>
{wallet && wallet.mnemonic		{wallet && wallet.mnemonic
? wallet.mnemonic		? wallet.mnemonic
: ''}		: ''}
</p>		</p>
</Panel>		</Panel>
</StyledCollapse>		</StyledCollapse>
)}		)}

{savedWallets && savedWallets.length > 0 && (
<>
<StyledSpacer />
<StyledCollapse>
<Panel header="Saved wallets" key="2">
<AWRow>
<h3>{wallet.name}</h3>
<h4>Currently active</h4>
</AWRow>
<div>
{savedWallets.map(sw => (
<SWRow key={sw.name}>
<SWName>
<h3>{sw.name}</h3>
</SWName>

<SWButtonCtn>
<Edit
onClick={() =>
showPopulatedRenameWalletModal(
sw,
)
}
/>
<Trashcan
onClick={() =>
showPopulatedDeleteWalletModal(
sw,
)
}
/>
<button
onClick={() =>
updateSavedWalletsOnLoad(
sw,
)
}
>
Activate
</button>
</SWButtonCtn>
</SWRow>
))}
</div>
</Panel>
</StyledCollapse>
</>
)}

<StyledSpacer />		<StyledSpacer />
		<h2>
		<WalletOutlined /> Manage Wallets
		</h2>
{apiError ? (		{apiError ? (
<>		<>
<CashLoader />		<CashLoader />
<p style={{ color: 'red' }}>		<p style={{ color: 'red' }}>
<b>An error occured on our end. Reconnecting...</b>		<b>An error occured on our end. Reconnecting...</b>
</p>		</p>
</>		</>
) : (		) : (
▲ Show 20 Lines • Show All 44 Lines • ▼ Show 20 Lines	return (
>		>
Import		Import
</SmartButton>		</SmartButton>
</Form>		</Form>
</>		</>
)}		)}
</>		</>
)}		)}
		{savedWallets && savedWallets.length > 0 && (
		<>
		<StyledCollapse>
		<Panel header="Saved wallets" key="2">
		<AWRow>
		<h3>{wallet.name}</h3>
		<h4>Currently active</h4>
		</AWRow>
		<div>
		{savedWallets.map(sw => (
		<SWRow key={sw.name}>
		<SWName>
		<h3>{sw.name}</h3>
		</SWName>

		<SWButtonCtn>
		<Edit
		onClick={() =>
		showPopulatedRenameWalletModal(
		sw,
		)
		}
		/>
		<Trashcan
		onClick={() =>
		showPopulatedDeleteWalletModal(
		sw,
		)
		}
		/>
		<button
		onClick={() =>
		updateSavedWalletsOnLoad(
		sw,
		)
		}
		>
		Activate
		</button>
		</SWButtonCtn>
		</SWRow>
		))}
		</div>
		</Panel>
		</StyledCollapse>
		</>
		)}
		<StyledSpacer />[
		<SettingsLink
		type="link"
		href="https://docs.cashtabapp.com/"
		target="_blank"
		rel="noreferrer"
		>
		Documentation
		</SettingsLink>
		]
</StyledConfigure>		</StyledConfigure>
</Spin>		</Spin>
);		);
};		};

export default Configure;		export default Configure;