2021-11-15 18:28:35 +01:00
|
|
|
import React, { useState } from 'react';
|
|
|
|
import { useHistory } from 'react-router-dom';
|
2021-11-26 21:03:35 +01:00
|
|
|
import { useDispatch } from 'react-redux';
|
2021-12-14 00:41:10 +01:00
|
|
|
import { util } from '@metamask/controllers';
|
2021-11-15 18:28:35 +01:00
|
|
|
import { useI18nContext } from '../../hooks/useI18nContext';
|
|
|
|
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
|
|
|
|
|
|
|
|
import Box from '../../components/ui/box';
|
|
|
|
import TextField from '../../components/ui/text-field';
|
|
|
|
import PageContainer from '../../components/ui/page-container';
|
2021-11-26 21:03:35 +01:00
|
|
|
import {
|
|
|
|
addCollectibleVerifyOwnership,
|
|
|
|
setNewCollectibleAddedMessage,
|
|
|
|
} from '../../store/actions';
|
2021-11-15 18:28:35 +01:00
|
|
|
|
|
|
|
export default function AddCollectible() {
|
|
|
|
const t = useI18nContext();
|
|
|
|
const history = useHistory();
|
2021-11-26 21:03:35 +01:00
|
|
|
const dispatch = useDispatch();
|
2021-11-15 18:28:35 +01:00
|
|
|
|
|
|
|
const [address, setAddress] = useState('');
|
|
|
|
const [tokenId, setTokenId] = useState('');
|
2021-12-14 00:41:10 +01:00
|
|
|
const [disabled, setDisabled] = useState(true);
|
2021-11-15 18:28:35 +01:00
|
|
|
|
2021-11-26 21:03:35 +01:00
|
|
|
const handleAddCollectible = async () => {
|
|
|
|
try {
|
|
|
|
await dispatch(addCollectibleVerifyOwnership(address, tokenId));
|
|
|
|
} catch (error) {
|
|
|
|
const { message } = error;
|
|
|
|
dispatch(setNewCollectibleAddedMessage(message));
|
|
|
|
history.push(DEFAULT_ROUTE);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
dispatch(setNewCollectibleAddedMessage('success'));
|
|
|
|
history.push(DEFAULT_ROUTE);
|
|
|
|
};
|
|
|
|
|
2021-12-14 00:41:10 +01:00
|
|
|
const validateAndSetAddress = (val) => {
|
|
|
|
setDisabled(!util.isValidHexAddress(val) || !tokenId);
|
|
|
|
setAddress(val);
|
|
|
|
};
|
|
|
|
|
|
|
|
const validateAndSetTokenId = (val) => {
|
|
|
|
setDisabled(!util.isValidHexAddress(address) || !val);
|
|
|
|
setTokenId(val);
|
|
|
|
};
|
|
|
|
|
2021-11-15 18:28:35 +01:00
|
|
|
return (
|
|
|
|
<PageContainer
|
|
|
|
title={t('addNFT')}
|
|
|
|
onSubmit={() => {
|
2021-11-26 21:03:35 +01:00
|
|
|
handleAddCollectible();
|
2021-11-15 18:28:35 +01:00
|
|
|
}}
|
|
|
|
submitText={t('add')}
|
|
|
|
onCancel={() => {
|
|
|
|
history.push(DEFAULT_ROUTE);
|
|
|
|
}}
|
|
|
|
onClose={() => {
|
|
|
|
history.push(DEFAULT_ROUTE);
|
|
|
|
}}
|
2021-12-14 00:41:10 +01:00
|
|
|
disabled={disabled}
|
2021-11-15 18:28:35 +01:00
|
|
|
contentComponent={
|
|
|
|
<Box padding={4}>
|
|
|
|
<Box>
|
|
|
|
<TextField
|
|
|
|
id="address"
|
|
|
|
label={t('address')}
|
|
|
|
placeholder="0x..."
|
|
|
|
type="text"
|
|
|
|
value={address}
|
2021-12-14 00:41:10 +01:00
|
|
|
onChange={(e) => validateAndSetAddress(e.target.value)}
|
2021-11-15 18:28:35 +01:00
|
|
|
fullWidth
|
|
|
|
autoFocus
|
|
|
|
margin="normal"
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
<Box>
|
|
|
|
<TextField
|
|
|
|
id="token-id"
|
|
|
|
label={t('id')}
|
|
|
|
placeholder={t('nftTokenIdPlaceholder')}
|
|
|
|
type="number"
|
|
|
|
value={tokenId}
|
2021-12-14 00:41:10 +01:00
|
|
|
onChange={(e) => validateAndSetTokenId(e.target.value)}
|
2021-11-15 18:28:35 +01:00
|
|
|
fullWidth
|
|
|
|
margin="normal"
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|