Page MenuHomePhabricator
Differential D10430 Diff 30778 web/cashtab/src/components/Tokens/CreateGroupNftForm.js

Changeset View

Standalone View

View Options

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

  • This file was added.
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { AntdFormWrapper } from '@components/Common/EnhancedInputs';
import { TokenCollapse } from '@components/Common/StyledCollapse';
import { currency } from '@components/Common/Ticker.js';
import { WalletContext } from '@utils/context';
import {
isValidGroupNFTName,
isValidGroupNFTTicker,
isValidGroupNFTBatons,
isValidGroupNFTDocumentUrl,
} from '@utils/validation';
import { PlusSquareOutlined } from '@ant-design/icons';
import { SmartButton } from '@components/Common/PrimaryButton';
import { Collapse, Form, Input, Modal } from 'antd';
const { Panel } = Collapse;
import { GroupNFTParamLabel } from '@components/Common/Atoms';
import {
createTokenNotification,
errorNotification,
} from '@components/Common/Notifications';
const CreateGroupNftForm = ({
BCH,
getRestUrl,
createToken,
disabled,
passLoadingStatus,
}) => {
const { wallet } = React.useContext(WalletContext);
// New Group NFT Name
const [newGroupNFTName, setNewGroupNFTName] = useState('');
const [newGroupNFTNameIsValid, setNewGroupNFTNameIsValid] = useState(null);
const handleNewGroupNFTNameInput = e => {
const { value } = e.target;
// validation
setNewGroupNFTNameIsValid(isValidGroupNFTName(value));
setNewGroupNFTName(value);
};
// New Group NFT Ticker
const [newGroupNFTTicker, setNewGroupNFTTicker] = useState('');
const [newGroupNFTTickerIsValid, setNewGroupNFTTickerIsValid] =
useState(null);
const handleNewGroupNFTTickerInput = e => {
const { value } = e.target;
// validation
setNewGroupNFTTickerIsValid(isValidGroupNFTTicker(value));
setNewGroupNFTTicker(value);
};
// New Group NFT Batons
const [newGroupNFTBatons, setNewGroupNFTBatons] = useState(0);
const [newGroupNFTBatonsIsValid, setNewGroupNFTBatonsIsValid] =
useState(true);
const handleNewGroupNFTBatonsInput = e => {
const { value } = e.target;
// validation
setNewGroupNFTBatonsIsValid(isValidGroupNFTBatons(value));
// Also validate the supply here if it has not yet been set
/*
if (newGroupNFTInitialQtyIsValid !== null) {
setNewTokenInitialQtyIsValid(
isValidGroupNFTInitialQty(value, newGroupNFTBatons),
);
}
*/
setNewGroupNFTBatons(value);
};
// New New Group NFT document URL
const [newGroupNFTDocumentUrl, setNewGroupNFTDocumentUrl] = useState('');
// Start with this as true, field is not required
const [newGroupNFTDocumentUrlIsValid, setNewGroupNFTDocumentUrlIsValid] =
useState(true);
const handleNewTokenDocumentUrlInput = e => {
const { value } = e.target;
// validation
setNewGroupNFTDocumentUrlIsValid(isValidGroupNFTDocumentUrl(value));
setNewGroupNFTDocumentUrl(value);
};
// New New Group NFT fixed supply
// Only allow creation of fixed supply tokens until Minting support is added
// New New Group NFT document hash
// Do not include this; questionable value to casual users and requires significant complication
// Only enable CreateGroupNftForm button if all form entries are valid
let groupNFTDataIsValid =
newGroupNFTNameIsValid &&
newGroupNFTTickerIsValid &&
newGroupNFTBatonsIsValid &&
newGroupNFTDocumentUrlIsValid;
// Modal settings
const [showConfirmCreateGroupNFT, setShowConfirmCreateGroupNFT] =
useState(false);
const createPreviewedGroupNFT = async () => {
passLoadingStatus(true);
// If data is for some reason not valid here, bail out
if (!groupNFTDataIsValid) {
return;
}
// data must be valid and user reviewed to get here
const configObj = {
name: newGroupNFTName,
ticker: newGroupNFTTicker,
documentUrl:
newGroupNFTDocumentUrl === ''
? 'https://cashtab.com/'
: newGroupNFTDocumentUrl,
mintBatonVout: newGroupNFTBatons,
initialQty: '1',
documentHash: '',
};
// create New Group NFT with data in state fields
try {
const link = await createToken(
BCH,
wallet,
currency.defaultFee,
configObj,
);
createTokenNotification(link);
} catch (e) {
// Set loading to false here as well, as balance may not change depending on where error occured in try loop
passLoadingStatus(false);
let message;
if (!e.error && !e.message) {
message = `Transaction failed: no response from ${getRestUrl()}.`;
} else if (
/Could not communicate with full node or other external service/.test(
e.error,
)
) {
message = 'Could not communicate with API. Please try again.';
} else if (
e.error &&
e.error.includes(
'too-long-mempool-chain, too many unconfirmed ancestors [limit: 50] (code 64)',
)
) {
message = `The ${currency.ticker} you are trying to send has too many unconfirmed ancestors to send (limit 50). Sending will be possible after a block confirmation. Try again in about 10 minutes.`;
} else {
message = e.message || e.error || JSON.stringify(e);
}
errorNotification(e, message, 'Creating eToken');
}
// Hide the modal
setShowConfirmCreateGroupNFT(false);
// Stop spinner
passLoadingStatus(false);
};
return (
<>
<Modal
title={`Please review and confirm your NFT settings.`}
visible={showConfirmCreateGroupNFT}
onOk={createPreviewedGroupNFT}
onCancel={() => setShowConfirmCreateGroupNFT(false)}
>
<GroupNFTParamLabel>Name:</GroupNFTParamLabel> {newGroupNFTName}
<br />
<GroupNFTParamLabel>Ticker:</GroupNFTParamLabel>{' '}
{newGroupNFTTicker}
<br />
<GroupNFTParamLabel>Batons:</GroupNFTParamLabel>{' '}
{newGroupNFTBatons}
<br />
<GroupNFTParamLabel>Document URL:</GroupNFTParamLabel>{' '}
{newGroupNFTDocumentUrl === ''
? 'https://cashtab.com/'
: newGroupNFTDocumentUrl}
<br />
</Modal>
<>
<TokenCollapse
collapsible={disabled ? 'disabled' : true}
disabled={disabled}
style={{
marginBottom: '24px',
}}
>
<Panel header="Create Group NFT" key="1">
<AntdFormWrapper>
<Form
size="small"
style={{
width: 'auto',
}}
>
<Form.Item
validateStatus={
newGroupNFTNameIsValid === null ||
newGroupNFTNameIsValid
? ''
: 'error'
}
help={
newGroupNFTNameIsValid === null ||
newGroupNFTNameIsValid
? ''
: 'Group NFT name must be a string between 1 and 68 characters long'
}
>
<Input
addonBefore="Name"
placeholder="Enter a name for your Group NFT"
name="newGroupNFTName"
value={newGroupNFTName}
onChange={e =>
handleNewGroupNFTNameInput(e)
}
/>
</Form.Item>
<Form.Item
validateStatus={
newGroupNFTTickerIsValid === null ||
newGroupNFTTickerIsValid
? ''
: 'error'
}
help={
newGroupNFTTickerIsValid === null ||
newGroupNFTTickerIsValid
? ''
: 'Ticker must be a string between 1 and 12 characters long'
}
>
<Input
addonBefore="Ticker"
placeholder="Enter a ticker for your Group NFT"
name="newGroupNFTTicker"
value={newGroupNFTTicker}
onChange={e =>
handleNewGroupNFTTickerInput(e)
}
/>
</Form.Item>
<Form.Item
validateStatus={
newGroupNFTBatonsIsValid === null ||
newGroupNFTBatonsIsValid
? ''
: 'error'
}
help={
newGroupNFTBatonsIsValid === null ||
newGroupNFTBatonsIsValid
? ''
: 'Batons must be an integer between 0 and 10'
}
>
<Input
addonBefore="Mint Batons"
placeholder="Enter number of Batons"
name="newGroupNFTBatons"
type="number"
value={newGroupNFTBatons}
onChange={e =>
handleNewGroupNFTBatonsInput(e)
}
/>
</Form.Item>
<Form.Item
validateStatus={
newGroupNFTDocumentUrlIsValid ===
null ||
newGroupNFTDocumentUrlIsValid
? ''
: 'error'
}
help={
newGroupNFTDocumentUrlIsValid ===
null ||
newGroupNFTDocumentUrlIsValid
? ''
: 'Document URL cannot exceed 68 characters'
}
>
<Input
addonBefore="Document URL"
placeholder="Enter a website for your Group NFT"
name="newGroupNFTDocumentUrl"
value={newGroupNFTDocumentUrl}
onChange={e =>
handleNewTokenDocumentUrlInput(e)
}
/>
</Form.Item>
</Form>
</AntdFormWrapper>
<SmartButton
onClick={() => setShowConfirmCreateGroupNFT(true)}
disabled={!groupNFTDataIsValid}
>
<PlusSquareOutlined />
&nbsp;Create Group NFT
</SmartButton>
</Panel>
</TokenCollapse>
</>
</>
);
};
/*
passLoadingStatus must receive a default prop that is a function
in order to pass the rendering unit test in CreateGroupNftForm.test.js
status => {console.log(status)} is an arbitrary stub function
*/
CreateGroupNftForm.defaultProps = {
passLoadingStatus: status => {
console.log(status);
},
};
CreateGroupNftForm.propTypes = {
BCH: PropTypes.object,
getRestUrl: PropTypes.func,
createGroupNFTToken: PropTypes.func,
disabled: PropTypes.bool,
passLoadingStatus: PropTypes.func,
};
export default CreateGroupNftForm;