Differential D10392 Diff 30676 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, Alert } from 'antd';		import { Collapse, Form, Input, Modal, Alert, notification } 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,
		AdvancedCollapse,
		} 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,
} from '@components/Common/PrimaryButton';		} from '@components/Common/PrimaryButton';
import {		import {
ThemedCopyOutlined,		ThemedCopyOutlined,
ThemedWalletOutlined,		ThemedWalletOutlined,
ThemedDollarOutlined,		ThemedDollarOutlined,
} from '@components/Common/CustomIcons';		} 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';
import ApiError from '@components/Common/ApiError';		import ApiError from '@components/Common/ApiError';
import { formatSavedBalance } from '@utils/validation';		import { formatSavedBalance } from '@utils/validation';
		import WalletLabel from '@components/Common/WalletLabel.js';
		import Wallet from '@components/Wallet/Wallet';
		import { TokenParamLabel } from '@components/Common/Atoms';
		import Paragraph from 'antd/lib/typography/Paragraph';
		import { MessageSignedNotificationIcon } from '@components/Common/CustomIcons';
		import useBCH from '@hooks/useBCH';

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.primary};
:visited {		:visited {
text-decoration: underline;		text-decoration: underline;
▲ Show 20 Lines • Show All 166 Lines • ▼ Show 20 Lines

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.wallet.borders.color};
margin: 60px 0 50px;		margin: 60px 0 50px;
`;		`;

const Configure = () => {		const Configure = ({ jestBCH, passLoadingStatus }) => {
const ContextValue = React.useContext(WalletContext);		const ContextValue = React.useContext(WalletContext);
const { wallet, apiError } = ContextValue;		const { wallet, apiError } = ContextValue;
		const { getBCH, getRestUrl, sendBch, calcFee, signPkMessage } = useBCH();
		const BCH = jestBCH ? jestBCH : getBCH();
		// Modal settings
		const [showConfirmMsgToSign, setShowConfirmMsgToSign] = useState(false);
		const [msgToSign, setMsgToSign] = useState('');
		const [signMessageIsValid, setSignMessageIsValid] = useState(null);
const {		const {
addNewSavedWallet,		addNewSavedWallet,
activateWallet,		activateWallet,
renameWallet,		renameWallet,
deleteWallet,		deleteWallet,
validateMnemonic,		validateMnemonic,
getSavedWallets,		getSavedWallets,
cashtabSettings,		cashtabSettings,
▲ Show 20 Lines • Show All 203 Lines • ▼ Show 20 Lines	const handleWalletToDeleteInput = e => {
if (value && value === `delete ${walletToBeDeleted.name}`) {		if (value && value === `delete ${walletToBeDeleted.name}`) {
setWalletDeleteValid(true);		setWalletDeleteValid(true);
} else {		} else {
setWalletDeleteValid(false);		setWalletDeleteValid(false);
}		}
setConfirmationOfWalletToBeDeleted(value);		setConfirmationOfWalletToBeDeleted(value);
};		};

		const handleSignMsgChange = e => {
		const { value } = e.target;
		// validation
		if (value && value.length && value.length < 150) {
		setMsgToSign(value);
		setSignMessageIsValid(true);
		} else {
		setSignMessageIsValid(false);
		}
		};

		const signMessageByPk = async () => {
		try {
		const messageSignature = await signPkMessage(
		BCH,
		wallet.Path1899.fundingWif,
		msgToSign,
		);

		notification.success({
		message: 'Success',
		description: (
		<Paragraph>Message Signature: {messageSignature}</Paragraph>
		),
		icon: <MessageSignedNotificationIcon />,
		style: { width: '100%' },
		});
		} catch (err) {
		let message;
		if (!e.error && !e.message) {
		message = e.message \|\| e.error \|\| JSON.stringify(e);
		}
		notification.error({
		message: 'Error',
		description: message,
		duration: 5,
		});
		throw err;
		}
		// Hide the modal
		setShowConfirmMsgToSign(false);
		};

return (		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()}
▲ Show 20 Lines • Show All 214 Lines • ▼ Show 20 Lines	return (
? cashtabSettings.fiatCurrency		? cashtabSettings.fiatCurrency
: 'usd'		: 'usd'
}		}
onChange={fiatCode =>		onChange={fiatCode =>
changeCashtabSettings('fiatCurrency', fiatCode)		changeCashtabSettings('fiatCurrency', fiatCode)
}		}
/>		/>
</AntdFormWrapper>		</AntdFormWrapper>
		<StyledSpacer />
		<Modal
		title={`Please review and confirm your message to be signed using this wallet.`}
		visible={showConfirmMsgToSign}
		onOk={signMessageByPk}
		onCancel={() => setShowConfirmMsgToSign(false)}
		>
		<TokenParamLabel>Message:</TokenParamLabel> {msgToSign}
		<br />
		</Modal>
		<AdvancedCollapse
		style={{
		marginBottom: '24px',
		}}
		>
		<Panel
		header={'Sign Message Via ' + wallet.name + ' Wallet'}
		key="1"
		>
		<AntdFormWrapper>
		<Form
		size="small"
		style={{
		width: 'auto',
		}}
		>
		<Form.Item>
		<Input
		addonBefore="Message"
		placeholder="Message must be between 1 and 150 characters"
		name="signMessage"
		onChange={e => handleSignMsgChange(e)}
		validateStatus={
		signMessageIsValid === null \|\|
		signMessageIsValid
		? ''
		: 'error'
		}
		help={
		signMessageIsValid === null \|\|
		signMessageIsValid
		? ''
		: 'Message must be between 1 and 150 characters'
		}
		maxLength="150"
		/>
		</Form.Item>
		</Form>
		</AntdFormWrapper>
		<SmartButton
		onClick={() => setShowConfirmMsgToSign(true)}
		disabled={!signMessageIsValid}
		>
		<PlusSquareOutlined />
		Sign Message
		</SmartButton>
		</Panel>
		</AdvancedCollapse>
<StyledSpacer />[		<StyledSpacer />[
<SettingsLink		<SettingsLink
type="link"		type="link"
href="https://docs.cashtabapp.com/docs/"		href="https://docs.cashtabapp.com/docs/"
target="_blank"		target="_blank"
rel="noreferrer"		rel="noreferrer"
>		>
Documentation		Documentation
</SettingsLink>		</SettingsLink>
]		]
</StyledConfigure>		</StyledConfigure>
);		);
};		};

export default Configure;		export default Configure;