Differential D10970 Diff 32402 web/cashtab/src/components/Send/SendToken.js

Changeset View

Standalone View

web/cashtab/src/components/Send/SendToken.js

import React, { useState, useEffect } from 'react';		import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';		import PropTypes from 'prop-types';
import { WalletContext } from '@utils/context';		import { WalletContext } from '@utils/context';
import { Form, message, Row, Col, Alert, Descriptions, Popover } from 'antd';		import { Form, message, Row, Col, Alert, Descriptions, Popover } from 'antd';
import TokenIconAlert from '@components/Common/Alerts.js';
import PrimaryButton, {		import PrimaryButton, {
SecondaryButton,		SecondaryButton,
} from '@components/Common/PrimaryButton';		} from '@components/Common/PrimaryButton';
import {		import {
DestinationAmount,		DestinationAmount,
DestinationAddressSingle,		DestinationAddressSingle,
} from '@components/Common/EnhancedInputs';		} from '@components/Common/EnhancedInputs';
import useBCH from '@hooks/useBCH';		import useBCH from '@hooks/useBCH';
		import { SidePaddingCtn } from '@components/Common/Atoms';
import BalanceHeader from '@components/Common/BalanceHeader';		import BalanceHeader from '@components/Common/BalanceHeader';
import { Redirect } from 'react-router-dom';		import { Redirect } from 'react-router-dom';
import useWindowDimensions from '@hooks/useWindowDimensions';		import useWindowDimensions from '@hooks/useWindowDimensions';
import { isMobile, isIOS, isSafari } from 'react-device-detect';		import { isMobile, isIOS, isSafari } from 'react-device-detect';
import { Img } from 'react-image';		import { Img } from 'react-image';
import makeBlockie from 'ethereum-blockies-base64';		import makeBlockie from 'ethereum-blockies-base64';
import BigNumber from 'bignumber.js';		import BigNumber from 'bignumber.js';
import { currency, parseAddressForParams } from '@components/Common/Ticker.js';		import { currency, parseAddressForParams } from '@components/Common/Ticker.js';
import { Event } from '@utils/GoogleAnalytics';		import { Event } from '@utils/GoogleAnalytics';
import { getWalletState, toLegacyToken } from '@utils/cashMethods';		import { getWalletState, toLegacyToken } from '@utils/cashMethods';
import ApiError from '@components/Common/ApiError';		import ApiError from '@components/Common/ApiError';
import {		import {
sendTokenNotification,		sendTokenNotification,
errorNotification,		errorNotification,
} from '@components/Common/Notifications';		} from '@components/Common/Notifications';
import { isValidXecAddress, isValidEtokenAddress } from '@utils/validation';		import { isValidXecAddress, isValidEtokenAddress } from '@utils/validation';
import { formatDate } from '@utils/formatting';		import { formatDate } from '@utils/formatting';
import styled, { css } from 'styled-components';		import styled, { css } from 'styled-components';

const AntdDescriptionsCss = css`		const AntdDescriptionsCss = css`
.ant-descriptions-item-label,		.ant-descriptions-item-label,
.ant-descriptions-item-content {		.ant-descriptions-item-content {
background-color: ${props =>		background-color: ${props => props.theme.contrast} !important;
props.theme.tokenListItem.background} !important;		color: ${props => props.theme.dropdownText};
color: ${props => props.theme.tokenListItem.color};
}		}
`;		`;
const AntdDescriptionsWrapper = styled.div`		const AntdDescriptionsWrapper = styled.div`
${AntdDescriptionsCss}		${AntdDescriptionsCss}
`;		`;

const SendToken = ({ tokenId, jestBCH, passLoadingStatus }) => {		const SendToken = ({ tokenId, jestBCH, passLoadingStatus }) => {
const { wallet, apiError } = React.useContext(WalletContext);		const { wallet, apiError } = React.useContext(WalletContext);
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines	useEffect(() => {

passLoadingStatus(false);		passLoadingStatus(false);
}, [token]);		}, [token]);

return (		return (
<>		<>
{!token && <Redirect to="/" />}		{!token && <Redirect to="/" />}
{token && (		{token && (
<>		<SidePaddingCtn>
<BalanceHeader		<BalanceHeader
balance={token.balance}		balance={token.balance}
ticker={token.info.tokenTicker}		ticker={token.info.tokenTicker}
/>		/>
<TokenIconAlert />
<Row type="flex">		<Row type="flex">
<Col span={24}>		<Col span={24}>
<Form		<Form
style={{		style={{
width: 'auto',		width: 'auto',
}}		}}
>		>
<DestinationAddressSingle		<DestinationAddressSingle
▲ Show 20 Lines • Show All 197 Lines • ▼ Show 20 Lines	return (
</Descriptions.Item>		</Descriptions.Item>
</>		</>
)}		)}
</Descriptions>		</Descriptions>
</AntdDescriptionsWrapper>		</AntdDescriptionsWrapper>
)}		)}
</Col>		</Col>
</Row>		</Row>
</>		</SidePaddingCtn>
)}		)}
</>		</>
);		);
};		};

/*		/*
passLoadingStatus must receive a default prop that is a function		passLoadingStatus must receive a default prop that is a function
in order to pass the rendering unit test in SendToken.test.js		in order to pass the rendering unit test in SendToken.test.js
Show All 17 Lines