1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 09:23:21 +01:00

UI/UX update - Error message in Import NFT (#13772)

This commit is contained in:
Niranjana Binoy 2022-02-25 20:17:42 -05:00 committed by GitHub
parent fda5b54def
commit 96ab979e7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 60 additions and 64 deletions

View File

@ -1738,9 +1738,6 @@
"message": "Konto $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "Sammelobjekt wurde nicht hinzugefügt, weil: $1"
},
"newCollectibleAddedMessage": {
"message": "Sammelobjekt wurde erfolgreich hinzugefügt!"
},

View File

@ -1738,9 +1738,6 @@
"message": "Λογαριασμός $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "Το Collectible δεν προστέθηκε επειδή: $1"
},
"newCollectibleAddedMessage": {
"message": "Το Collectible προστέθηκε με επιτυχία!"
},

View File

@ -486,6 +486,9 @@
"close": {
"message": "Close"
},
"collectibleAddFailedMessage": {
"message": "NFT cant be added as the ownership details do not match. Make sure you have entered correct information."
},
"collectibleAddressError": {
"message": "This token is an NFT. Add on the $1",
"description": "$1 is a clickable link with text defined by the 'importNFTPage' key"
@ -1961,9 +1964,6 @@
"message": "Account $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "Collectible was not added because: $1"
},
"newCollectibleAddedMessage": {
"message": "Collectible was successfully added!"
},

View File

@ -1787,9 +1787,6 @@
"message": "Cuenta $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "No se añadió el coleccionable porque: $1"
},
"newCollectibleAddedMessage": {
"message": "¡El coleccionable fue añadido con éxito!"
},

View File

@ -1738,9 +1738,6 @@
"message": "Compte $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "Le collectible na pas été ajouté, car: $1"
},
"newCollectibleAddedMessage": {
"message": "Le collectible a été ajouté avec succès!"
},

View File

@ -1738,9 +1738,6 @@
"message": "खाता $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "संग्रहणीय नहीं जोड़ा गया था क्योंकि: $1"
},
"newCollectibleAddedMessage": {
"message": "संग्रहणीय सफलतापूर्वक जोड़ा गया!"
},

View File

@ -1738,9 +1738,6 @@
"message": "Akun $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "Koleksi tidak ditambahkan karena: $1"
},
"newCollectibleAddedMessage": {
"message": "Koleksi berhasil ditambahkan!"
},

View File

@ -1738,9 +1738,6 @@
"message": "アカウント$1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "次の理由により、コレクティブルは追加されませんでした: $1"
},
"newCollectibleAddedMessage": {
"message": "コレクティブルが追加されました!"
},

View File

@ -1738,9 +1738,6 @@
"message": "계정 $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "다음 이유 때문에 수집 금액이 추가되지 않았습니다: $1"
},
"newCollectibleAddedMessage": {
"message": "수집이 성공적으로 추가되었습니다!"
},

View File

@ -1771,9 +1771,6 @@
"message": "Conta $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "O colecionável não foi adicionado pelo seguinte motivo: $1"
},
"newCollectibleAddedMessage": {
"message": "O colecionável foi adicionado com sucesso!"
},

View File

@ -1738,9 +1738,6 @@
"message": "Счет $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "Причина, по которой не был добавлен коллекционный актив: $1"
},
"newCollectibleAddedMessage": {
"message": "Коллекционный актив успешно добавлен!"
},

View File

@ -1738,9 +1738,6 @@
"message": "Account $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "Ang collectible ay hindi idinagdag dahil: $1"
},
"newCollectibleAddedMessage": {
"message": "Ang collectible ay tagumpay na naidagdag!"
},

View File

@ -1738,9 +1738,6 @@
"message": "Hesap $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "Tahsil edilebilir tutar eklenmedi ve sebebi: $1"
},
"newCollectibleAddedMessage": {
"message": "Tahsil edilebilir tutar başarılı bir şekilde eklendi!"
},

View File

@ -1738,9 +1738,6 @@
"message": "Tài khoản $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "Bộ sưu tập đã không được thêm vì: $1"
},
"newCollectibleAddedMessage": {
"message": "Bộ sưu tập đã được thêm thành công!"
},

View File

@ -1738,9 +1738,6 @@
"message": "账户 $1",
"description": "Default name of next account to be created on create account screen"
},
"newCollectibleAddFailed": {
"message": "未添加收藏,因为:$1"
},
"newCollectibleAddedMessage": {
"message": "收藏已成功添加!"
},

View File

@ -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

View File

@ -0,0 +1,9 @@
.add-collectible {
&__close {
color: var(--ui-black);
background: none;
flex: 0;
align-self: flex-start;
padding-right: 0;
}
}

View File

@ -303,27 +303,21 @@ export default class Home extends PureComponent {
: null
///: END:ONLY_INCLUDE_IN
}
{newCollectibleAddedMessage ? (
{newCollectibleAddedMessage === 'success' ? (
<ActionableMessage
type={newCollectibleAddedMessage === 'success' ? 'info' : 'warning'}
type="info"
className="home__new-network-notification"
message={
<div className="home__new-network-notification-message">
{newCollectibleAddedMessage === 'success' ? (
<img
src="./images/check_circle.svg"
className="home__new-network-notification-message--image"
/>
) : null}
<img
src="./images/check_circle.svg"
className="home__new-network-notification-message--image"
/>
<Typography
variant={TYPOGRAPHY.H7}
fontWeight={FONT_WEIGHT.NORMAL}
>
{newCollectibleAddedMessage === 'success'
? t('newCollectibleAddedMessage')
: t('newCollectibleAddFailed', [
newCollectibleAddedMessage,
])}
{t('newCollectibleAddedMessage')}
</Typography>
<button
className="fas fa-times home__close"

View File

@ -1,4 +1,5 @@
/** Please import your files in alphabetical order **/
@import 'add-collectible/index';
@import 'import-token/index';
@import 'asset/asset';
@import 'confirm-import-token/index';