|
|
|
|
@ -5,7 +5,15 @@ import { util } from '@metamask/controllers'; |
|
|
|
|
import { useI18nContext } from '../../hooks/useI18nContext'; |
|
|
|
|
import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
DISPLAY, |
|
|
|
|
FONT_WEIGHT, |
|
|
|
|
TYPOGRAPHY, |
|
|
|
|
} from '../../helpers/constants/design-system'; |
|
|
|
|
|
|
|
|
|
import Box from '../../components/ui/box'; |
|
|
|
|
import Typography from '../../components/ui/typography'; |
|
|
|
|
import ActionableMessage from '../../components/ui/actionable-message'; |
|
|
|
|
import PageContainer from '../../components/ui/page-container'; |
|
|
|
|
import { |
|
|
|
|
addCollectibleVerifyOwnership, |
|
|
|
|
@ -38,6 +46,7 @@ export default function AddCollectible() { |
|
|
|
|
); |
|
|
|
|
const [tokenId, setTokenId] = useState(''); |
|
|
|
|
const [disabled, setDisabled] = useState(true); |
|
|
|
|
const [collectibleAddFailed, setCollectibleAddFailed] = useState(false); |
|
|
|
|
|
|
|
|
|
const handleAddCollectible = async () => { |
|
|
|
|
try { |
|
|
|
|
@ -47,7 +56,7 @@ export default function AddCollectible() { |
|
|
|
|
} catch (error) { |
|
|
|
|
const { message } = error; |
|
|
|
|
dispatch(setNewCollectibleAddedMessage(message)); |
|
|
|
|
history.push(DEFAULT_ROUTE); |
|
|
|
|
setCollectibleAddFailed(true); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (contractAddressToConvertFromTokenToCollectible) { |
|
|
|
|
@ -84,24 +93,48 @@ export default function AddCollectible() { |
|
|
|
|
}} |
|
|
|
|
disabled={disabled} |
|
|
|
|
contentComponent={ |
|
|
|
|
<Box padding={4}> |
|
|
|
|
<Box padding={[1, 4]}> |
|
|
|
|
{isMainnet && |
|
|
|
|
!useCollectibleDetection && |
|
|
|
|
!collectibleDetectionNoticeDismissed ? ( |
|
|
|
|
<CollectiblesDetectionNotice /> |
|
|
|
|
) : null} |
|
|
|
|
<Box> |
|
|
|
|
{collectibleAddFailed && ( |
|
|
|
|
<ActionableMessage |
|
|
|
|
type="danger" |
|
|
|
|
useIcon="true" |
|
|
|
|
iconFillColor="#d73a49" |
|
|
|
|
message={ |
|
|
|
|
<Box display={DISPLAY.INLINE_FLEX}> |
|
|
|
|
<Typography |
|
|
|
|
variant={TYPOGRAPHY.H7} |
|
|
|
|
fontWeight={FONT_WEIGHT.NORMAL} |
|
|
|
|
margin={0} |
|
|
|
|
> |
|
|
|
|
{t('collectibleAddFailedMessage')} |
|
|
|
|
</Typography> |
|
|
|
|
<button |
|
|
|
|
className="fas fa-times add-collectible__close" |
|
|
|
|
title={t('close')} |
|
|
|
|
onClick={() => setCollectibleAddFailed(false)} |
|
|
|
|
/> |
|
|
|
|
</Box> |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
<Box marginTop={4}> |
|
|
|
|
<FormField |
|
|
|
|
id="address" |
|
|
|
|
titleText={t('address')} |
|
|
|
|
placeholder="0x..." |
|
|
|
|
value={address} |
|
|
|
|
onChange={(val) => validateAndSetAddress(val)} |
|
|
|
|
onChange={(val) => { |
|
|
|
|
validateAndSetAddress(val); |
|
|
|
|
setCollectibleAddFailed(false); |
|
|
|
|
}} |
|
|
|
|
tooltipText={t('importNFTAddressToolTip')} |
|
|
|
|
autoFocus |
|
|
|
|
/> |
|
|
|
|
</Box> |
|
|
|
|
<Box> |
|
|
|
|
<FormField |
|
|
|
|
id="token-id" |
|
|
|
|
titleText={t('tokenId')} |
|
|
|
|
@ -109,6 +142,7 @@ export default function AddCollectible() { |
|
|
|
|
value={tokenId} |
|
|
|
|
onChange={(val) => { |
|
|
|
|
validateAndSetTokenId(val); |
|
|
|
|
setCollectibleAddFailed(false); |
|
|
|
|
}} |
|
|
|
|
tooltipText={t('importNFTTokenIdToolTip')} |
|
|
|
|
numeric |
|
|
|
|
|
Niranjana Binoy
3 years ago
committed by
GitHub