Differential D10970 Diff 32402 web/cashtab/src/components/Tokens/CreateTokenForm.js

Changeset View

Standalone View

web/cashtab/src/components/Tokens/CreateTokenForm.js

import React, { useState, useCallback } from 'react';		import React, { useState, useCallback } from 'react';
		import styled from 'styled-components';
import PropTypes from 'prop-types';		import PropTypes from 'prop-types';
import { AntdFormWrapper } from '@components/Common/EnhancedInputs';		import { AntdFormWrapper } from '@components/Common/EnhancedInputs';
import { TokenCollapse } from '@components/Common/StyledCollapse';		import { TokenCollapse } from '@components/Common/StyledCollapse';
import { currency } from '@components/Common/Ticker.js';		import { currency } from '@components/Common/Ticker.js';
import {		import {
CropControlModal,		CropControlModal,
CropperContainer,		CropperContainer,
ControlsContainer,		ControlsContainer,
Show All 21 Lines	import {
Button,		Button,
Slider,		Slider,
Tooltip,		Tooltip,
Upload,		Upload,
Typography,		Typography,
Switch,		Switch,
} from 'antd';		} from 'antd';
const { Panel } = Collapse;		const { Panel } = Collapse;
import { TokenParamLabel } from '@components/Common/Atoms';		import { TokenParamLabel, FormLabel } from '@components/Common/Atoms';
import {		import {
createTokenNotification,		createTokenNotification,
tokenIconSubmitSuccess,		tokenIconSubmitSuccess,
errorNotification,		errorNotification,
} from '@components/Common/Notifications';		} from '@components/Common/Notifications';
import Cropper from 'react-easy-crop';		import Cropper from 'react-easy-crop';
import getCroppedImg from '@utils/icons/cropImage';		import getCroppedImg from '@utils/icons/cropImage';
import getRoundImg from '@utils/icons/roundImage';		import getRoundImg from '@utils/icons/roundImage';
import getResizedImage from '@utils/icons/resizeImage';		import getResizedImage from '@utils/icons/resizeImage';
const { Dragger } = Upload;		const { Dragger } = Upload;

		export const CreateTokenCtn = styled.div`
		margin-top: 20px;
		h3 {
		color: ${props => props.theme.contrast};
		}
		.ant-form-item {
		margin-bottom: 0px;
		}
		`;

const CreateTokenForm = ({		const CreateTokenForm = ({
BCH,		BCH,
getRestUrl,		getRestUrl,
createToken,		createToken,
disabled,		disabled,
passLoadingStatus,		passLoadingStatus,
}) => {		}) => {
const { wallet } = React.useContext(WalletContext);		const { wallet } = React.useContext(WalletContext);
▲ Show 20 Lines • Show All 408 Lines • ▼ Show 20 Lines	return (
<TokenParamLabel>Supply:</TokenParamLabel> {newTokenInitialQty}		<TokenParamLabel>Supply:</TokenParamLabel> {newTokenInitialQty}
<br />		<br />
<TokenParamLabel>Document URL:</TokenParamLabel>{' '}		<TokenParamLabel>Document URL:</TokenParamLabel>{' '}
{newTokenDocumentUrl === ''		{newTokenDocumentUrl === ''
? currency.newTokenDefaultUrl		? currency.newTokenDefaultUrl
: newTokenDocumentUrl}		: newTokenDocumentUrl}
<br />		<br />
</Modal>		</Modal>
		<CreateTokenCtn>
		<h3>Create a Token</h3>
		{!disabled && (
<>		<>
<TokenCollapse
collapsible={disabled ? 'disabled' : true}
disabled={disabled}
style={{
marginBottom: '24px',
}}
>
<Panel header="Create eToken" key="1">
<AntdFormWrapper>		<AntdFormWrapper>
<Form		<Form
size="small"		size="small"
style={{		style={{
width: 'auto',		width: 'auto',
}}		}}
>		>
		<FormLabel>Token Name</FormLabel>
<Form.Item		<Form.Item
validateStatus={		validateStatus={
newTokenNameIsValid === null \|\|		newTokenNameIsValid === null \|\|
newTokenNameIsValid		newTokenNameIsValid
? ''		? ''
: 'error'		: 'error'
}		}
help={		help={
newTokenNameIsValid === null \|\|		newTokenNameIsValid === null \|\|
newTokenNameIsValid		newTokenNameIsValid
? ''		? ''
: 'Token name must be a string between 1 and 68 characters long'		: 'Token name must be a string between 1 and 68 characters long'
}		}
>		>
<Input		<Input
addonBefore="Name"
placeholder="Enter a name for your token"		placeholder="Enter a name for your token"
name="newTokenName"		name="newTokenName"
value={newTokenName}		value={newTokenName}
onChange={e =>		onChange={e =>
handleNewTokenNameInput(e)		handleNewTokenNameInput(e)
}		}
/>		/>
</Form.Item>		</Form.Item>
		<FormLabel>Ticker</FormLabel>
<Form.Item		<Form.Item
validateStatus={		validateStatus={
newTokenTickerIsValid === null \|\|		newTokenTickerIsValid === null \|\|
newTokenTickerIsValid		newTokenTickerIsValid
? ''		? ''
: 'error'		: 'error'
}		}
help={		help={
newTokenTickerIsValid === null \|\|		newTokenTickerIsValid === null \|\|
newTokenTickerIsValid		newTokenTickerIsValid
? ''		? ''
: 'Ticker must be a string between 1 and 12 characters long'		: 'Ticker must be a string between 1 and 12 characters long'
}		}
>		>
<Input		<Input
addonBefore="Ticker"
placeholder="Enter a ticker for your token"		placeholder="Enter a ticker for your token"
name="newTokenTicker"		name="newTokenTicker"
value={newTokenTicker}		value={newTokenTicker}
onChange={e =>		onChange={e =>
handleNewTokenTickerInput(e)		handleNewTokenTickerInput(e)
}		}
/>		/>
</Form.Item>		</Form.Item>
		<FormLabel>Decimals</FormLabel>
<Form.Item		<Form.Item
validateStatus={		validateStatus={
newTokenDecimalsIsValid === null \|\|		newTokenDecimalsIsValid === null \|\|
newTokenDecimalsIsValid		newTokenDecimalsIsValid
? ''		? ''
: 'error'		: 'error'
}		}
help={		help={
newTokenDecimalsIsValid === null \|\|		newTokenDecimalsIsValid === null \|\|
newTokenDecimalsIsValid		newTokenDecimalsIsValid
? ''		? ''
: 'Token decimals must be an integer between 0 and 9'		: 'Token decimals must be an integer between 0 and 9'
}		}
>		>
<Input		<Input
addonBefore="Decimals"
placeholder="Enter number of decimal places"		placeholder="Enter number of decimal places"
name="newTokenDecimals"		name="newTokenDecimals"
type="number"		type="number"
value={newTokenDecimals}		value={newTokenDecimals}
onChange={e =>		onChange={e =>
handleNewTokenDecimalsInput(e)		handleNewTokenDecimalsInput(e)
}		}
/>		/>
</Form.Item>		</Form.Item>
		<FormLabel>Supply</FormLabel>
<Form.Item		<Form.Item
validateStatus={		validateStatus={
newTokenInitialQtyIsValid === null \|\|		newTokenInitialQtyIsValid === null \|\|
newTokenInitialQtyIsValid		newTokenInitialQtyIsValid
? ''		? ''
: 'error'		: 'error'
}		}
help={		help={
newTokenInitialQtyIsValid === null \|\|		newTokenInitialQtyIsValid === null \|\|
newTokenInitialQtyIsValid		newTokenInitialQtyIsValid
? ''		? ''
: 'Token supply must be greater than 0 and less than 100,000,000,000. Token supply decimal places cannot exceed token decimal places.'		: 'Token supply must be greater than 0 and less than 100,000,000,000. Token supply decimal places cannot exceed token decimal places.'
}		}
>		>
<Input		<Input
addonBefore="Supply"
placeholder="Enter the fixed supply of your token"		placeholder="Enter the fixed supply of your token"
name="newTokenInitialQty"		name="newTokenInitialQty"
type="number"		type="number"
value={newTokenInitialQty}		value={newTokenInitialQty}
onChange={e =>		onChange={e =>
handleNewTokenInitialQtyInput(e)		handleNewTokenInitialQtyInput(e)
}		}
/>		/>
</Form.Item>		</Form.Item>
		<FormLabel>Document URL</FormLabel>
<Form.Item		<Form.Item
validateStatus={		validateStatus={
newTokenDocumentUrlIsValid === null \|\|		newTokenDocumentUrlIsValid === null \|\|
newTokenDocumentUrlIsValid		newTokenDocumentUrlIsValid
? ''		? ''
: 'error'		: 'error'
}		}
help={		help={
newTokenDocumentUrlIsValid === null \|\|		newTokenDocumentUrlIsValid === null \|\|
newTokenDocumentUrlIsValid		newTokenDocumentUrlIsValid
? ''		? ''
: 'Must be valid URL. Cannot exceed 68 characters.'		: 'Must be valid URL. Cannot exceed 68 characters.'
}		}
>		>
<Input		<Input
addonBefore="Document URL"
placeholder="Enter a website for your token"		placeholder="Enter a website for your token"
name="newTokenDocumentUrl"		name="newTokenDocumentUrl"
value={newTokenDocumentUrl}		value={newTokenDocumentUrl}
onChange={e =>		onChange={e =>
handleNewTokenDocumentUrlInput(e)		handleNewTokenDocumentUrlInput(e)
}		}
/>		/>
</Form.Item>		</Form.Item>
		<FormLabel>Add Image</FormLabel>
<Form.Item>		<Form.Item>
<Dragger		<Dragger
multiple={false}		multiple={false}
transformFile={transformTokenIconFile}		transformFile={transformTokenIconFile}
beforeUpload={beforeTokenIconUpload}		beforeUpload={beforeTokenIconUpload}
onChange={handleChangeTokenIconUpload}		onChange={handleChangeTokenIconUpload}
onRemove={() => false}		onRemove={() => false}
fileList={tokenIconFileList}		fileList={tokenIconFileList}
▲ Show 20 Lines • Show All 140 Lines • ▼ Show 20 Lines	return (
</ControlsContainer>		</ControlsContainer>
</>		</>
)}		)}
onClose={onClose}		onClose={onClose}
/>		/>
</Form.Item>		</Form.Item>
</Form>		</Form>
</AntdFormWrapper>		</AntdFormWrapper>

<SmartButton		<SmartButton
onClick={() => setShowConfirmCreateToken(true)}		onClick={() => setShowConfirmCreateToken(true)}
disabled={!tokenGenesisDataIsValid}		disabled={!tokenGenesisDataIsValid}
		style={{ marginTop: '30px' }}
>		>
<PlusSquareOutlined />		<PlusSquareOutlined />
Create eToken		Create eToken
</SmartButton>		</SmartButton>
</Panel>
</TokenCollapse>
</>		</>
		)}
		</CreateTokenCtn>
</>		</>
);		);
};		};

/*		/*
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 CreateTokenForm.test.js		in order to pass the rendering unit test in CreateTokenForm.test.js

Show All 18 Lines